@alextheman/components 6.26.0 → 7.0.1

package/dist/routing/index.js

@@ -0,0 +1,2 @@
+import e from"@mui/material/Alert";import t from"@mui/material/AlertTitle";import n from"@mui/material/Container";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import o from"@mui/material/Link";import{Link as s,Route as c,Router as l,Switch as u,useLocation as d,useRouter as f}from"wouter";import{memoryLocation as p}from"wouter/memory-location";import{escapeRegexPattern as m,truncate as h}from"@alextheman/utility";import{useBrowserLocation as g}from"wouter/use-browser-location";import _ from"@mui/material/BottomNavigation";import v from"@mui/material/BottomNavigationAction";import y from"@mui/material/Box";import b from"@mui/material/Paper";import x from"@mui/material/AppBar";import S from"@mui/material/CssBaseline";import C from"@mui/material/Divider";import w from"@mui/material/Drawer";import T from"@mui/material/IconButton";import E from"@mui/material/List";import D from"@mui/material/ListItem";import O from"@mui/material/ListItemButton";import k from"@mui/material/ListItemIcon";import A from"@mui/material/ListItemText";import{styled as j,useTheme as M}from"@mui/material/styles";import N from"@mui/material/Toolbar";import P from"@mui/material/Typography";import{Fragment as F,useState as I}from"react";import{MdChevronLeft as L,MdChevronRight as R,MdMenu as z}from"react-icons/md";function B({title:r,children:o}){return i(n,{maxWidth:`sm`,children:a(e,{severity:`error`,children:[i(t,{children:r}),o]})})}function V({to:e,component:t=s,children:n,ref:r,...a}){return i(o,{component:t,to:e,ref:r,...a,children:n})}function H(e,t){return e.replace(RegExp(`^${m(t.base)}`),``)}function U(e=g){return t=>{let[n,r]=e(t);return[n,(...[e,...n])=>r(H(e,t),...n)]}}function W({children:e,hook:t,...n}){return i(l,{...n,hook:U(t),hrefs:(e,t)=>H(e,t),children:e})}function G({children:e,...t}){let{hook:n}=p({path:`/`});return i(W,{...t,hook:n,children:e})}function K(e,t){return`${t.base}/${e}`.replace(/\/+/g,`/`)}function q(...e){let t=f(),[n,r]=d(...e);return[K(n,t),r]}function J({children:e,navItems:t}){let[n]=q();return a(r,{children:[i(y,{sx:{paddingBottom:7},children:e}),i(b,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:i(_,{showLabels:!0,value:n,children:t.map(e=>i(v,{value:e.value??e.to,...e,component:V},e.to))})})]})}function Y(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function X(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const Z=j(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Q=j(x,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),$=j(w,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Y(e),"& .MuiDrawer-paper":Y(e)}},{props:({open:e})=>!e,style:{...X(e),"& .MuiDrawer-paper":X(e)}}]}));function ee({title:e,navItems:t,children:n,headerElements:r}){let o=M(),[s,c]=I(!0),[l]=q();function u(){c(!0)}function d(){c(!1)}return a(y,{sx:{display:`flex`},children:[i(S,{}),i(Q,{position:`fixed`,open:s,children:a(N,{children:[i(T,{color:`inherit`,"aria-label":`open drawer`,onClick:u,edge:`start`,sx:[{marginRight:5},s&&{display:`none`}],children:i(z,{})}),i(P,{variant:`h6`,noWrap:!0,component:`div`,children:e}),i(y,{sx:{marginLeft:`auto`},children:r})]})}),a($,{variant:`permanent`,open:s,children:[i(Z,{children:i(T,{onClick:d,children:o.direction===`rtl`?i(R,{}):i(L,{})})}),i(C,{}),t.map(e=>a(F,{children:[a(E,{children:[i(P,{variant:s?`h5`:`h6`,sx:{paddingLeft:s?2:1},children:s?e.category:h(e.category,4)}),e.options.map(e=>i(D,{disablePadding:!0,sx:{display:`block`},children:a(O,{sx:[{minHeight:48,px:2.5},s?{justifyContent:`initial`}:{justifyContent:`center`}],component:V,to:e.to,selected:l===e.to,children:[i(k,{sx:[{minWidth:0,justifyContent:`center`},s?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:s?null:i(P,{children:h(e.label,4)})}),i(A,{primary:e.label,sx:[s?{opacity:1}:{opacity:0}]})]})},e.to))]}),i(C,{})]},e.category))]}),a(y,{component:`main`,sx:{flexGrow:1,p:3},children:[i(Z,{}),n]})]})}function te({children:e,fallback:t=a(B,{title:`Page Not Found`,children:[`This page is not available. Please click `,i(V,{to:`/`,children:`here`}),` to return to the homepage.`]}),...n}){return a(u,{...n,children:[e,i(c,{children:t})]})}export{B as ErrorPage,V as InternalLink,G as MemoryRouter,J as NavigationBottom,ee as NavigationDrawer,W as Router,te as Switch,q as useAbsoluteLocation};
+//# sourceMappingURL=index.js.map

package/dist/routing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["WouterLink","Wouter","Fragment","WouterSwitch"],"sources":["../../src/routing/ErrorPage.tsx","../../src/routing/InternalLink.tsx","../../src/routing/Router.tsx","../../src/routing/MemoryRouter.tsx","../../src/routing/useAbsoluteLocation.ts","../../src/routing/NavigationBottom.tsx","../../src/routing/NavigationDrawer.tsx","../../src/routing/Switch.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport Container from \"@mui/material/Container\";\n\nexport interface ErrorPageProps {\n  /** The page title. */\n  title: string;\n  /** The page content. */\n  children: ReactNode;\n}\n\n/** Renders a simple page layout for displaying errors. */\nfunction ErrorPage({ title, children }: ErrorPageProps) {\n  return (\n    <Container maxWidth=\"sm\">\n      <Alert severity=\"error\">\n        <AlertTitle>{title}</AlertTitle>\n        {children}\n      </Alert>\n    </Container>\n  );\n}\n\nexport default ErrorPage;\n","import type { LinkProps } from \"@mui/material/Link\";\nimport type { ElementType, ReactNode, Ref } from \"react\";\n\nimport MUILink from \"@mui/material/Link\";\nimport { Link as WouterLink } from \"wouter\";\n\nexport interface InternalLinkProps extends Omit<LinkProps, \"href\" | \"component\"> {\n  /** The path to navigate to */\n  to: `/${string}` | `~/${string}` | (string & {});\n  /**\n   * An optional component to provide to override the current component.\n   *\n   * Note that the provided component must:\n   * - accept a `to` prop\n   * - correctly handle the forwarded `ref`\n   * - render a valid anchor element (or equivalent) for proper accessibility\n   */\n  component?: ElementType;\n  href?: never;\n  /** The readable content to display on the link. */\n  children: ReactNode;\n  /** An optional ref to allow it to be used with polymorphic components. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\n/**\n * A stylised link for navigating within your application.\n *\n * Uses the app router for client-side navigation and opens the destination in the same tab.\n *\n * Defaults to a Wouter implementation but can be overridden via the `component` prop.\n */\nfunction InternalLink({\n  to,\n  component = WouterLink,\n  children,\n  ref,\n  ...linkProps\n}: InternalLinkProps) {\n  return (\n    <MUILink component={component} to={to} ref={ref} {...linkProps}>\n      {children}\n    </MUILink>\n  );\n}\n\nexport default InternalLink;\n","import type { NonUndefined } from \"@alextheman/utility\";\nimport type { BaseLocationHook, RouterObject, RouterProps, useLocation } from \"wouter\";\n\nimport { escapeRegexPattern } from \"@alextheman/utility\";\nimport { Router as Wouter } from \"wouter\";\nimport { useBrowserLocation } from \"wouter/use-browser-location\";\n\ntype SetLocation = ReturnType<typeof useLocation>[1];\n\nfunction normaliseNestedRouterPath(path: string, router: RouterObject) {\n  return path.replace(new RegExp(`^${escapeRegexPattern(router.base)}`), \"\");\n}\n\nfunction createCustomLocation(\n  hook: BaseLocationHook = useBrowserLocation,\n): NonUndefined<RouterProps[\"hook\"]> {\n  return (router: RouterObject): ReturnType<typeof useLocation> => {\n    const [location, setLocation] = hook(router);\n\n    return [\n      location,\n      (...[path, ...args]: Parameters<SetLocation>): ReturnType<SetLocation> => {\n        const newPath = normaliseNestedRouterPath(path, router);\n        return setLocation(newPath, ...args);\n      },\n    ];\n  };\n}\n\n/**\n * An app Router that integrates with Wouter and handles nested routing behaviour.\n *\n * If you use a Wouter Link within a nested Route with Wouter, navigation can behave unexpectedly as it ends up resolving relative to the nested router's base URL. For example:\n *\n * ```tsx\n * <Route path=\"/users\" nest>\n *    <Link to=\"/users/sign-in\"> // Navigates to `/users/users/sign-in` (it appends the `to` prop to the `path` prop in the Route)\n *      View user details\n *    </Link>\n * </Route>\n * ```\n *\n * This can be surprising, especially when re-using page logic across routes, where you don't want links to rely on implicit nested routing behaviour. This router deals with the above so that, for as long as you define your nested routes in this Router component, the Link example above would navigate to `/users/sign-in` instead. That is, it uses the `to` prop as an absolute path rather than appending it to the parent Route path.\n *\n * This effectively makes all navigation behave as if paths are absolute (relative to the application's base URL), regardless of nested routing structure.\n */\nfunction Router({ children, hook, ...routerProps }: Omit<RouterProps, \"hrefs\">) {\n  return (\n    <Wouter\n      {...routerProps}\n      hook={createCustomLocation(hook)}\n      hrefs={(path, router) => {\n        return normaliseNestedRouterPath(path, router);\n      }}\n    >\n      {children}\n    </Wouter>\n  );\n}\n\nexport default Router;\n","import type { RouterProps } from \"wouter\";\n\nimport { memoryLocation } from \"wouter/memory-location\";\n\nimport Router from \"src/routing/Router\";\n\n/**\n * A router that can be used with Wouter that stores all entries in memory. Works similarly to the `MemoryRouter` from `react-router-dom`.\n *\n * Note that it also contains the same absolute routing behaviour found in the base `Router` component from `@alextheman/components/v7`.\n */\nfunction MemoryRouter({ children, ...routerProps }: Omit<RouterProps, \"hook\" | \"hrefs\">) {\n  const { hook } = memoryLocation({ path: \"/\" });\n\n  return (\n    <Router {...routerProps} hook={hook}>\n      {children}\n    </Router>\n  );\n}\n\nexport default MemoryRouter;\n","import type { RouterObject } from \"wouter\";\n\nimport { useLocation, useRouter } from \"wouter\";\n\nfunction resolveNestedRouterPath(path: string, router: RouterObject) {\n  return `${router.base}/${path}`.replace(/\\/+/g, \"/\");\n}\n\n/**\n * Returns the current app location as an absolute app-relative path, along with a function to set it.\n *\n * Unlike Wouter's default nested router behaviour, this hook always resolves locations relative to the application's root router, even when called within nested routers.\n *\n * @returns A tuple containing the current absolute app location and a function to navigate to a new location.\n */\nfunction useAbsoluteLocation(\n  ...args: Parameters<typeof useLocation>\n): ReturnType<typeof useLocation> {\n  const router = useRouter();\n  const [location, setLocation] = useLocation(...args);\n\n  return [resolveNestedRouterPath(location, router), setLocation];\n}\n\nexport default useAbsoluteLocation;\n","import type { JSX, ReactNode } from \"react\";\n\nimport BottomNavigation from \"@mui/material/BottomNavigation\";\nimport BottomNavigationAction from \"@mui/material/BottomNavigationAction\";\nimport Box from \"@mui/material/Box\";\nimport Paper from \"@mui/material/Paper\";\n\nimport InternalLink from \"src/routing/InternalLink\";\nimport useAbsoluteLocation from \"src/routing/useAbsoluteLocation\";\n\nexport interface NavItemBottom {\n  /** The label to display on the nav item. */\n  label: string;\n  /** An icon to display alongside the nav item. */\n  icon?: JSX.Element;\n  /** Where in your app the nav item should navigate to. */\n  to: string;\n  /** The value associated with the nav item (defaults to the `to` value). */\n  value?: string;\n}\n\nexport interface NavigationBottomProps {\n  /** Children to display above the nav bar. */\n  children: ReactNode;\n  /** An array of nav items to show. */\n  navItems: Array<NavItemBottom>;\n}\n\n/** Renders a navigation bar at the bottom of the screen. Especially helpful for common navigation options in a mobile app. */\nfunction NavigationBottom({ children, navItems }: NavigationBottomProps) {\n  const [location] = useAbsoluteLocation();\n  return (\n    <>\n      <Box sx={{ paddingBottom: 7 }}>{children}</Box>\n      <Paper sx={{ position: \"fixed\", bottom: 0, left: 0, right: 0 }}>\n        <BottomNavigation showLabels value={location}>\n          {navItems.map((item) => {\n            return (\n              <BottomNavigationAction\n                key={item.to}\n                value={item.value ?? item.to}\n                {...item}\n                component={InternalLink}\n              />\n            );\n          })}\n        </BottomNavigation>\n      </Paper>\n    </>\n  );\n}\n\nexport default NavigationBottom;\n","import type { AppBarProps as MuiAppBarProps } from \"@mui/material/AppBar\";\nimport type { CSSObject, Theme } from \"@mui/material/styles\";\nimport type { ReactNode } from \"react\";\n\nimport { truncate } from \"@alextheman/utility\";\nimport MuiAppBar from \"@mui/material/AppBar\";\nimport Box from \"@mui/material/Box\";\nimport CssBaseline from \"@mui/material/CssBaseline\";\nimport Divider from \"@mui/material/Divider\";\nimport MuiDrawer from \"@mui/material/Drawer\";\nimport IconButton from \"@mui/material/IconButton\";\nimport List from \"@mui/material/List\";\nimport ListItem from \"@mui/material/ListItem\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport { styled, useTheme } from \"@mui/material/styles\";\nimport Toolbar from \"@mui/material/Toolbar\";\nimport Typography from \"@mui/material/Typography\";\nimport { Fragment, useState } from \"react\";\nimport { MdChevronLeft, MdChevronRight, MdMenu } from \"react-icons/md\";\n\nimport InternalLink from \"src/routing/InternalLink\";\nimport useAbsoluteLocation from \"src/routing/useAbsoluteLocation\";\n\nconst drawerWidth = 240;\n\nfunction openedMixin(theme: Theme): CSSObject {\n  return {\n    width: drawerWidth,\n    transition: theme.transitions.create(\"width\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.enteringScreen,\n    }),\n    overflowX: \"hidden\",\n  };\n}\n\nfunction closedMixin(theme: Theme): CSSObject {\n  return {\n    transition: theme.transitions.create(\"width\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n    overflowX: \"hidden\",\n    width: `calc(${theme.spacing(7)} + 1px)`,\n    [theme.breakpoints.up(\"sm\")]: {\n      width: `calc(${theme.spacing(8)} + 1px)`,\n    },\n  };\n}\n\nconst DrawerHeader = styled(\"div\")(({ theme }) => {\n  return {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    padding: theme.spacing(0, 1),\n    // necessary for content to be below app bar\n    ...theme.mixins.toolbar,\n  };\n});\n\ninterface AppBarProps extends MuiAppBarProps {\n  open?: boolean;\n}\n\nconst AppBar = styled(MuiAppBar, {\n  shouldForwardProp: (prop) => {\n    return prop !== \"open\";\n  },\n})<AppBarProps>(({ theme }) => {\n  return {\n    zIndex: theme.zIndex.drawer + 1,\n    transition: theme.transitions.create([\"width\", \"margin\"], {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n    variants: [\n      {\n        props: ({ open }) => {\n          return open;\n        },\n        style: {\n          marginLeft: drawerWidth,\n          width: `calc(100% - ${drawerWidth}px)`,\n          transition: theme.transitions.create([\"width\", \"margin\"], {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.enteringScreen,\n          }),\n        },\n      },\n    ],\n  };\n});\n\nconst Drawer = styled(MuiDrawer, {\n  shouldForwardProp: (prop) => {\n    return prop !== \"open\";\n  },\n})(({ theme }) => {\n  return {\n    width: drawerWidth,\n    flexShrink: 0,\n    whiteSpace: \"nowrap\",\n    boxSizing: \"border-box\",\n    variants: [\n      {\n        props: ({ open }) => {\n          return open;\n        },\n        style: {\n          ...openedMixin(theme),\n          \"& .MuiDrawer-paper\": openedMixin(theme),\n        },\n      },\n      {\n        props: ({ open }) => {\n          return !open;\n        },\n        style: {\n          ...closedMixin(theme),\n          \"& .MuiDrawer-paper\": closedMixin(theme),\n        },\n      },\n    ],\n  };\n});\n\nexport interface NavMenuItemOptions {\n  /** The label to display on the nav item option. */\n  label: string;\n  /** Where in your app the nav item option should navigate to. */\n  to: string;\n  /** An icon to display alongside the nav item option. */\n  icon?: ReactNode;\n}\n\nexport interface NavMenuItem {\n  /** The category to display all the nav item options under. */\n  category: string;\n  /** An array of nav options to display under the chosen category. */\n  options: Array<NavMenuItemOptions>;\n}\n\nexport interface NavigationDrawerProps {\n  /** The title to display at the top of the wrapper. */\n  title: string;\n  /** An array of nav items to show. */\n  navItems: Array<NavMenuItem>;\n  /** Any extra elements to add to the header. */\n  headerElements?: ReactNode;\n  /** Children to display within the wrapper. */\n  children: ReactNode;\n}\n\n/** Renders a collapsable drawer to help with navigation. Best used as the main means of navigation on desktop apps. */\nfunction NavigationDrawer({ title, navItems, children, headerElements }: NavigationDrawerProps) {\n  const theme = useTheme();\n  const [open, setOpen] = useState(true);\n  const [location] = useAbsoluteLocation();\n\n  function handleDrawerOpen() {\n    setOpen(true);\n  }\n\n  function handleDrawerClose() {\n    setOpen(false);\n  }\n\n  return (\n    <Box sx={{ display: \"flex\" }}>\n      <CssBaseline />\n      <AppBar position=\"fixed\" open={open}>\n        <Toolbar>\n          <IconButton\n            color=\"inherit\"\n            aria-label=\"open drawer\"\n            onClick={handleDrawerOpen}\n            edge=\"start\"\n            sx={[\n              {\n                marginRight: 5,\n              },\n              open && { display: \"none\" },\n            ]}\n          >\n            <MdMenu />\n          </IconButton>\n          <Typography variant=\"h6\" noWrap component=\"div\">\n            {title}\n          </Typography>\n          <Box sx={{ marginLeft: \"auto\" }}>{headerElements}</Box>\n        </Toolbar>\n      </AppBar>\n      <Drawer variant=\"permanent\" open={open}>\n        <DrawerHeader>\n          <IconButton onClick={handleDrawerClose}>\n            {theme.direction === \"rtl\" ? <MdChevronRight /> : <MdChevronLeft />}\n          </IconButton>\n        </DrawerHeader>\n        <Divider />\n        {navItems.map((item) => {\n          return (\n            <Fragment key={item.category}>\n              <List>\n                <Typography variant={open ? \"h5\" : \"h6\"} sx={{ paddingLeft: open ? 2 : 1 }}>\n                  {open ? item.category : truncate(item.category, 4)}\n                </Typography>\n                {item.options.map((option) => {\n                  return (\n                    <ListItem key={option.to} disablePadding sx={{ display: \"block\" }}>\n                      <ListItemButton\n                        sx={[\n                          {\n                            minHeight: 48,\n                            px: 2.5,\n                          },\n                          open\n                            ? {\n                                justifyContent: \"initial\",\n                              }\n                            : {\n                                justifyContent: \"center\",\n                              },\n                        ]}\n                        component={InternalLink}\n                        to={option.to}\n                        selected={location === option.to}\n                      >\n                        <ListItemIcon\n                          sx={[\n                            {\n                              minWidth: 0,\n                              justifyContent: \"center\",\n                            },\n                            open\n                              ? {\n                                  mr: 3,\n                                }\n                              : {\n                                  mr: \"auto\",\n                                },\n                          ]}\n                        >\n                          {option.icon ? (\n                            option.icon\n                          ) : !open ? (\n                            <Typography>{truncate(option.label, 4)}</Typography>\n                          ) : null}\n                        </ListItemIcon>\n                        <ListItemText\n                          primary={option.label}\n                          sx={[\n                            open\n                              ? {\n                                  opacity: 1,\n                                }\n                              : {\n                                  opacity: 0,\n                                },\n                          ]}\n                        />\n                      </ListItemButton>\n                    </ListItem>\n                  );\n                })}\n              </List>\n              <Divider />\n            </Fragment>\n          );\n        })}\n      </Drawer>\n      <Box component=\"main\" sx={{ flexGrow: 1, p: 3 }}>\n        <DrawerHeader />\n        {children}\n      </Box>\n    </Box>\n  );\n}\n\nexport default NavigationDrawer;\n","import type { ReactNode } from \"react\";\nimport type { SwitchProps as WouterSwitchProps } from \"wouter\";\n\nimport { Route, Switch as WouterSwitch } from \"wouter\";\n\nimport ErrorPage from \"src/routing/ErrorPage\";\nimport InternalLink from \"src/routing/InternalLink\";\n\nexport interface SwitchProps extends WouterSwitchProps {\n  /** The content to render if no routes match. */\n  fallback?: ReactNode;\n}\n\n/**\n * A wrapper around Wouter's Switch that adds a fallback route.\n *\n * This ensures that any unmatched routes in the Switch always shows something rather than just showing an empty page.\n */\nfunction Switch({\n  children,\n  fallback = (\n    <ErrorPage title=\"Page Not Found\">\n      This page is not available. Please click <InternalLink to=\"/\">here</InternalLink> to return to\n      the homepage.\n    </ErrorPage>\n  ),\n  ...switchProps\n}: SwitchProps) {\n  return (\n    <WouterSwitch {...switchProps}>\n      {children}\n      <Route>{fallback}</Route>\n    </WouterSwitch>\n  );\n}\n\nexport default Switch;\n"],"mappings":"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"}

package/dist/snackbar/index.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { AlertColor } from "@mui/material/Alert";
+import { OptionalOnCondition } from "@alextheman/utility";
+
+//#region src/root/types/ContextHookOptions.d.ts
+interface ContextHookOptions<Strict extends boolean = true> {
+  /** Error if the context is missing if this is set to true. */
+  strict?: Strict;
+}
+//#endregion
+//#region src/snackbar/SnackbarProvider.d.ts
+interface SnackbarProviderProps {
+  /** The children that will have access to the snackbar context. */
+  children: ReactNode;
+  /** The amount of seconds to wait before hiding the snackbar. */
+  autoHideDuration?: number;
+}
+interface SnackbarItem {
+  /** The ID of the Snackbar */
+  id: string;
+  /** The severity of the alert. This defines the color and icon used. */
+  severity?: AlertColor;
+  /** The message to show as part of the snackbar. */
+  message: string;
+  /** The amount of milliseconds to show the snackbar for. */
+  duration: number;
+}
+interface AddSnackbarOptions {
+  severity?: AlertColor;
+  duration?: number;
+}
+interface SnackbarContextValue {
+  /** An array of all the snackbars to render. */
+  snackbars: Array<SnackbarItem>;
+  /** A function that adds the snackbar to the page. */
+  addSnackbar: (message: string, options?: AddSnackbarOptions) => void;
+  /** A function to remove a snackbar. */
+  removeSnackbar: (id?: string) => void;
+}
+/** Access the snackbar context directly. */
+declare function useSnackbarContext<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, SnackbarContextValue>;
+/** Provides an array of snackbars for the `Snackbars` component to display. */
+declare function SnackbarProvider({
+  children,
+  autoHideDuration
+}: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/snackbar/Snackbars.d.ts
+/** Displays the array of snackbars provided by `SnackbarProvider`. */
+declare function Snackbars(): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SnackbarProvider, type SnackbarProviderProps, Snackbars, useSnackbarContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/snackbar/index.js

@@ -0,0 +1,2 @@
+import{DataError as e}from"@alextheman/utility/v6";import{createContext as t,use as n,useEffect as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";import o from"@mui/material/Alert";import s from"@mui/material/Snackbar";const c=t(void 0);function l({strict:t=!0}={}){let r=n(c);if(t&&!r)throw new e({strict:t,context:r},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return r}function u({children:e,autoHideDuration:t=5e3}){let[n,r]=i([]);function o(e,n={}){let{severity:i=`info`,duration:a=t}=n;r(t=>[...t,{severity:i,id:crypto.randomUUID(),message:e,duration:a}])}function s(e){r(t=>{let n=[...t];return e===void 0?(n.shift(),n):n.filter(t=>t.id!==e)})}return a(c,{value:{snackbars:n,addSnackbar:o,removeSnackbar:s},children:e})}function d(){let{snackbars:e,removeSnackbar:t}=l(),[n,c]=i(!1),[u,d]=i(null);function f(e,t){t!==`clickaway`&&(d(null),c(!1))}return r(()=>{!n&&e.length!==0&&(d(e[0]),t(),c(!0))},[n,t,e]),a(s,{open:n,autoHideDuration:u?.duration,onClose:f,children:a(o,{onClose:f,severity:u?.severity??`info`,children:u?.message})})}export{u as SnackbarProvider,d as Snackbars,l as useSnackbarContext};
+//# sourceMappingURL=index.js.map

package/dist/snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/snackbar/SnackbarProvider.tsx","../../src/snackbar/Snackbars.tsx"],"sourcesContent":["import type { OptionalOnCondition } from \"@alextheman/utility\";\nimport type { AlertColor } from \"@mui/material/Alert\";\nimport type { ReactNode } from \"react\";\n\nimport type { ContextHookOptions } from \"src/root/types\";\n\nimport { DataError } from \"@alextheman/utility/v6\";\nimport { createContext, use, useState } from \"react\";\n\nexport interface SnackbarProviderProps {\n  /** The children that will have access to the snackbar context. */\n  children: ReactNode;\n  /** The amount of seconds to wait before hiding the snackbar. */\n  autoHideDuration?: number;\n}\n\nexport interface SnackbarItem {\n  /** The ID of the Snackbar */\n  id: string;\n  /** The severity of the alert. This defines the color and icon used. */\n  severity?: AlertColor;\n  /** The message to show as part of the snackbar. */\n  message: string;\n  /** The amount of milliseconds to show the snackbar for. */\n  duration: number;\n}\n\nexport interface AddSnackbarOptions {\n  severity?: AlertColor;\n  duration?: number;\n}\nexport interface SnackbarContextValue {\n  /** An array of all the snackbars to render. */\n  snackbars: Array<SnackbarItem>;\n  /** A function that adds the snackbar to the page. */\n  addSnackbar: (message: string, options?: AddSnackbarOptions) => void;\n  /** A function to remove a snackbar. */\n  removeSnackbar: (id?: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarContextValue | undefined>(undefined);\n\n/** Access the snackbar context directly. */\nexport function useSnackbarContext<Strict extends boolean = true>({\n  strict = true as Strict,\n}: ContextHookOptions<Strict> = {}): OptionalOnCondition<Strict, SnackbarContextValue> {\n  const context = use(SnackbarContext);\n  if (strict && !context) {\n    throw new DataError(\n      { strict, context },\n      \"SNACKBAR_PROVIDER_NOT_FOUND\",\n      \"Could not find the SnackbarProvider context. Please double-check that it is present.\",\n    );\n  }\n  return context as OptionalOnCondition<Strict, SnackbarContextValue>;\n}\n\n/** Provides an array of snackbars for the `Snackbars` component to display. */\nfunction SnackbarProvider({ children, autoHideDuration = 5000 }: SnackbarProviderProps) {\n  const [snackbars, setSnackbars] = useState<Array<SnackbarItem>>([]);\n\n  function addSnackbar(message: string, options: AddSnackbarOptions = {}) {\n    const { severity = \"info\", duration = autoHideDuration } = options;\n    setSnackbars((previous) => {\n      return [\n        ...previous,\n        {\n          severity,\n          id: crypto.randomUUID(),\n          message,\n          duration,\n        },\n      ];\n    });\n  }\n\n  function removeSnackbar(id?: string) {\n    setSnackbars((previous) => {\n      const newSnackbars = [...previous];\n      if (id === undefined) {\n        newSnackbars.shift();\n        return newSnackbars;\n      }\n\n      return newSnackbars.filter((snackbar) => {\n        return snackbar.id !== id;\n      });\n    });\n  }\n\n  return (\n    <SnackbarContext value={{ snackbars, addSnackbar, removeSnackbar }}>{children}</SnackbarContext>\n  );\n}\n\nexport default SnackbarProvider;\n","import type { SyntheticEvent } from \"react\";\n\nimport type { SnackbarItem } from \"src/snackbar/SnackbarProvider\";\n\nimport Alert from \"@mui/material/Alert\";\nimport Snackbar from \"@mui/material/Snackbar\";\nimport { useEffect, useState } from \"react\";\n\nimport { useSnackbarContext } from \"src/snackbar/SnackbarProvider\";\n\n/** Displays the array of snackbars provided by `SnackbarProvider`. */\nfunction Snackbars() {\n  const { snackbars, removeSnackbar } = useSnackbarContext();\n  const [open, setOpen] = useState<boolean>(false);\n  const [currentSnackbar, setCurrentSnackbar] = useState<SnackbarItem | null>(null);\n\n  function onClose(_: SyntheticEvent | Event, reason?: string) {\n    if (reason !== \"clickaway\") {\n      setCurrentSnackbar(null);\n      setOpen(false);\n    }\n  }\n\n  useEffect(() => {\n    if (!open && snackbars.length !== 0) {\n      /* eslint-disable @eslint-react/set-state-in-effect -- This is a legitimate usage as we need to be able to control exactly when the  snackbar gets added/shown. */\n      setCurrentSnackbar(snackbars[0]);\n      removeSnackbar();\n      setOpen(true);\n      /* eslint-enable */\n    }\n  }, [open, removeSnackbar, snackbars]);\n\n  return (\n    <Snackbar open={open} autoHideDuration={currentSnackbar?.duration} onClose={onClose}>\n      <Alert onClose={onClose} severity={currentSnackbar?.severity ?? \"info\"}>\n        {currentSnackbar?.message}\n      </Alert>\n    </Snackbar>\n  );\n}\n\nexport default Snackbars;\n"],"mappings":"gPAwCA,MAAM,EAAkB,EAAgD,IAAA,EAAS,EAGjF,SAAgB,EAAkD,CAChE,SAAS,IACqB,CAAC,EAAsD,CACrF,IAAM,EAAU,EAAI,CAAe,EACnC,GAAI,GAAU,CAAC,EACb,MAAM,IAAI,EACR,CAAE,SAAQ,SAAQ,EAClB,8BACA,sFACF,EAEF,OAAO,CACT,CAGA,SAAS,EAAiB,CAAE,WAAU,mBAAmB,KAA+B,CACtF,GAAM,CAAC,EAAW,GAAgB,EAA8B,CAAC,CAAC,EAElE,SAAS,EAAY,EAAiB,EAA8B,CAAC,EAAG,CACtE,GAAM,CAAE,WAAW,OAAQ,WAAW,GAAqB,EAC3D,EAAc,GACL,CACL,GAAG,EACH,CACE,WACA,GAAI,OAAO,WAAW,EACtB,UACA,UACF,CACF,CACD,CACH,CAEA,SAAS,EAAe,EAAa,CACnC,EAAc,GAAa,CACzB,IAAM,EAAe,CAAC,GAAG,CAAQ,EAMjC,OALI,IAAO,IAAA,IACT,EAAa,MAAM,EACZ,GAGF,EAAa,OAAQ,GACnB,EAAS,KAAO,CACxB,CACH,CAAC,CACH,CAEA,OACE,EAAC,EAAD,CAAiB,MAAO,CAAE,YAAW,cAAa,gBAAe,EAAI,UAA0B,CAAA,CAEnG,CClFA,SAAS,GAAY,CACnB,GAAM,CAAE,YAAW,kBAAmB,EAAmB,EACnD,CAAC,EAAM,GAAW,EAAkB,EAAK,EACzC,CAAC,EAAiB,GAAsB,EAA8B,IAAI,EAEhF,SAAS,EAAQ,EAA2B,EAAiB,CACvD,IAAW,cACb,EAAmB,IAAI,EACvB,EAAQ,EAAK,EAEjB,CAYA,OAVA,MAAgB,CACV,CAAC,GAAQ,EAAU,SAAW,IAEhC,EAAmB,EAAU,EAAE,EAC/B,EAAe,EACf,EAAQ,EAAI,EAGhB,EAAG,CAAC,EAAM,EAAgB,CAAS,CAAC,EAGlC,EAAC,EAAD,CAAgB,OAAM,iBAAkB,GAAiB,SAAmB,mBAC1E,EAAC,EAAD,CAAgB,UAAS,SAAU,GAAiB,UAAY,gBAC7D,GAAiB,OACb,CAAA,CACC,CAAA,CAEd"}

package/dist/theme/index.d.ts

@@ -0,0 +1,36 @@
+import { OptionalOnCondition } from "@alextheman/utility";
+import { PaletteMode, ThemeOptions } from "@mui/material/styles";
+import { ReactNode } from "react";
+
+//#region src/root/types/ContextHookOptions.d.ts
+interface ContextHookOptions<Strict extends boolean = true> {
+  /** Error if the context is missing if this is set to true. */
+  strict?: Strict;
+}
+//#endregion
+//#region src/theme/ThemeProvider.d.ts
+interface ThemeContextValue {
+  toggleMode: () => void;
+  mode: PaletteMode;
+}
+/** Access the mode context directly. */
+declare function useThemeContext<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ThemeContextValue>;
+interface ThemeProviderProps {
+  /** The children that will have access to the current mode. */
+  children: ReactNode;
+  /** The initial mode. */
+  mode?: PaletteMode;
+  /** Extra options to apply on top of our default theme options */
+  themeOptions?: ThemeOptions;
+}
+/** Provides information about the current theme mode to its children components. */
+declare function ThemeProvider({
+  children,
+  mode: modeProp,
+  themeOptions
+}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type ThemeContextValue, ThemeProvider, type ThemeProviderProps, useThemeContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+import{omitProperties as e}from"@alextheman/utility";import{DataError as t}from"@alextheman/utility/v6";import n from"@mui/material/CssBaseline";import{ThemeProvider as r,createTheme as i}from"@mui/material/styles";import{createContext as a,use as o,useMemo as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=a(void 0);function f({strict:e=!0}={}){let n=o(d);if(e&&!n)throw new t({strict:e,context:n},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return n}function p({children:t,mode:a=`dark`,themeOptions:o}){let[f,p]=c(a),m=s(()=>i({palette:{mode:f,...e(o?.palette??{},[`mode`])},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider}),...o?.components?.MuiPaper?.styleOverrides},...e(o?.components?.MuiPaper??{},`styleOverrides`)},...e(o?.components??{},`MuiPaper`)},...e(o??{},[`components`,`palette`])}),[f,o]);return l(d,{value:{mode:f,toggleMode:()=>{p(e=>e===`light`?`dark`:`light`)}},children:u(r,{theme:m,children:[l(n,{}),t]})})}export{p as ThemeProvider,f as useThemeContext};
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["MuiThemeProvider"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import type { OptionalOnCondition } from \"@alextheman/utility\";\nimport type { PaletteMode, ThemeOptions } from \"@mui/material/styles\";\nimport type { ReactNode } from \"react\";\n\nimport type { ContextHookOptions } from \"src/root/types\";\n\nimport { omitProperties } from \"@alextheman/utility\";\nimport { DataError } from \"@alextheman/utility/v6\";\nimport CssBaseline from \"@mui/material/CssBaseline\";\nimport { createTheme, ThemeProvider as MuiThemeProvider } from \"@mui/material/styles\";\nimport { createContext, use, useMemo, useState } from \"react\";\n\nexport interface ThemeContextValue {\n  toggleMode: () => void;\n  mode: PaletteMode;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\n/** Access the mode context directly. */\nexport function useThemeContext<Strict extends boolean = true>({\n  strict = true as Strict,\n}: ContextHookOptions<Strict> = {}): OptionalOnCondition<Strict, ThemeContextValue> {\n  const context = use(ThemeContext);\n  if (strict && !context) {\n    throw new DataError(\n      { strict, context },\n      \"MODE_PROVIDER_NOT_FOUND\",\n      \"Could not find the ModeProvider context. Please double-check that it is present.\",\n    );\n  }\n  return context as OptionalOnCondition<Strict, ThemeContextValue>;\n}\n\nexport interface ThemeProviderProps {\n  /** The children that will have access to the current mode. */\n  children: ReactNode;\n  /** The initial mode. */\n  mode?: PaletteMode;\n  /** Extra options to apply on top of our default theme options */\n  themeOptions?: ThemeOptions;\n}\n\n/** Provides information about the current theme mode to its children components. */\nfunction ThemeProvider({ children, mode: modeProp = \"dark\", themeOptions }: ThemeProviderProps) {\n  const [mode, setMode] = useState<PaletteMode>(modeProp);\n\n  const theme = useMemo(() => {\n    return createTheme({\n      palette: {\n        mode,\n        ...omitProperties(themeOptions?.palette ?? {}, [\"mode\"]),\n      },\n      components: {\n        MuiPaper: {\n          styleOverrides: {\n            root: ({ theme }) => {\n              return {\n                border: 1,\n                borderStyle: \"solid\",\n                borderColor: theme.palette.divider,\n              };\n            },\n            ...themeOptions?.components?.MuiPaper?.styleOverrides,\n          },\n          ...omitProperties(themeOptions?.components?.MuiPaper ?? {}, \"styleOverrides\"),\n        },\n        ...omitProperties(themeOptions?.components ?? {}, \"MuiPaper\"),\n      },\n      ...omitProperties(themeOptions ?? {}, [\"components\", \"palette\"]),\n    });\n  }, [mode, themeOptions]);\n\n  return (\n    <ThemeContext\n      value={{\n        mode,\n        toggleMode: () => {\n          setMode((prev) => {\n            return prev === \"light\" ? \"dark\" : \"light\";\n          });\n        },\n      }}\n    >\n      <MuiThemeProvider theme={theme}>\n        <CssBaseline />\n        {children}\n      </MuiThemeProvider>\n    </ThemeContext>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"mVAiBA,MAAM,EAAe,EAA6C,IAAA,EAAS,EAG3E,SAAgB,EAA+C,CAC7D,SAAS,IACqB,CAAC,EAAmD,CAClF,IAAM,EAAU,EAAI,CAAY,EAChC,GAAI,GAAU,CAAC,EACb,MAAM,IAAI,EACR,CAAE,SAAQ,SAAQ,EAClB,0BACA,kFACF,EAEF,OAAO,CACT,CAYA,SAAS,EAAc,CAAE,WAAU,KAAM,EAAW,OAAQ,gBAAoC,CAC9F,GAAM,CAAC,EAAM,GAAW,EAAsB,CAAQ,EAEhD,EAAQ,MACL,EAAY,CACjB,QAAS,CACP,OACA,GAAG,EAAe,GAAc,SAAW,CAAC,EAAG,CAAC,MAAM,CAAC,CACzD,EACA,WAAY,CACV,SAAU,CACR,eAAgB,CACd,MAAO,CAAE,YACA,CACL,OAAQ,EACR,YAAa,QACb,YAAa,EAAM,QAAQ,OAC7B,GAEF,GAAG,GAAc,YAAY,UAAU,cACzC,EACA,GAAG,EAAe,GAAc,YAAY,UAAY,CAAC,EAAG,gBAAgB,CAC9E,EACA,GAAG,EAAe,GAAc,YAAc,CAAC,EAAG,UAAU,CAC9D,EACA,GAAG,EAAe,GAAgB,CAAC,EAAG,CAAC,aAAc,SAAS,CAAC,CACjE,CAAC,EACA,CAAC,EAAM,CAAY,CAAC,EAEvB,OACE,EAAC,EAAD,CACE,MAAO,CACL,OACA,eAAkB,CAChB,EAAS,GACA,IAAS,QAAU,OAAS,OACpC,CACH,CACF,WAEA,EAACA,EAAD,CAAyB,iBAAzB,CACE,EAAC,EAAD,CAAc,CAAA,EACb,CACe,GACN,CAAA,CAElB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alextheman/components",
-  "version": "6.26.0",
+  "version": "7.0.1",
   "description": "A package containing common React components used across my projects.",
   "repository": {
     "type": "git",
@@ -13,13 +13,43 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
-    "./v7": {
-      "types": "./dist/v7/index.d.ts",
-      "import": "./dist/v7/index.js",
-      "require": "./dist/v7/index.cjs"
+    "./DropdownMenu": {
+      "types": "./dist/DropdownMenu/index.d.ts",
+      "import": "./dist/DropdownMenu/index.js"
+    },
+    "./QueryBoundary": {
+      "types": "./dist/QueryBoundary/index.d.ts",
+      "import": "./dist/QueryBoundary/index.js"
+    },
+    "./Tab": {
+      "types": "./dist/Tab/index.d.ts",
+      "import": "./dist/Tab/index.js"
+    },
+    "./audio": {
+      "types": "./dist/audio/index.d.ts",
+      "import": "./dist/audio/index.js"
+    },
+    "./file": {
+      "types": "./dist/file/index.d.ts",
+      "import": "./dist/file/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "import": "./dist/form/index.js"
+    },
+    "./routing": {
+      "types": "./dist/routing/index.d.ts",
+      "import": "./dist/routing/index.js"
+    },
+    "./snackbar": {
+      "types": "./dist/snackbar/index.d.ts",
+      "import": "./dist/snackbar/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
     }
   },
   "files": [
@@ -29,11 +59,10 @@
     "@alextheman/utility": "5.19.0",
     "common-tags": "1.8.2",
     "react-icons": "5.6.0",
-    "react-live": "4.1.8",
     "zod": "4.4.3"
   },
   "devDependencies": {
-    "@alextheman/eslint-plugin": "5.16.0",
+    "@alextheman/eslint-plugin": "5.16.1",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@mui/material": "9.0.1",
@@ -64,8 +93,6 @@
     "react": "19.2.6",
     "react-docgen-typescript": "2.4.0",
     "react-dom": "19.2.6",
-    "react-hook-form": "7.76.0",
-    "react-router-dom": "7.15.1",
     "storybook": "10.4.0",
     "styled-components": "6.4.2",
     "tempy": "3.2.0",
@@ -82,8 +109,6 @@
     "@tanstack/react-form": ">=1.28.5",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "react-hook-form": ">=7.66.0",
-    "react-router-dom": ">=7.0.0",
     "wouter": ">=3.9.0"
   },
   "engines": {

package/dist/index.cjs

@@ -1,3 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("@mui/material/Box");c=s(c,1);let l=require("@mui/material/Card");l=s(l,1);let u=require("@mui/material/CardContent");u=s(u,1);let d=require("@mui/material/CardHeader");d=s(d,1);let f=require("@mui/material/Chip");f=s(f,1);let p=require("@mui/material/Divider");p=s(p,1);let m=require("@mui/material/Stack");m=s(m,1);let h=require("@mui/material/Typography");h=s(h,1);let g=require("react/jsx-runtime"),_=require("@mui/material/ButtonBase");_=s(_,1);let v=require("@mui/material/Collapse");v=s(v,1);let y=require("react"),b=require("react-icons/md"),x=require("@mui/material/Link");x=s(x,1);let S=require("@mui/material/Button");S=s(S,1);let C=require("@mui/material/styles"),w=require("@mui/material/IconButton");w=s(w,1);let T=require("@mui/material/List");T=s(T,1);let E=require("@mui/material/ListItem");E=s(E,1);let D=require("@mui/material/ListItemText");D=s(D,1);let O=require("@mui/material/Alert");O=s(O,1);let k=require("@alextheman/utility/v6"),A=require("@mui/material/CircularProgress");A=s(A,1);let j=require("@alextheman/utility"),M=require("@mui/material/Skeleton");M=s(M,1);let N=require("@mui/material/TableCell");N=s(N,1);let ee=require("@mui/material/TableRow");ee=s(ee,1);let P=require("@mui/material/Switch");P=s(P,1);let F=require("@mui/material/Tooltip");F=s(F,1);let I=require("@mui/material/Snackbar");I=s(I,1);let L=require("@mui/material/CssBaseline");L=s(L,1);let R=require("@mui/material/Menu");R=s(R,1);let z=require("@mui/material/BottomNavigation");z=s(z,1);let B=require("@mui/material/BottomNavigationAction");B=s(B,1);let te=require("@mui/material/Paper");te=s(te,1);let ne=require("@mui/material/AppBar");ne=s(ne,1);let re=require("@mui/material/Drawer");re=s(re,1);let V=require("@mui/material/ListItemButton");V=s(V,1);let ie=require("@mui/material/ListItemIcon");ie=s(ie,1);let H=require("@mui/material/Toolbar");H=s(H,1);let U=require("@mui/material/MenuItem");U=s(U,1);let W=require("react-router-dom"),G=require("@mui/material/Popover");G=s(G,1);let ae=require("common-tags"),K=require("react-live"),oe=require("react-hook-form");function se({containerLabel:e,chipLabels:t}){return(0,g.jsx)(l.default,{sx:{width:320,height:420,backgroundColor:`rgba(255,255,255,0.07)`,backdropFilter:`blur(8px)`,border:`1px solid rgba(255,255,255,0.06)`,boxShadow:`0 10px 40px rgba(0,0,0,0.35)`},children:(0,g.jsxs)(u.default,{children:[(0,g.jsx)(h.default,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),(0,g.jsx)(m.default,{spacing:1,children:t.map(e=>(0,g.jsx)(f.default,{label:e,sx:{backgroundColor:`rgba(255,255,255,0.11)`,color:`rgba(255,255,255,0.88)`,border:`1px solid rgba(255,255,255,0.06)`}},e))})]})})}function ce(){return(0,g.jsx)(c.default,{sx:{width:120,height:6,borderRadius:3,background:`linear-gradient(90deg, #f43f5e, #a78bfa, #22d3ee)`,boxShadow:`0 0 24px rgba(167,139,250,0.55)`}})}function le(){return(0,g.jsxs)(l.default,{sx:{width:1e3,height:1e3,display:`flex`,flexDirection:`column`,justifyContent:`space-between`,p:4,background:`radial-gradient(circle at 20% 10%, rgba(167,139,250,0.35) 0%, rgba(167,139,250,0.12) 35%, rgba(0,0,0,0) 55%), linear-gradient(135deg, #3a3380 0%, #1d2e5f 40%, #2d3f55 100%)`,color:`white`},elevation:0,children:[(0,g.jsx)(d.default,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),(0,g.jsx)(p.default,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),(0,g.jsx)(u.default,{sx:{flex:1,display:`flex`,alignItems:`center`},children:(0,g.jsxs)(m.default,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[(0,g.jsx)(se,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),(0,g.jsx)(ce,{}),(0,g.jsx)(se,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function ue({isInitiallyOpen:e,onOpen:t,onClose:n,children:r,buttonStyles:i,buttonContents:a,buttonComponent:o=_.default,collapseProps:s,openIcon:l=(0,g.jsx)(b.MdArrowDropUp,{}),closedIcon:u=(0,g.jsx)(b.MdArrowDropDown,{}),useDefaultStyling:d=o===_.default}){let[f,p]=(0,y.useState)(!!e);return(0,y.useEffect)(()=>{f&&t?t():!f&&n&&n()},[f,t,n]),(0,g.jsxs)(c.default,{children:[(0,g.jsxs)(o,{onClick:()=>{p(e=>!e)},sx:d?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":o===_.default?{backgroundColor:`action.hover`}:null,...i}:i,"aria-expanded":f,children:[a,f?l:u]}),(0,g.jsx)(v.default,{in:f,...s,children:r})]})}function de({href:e,children:t,ref:n,...r}){return(0,g.jsx)(x.default,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const fe={PDF:`application/pdf`,PNG:`image/png`,JPEG:`image/jpeg`,JPG:`image/jpg`,XLSX:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`,DOCX:`application/vnd.openxmlformats-officedocument.wordprocessingml.document`,MP3:`audio/mp3`,MP4:`video/mp4`,WAV:`audio/wav`},pe=(0,C.styled)(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),me=(0,C.styled)(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function he({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=(0,y.useState)(!1),c=(0,y.useId)(),l=(0,g.jsxs)(S.default,{variant:`contained`,component:`label`,"aria-label":`File input button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(c)?.click())},...a,startIcon:a.startIcon??(0,g.jsx)(b.MdCloudUpload,{}),children:[t,(0,g.jsx)(pe,{id:c,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?(0,g.jsx)(me,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:l}):l}function ge({files:e,setFiles:t,multiple:n=!0,...r}){function i(e){t(t=>[...t,...e])}return(0,g.jsxs)(c.default,{children:[(0,g.jsx)(he,{...r,multiple:n,onFileInput:i}),(0,g.jsx)(T.default,{children:e.map(e=>(0,g.jsx)(E.default,{secondaryAction:(0,g.jsx)(w.default,{"aria-label":`Delete`,edge:`end`,onClick:()=>{t(t=>t.filter(t=>t!==e))},children:(0,g.jsx)(b.MdDelete,{})}),children:(0,g.jsx)(D.default,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function _e({title:e,subtitle:t,action:n,children:r,tabs:i,disablePadding:a}){return(0,g.jsxs)(l.default,{children:[(0,g.jsx)(d.default,{title:(0,g.jsxs)(g.Fragment,{children:[typeof e==`string`?(0,g.jsx)(h.default,{variant:`h6`,children:e}):e,t?typeof t==`string`?(0,g.jsx)(h.default,{variant:`body2`,color:`text.secondary`,children:t}):t:null]}),action:n}),i,(0,g.jsx)(p.default,{}),a?r:(0,g.jsx)(u.default,{children:r})]})}const ve=(0,y.createContext)(void 0);function q({strict:e=!0}={}){let t=(0,y.use)(ve);if(e&&!t)throw new k.DataError({strict:e,context:t},`QUERY_BOUNDARY_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function J({children:e,loadingComponent:t=(0,g.jsx)(A.default,{}),...n}){return(0,g.jsx)(ve,{value:{loadingComponent:t,...n},children:e})}function Y({children:e,logError:t}){let{data:n,error:r,errorComponent:i,logError:a}=q(),o=t??a,s=(0,y.useRef)(!1),c=e??i;return r?(o&&!s.current&&(n==null?console.error(r):console.error(`An error has occurred but data is still present. This may indicate an invalid query state.`,{data:n,error:r}),s.current=!0),typeof c==`function`?c(r):c===void 0?(0,g.jsx)(O.default,{severity:`error`,children:typeof r==`object`&&`message`in r&&typeof r.message==`string`?r.message:`An unknown error has occured.`}):(0,g.jsx)(g.Fragment,{children:c})):null}function X({undefinedComponent:e,nullComponent:t,nullableComponent:n}){let{isLoading:r,data:i,error:a}=q();if(r||a)return null;if(i==null){if(n!==void 0)return(0,g.jsx)(g.Fragment,{children:n});if(i===void 0)return e===void 0?(0,g.jsx)(h.default,{children:`No data available.`}):(0,g.jsx)(g.Fragment,{children:e});if(i===null)return t===void 0?(0,g.jsx)(h.default,{children:`No data found.`}):(0,g.jsx)(g.Fragment,{children:t})}return null}function Z({errorComponent:e,logError:t,...n}){return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(Y,{logError:t,children:e}),(0,g.jsx)(X,{...n})]})}function ye({query:e}){return{Context:({children:t})=>(0,g.jsx)(J,{isLoading:e.isLoading,error:e.error,data:e.data,children:t}),Error:Y,Fallback:Z,Nullable:X}}function Q({children:e,loadingComponent:t,itemKey:n,itemParser:r,dataParser:i,emptyComponent:a=(0,g.jsx)(h.default,{children:`No data present`}),strictlyRequireArray:o=!0}){let{isLoading:s,data:c,dataParser:l,loadingComponent:u,error:d}=q(),f=i??l,p=t??u;if(s)return(0,g.jsx)(g.Fragment,{children:p});if(d||c==null)return null;if(!Array.isArray(c)){if(o)throw new k.DataError({data:c,strictlyRequireArray:o},`NOT_AN_ARRAY`,`Expected the data to be an array but it was not an array.`);return null}if(c.length===0)return(0,g.jsx)(g.Fragment,{children:a});let m;return m=f?f(c):r?c.map(r):c,(0,g.jsx)(g.Fragment,{children:m.map((t,r)=>(0,g.jsx)(y.Fragment,{children:typeof e==`function`?e(t):e},n?n(t,r):r))})}function be({query:e}){return{...ye({query:e}),DataMap:Q}}function xe({loadingComponent:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,errorComponent:a,children:o,isLoading:s,error:c,data:l,dataParser:u,itemParser:d,itemKey:f}){let p=be({query:{isLoading:s,error:c,data:l}}),m=(0,g.jsx)(p.Fallback,{logError:i,errorComponent:a});r?m=(0,g.jsx)(p.Fallback,{nullableComponent:r,logError:i,errorComponent:a}):(t||n)&&(m=(0,g.jsx)(p.Fallback,{undefinedComponent:t,nullComponent:n,logError:i,errorComponent:a}));let h=(0,g.jsx)(p.DataMap,{loadingComponent:e,itemKey:f,children:o});return u?h=(0,g.jsx)(p.DataMap,{loadingComponent:e,itemKey:f,dataParser:u,children:o}):d&&(h=(0,g.jsx)(p.DataMap,{loadingComponent:e,itemKey:f,itemParser:d,children:o})),(0,g.jsxs)(p.Context,{children:[m,h]})}function $({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=q(),c=t??a;return s?null:r?(0,g.jsx)(g.Fragment,{children:n??o}):i==null?null:(0,g.jsx)(g.Fragment,{children:typeof e==`function`?e(c?c(i):i):e})}function Se({query:e}){return{...ye({query:e}),Data:$}}function Ce({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=(0,g.jsx)(A.default,{}),isLoading:s,error:c,data:l,dataParser:u}){let d=Se({query:{isLoading:s,error:c,data:l}}),f=(0,g.jsx)(d.Fallback,{logError:a,errorComponent:t});return i===void 0?(n!==void 0||r!==void 0)&&(f=(0,g.jsx)(d.Fallback,{undefinedComponent:n,nullComponent:r,logError:a,errorComponent:t})):f=(0,g.jsx)(d.Fallback,{nullableComponent:i,logError:a,errorComponent:t}),(0,g.jsxs)(d.Context,{children:[f,(0,g.jsx)(d.Data,{loadingComponent:o,dataParser:u,children:e})]})}function we({columns:e}){return(0,g.jsx)(ee.default,{children:(0,j.fillArray)(e=>(0,g.jsx)(N.default,{children:(0,g.jsx)(M.default,{})},e),e)})}const Te=(0,C.styled)(P.default)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Ee({checkedIcon:e,checkedIconStyles:t,uncheckedIcon:n,uncheckedIconStyles:r,...i}){let a={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},o={color:`black`,maxWidth:16.5,maxHeight:16.5};return(0,g.jsx)(Te,{checkedIcon:(0,g.jsx)(c.default,{sx:a,children:(0,g.jsx)(e,{style:{...o,...t}})}),icon:(0,g.jsx)(c.default,{sx:a,children:(0,g.jsx)(n,{style:{...o,...r}})}),...i})}const De=(0,y.createContext)(void 0);function Oe({strict:e=!0}={}){let t=(0,y.use)(De);if(e&&!t)throw new k.DataError({strict:e,context:t},`AUDIO_PROVIDER_NOT_FOUND`,`Could not find the AudioProvider context. Please double-check that it is present.`);return t}function ke({tracks:e,children:t}){let[n,r]=(0,y.useState)(e.length===0?null:e[0]);return(0,g.jsx)(De,{value:{tracks:e,currentTrack:n,setCurrentTrack:r},children:t})}function Ae(){let{currentTrack:e}=Oe();return e===null?(0,g.jsx)(h.default,{children:`No track selected`}):(0,g.jsx)(`audio`,{src:e.src,controls:!0,children:(0,g.jsx)(`track`,{kind:`captions`})})}const je=(0,y.createContext)({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Me({strict:e=!0}={}){let t=(0,y.use)(je);if(e&&!t)throw new k.DataError({strict:e,context:t},`SCREEN_SIZE_PROVIDER_NOT_FOUND`,`Could not find the ScreenSizeProvider context. Please double-check that it is present.`);return t}let Ne={windowWidth:window.innerWidth,windowHeight:window.innerHeight};function Pe(){return Ne}function Fe(e){function t(){Ne={windowWidth:window.innerWidth,windowHeight:window.innerHeight},e()}return window.addEventListener(`resize`,t),()=>{window.removeEventListener(`resize`,t)}}function Ie({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let{windowWidth:r,windowHeight:i}=(0,y.useSyncExternalStore)(Fe,Pe);return(0,g.jsx)(je,{value:{isLargeScreen:(0,y.useMemo)(()=>r>t&&i>n,[r,i,t,n]),windowWidth:r,windowHeight:i},children:e})}const Le=(0,y.createContext)(void 0);function Re({strict:e=!0}={}){let t=(0,y.use)(Le);if(e&&!t)throw new k.DataError({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function ze({children:e,autoHideDuration:t=5e3}){let[n,r]=(0,y.useState)(!1),[i,a]=(0,y.useState)(t),[o,s]=(0,y.useState)(``),[c,l]=(0,y.useState)(`info`);function u(e,n,i){r(!0),a(i??t),l(n??`info`),s(e)}async function d(){r(!1),await(0,j.wait)(.2),s(``)}return(0,g.jsxs)(Le,{value:{addSnackbar:u},children:[(0,g.jsx)(I.default,{open:n,autoHideDuration:i,onClose:d,children:(0,g.jsx)(O.default,{onClose:d,severity:c,children:o})}),e]})}const Be=(0,y.createContext)({toggleMode:()=>{},mode:`dark`});function Ve({strict:e=!0}={}){let t=(0,y.use)(Be);if(e&&!t)throw new k.DataError({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function He({children:e,mode:t=`dark`,themeOptions:n}){let[r,i]=(0,y.useState)(t),a=(0,y.useMemo)(()=>(0,C.createTheme)({palette:{mode:r,...(0,j.omitProperties)(n?.palette??{},[`mode`])},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider}),...n?.components?.MuiPaper?.styleOverrides},...(0,j.omitProperties)(n?.components?.MuiPaper??{},`styleOverrides`)},...(0,j.omitProperties)(n?.components??{},`MuiPaper`)},...(0,j.omitProperties)(n??{},[`components`,`palette`])}),[r,n]);return(0,g.jsx)(Be,{value:{mode:r,toggleMode:()=>{i(e=>e===`light`?`dark`:`light`)}},children:(0,g.jsxs)(C.ThemeProvider,{theme:a,children:[(0,g.jsx)(L.default,{}),e]})})}function Ue(){let{mode:e,toggleMode:t}=Ve(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return(0,g.jsx)(F.default,{title:r,children:(0,g.jsx)(Ee,{uncheckedIcon:b.MdOutlineLightMode,checkedIcon:b.MdOutlineDarkMode,checked:n,onChange:t,"aria-label":r})})}function We({query:e}){return{Context:({children:t})=>(0,g.jsx)(J,{isLoading:e.isLoading,error:e.error,data:`data`in e?e.data:e.dataCollection,children:t}),Error:Y,Data:$,DataMap:Q,Fallback:Z,Nullable:X}}const Ge=Ue;function Ke({children:e,button:t=S.default,buttonChildren:n=`Menu`,buttonProps:r,isOpenIcon:i=(0,g.jsx)(b.MdArrowDropUp,{}),isClosedIcon:a=(0,g.jsx)(b.MdArrowDropDown,{}),onOpen:o,onClose:s}){let[l,u]=(0,y.useState)(null),d=(0,y.useMemo)(()=>!!l,[l]),f={...r,onClick:e=>{u(e.currentTarget)},"aria-controls":d?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":d};return t===S.default&&(f.endIcon=d?i:a),(0,y.useEffect)(()=>{d&&o?o():!d&&s&&s()},[d,o,s]),(0,g.jsxs)(c.default,{children:[(0,g.jsx)(t,{...f,children:n}),(0,g.jsx)(R.default,{id:`dropdown-menu`,anchorEl:l,open:d,onClose:()=>{u(null)},children:typeof e==`function`?(0,g.jsx)(c.default,{children:e(()=>{u(null)})}):e})]})}const qe=(0,y.createContext)(void 0);function Je({strict:e=!0}={}){let t=(0,y.use)(qe);if(e&&!t)throw new k.DataError({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function Ye({strict:e=!0}={}){return Je({strict:e})}function Xe({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=Ye();return(0,g.jsx)(R.default,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function Ze({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Je();return(0,g.jsx)(U.default,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Qe=Je,$e=Xe,et=Ze;var tt=$e;function nt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Qe();return(0,g.jsx)(U.default,{component:de,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function rt({to:e,component:t=W.Link,children:n,ref:r,...i}){return(0,g.jsx)(x.default,{component:t,to:e,ref:r,...i,children:n})}function it({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Qe();return(0,g.jsx)(U.default,{component:rt,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function at({icon:e=b.MdVisibility,onOpen:t,onClose:n,iconProps:r,children:i}){let[a,o]=(0,y.useState)(null),s=!!a,l=(0,y.useId)();function u(e){o(e.currentTarget),t&&t()}function d(){o(null),n&&n()}return(0,g.jsxs)(c.default,{children:[(0,g.jsx)(e,{"aria-owns":s?l:void 0,"aria-haspopup":`true`,onMouseEnter:u,onMouseLeave:d,...r}),(0,g.jsx)(G.default,{id:l,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:s,anchorEl:a,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:d,disableRestoreFocus:!0,children:i})]})}function ot({children:e,...t}){return(0,g.jsx)(V.default,{component:rt,...t,children:e})}const st=Ce,ct=$,lt=Z,ut=J,dt=He,ft=Ue;function pt({children:e,navItems:t}){let[n,r]=(0,y.useState)(``);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(c.default,{sx:{paddingBottom:7},children:e}),(0,g.jsx)(te.default,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:(0,g.jsx)(z.default,{showLabels:!0,value:n,onChange:(e,t)=>{r(t)},children:t.map(e=>(0,g.jsx)(B.default,{...e,component:W.Link},e.value))})})]})}function mt(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ht(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const gt=(0,C.styled)(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),_t=(0,C.styled)(ne.default,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),vt=(0,C.styled)(re.default,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...mt(e),"& .MuiDrawer-paper":mt(e)}},{props:({open:e})=>!e,style:{...ht(e),"& .MuiDrawer-paper":ht(e)}}]}));function yt({title:e,navItems:t,children:n,headerElements:r}){let i=(0,C.useTheme)(),[a,o]=(0,y.useState)(!0),s=(0,W.useLocation)();function l(){o(!0)}function u(){o(!1)}return(0,g.jsxs)(c.default,{sx:{display:`flex`},children:[(0,g.jsx)(L.default,{}),(0,g.jsx)(_t,{position:`fixed`,open:a,children:(0,g.jsxs)(H.default,{children:[(0,g.jsx)(w.default,{color:`inherit`,"aria-label":`open drawer`,onClick:l,edge:`start`,sx:[{marginRight:5},a&&{display:`none`}],children:(0,g.jsx)(b.MdMenu,{})}),(0,g.jsx)(h.default,{variant:`h6`,noWrap:!0,component:`div`,children:e}),r]})}),(0,g.jsxs)(vt,{variant:`permanent`,open:a,children:[(0,g.jsx)(gt,{children:(0,g.jsx)(w.default,{onClick:u,children:i.direction===`rtl`?(0,g.jsx)(b.MdChevronRight,{}):(0,g.jsx)(b.MdChevronLeft,{})})}),(0,g.jsx)(p.default,{}),t.map(e=>(0,g.jsxs)(y.Fragment,{children:[(0,g.jsxs)(T.default,{children:[(0,g.jsx)(h.default,{variant:a?`h5`:`h6`,sx:{paddingLeft:a?2:1},children:a?e.category:(0,j.truncate)(e.category,4)}),e.options.map(e=>(0,g.jsx)(E.default,{disablePadding:!0,sx:{display:`block`},children:(0,g.jsxs)(V.default,{sx:[{minHeight:48,px:2.5},a?{justifyContent:`initial`}:{justifyContent:`center`}],component:W.Link,to:e.to,selected:s.pathname===e.to,children:[(0,g.jsx)(ie.default,{sx:[{minWidth:0,justifyContent:`center`},a?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:a?null:(0,g.jsx)(h.default,{children:(0,j.truncate)(e.label,4)})}),(0,g.jsx)(D.default,{primary:e.label,sx:[a?{opacity:1}:{opacity:0}]})]})},e.to))]}),(0,g.jsx)(p.default,{})]},e.category))]}),(0,g.jsxs)(c.default,{component:`main`,sx:{flexGrow:1,p:3},children:[(0,g.jsx)(gt,{}),n]})]})}function bt({text:e,sx:t,...n}){return(0,g.jsx)(g.Fragment,{children:e.split(`
-`).map((e,r)=>(0,g.jsx)(h.default,{sx:{margin:1,...t},...n,children:e},r))})}const xt=Ce;function St({code:e,previewStyles:t,...n}){let{mode:r}=Ve(),i={backgroundColor:r===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},a=t?{...i,...t}:{...i};return(0,g.jsx)(c.default,{sx:{borderRadius:1,border:.5,padding:2},children:(0,g.jsxs)(K.LiveProvider,{...n,code:(0,ae.stripIndent)(e??``),children:[(0,g.jsx)(h.default,{variant:`h5`,children:`Code`}),(0,g.jsx)(c.default,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:(0,g.jsx)(K.LiveEditor,{})}),(0,g.jsx)(`br`,{}),(0,g.jsx)(h.default,{variant:`h5`,children:`Result`}),(0,g.jsxs)(c.default,{sx:a,children:[(0,g.jsx)(K.LivePreview,{}),(0,g.jsx)(K.LiveError,{})]})]})})}function Ct({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=(0,oe.useFormContext)();return(0,g.jsx)(S.default,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function wt(e,t=500){let[n,r]=(0,y.useState)(e);return(0,y.useEffect)(()=>{let n=setTimeout(()=>{r(e)},t);return()=>{clearTimeout(n)}},[e,t]),n}function Tt(e){let[t,n]=(0,y.useState)(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=(0,y.useCallback)(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return(0,y.useEffect)(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,(0,y.useCallback)(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}exports.Artwork=le,exports.AudioControls=Ae,exports.AudioProvider=ke,exports.CollapsableItem=ue,exports.DarkModeToggle=Ge,exports.DropdownMenu=Ke,exports.DropdownMenu2=tt,exports.DropdownMenuExternalLink=nt,exports.DropdownMenuInternalLink=it,exports.DropdownMenuItem=et,exports.ExternalLink=de,exports.FileInput=he,exports.FileInputList=ge,exports.FileType=fe,exports.IconWithPopover=at,exports.InternalLink=rt,exports.ListItemInternalLink=ot,exports.Loader=st,exports.LoaderData=ct,exports.LoaderError=lt,exports.LoaderProvider=ut,exports.ModeProvider=dt,exports.ModeToggle=ft,exports.NavigationBottom=pt,exports.NavigationDrawer=yt,exports.Page=_e,exports.PopoverText=bt,exports.QueryBoundary=xt,exports.QueryBoundaryData=$,exports.QueryBoundaryDataMap=Q,exports.QueryBoundaryError=Y,exports.QueryBoundaryFallback=Z,exports.QueryBoundaryMap=xe,exports.QueryBoundaryNullable=X,exports.QueryBoundaryProvider=J,exports.QueryBoundaryWrapper=Ce,exports.ReactPlayground=St,exports.ScreenSizeProvider=Ie,exports.SkeletonRow=we,exports.SnackbarProvider=ze,exports.SubmitButton=Ct,exports.SwitchWithIcons=Ee,exports.ThemeProvider=He,exports.ThemeToggle=Ue,exports.createBaseQueryBoundary=ye,exports.createItemQueryBoundary=Se,exports.createListQueryBoundary=be,exports.createQueryBoundary=We,exports.useAudioContext=Oe,exports.useDebounce=wt,exports.useDropdownMenu=Qe,exports.useHash=Tt,exports.useQueryBoundary=q,exports.useScreenSize=Me,exports.useSnackbar=Re,exports.useTheme=Ve;
-//# sourceMappingURL=index.cjs.map