@alextheman/components 6.10.0 → 6.11.0

package/dist/index.d.cts

@@ -138,40 +138,6 @@ declare function FileInputList({
   ...fileInputProps
 }: FileInputListProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/InternalLink.d.ts
-interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
-  /** The path to navigate to */
-  to: `/${string}` | `~/${string}` | (string & {});
-  /**
-   * An optional component to provide to override the current component.
-   *
-   * Note that the provided component must:
-   * - accept a `to` prop
-   * - correctly handle the forwarded `ref`
-   * - render a valid anchor element (or equivalent) for proper accessibility
-   */
-  component?: ElementType;
-  href?: never;
-  /** The readable content to display on the link. */
-  children: ReactNode;
-  /** An optional ref to allow it to be used with polymorphic components. */
-  ref?: Ref<HTMLAnchorElement>;
-}
-/**
- * A stylised link for navigating within your application.
- *
- * Uses the app router for client-side navigation and opens the destination in the same tab.
- *
- * Defaults to a React Router implementation but can be overridden via the `component` prop.
- */
-declare function InternalLink({
-  to,
-  component,
-  children,
-  ref,
-  ...linkProps
-}: InternalLinkProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/types/ContextHookOptions.d.ts
 interface ContextHookOptions<Strict extends boolean = true> {
   /** Error if the context is missing if this is set to true. */
@@ -389,39 +355,6 @@ declare function NavigationBottom({
   navItems
 }: NavigationBottomProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/NavigationDrawer.d.ts
-interface NavMenuItemOptions {
-  /** The label to display on the nav item option. */
-  label: string;
-  /** Where in your app the nav item option should navigate to. */
-  to: string;
-  /** An icon to display alongside the nav item option. */
-  icon?: ReactNode;
-}
-interface NavMenuItem {
-  /** The category to display all the nav item options under. */
-  category: string;
-  /** An array of nav options to display under the chosen category. */
-  options: Array<NavMenuItemOptions>;
-}
-interface NavigationDrawerProps {
-  /** The title to display at the top of the wrapper. */
-  title: string;
-  /** An array of nav items to show. */
-  navItems: Array<NavMenuItem>;
-  /** Any extra elements to add to the header. */
-  headerElements?: ReactNode;
-  /** Children to display within the wrapper. */
-  children: ReactNode;
-}
-/** Renders a collapsable drawer to help with navigation. Best used as the main means of navigation on desktop apps. */
-declare function NavigationDrawer({
-  title,
-  navItems,
-  children,
-  headerElements
-}: NavigationDrawerProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/Page.d.ts
 interface PageProps {
   /** The Page title to show */
@@ -463,24 +396,6 @@ declare function SkeletonRow({
   columns
 }: SkeletonRowProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/SubmitButton.d.ts
-interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
-  /** An option to disable the button on submit if the form is not dirty. */
-  disableClean?: boolean;
-  /** The label for the button. */
-  label: string;
-}
-/**
- * A Submit Button for use with `react-hook-form`.
- *
- * Note that this is planned to eventually be deprecated and replaced with a newer version of `SubmitButton` that is instead compatible with `@tanstack/react-form`.
- */
-declare function SubmitButton({
-  disableClean,
-  label,
-  ...buttonProps
-}: SubmitButtonProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/SwitchWithIcons.d.ts
 interface SwitchWithIconsProps extends Omit<SwitchProps, "icon" | "checkedIcon"> {
   /** The icon to show when the switch is in a checked state. */
@@ -629,6 +544,42 @@ declare function DropdownMenuExternalLink({
   ...menuItemProps
 }: DropdownMenuExternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/InternalLink.d.ts
+interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
+  /** The path to navigate to */
+  to: `/${string}` | `~/${string}` | (string & {});
+  /**
+   * An optional component to provide to override the current component.
+   *
+   * Note that the provided component must:
+   * - accept a `to` prop
+   * - correctly handle the forwarded `ref`
+   * - render a valid anchor element (or equivalent) for proper accessibility
+   */
+  component?: ElementType;
+  href?: never;
+  /** The readable content to display on the link. */
+  children: ReactNode;
+  /** An optional ref to allow it to be used with polymorphic components. */
+  ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * A stylised link for navigating within your application.
+ *
+ * Uses the app router for client-side navigation and opens the destination in the same tab.
+ *
+ * Defaults to a React Router implementation but can be overridden via the `component` prop.
+ *
+ * @deprecated This component is not compatible with the rest of the Wouter setup for use in v7. Please use `InternalLink` from `@alextheman/components/v7` instead. This component will be replaced when v7 officially comes out.
+ */
+declare function InternalLink({
+  to,
+  component,
+  children,
+  ref,
+  ...linkProps
+}: InternalLinkProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/deprecated/DropdownMenuInternalLink.d.ts
 interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
   ref?: Ref<HTMLAnchorElement>;
@@ -684,6 +635,43 @@ declare function ListItemInternalLink({
   ...listItemButtonProps
 }: ListItemInternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/NavigationDrawer.d.ts
+interface NavMenuItemOptions {
+  /** The label to display on the nav item option. */
+  label: string;
+  /** Where in your app the nav item option should navigate to. */
+  to: string;
+  /** An icon to display alongside the nav item option. */
+  icon?: ReactNode;
+}
+interface NavMenuItem {
+  /** The category to display all the nav item options under. */
+  category: string;
+  /** An array of nav options to display under the chosen category. */
+  options: Array<NavMenuItemOptions>;
+}
+interface NavigationDrawerProps {
+  /** The title to display at the top of the wrapper. */
+  title: string;
+  /** An array of nav items to show. */
+  navItems: Array<NavMenuItem>;
+  /** Any extra elements to add to the header. */
+  headerElements?: ReactNode;
+  /** Children to display within the wrapper. */
+  children: ReactNode;
+}
+/**
+ * Renders a collapsable drawer to help with navigation. Best used as the main means of navigation on desktop apps.
+ *
+ * @deprecated This component is not compatible with the rest of the Wouter setup for use in v7. Please use `NavigationDrawer` from `@alextheman/components/v7` instead. This component will be replaced when v7 officially comes out.
+ */
+declare function NavigationDrawer({
+  title,
+  navItems,
+  children,
+  headerElements
+}: NavigationDrawerProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/deprecated/PopoverText.d.ts
 interface PopoverTextProps extends TypographyProps {
   text: string;
@@ -697,6 +685,24 @@ declare function PopoverText({
   ...typographyProps
 }: PopoverTextProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/SubmitButton.d.ts
+interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
+  /** An option to disable the button on submit if the form is not dirty. */
+  disableClean?: boolean;
+  /** The label for the button. */
+  label: string;
+}
+/**
+ * A Submit Button for use with `react-hook-form`.
+ *
+ * @deprecated This component is not compatible with `@tanstack/react-form`. Please use `SubmitButton` from the `@alextheman/components/v7` entrypoint instead. This component will be replaced when v7 officially comes out.
+ */
+declare function SubmitButton({
+  disableClean,
+  label,
+  ...buttonProps
+}: SubmitButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/hooks/useHash.d.ts
 /**
  * Stores changes to the window hash as React state.

package/dist/index.d.ts

@@ -9,9 +9,9 @@ import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import { AlertColor } from "@mui/material/Alert";
 import { SwitchProps } from "@mui/material/Switch";
-import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { LiveProvider } from "react-live";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
@@ -138,40 +138,6 @@ declare function FileInputList({
   ...fileInputProps
 }: FileInputListProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/InternalLink.d.ts
-interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
-  /** The path to navigate to */
-  to: `/${string}` | `~/${string}` | (string & {});
-  /**
-   * An optional component to provide to override the current component.
-   *
-   * Note that the provided component must:
-   * - accept a `to` prop
-   * - correctly handle the forwarded `ref`
-   * - render a valid anchor element (or equivalent) for proper accessibility
-   */
-  component?: ElementType;
-  href?: never;
-  /** The readable content to display on the link. */
-  children: ReactNode;
-  /** An optional ref to allow it to be used with polymorphic components. */
-  ref?: Ref<HTMLAnchorElement>;
-}
-/**
- * A stylised link for navigating within your application.
- *
- * Uses the app router for client-side navigation and opens the destination in the same tab.
- *
- * Defaults to a React Router implementation but can be overridden via the `component` prop.
- */
-declare function InternalLink({
-  to,
-  component,
-  children,
-  ref,
-  ...linkProps
-}: InternalLinkProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/types/ContextHookOptions.d.ts
 interface ContextHookOptions<Strict extends boolean = true> {
   /** Error if the context is missing if this is set to true. */
@@ -389,39 +355,6 @@ declare function NavigationBottom({
   navItems
 }: NavigationBottomProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/NavigationDrawer.d.ts
-interface NavMenuItemOptions {
-  /** The label to display on the nav item option. */
-  label: string;
-  /** Where in your app the nav item option should navigate to. */
-  to: string;
-  /** An icon to display alongside the nav item option. */
-  icon?: ReactNode;
-}
-interface NavMenuItem {
-  /** The category to display all the nav item options under. */
-  category: string;
-  /** An array of nav options to display under the chosen category. */
-  options: Array<NavMenuItemOptions>;
-}
-interface NavigationDrawerProps {
-  /** The title to display at the top of the wrapper. */
-  title: string;
-  /** An array of nav items to show. */
-  navItems: Array<NavMenuItem>;
-  /** Any extra elements to add to the header. */
-  headerElements?: ReactNode;
-  /** Children to display within the wrapper. */
-  children: ReactNode;
-}
-/** Renders a collapsable drawer to help with navigation. Best used as the main means of navigation on desktop apps. */
-declare function NavigationDrawer({
-  title,
-  navItems,
-  children,
-  headerElements
-}: NavigationDrawerProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/Page.d.ts
 interface PageProps {
   /** The Page title to show */
@@ -463,24 +396,6 @@ declare function SkeletonRow({
   columns
 }: SkeletonRowProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/SubmitButton.d.ts
-interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
-  /** An option to disable the button on submit if the form is not dirty. */
-  disableClean?: boolean;
-  /** The label for the button. */
-  label: string;
-}
-/**
- * A Submit Button for use with `react-hook-form`.
- *
- * Note that this is planned to eventually be deprecated and replaced with a newer version of `SubmitButton` that is instead compatible with `@tanstack/react-form`.
- */
-declare function SubmitButton({
-  disableClean,
-  label,
-  ...buttonProps
-}: SubmitButtonProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/SwitchWithIcons.d.ts
 interface SwitchWithIconsProps extends Omit<SwitchProps, "icon" | "checkedIcon"> {
   /** The icon to show when the switch is in a checked state. */
@@ -629,6 +544,42 @@ declare function DropdownMenuExternalLink({
   ...menuItemProps
 }: DropdownMenuExternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/InternalLink.d.ts
+interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
+  /** The path to navigate to */
+  to: `/${string}` | `~/${string}` | (string & {});
+  /**
+   * An optional component to provide to override the current component.
+   *
+   * Note that the provided component must:
+   * - accept a `to` prop
+   * - correctly handle the forwarded `ref`
+   * - render a valid anchor element (or equivalent) for proper accessibility
+   */
+  component?: ElementType;
+  href?: never;
+  /** The readable content to display on the link. */
+  children: ReactNode;
+  /** An optional ref to allow it to be used with polymorphic components. */
+  ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * A stylised link for navigating within your application.
+ *
+ * Uses the app router for client-side navigation and opens the destination in the same tab.
+ *
+ * Defaults to a React Router implementation but can be overridden via the `component` prop.
+ *
+ * @deprecated This component is not compatible with the rest of the Wouter setup for use in v7. Please use `InternalLink` from `@alextheman/components/v7` instead. This component will be replaced when v7 officially comes out.
+ */
+declare function InternalLink({
+  to,
+  component,
+  children,
+  ref,
+  ...linkProps
+}: InternalLinkProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/deprecated/DropdownMenuInternalLink.d.ts
 interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
   ref?: Ref<HTMLAnchorElement>;
@@ -684,6 +635,43 @@ declare function ListItemInternalLink({
   ...listItemButtonProps
 }: ListItemInternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/NavigationDrawer.d.ts
+interface NavMenuItemOptions {
+  /** The label to display on the nav item option. */
+  label: string;
+  /** Where in your app the nav item option should navigate to. */
+  to: string;
+  /** An icon to display alongside the nav item option. */
+  icon?: ReactNode;
+}
+interface NavMenuItem {
+  /** The category to display all the nav item options under. */
+  category: string;
+  /** An array of nav options to display under the chosen category. */
+  options: Array<NavMenuItemOptions>;
+}
+interface NavigationDrawerProps {
+  /** The title to display at the top of the wrapper. */
+  title: string;
+  /** An array of nav items to show. */
+  navItems: Array<NavMenuItem>;
+  /** Any extra elements to add to the header. */
+  headerElements?: ReactNode;
+  /** Children to display within the wrapper. */
+  children: ReactNode;
+}
+/**
+ * Renders a collapsable drawer to help with navigation. Best used as the main means of navigation on desktop apps.
+ *
+ * @deprecated This component is not compatible with the rest of the Wouter setup for use in v7. Please use `NavigationDrawer` from `@alextheman/components/v7` instead. This component will be replaced when v7 officially comes out.
+ */
+declare function NavigationDrawer({
+  title,
+  navItems,
+  children,
+  headerElements
+}: NavigationDrawerProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/deprecated/PopoverText.d.ts
 interface PopoverTextProps extends TypographyProps {
   text: string;
@@ -697,6 +685,24 @@ declare function PopoverText({
   ...typographyProps
 }: PopoverTextProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/SubmitButton.d.ts
+interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
+  /** An option to disable the button on submit if the form is not dirty. */
+  disableClean?: boolean;
+  /** The label for the button. */
+  label: string;
+}
+/**
+ * A Submit Button for use with `react-hook-form`.
+ *
+ * @deprecated This component is not compatible with `@tanstack/react-form`. Please use `SubmitButton` from the `@alextheman/components/v7` entrypoint instead. This component will be replaced when v7 officially comes out.
+ */
+declare function SubmitButton({
+  disableClean,
+  label,
+  ...buttonProps
+}: SubmitButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/hooks/useHash.d.ts
 /**
  * Stores changes to the window hash as React state.

package/dist/index.js

@@ -1,3 +1,3 @@
-import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as x,MdArrowDropUp as S,MdChevronLeft as te,MdChevronRight as ne,MdCloudUpload as re,MdDelete as ie,MdMenu as ae,MdOutlineDarkMode as oe,MdOutlineLightMode as se,MdVisibility as ce}from"react-icons/md";import C from"@mui/material/Link";import w from"@mui/material/Button";import{ThemeProvider as le,createTheme as ue,styled as T,useTheme as de}from"@mui/material/styles";import E from"@mui/material/IconButton";import D from"@mui/material/List";import O from"@mui/material/ListItem";import k from"@mui/material/ListItemText";import{Link as A,useLocation as fe}from"react-router-dom";import j from"@mui/material/CircularProgress";import{DataError as M,fillArray as pe,truncate as N,wait as me}from"@alextheman/utility";import P from"@mui/material/Alert";import F from"@mui/material/CssBaseline";import he from"@mui/material/Snackbar";import ge from"@mui/material/Tooltip";import _e from"@mui/material/Switch";import ve from"@mui/material/BottomNavigation";import ye from"@mui/material/BottomNavigationAction";import be from"@mui/material/Paper";import xe from"@mui/material/AppBar";import Se from"@mui/material/Drawer";import I from"@mui/material/ListItemButton";import Ce from"@mui/material/ListItemIcon";import we from"@mui/material/Toolbar";import{stripIndent as Te}from"common-tags";import{LiveEditor as Ee,LiveError as De,LivePreview as Oe,LiveProvider as ke}from"react-live";import Ae from"@mui/material/Skeleton";import je from"@mui/material/TableCell";import Me from"@mui/material/TableRow";import{useFormContext as Ne}from"react-hook-form";import L from"@mui/material/Menu";import R from"@mui/material/MenuItem";import{createFormHookContexts as Pe}from"@tanstack/react-form";import"@mui/material/TextField";import Fe from"@mui/material/Popover";function z({containerLabel:e,chipLabels:r}){return l(t,{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:u(n,{children:[l(s,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),l(o,{spacing:1,children:r.map(e=>l(i,{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 Ie(){return l(e,{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 u(t,{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:[l(r,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),l(a,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),l(n,{sx:{flex:1,display:`flex`,alignItems:`center`},children:u(o,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[l(z,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Ie,{}),l(z,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Re({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(S,{}),closedIcon:m=l(x,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g]),u(e,{children:[u(s,{onClick:()=>{v(e=>!e)},sx:h?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===d?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":g,children:[o,g?p:m]}),l(f,{in:g,...c,children:i})]})}function B({href:e,children:t,ref:n,...r}){return l(C,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const ze={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`},Be=T(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Ve=T(`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 V({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(w,{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??l(re,{}),children:[t,l(Be,{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?l(Ve,{$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:d}):d}function He({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(V,{...i,multiple:r,onFileInput:a}),l(D,{children:t.map(e=>l(O,{secondaryAction:l(E,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(k,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function H({to:e,component:t=A,children:n,ref:r,...i}){return l(C,{component:t,to:e,ref:r,...i,children:n})}const U=m(void 0);function W({strict:e=!0}={}){let t=g(U);if(e&&!t)throw new M({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the LoaderProvider context. Please double-check that it is present.`);return t}function Ue({children:e,loadingComponent:t=l(j,{}),...n}){return l(U.Provider,{value:{loadingComponent:t,...n},children:e})}function G({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=W(),u=t??a;return r?l(c,{children:n??o}):s||i==null?l(c,{}):u?typeof e==`function`?l(c,{children:e(u(i))}):l(c,{children:e}):typeof e==`function`?l(c,{children:e(i)}):l(c,{children:e})}function K({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=W(),f=i??d,p=ee(!1),m=e??u;return s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(P,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(f&&!p.current&&(console.error(`Data is nullable after loading.`),p.current=!0),l(c,{children:r})):o===void 0&&(f&&!p.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),p.current=!0),t)?l(c,{children:t}):o===null&&(f&&!p.current&&(console.error(`Data is null after loading.`),p.current=!0),n)?l(c,{children:n}):l(P,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var q=Ue;const J=m({toggleMode:()=>{},mode:`dark`});function Y({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new M({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function We({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>ue({palette:{mode:n}}),[n]);return l(J.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(le,{theme:i,children:[l(F,{}),e]})})}const X=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ge({strict:e=!0}={}){let t=g(X);if(e&&!t)throw new M({strict:e,context:t},`SCREEN_SIZE_PROVIDER_NOT_FOUND`,`Could not find the ScreenSizeProvider context. Please double-check that it is present.`);return t}function Ke({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=b(window.innerWidth),[a,o]=b(window.innerHeight);_(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=y(()=>r>t&&a>n,[r,a,t,n]);return l(X.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Z=m(void 0);function qe({strict:e=!0}={}){let t=g(Z);if(e&&!t)throw new M({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Je({children:e,autoHideDuration:t=5e3}){let[n,r]=b(!1),[i,a]=b(t),[o,s]=b(``),[c,d]=b(`info`);function f(e,n,i){r(!0),a(i??t),d(n??`info`),s(e)}async function p(){r(!1),await me(.2),s(``)}return u(Z.Provider,{value:{addSnackbar:f},children:[l(he,{open:n,autoHideDuration:i,onClose:p,children:l(P,{onClose:p,severity:c,children:o})}),e]})}function Ye({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(j,{}),...s}){return u(q,{loadingComponent:o,...s,children:[l(K,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(G,{children:e})]})}const Xe=T(_e)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Ze({checkedIcon:t,checkedIconStyles:n,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return l(Xe,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function Qe(){let{mode:e,toggleMode:t}=Y(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ge,{title:r,children:l(Ze,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function $e({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(be,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(ve,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(ye,{...e,component:A},e.value))})})]})}function et(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function tt(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 nt=T(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),rt=T(xe,{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})}}]})),it=T(Se,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...et(e),"& .MuiDrawer-paper":et(e)}},{props:({open:e})=>!e,style:{...tt(e),"& .MuiDrawer-paper":tt(e)}}]}));function at({title:t,navItems:n,children:r,headerElements:i}){let o=de(),[c,d]=b(!0),f=fe();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(F,{}),l(rt,{position:`fixed`,open:c,children:u(we,{children:[l(E,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(ae,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(it,{variant:`permanent`,open:c,children:[l(nt,{children:l(E,{onClick:h,children:o.direction===`rtl`?l(ne,{}):l(te,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(D,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:N(e.category,4)}),e.options.map(e=>l(O,{disablePadding:!0,sx:{display:`block`},children:u(I,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:A,to:e.to,selected:f.pathname===e.to,children:[l(Ce,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:N(e.label,4)})}),l(k,{primary:e.label,sx:[c?{opacity:1}:{opacity:0}]})]})},e.to))]}),l(a,{})]},e.category))]}),u(e,{component:`main`,sx:{flexGrow:1,p:3},children:[l(nt,{}),r]})]})}function ot({title:e,subtitle:i,action:o,children:d}){return u(t,{children:[l(r,{title:u(c,{children:[l(s,{variant:`h6`,children:e}),i?l(s,{variant:`body2`,color:`text.secondary`,children:i}):null]}),action:o}),l(a,{}),l(n,{children:d})]})}function st({code:t,previewStyles:n,...r}){let{mode:i}=Y(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=n?{...a,...n}:{...a};return l(e,{sx:{borderRadius:1,border:.5,padding:2},children:u(ke,{...r,code:Te(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Ee,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Oe,{}),l(De,{})]})]})})}function ct({columns:e}){return l(Me,{children:pe(e=>l(je,{children:l(Ae,{})},e),e)})}function lt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ne();return l(w,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}const ut=Qe;function dt({children:t,button:n=w,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(S,{}),isClosedIcon:o=l(x,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===w&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(L,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const ft=m(void 0);function Q({strict:e=!0}={}){let t=g(ft);if(e&&!t)throw new M({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function pt({children:e,button:t=w,buttonProps:n,openIcon:r=l(S,{}),closedIcon:i=l(x,{})}){let[a,o]=b(null),s=y(()=>!!a,[a]);function c(){o(null)}return u(ft.Provider,{value:{closeMenu:c,isDropdownOpen:s},children:[l(t,{"aria-controls":s?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":s,endIcon:s?r:i,...n,onClick:e=>{e.defaultPrevented||o(e.currentTarget),n?.onClick&&n?.onClick(e)}}),l(L,{anchorEl:a,open:s,onClose:c,children:e})]})}function mt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(R,{component:e,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ht=pt;const{fieldContext:gt,formContext:_t,useFieldContext:vt,useFormContext:yt}=Pe(),$=Q,bt=ht,xt=mt;var St=bt;function Ct({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=$();return l(R,{component:B,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function wt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=$();return l(R,{component:H,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Tt({icon:t=ce,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(Fe,{id:d,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function Et({children:e,...t}){return l(I,{component:H,...t,children:e})}function Dt({text:e,sx:t,...n}){return l(c,{children:e.split(`
-`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}function Ot(e){let[t,n]=b(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=h(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return _(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,h(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{Le as Artwork,Re as CollapsableItem,ut as DarkModeToggle,dt as DropdownMenu,St as DropdownMenu2,Ct as DropdownMenuExternalLink,wt as DropdownMenuInternalLink,xt as DropdownMenuItem,B as ExternalLink,V as FileInput,He as FileInputList,ze as FileType,Tt as IconWithPopover,H as InternalLink,Et as ListItemInternalLink,Ye as Loader,G as LoaderData,K as LoaderError,q as LoaderProvider,We as ModeProvider,Qe as ModeToggle,$e as NavigationBottom,at as NavigationDrawer,ot as Page,Dt as PopoverText,st as ReactPlayground,Ke as ScreenSizeProvider,ct as SkeletonRow,Je as SnackbarProvider,lt as SubmitButton,Ze as SwitchWithIcons,$ as useDropdownMenu,Ot as useHash,Y as useMode,Ge as useScreenSize,qe as useSnackbar};
+import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as x,MdArrowDropUp as S,MdChevronLeft as te,MdChevronRight as ne,MdCloudUpload as re,MdDelete as ie,MdMenu as ae,MdOutlineDarkMode as oe,MdOutlineLightMode as se,MdVisibility as ce}from"react-icons/md";import le from"@mui/material/Link";import C from"@mui/material/Button";import{ThemeProvider as ue,createTheme as de,styled as w,useTheme as fe}from"@mui/material/styles";import T from"@mui/material/IconButton";import pe from"@mui/material/List";import E from"@mui/material/ListItem";import D from"@mui/material/ListItemText";import O from"@mui/material/CircularProgress";import{DataError as k,fillArray as me,truncate as he,wait as ge}from"@alextheman/utility";import A from"@mui/material/Alert";import j from"@mui/material/CssBaseline";import _e from"@mui/material/Snackbar";import ve from"@mui/material/Tooltip";import ye from"@mui/material/Switch";import be from"@mui/material/BottomNavigation";import xe from"@mui/material/BottomNavigationAction";import Se from"@mui/material/Paper";import{Link as M,useLocation as Ce}from"react-router-dom";import{stripIndent as we}from"common-tags";import{LiveEditor as Te,LiveError as Ee,LivePreview as De,LiveProvider as Oe}from"react-live";import ke from"@mui/material/Skeleton";import Ae from"@mui/material/TableCell";import je from"@mui/material/TableRow";import N from"@mui/material/Menu";import P from"@mui/material/MenuItem";import F from"@mui/material/AppBar";import I from"@mui/material/Drawer";import L from"@mui/material/ListItemButton";import Me from"@mui/material/ListItemIcon";import Ne from"@mui/material/Toolbar";import"wouter";import"@mui/material/AlertTitle";import"@mui/material/Container";import"wouter/memory-location";import"wouter/use-browser-location";import{createFormHookContexts as Pe}from"@tanstack/react-form";import"@mui/material/TextField";import Fe from"@mui/material/Popover";import{useFormContext as Ie}from"react-hook-form";function R({containerLabel:e,chipLabels:r}){return l(t,{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:u(n,{children:[l(s,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),l(o,{spacing:1,children:r.map(e=>l(i,{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 Le(){return l(e,{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 Re(){return u(t,{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:[l(r,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),l(a,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),l(n,{sx:{flex:1,display:`flex`,alignItems:`center`},children:u(o,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[l(R,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Le,{}),l(R,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function ze({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(S,{}),closedIcon:m=l(x,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g]),u(e,{children:[u(s,{onClick:()=>{v(e=>!e)},sx:h?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===d?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":g,children:[o,g?p:m]}),l(f,{in:g,...c,children:i})]})}function z({href:e,children:t,ref:n,...r}){return l(le,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Be={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`},Ve=w(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),He=w(`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 B({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(C,{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??l(re,{}),children:[t,l(Ve,{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?l(He,{$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:d}):d}function Ue({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(B,{...i,multiple:r,onFileInput:a}),l(pe,{children:t.map(e=>l(E,{secondaryAction:l(T,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(D,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const V=m(void 0);function H({strict:e=!0}={}){let t=g(V);if(e&&!t)throw new k({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the LoaderProvider context. Please double-check that it is present.`);return t}function We({children:e,loadingComponent:t=l(O,{}),...n}){return l(V.Provider,{value:{loadingComponent:t,...n},children:e})}function U({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=H(),u=t??a;return r?l(c,{children:n??o}):s||i==null?l(c,{}):u?typeof e==`function`?l(c,{children:e(u(i))}):l(c,{children:e}):typeof e==`function`?l(c,{children:e(i)}):l(c,{children:e})}function W({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=H(),f=i??d,p=ee(!1),m=e??u;return s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(A,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(f&&!p.current&&(console.error(`Data is nullable after loading.`),p.current=!0),l(c,{children:r})):o===void 0&&(f&&!p.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),p.current=!0),t)?l(c,{children:t}):o===null&&(f&&!p.current&&(console.error(`Data is null after loading.`),p.current=!0),n)?l(c,{children:n}):l(A,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var G=We;const K=m({toggleMode:()=>{},mode:`dark`});function q({strict:e=!0}={}){let t=g(K);if(e&&!t)throw new k({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function Ge({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>de({palette:{mode:n}}),[n]);return l(K.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ue,{theme:i,children:[l(j,{}),e]})})}const J=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ke({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new k({strict:e,context:t},`SCREEN_SIZE_PROVIDER_NOT_FOUND`,`Could not find the ScreenSizeProvider context. Please double-check that it is present.`);return t}function qe({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=b(window.innerWidth),[a,o]=b(window.innerHeight);_(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=y(()=>r>t&&a>n,[r,a,t,n]);return l(J.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Y=m(void 0);function Je({strict:e=!0}={}){let t=g(Y);if(e&&!t)throw new k({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Ye({children:e,autoHideDuration:t=5e3}){let[n,r]=b(!1),[i,a]=b(t),[o,s]=b(``),[c,d]=b(`info`);function f(e,n,i){r(!0),a(i??t),d(n??`info`),s(e)}async function p(){r(!1),await ge(.2),s(``)}return u(Y.Provider,{value:{addSnackbar:f},children:[l(_e,{open:n,autoHideDuration:i,onClose:p,children:l(A,{onClose:p,severity:c,children:o})}),e]})}function Xe({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(O,{}),...s}){return u(G,{loadingComponent:o,...s,children:[l(W,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(U,{children:e})]})}const Ze=w(ye)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function X({checkedIcon:t,checkedIconStyles:n,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return l(Ze,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function Z(){let{mode:e,toggleMode:t}=q(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ve,{title:r,children:l(X,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function Qe({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Se,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(be,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(xe,{...e,component:M},e.value))})})]})}function $e({title:e,subtitle:i,action:o,children:d}){return u(t,{children:[l(r,{title:u(c,{children:[l(s,{variant:`h6`,children:e}),i?l(s,{variant:`body2`,color:`text.secondary`,children:i}):null]}),action:o}),l(a,{}),l(n,{children:d})]})}function et({code:t,previewStyles:n,...r}){let{mode:i}=q(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=n?{...a,...n}:{...a};return l(e,{sx:{borderRadius:1,border:.5,padding:2},children:u(Oe,{...r,code:we(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Te,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(De,{}),l(Ee,{})]})]})})}function tt({columns:e}){return l(je,{children:me(e=>l(Ae,{children:l(ke,{})},e),e)})}const nt=Z;function rt({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(S,{}),isClosedIcon:o=l(x,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===C&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(N,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const it=m(void 0);function at({strict:e=!0}={}){let t=g(it);if(e&&!t)throw new k({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function ot({children:e,button:t=C,buttonProps:n,openIcon:r=l(S,{}),closedIcon:i=l(x,{})}){let[a,o]=b(null),s=y(()=>!!a,[a]);function c(){o(null)}return u(it.Provider,{value:{closeMenu:c,isDropdownOpen:s},children:[l(t,{"aria-controls":s?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":s,endIcon:s?r:i,...n,onClick:e=>{e.defaultPrevented||o(e.currentTarget),n?.onClick&&n?.onClick(e)}}),l(N,{anchorEl:a,open:s,onClose:c,children:e})]})}function st({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=at();return l(P,{component:e,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ct=ot;function lt(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ut(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)`}}}w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),w(F,{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})}}]})),w(I,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...lt(e),"& .MuiDrawer-paper":lt(e)}},{props:({open:e})=>!e,style:{...ut(e),"& .MuiDrawer-paper":ut(e)}}]}));const{fieldContext:dt,formContext:ft,useFieldContext:pt,useFormContext:mt}=Pe(),Q=at,ht=ct,gt=st;var _t=ht;function vt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(P,{component:z,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=M,children:n,ref:r,...i}){return l(le,{component:t,to:e,ref:r,...i,children:n})}function yt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(P,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function bt({icon:t=ce,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(Fe,{id:d,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function xt({children:e,...t}){return l(L,{component:$,...t,children:e})}function St(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Ct(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 wt=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Tt=w(F,{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})}}]})),Et=w(I,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...St(e),"& .MuiDrawer-paper":St(e)}},{props:({open:e})=>!e,style:{...Ct(e),"& .MuiDrawer-paper":Ct(e)}}]}));function Dt({title:t,navItems:n,children:r,headerElements:i}){let o=fe(),[c,d]=b(!0),f=Ce();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(j,{}),l(Tt,{position:`fixed`,open:c,children:u(Ne,{children:[l(T,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(ae,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(Et,{variant:`permanent`,open:c,children:[l(wt,{children:l(T,{onClick:h,children:o.direction===`rtl`?l(ne,{}):l(te,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(pe,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:he(e.category,4)}),e.options.map(e=>l(E,{disablePadding:!0,sx:{display:`block`},children:u(L,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:M,to:e.to,selected:f.pathname===e.to,children:[l(Me,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:he(e.label,4)})}),l(D,{primary:e.label,sx:[c?{opacity:1}:{opacity:0}]})]})},e.to))]}),l(a,{})]},e.category))]}),u(e,{component:`main`,sx:{flexGrow:1,p:3},children:[l(wt,{}),r]})]})}function Ot({text:e,sx:t,...n}){return l(c,{children:e.split(`
+`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}function kt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ie();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function At(e){let[t,n]=b(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=h(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return _(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,h(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{Re as Artwork,ze as CollapsableItem,nt as DarkModeToggle,rt as DropdownMenu,_t as DropdownMenu2,vt as DropdownMenuExternalLink,yt as DropdownMenuInternalLink,gt as DropdownMenuItem,z as ExternalLink,B as FileInput,Ue as FileInputList,Be as FileType,bt as IconWithPopover,$ as InternalLink,xt as ListItemInternalLink,Xe as Loader,U as LoaderData,W as LoaderError,G as LoaderProvider,Ge as ModeProvider,Z as ModeToggle,Qe as NavigationBottom,Dt as NavigationDrawer,$e as Page,Ot as PopoverText,et as ReactPlayground,qe as ScreenSizeProvider,tt as SkeletonRow,Ye as SnackbarProvider,kt as SubmitButton,X as SwitchWithIcons,Q as useDropdownMenu,At as useHash,q as useMode,Ke as useScreenSize,Je as useSnackbar};
 //# sourceMappingURL=index.js.map