@alextheman/components 6.14.0 → 6.15.1

package/dist/index.d.cts

@@ -253,14 +253,14 @@ declare function QueryBoundaryProvider<DataType>({
 }: QueryBoundaryProviderProps<DataType>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/QueryBoundaryProvider/QueryBoundaryData.d.ts
-interface QueryBoundaryDataProps<T> {
+interface QueryBoundaryDataProps<DataType> {
   /**
    * The elements to show after data has been loaded.
    * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
    */
-  children: ReactNode | ((data: NonNullable<T>) => ReactNode);
+  children: ReactNode | ((data: NonNullable<DataType>) => ReactNode);
   /** A parser for the data. */
-  dataParser?: (data: unknown) => NonNullable<T>;
+  dataParser?: (data: unknown) => NonNullable<DataType>;
   /** The component to show when the data is being fetched. */
   loadingComponent?: ReactNode;
 }
@@ -273,7 +273,7 @@ declare function QueryBoundaryData<DataType>({
   children,
   dataParser: loaderDataParser,
   loadingComponent
-}: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element;
+}: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/providers/QueryBoundaryProvider/QueryBoundaryError.d.ts
 interface QueryBoundaryErrorBaseProps {
@@ -357,7 +357,7 @@ declare function SnackbarProvider({
 }: SnackbarProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/QueryBoundary.d.ts
-type QueryBoundaryProps<DataType> = Omit<QueryBoundaryProviderProps<DataType>, "children" | "logError"> & Omit<QueryBoundaryErrorProps, "errorComponent" | "children"> & Omit<QueryBoundaryDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
+type QueryBoundaryProps<DataType> = Omit<QueryBoundaryProviderProps<DataType>, "children" | "logError"> & Omit<QueryBoundaryErrorProps, "children"> & Omit<QueryBoundaryDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
 /**
  * An in-line component that deals with state management when fetching data from an API.
  * This may be used over QueryBoundaryProvider if you don't require as much control over the placement of the error message and data display.
@@ -630,6 +630,10 @@ declare function ListItemInternalLink({
   ...listItemButtonProps
 }: ListItemInternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/Loader.d.ts
+/** @deprecated This component has been renamed to QueryBoundary */
+declare const Loader: typeof QueryBoundary;
+//#endregion
 //#region src/deprecated/LoaderData.d.ts
 /** @deprecated This type has been renamed to QueryBoundaryDataProps. */
 type LoaderDataProps<DataType> = QueryBoundaryDataProps<DataType>;
@@ -742,5 +746,5 @@ declare function SubmitButton({
  */
 declare function useHash<StateType extends string>(initialHash: StateType | undefined): [StateType, Dispatch<SetStateAction<StateType>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, QueryBoundary, QueryBoundaryData, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
+export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, Loader, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, QueryBoundary, QueryBoundaryData, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { CollapseProps } from "@mui/material/Collapse";
 import * as _$react from "react";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import { LinkProps } from "@mui/material/Link";
-import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
+import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import { SwitchProps } from "@mui/material/Switch";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
@@ -253,14 +253,14 @@ declare function QueryBoundaryProvider<DataType>({
 }: QueryBoundaryProviderProps<DataType>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/QueryBoundaryProvider/QueryBoundaryData.d.ts
-interface QueryBoundaryDataProps<T> {
+interface QueryBoundaryDataProps<DataType> {
   /**
    * The elements to show after data has been loaded.
    * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
    */
-  children: ReactNode | ((data: NonNullable<T>) => ReactNode);
+  children: ReactNode | ((data: NonNullable<DataType>) => ReactNode);
   /** A parser for the data. */
-  dataParser?: (data: unknown) => NonNullable<T>;
+  dataParser?: (data: unknown) => NonNullable<DataType>;
   /** The component to show when the data is being fetched. */
   loadingComponent?: ReactNode;
 }
@@ -273,7 +273,7 @@ declare function QueryBoundaryData<DataType>({
   children,
   dataParser: loaderDataParser,
   loadingComponent
-}: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element;
+}: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/providers/QueryBoundaryProvider/QueryBoundaryError.d.ts
 interface QueryBoundaryErrorBaseProps {
@@ -357,7 +357,7 @@ declare function SnackbarProvider({
 }: SnackbarProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/QueryBoundary.d.ts
-type QueryBoundaryProps<DataType> = Omit<QueryBoundaryProviderProps<DataType>, "children" | "logError"> & Omit<QueryBoundaryErrorProps, "errorComponent" | "children"> & Omit<QueryBoundaryDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
+type QueryBoundaryProps<DataType> = Omit<QueryBoundaryProviderProps<DataType>, "children" | "logError"> & Omit<QueryBoundaryErrorProps, "children"> & Omit<QueryBoundaryDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
 /**
  * An in-line component that deals with state management when fetching data from an API.
  * This may be used over QueryBoundaryProvider if you don't require as much control over the placement of the error message and data display.
@@ -467,7 +467,7 @@ declare function DropdownMenu$1({
 }: DropdownMenuProps$1): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenuItem.d.ts
-type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1> = {
+type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof MUIButton> = {
   /**
    * An optional component to provide to override the current component.
    *
@@ -482,7 +482,7 @@ type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1
   onClick?: ComponentProps<RootComponent>["onClick"];
 } & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
 /** Represents a menu item to be used inside the `DropdownMenu`. It must be used as children of the `DropdownMenu` component. */
-declare function DropdownMenuItem$1<RootComponent extends ElementType = typeof Button$1>({
+declare function DropdownMenuItem$1<RootComponent extends ElementType = typeof MUIButton>({
   component,
   children,
   ref,
@@ -630,6 +630,10 @@ declare function ListItemInternalLink({
   ...listItemButtonProps
 }: ListItemInternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/Loader.d.ts
+/** @deprecated This component has been renamed to QueryBoundary */
+declare const Loader: typeof QueryBoundary;
+//#endregion
 //#region src/deprecated/LoaderData.d.ts
 /** @deprecated This type has been renamed to QueryBoundaryDataProps. */
 type LoaderDataProps<DataType> = QueryBoundaryDataProps<DataType>;
@@ -742,5 +746,5 @@ declare function SubmitButton({
  */
 declare function useHash<StateType extends string>(initialHash: StateType | undefined): [StateType, Dispatch<SetStateAction<StateType>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, QueryBoundary, QueryBoundaryData, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
+export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, Loader, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, QueryBoundary, QueryBoundaryData, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.ts.map

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 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 me from"@mui/material/ListItem";import E from"@mui/material/ListItemText";import he from"@mui/material/Tooltip";import ge from"@mui/material/Switch";import{DataError as D,fillArray as _e,truncate as O,wait as ve}from"@alextheman/utility";import k from"@mui/material/CssBaseline";import ye from"@mui/material/CircularProgress";import A from"@mui/material/Alert";import be from"@mui/material/Snackbar";import xe from"@mui/material/BottomNavigation";import Se from"@mui/material/BottomNavigationAction";import Ce from"@mui/material/Paper";import{Link as j,useLocation as we}from"react-router-dom";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 M from"@mui/material/Menu";import N from"@mui/material/AppBar";import P from"@mui/material/Drawer";import F from"@mui/material/ListItemButton";import Ne from"@mui/material/ListItemIcon";import Pe 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 Fe}from"@tanstack/react-form";import"@mui/material/TextField";import I from"@mui/material/MenuItem";import Ie from"@mui/material/Popover";import{useFormContext as Le}from"react-hook-form";function L({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 Re(){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 ze(){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(L,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Re,{}),l(L,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Be({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 R({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 Ve={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`},He=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}),Ue=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 z({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(He,{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(Ue,{$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 We({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(z,{...i,multiple:r,onFileInput:a}),l(pe,{children:t.map(e=>l(me,{secondaryAction:l(T,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(E,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const Ge=w(ge)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function B({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(Ge,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const V=m({toggleMode:()=>{},mode:`dark`});function H({strict:e=!0}={}){let t=g(V);if(e&&!t)throw new D({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function Ke({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>de({palette:{mode:n}}),[n]);return l(V.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ue,{theme:i,children:[l(k,{}),e]})})}const U=m(void 0);function W({strict:e=!0}={}){let t=g(U);if(e&&!t)throw new D({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function qe({children:e,loadingComponent:t=l(ye,{}),...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(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 QueryBoundaryProvider. 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 q=qe;const J=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Je({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new D({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 Ye({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 Xe({strict:e=!0}={}){let t=g(Y);if(e&&!t)throw new D({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]=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 ve(.2),s(``)}return u(Y.Provider,{value:{addSnackbar:f},children:[l(be,{open:n,autoHideDuration:i,onClose:p,children:l(A,{onClose:p,severity:c,children:o})}),e]})}function X(){let{mode:e,toggleMode:t}=H(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(he,{title:r,children:l(B,{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(Ce,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(xe,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(Se,{...e,component:j},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({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(ye,{}),...s}){return u(q,{loadingComponent:o,...s,children:[l(K,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(G,{children:e})]})}function tt({code:t,previewStyles:n,...r}){let{mode:i}=H(),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 nt({columns:e}){return l(Me,{children:_e(e=>l(je,{children:l(Ae,{})},e),e)})}const rt=X;function it({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(M,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function at(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ot(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(N,{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(P,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...at(e),"& .MuiDrawer-paper":at(e)}},{props:({open:e})=>!e,style:{...ot(e),"& .MuiDrawer-paper":ot(e)}}]}));const{fieldContext:st,formContext:ct,useFieldContext:lt,useFormContext:ut}=Fe(),dt=m(void 0);function Z({strict:e=!0}={}){let t=g(dt);if(e&&!t)throw new D({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function ft({strict:e=!0}={}){return Z({strict:e})}function pt({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=ft();return l(M,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function mt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(I,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,ht=pt,gt=mt;var _t=ht;function vt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(I,{component:R,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=j,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(I,{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(Ie,{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(F,{component:$,...t,children:e})}const St=G,Ct=K,wt=q;function Tt(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Et(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 Dt=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Ot=w(N,{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})}}]})),kt=w(P,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Tt(e),"& .MuiDrawer-paper":Tt(e)}},{props:({open:e})=>!e,style:{...Et(e),"& .MuiDrawer-paper":Et(e)}}]}));function At({title:t,navItems:n,children:r,headerElements:i}){let o=fe(),[c,d]=b(!0),f=we();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(k,{}),l(Ot,{position:`fixed`,open:c,children:u(Pe,{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(kt,{variant:`permanent`,open:c,children:[l(Dt,{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`,sx:{paddingLeft:c?2:1},children:c?e.category:O(e.category,4)}),e.options.map(e=>l(me,{disablePadding:!0,sx:{display:`block`},children:u(F,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:j,to:e.to,selected:f.pathname===e.to,children:[l(Ne,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:O(e.label,4)})}),l(E,{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(Dt,{}),r]})]})}function jt({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 Mt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Le();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function Nt(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{ze as Artwork,Be as CollapsableItem,rt as DarkModeToggle,it as DropdownMenu,_t as DropdownMenu2,vt as DropdownMenuExternalLink,yt as DropdownMenuInternalLink,gt as DropdownMenuItem,R as ExternalLink,z as FileInput,We as FileInputList,Ve as FileType,bt as IconWithPopover,$ as InternalLink,xt as ListItemInternalLink,St as LoaderData,Ct as LoaderError,wt as LoaderProvider,Ke as ModeProvider,X as ModeToggle,Qe as NavigationBottom,At as NavigationDrawer,$e as Page,jt as PopoverText,et as QueryBoundary,G as QueryBoundaryData,K as QueryBoundaryError,q as QueryBoundaryProvider,tt as ReactPlayground,Ye as ScreenSizeProvider,nt as SkeletonRow,Ze as SnackbarProvider,Mt as SubmitButton,B as SwitchWithIcons,Q as useDropdownMenu,Nt as useHash,H as useMode,Je as useScreenSize,Xe 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 te,MdChevronLeft as ne,MdChevronRight as re,MdCloudUpload as ie,MdDelete as ae,MdMenu as oe,MdOutlineDarkMode as se,MdOutlineLightMode as ce,MdVisibility as le}from"react-icons/md";import ue from"@mui/material/Link";import S from"@mui/material/Button";import{ThemeProvider as de,createTheme as fe,styled as C,useTheme as pe}from"@mui/material/styles";import w from"@mui/material/IconButton";import T from"@mui/material/List";import E from"@mui/material/ListItem";import D from"@mui/material/ListItemText";import me from"@mui/material/Tooltip";import he from"@mui/material/Switch";import{DataError as O,fillArray as ge,truncate as k,wait as _e}from"@alextheman/utility";import ve from"@mui/material/CssBaseline";import ye from"@mui/material/CircularProgress";import A from"@mui/material/Alert";import be from"@mui/material/Snackbar";import xe from"@mui/material/BottomNavigation";import Se from"@mui/material/BottomNavigationAction";import Ce from"@mui/material/Paper";import{Link as j,useLocation as we}from"react-router-dom";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 Ne from"@mui/material/Menu";import M from"@mui/material/AppBar";import N from"@mui/material/Drawer";import P from"@mui/material/ListItemButton";import Pe from"@mui/material/ListItemIcon";import Fe 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 Ie}from"@tanstack/react-form";import"@mui/material/TextField";import F from"@mui/material/MenuItem";import Le from"@mui/material/Popover";import{useFormContext as Re}from"react-hook-form";function I({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 ze(){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 Be(){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(I,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(ze,{}),l(I,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Ve({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(te,{}),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 L({href:e,children:t,ref:n,...r}){return l(ue,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const He={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`},Ue=C(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),We=C(`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 R({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(S,{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(ie,{}),children:[t,l(Ue,{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(We,{$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 Ge({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(R,{...i,multiple:r,onFileInput:a}),l(T,{children:t.map(e=>l(E,{secondaryAction:l(w,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ae,{})}),children:l(D,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const Ke=C(he)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function z({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(Ke,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const B=m({toggleMode:()=>{},mode:`dark`});function V({strict:e=!0}={}){let t=g(B);if(e&&!t)throw new O({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function qe({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>fe({palette:{mode:n}}),[n]);return l(B.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(de,{theme:i,children:[l(ve,{}),e]})})}const H=m(void 0);function U({strict:e=!0}={}){let t=g(H);if(e&&!t)throw new O({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function Je({children:e,loadingComponent:t=l(ye,{}),...n}){return l(H.Provider,{value:{loadingComponent:t,...n},children:e})}function W({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=U(),u=t??a;return r?l(c,{children:n??o}):s||i==null?null: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 G({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=U(),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 QueryBoundaryProvider. 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.`}):null}var K=Je;const q=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ye({strict:e=!0}={}){let t=g(q);if(e&&!t)throw new O({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 Xe({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(q.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const J=m(void 0);function Ze({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new O({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Qe({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 _e(.2),s(``)}return u(J.Provider,{value:{addSnackbar:f},children:[l(be,{open:n,autoHideDuration:i,onClose:p,children:l(A,{onClose:p,severity:c,children:o})}),e]})}function Y(){let{mode:e,toggleMode:t}=V(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(me,{title:r,children:l(z,{uncheckedIcon:ce,checkedIcon:se,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(Ce,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(xe,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(Se,{...e,component:j},e.value))})})]})}function et({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 tt({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(ye,{}),...s}){return u(K,{loadingComponent:o,...s,children:[l(G,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(W,{children:e})]})}function nt({code:t,previewStyles:n,...r}){let{mode:i}=V(),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 rt({columns:e}){return l(Me,{children:ge(e=>l(je,{children:l(Ae,{})},e),e)})}const it=Y;function at({children:t,button:n=S,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(te,{}),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===S&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(Ne,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function ot(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function st(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)`}}}C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),C(M,{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})}}]})),C(N,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...ot(e),"& .MuiDrawer-paper":ot(e)}},{props:({open:e})=>!e,style:{...st(e),"& .MuiDrawer-paper":st(e)}}]}));const{fieldContext:ct,formContext:lt,useFieldContext:ut,useFormContext:dt}=Ie(),ft=m(void 0);function X({strict:e=!0}={}){let t=g(ft);if(e&&!t)throw new O({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({strict:e=!0}={}){return X({strict:e})}function mt({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=pt();return l(Ne,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function ht({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=X();return l(F,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Z=X,gt=mt,_t=ht;var vt=gt;function yt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(F,{component:L,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Q({to:e,component:t=j,children:n,ref:r,...i}){return l(ue,{component:t,to:e,ref:r,...i,children:n})}function bt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(F,{component:Q,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function xt({icon:t=le,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(Le,{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 St({children:e,...t}){return l(P,{component:Q,...t,children:e})}const Ct=tt,wt=W,Tt=G,Et=K;function Dt(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Ot(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 $=C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),kt=C(M,{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})}}]})),At=C(N,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Dt(e),"& .MuiDrawer-paper":Dt(e)}},{props:({open:e})=>!e,style:{...Ot(e),"& .MuiDrawer-paper":Ot(e)}}]}));function jt({title:t,navItems:n,children:r,headerElements:i}){let o=pe(),[c,d]=b(!0),f=we();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(ve,{}),l(kt,{position:`fixed`,open:c,children:u(Fe,{children:[l(w,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(oe,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(At,{variant:`permanent`,open:c,children:[l($,{children:l(w,{onClick:h,children:o.direction===`rtl`?l(re,{}):l(ne,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(T,{children:[l(s,{variant:c?`h5`:`h6`,sx:{paddingLeft:c?2:1},children:c?e.category:k(e.category,4)}),e.options.map(e=>l(E,{disablePadding:!0,sx:{display:`block`},children:u(P,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:j,to:e.to,selected:f.pathname===e.to,children:[l(Pe,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:k(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($,{}),r]})]})}function Mt({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 Nt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Re();return l(S,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function Pt(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{Be as Artwork,Ve as CollapsableItem,it as DarkModeToggle,at as DropdownMenu,vt as DropdownMenu2,yt as DropdownMenuExternalLink,bt as DropdownMenuInternalLink,_t as DropdownMenuItem,L as ExternalLink,R as FileInput,Ge as FileInputList,He as FileType,xt as IconWithPopover,Q as InternalLink,St as ListItemInternalLink,Ct as Loader,wt as LoaderData,Tt as LoaderError,Et as LoaderProvider,qe as ModeProvider,Y as ModeToggle,$e as NavigationBottom,jt as NavigationDrawer,et as Page,Mt as PopoverText,tt as QueryBoundary,W as QueryBoundaryData,G as QueryBoundaryError,K as QueryBoundaryProvider,nt as ReactPlayground,Xe as ScreenSizeProvider,rt as SkeletonRow,Qe as SnackbarProvider,Nt as SubmitButton,z as SwitchWithIcons,Z as useDropdownMenu,Pt as useHash,V as useMode,Ye as useScreenSize,Ze as useSnackbar};
 //# sourceMappingURL=index.js.map