@alextheman/components 6.5.1 → 6.6.1

package/dist/index.d.cts

@@ -66,9 +66,6 @@ declare function CollapsableItem({
   useDefaultStyling
 }: CollapsableItemProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/DarkModeToggle.d.ts
-declare function DarkModeToggle(): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/DropdownMenu.d.ts
 interface DropdownMenuProps {
   children: ReactNode | ((closeMenu: () => void) => ReactNode);
@@ -130,12 +127,18 @@ declare const FileType: {
 };
 type FileType = CreateEnumType<typeof FileType>;
 interface FileInputProps extends ButtonOwnProps {
+  /** A function to run when a file has been uploaded. */
   onFileInput: (allowedFiles: Array<File>) => void;
+  /** The label to display on the input button (defaults to "Upload files") */
   label?: string;
+  /** Whether to accept multiple files or not. */
   multiple?: boolean;
+  /** An array of file types to accept. */
   accept?: Array<string>;
+  /** Enable the dropzone, allowing users to drag and drop files. */
   useDropzone?: boolean;
 }
+/** Handles file inputs. */
 declare function FileInput({
   onFileInput,
   label,
@@ -147,12 +150,16 @@ declare function FileInput({
 //#endregion
 //#region src/components/FileInputList.d.ts
 interface FileInputListProps extends Omit<FileInputProps, "onFileInput"> {
+  /** The array of files (must be a React state). */
   files: Array<File>;
+  /** The state setter for the array of files. */
   setFiles: Dispatch<SetStateAction<Array<File>>>;
 }
+/** Renders the `FileInput` component with a list of uploaded files underneath it. */
 declare function FileInputList({
   files,
   setFiles,
+  multiple,
   ...fileInputProps
 }: FileInputListProps): react_jsx_runtime0.JSX.Element;
 //#endregion
@@ -487,6 +494,10 @@ declare function Loader<DataType>({
   ...loaderProviderProps
 }: LoaderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/ModeToggle.d.ts
+/** A toggle to switch between dark mode and light mode. Must be used in a `ModeProvider`. */
+declare function ModeToggle(): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/NavigationBottom.d.ts
 interface NavItemBottom {
   value: string;
@@ -605,5 +616,5 @@ declare function SwitchWithIcons({
 //#region src/hooks/useHash.d.ts
 declare function useHash<S extends string>(initialHash: S | undefined): [S, Dispatch<SetStateAction<S>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, 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, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, 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, 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,14 +4,14 @@ import { CollapseProps } from "@mui/material/Collapse";
 import * as react from "react";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
+import { LinkProps } from "@mui/material/Link";
+import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
-import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
-import { LinkProps } from "@mui/material/Link";
-import { ListItemButtonProps } from "@mui/material/ListItemButton";
-import { LiveProvider } from "react-live";
 import { SwitchProps } from "@mui/material/Switch";
+import { LiveProvider } from "react-live";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
@@ -66,9 +66,6 @@ declare function CollapsableItem({
   useDefaultStyling
 }: CollapsableItemProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/DarkModeToggle.d.ts
-declare function DarkModeToggle(): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/DropdownMenu.d.ts
 interface DropdownMenuProps {
   children: ReactNode | ((closeMenu: () => void) => ReactNode);
@@ -130,12 +127,18 @@ declare const FileType: {
 };
 type FileType = CreateEnumType<typeof FileType>;
 interface FileInputProps extends ButtonOwnProps {
+  /** A function to run when a file has been uploaded. */
   onFileInput: (allowedFiles: Array<File>) => void;
+  /** The label to display on the input button (defaults to "Upload files") */
   label?: string;
+  /** Whether to accept multiple files or not. */
   multiple?: boolean;
+  /** An array of file types to accept. */
   accept?: Array<string>;
+  /** Enable the dropzone, allowing users to drag and drop files. */
   useDropzone?: boolean;
 }
+/** Handles file inputs. */
 declare function FileInput({
   onFileInput,
   label,
@@ -147,12 +150,16 @@ declare function FileInput({
 //#endregion
 //#region src/components/FileInputList.d.ts
 interface FileInputListProps extends Omit<FileInputProps, "onFileInput"> {
+  /** The array of files (must be a React state). */
   files: Array<File>;
+  /** The state setter for the array of files. */
   setFiles: Dispatch<SetStateAction<Array<File>>>;
 }
+/** Renders the `FileInput` component with a list of uploaded files underneath it. */
 declare function FileInputList({
   files,
   setFiles,
+  multiple,
   ...fileInputProps
 }: FileInputListProps): react_jsx_runtime0.JSX.Element;
 //#endregion
@@ -487,6 +494,10 @@ declare function Loader<DataType>({
   ...loaderProviderProps
 }: LoaderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/ModeToggle.d.ts
+/** A toggle to switch between dark mode and light mode. Must be used in a `ModeProvider`. */
+declare function ModeToggle(): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/NavigationBottom.d.ts
 interface NavItemBottom {
   value: string;
@@ -605,5 +616,5 @@ declare function SwitchWithIcons({
 //#region src/hooks/useHash.d.ts
 declare function useHash<S extends string>(initialHash: S | undefined): [S, Dispatch<SetStateAction<S>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, 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, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, 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, 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/icons-material/ArrowDropDown";import f from"@mui/icons-material/ArrowDropUp";import p from"@mui/material/ButtonBase";import m from"@mui/material/Collapse";import{Fragment as h,createContext as g,useCallback as _,useContext as v,useEffect as y,useId as b,useMemo as x,useRef as ee,useState as S}from"react";import te from"@mui/icons-material/DarkMode";import ne from"@mui/icons-material/LightMode";import C from"@mui/material/IconButton";import re from"@mui/material/Tooltip";import w from"@mui/material/Button";import T from"@mui/material/Menu";import E from"@mui/material/MenuItem";import D from"@mui/material/CircularProgress";import O from"@mui/material/Alert";import k from"@mui/material/CssBaseline";import{ThemeProvider as ie,createTheme as ae,styled as A,useTheme as oe}from"@mui/material/styles";import{fillArray as se,truncate as j,wait as ce}from"@alextheman/utility";import le from"@mui/material/Snackbar";import M from"@mui/material/Link";import ue from"@mui/icons-material/CloudUpload";import de from"@mui/icons-material/Delete";import N from"@mui/material/List";import P from"@mui/material/ListItem";import F from"@mui/material/ListItemText";import fe from"@mui/material/Popover";import{Link as I,useLocation as pe}from"react-router-dom";import L from"@mui/material/ListItemButton";import me from"@mui/material/BottomNavigation";import he from"@mui/material/BottomNavigationAction";import ge from"@mui/material/Paper";import _e from"@mui/icons-material/ChevronLeft";import ve from"@mui/icons-material/ChevronRight";import ye from"@mui/icons-material/Menu";import be from"@mui/material/AppBar";import xe from"@mui/material/Drawer";import Se from"@mui/material/ListItemIcon";import Ce from"@mui/material/Toolbar";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{useFormContext as Me}from"react-hook-form";import Ne from"@mui/material/Switch";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 Pe(){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 Fe(){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(Pe,{}),l(R,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Ie({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=p,collapseProps:c,openIcon:h=l(f,{}),closedIcon:g=l(d,{}),useDefaultStyling:_=s===p}){let[v,b]=S(!!t);return y(()=>{v&&n?n():!v&&r&&r()},[v]),u(e,{children:[u(s,{onClick:()=>{b(e=>!e)},sx:_?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===p?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":v,children:[o,v?h:g]}),l(m,{in:v,...c,children:i})]})}const z=g(void 0);function B({strict:e=!0}={}){let t=v(z);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function Le({children:e,button:t=w,buttonProps:n,openIcon:r=l(f,{}),closedIcon:i=l(d,{})}){let[a,o]=S(null),s=x(()=>!!a,[a]);function c(){o(null)}return u(z.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(T,{anchorEl:a,open:s,onClose:c,children:e})]})}function Re({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=B();return l(E,{component:X,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function ze({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=B();return l(E,{component:Q,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Be({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=B();return l(E,{component:e??w,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var Ve=Le;const V=g(void 0);function H({strict:e=!0}={}){let t=v(V);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function He({children:e,loadingComponent:t=l(D,{}),...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(O,{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(O,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var G=He;const K=g({toggleMode:()=>{},mode:`dark`});function q({strict:e=!0}={}){let t=v(K);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Ue({children:e,mode:t=`dark`}){let[n,r]=S(t),i=x(()=>ae({palette:{mode:n}}),[n]);return l(K.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ie,{theme:i,children:[l(k,{}),e]})})}const J=g({windowWidth:0,windowHeight:0,isLargeScreen:!1});function We({strict:e=!0}={}){let t=v(J);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function Ge({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=S(window.innerWidth),[a,o]=S(window.innerHeight);y(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=x(()=>r>t&&a>n,[r,a,t,n]);return l(J.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Y=g(void 0);function Ke({strict:e=!0}={}){let t=v(Y);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function qe({children:e,autoHideDuration:t=5e3}){let[n,r]=S(!1),[i,a]=S(t),[o,s]=S(``),[c,d]=S(`info`);function f(e,n,i){r(!0),a(i??t),d(n??`info`),s(e)}async function p(){r(!1),await ce(.2),s(``)}return u(Y.Provider,{value:{addSnackbar:f},children:[l(le,{open:n,autoHideDuration:i,onClose:p,children:l(O,{onClose:p,severity:c,children:o})}),e]})}function Je(){let{mode:e,toggleMode:t}=q();return l(re,{title:`Enable ${e===`dark`?`light`:`dark`} mode`,children:l(C,{sx:{marginLeft:`auto`},onClick:t,"aria-label":`Enable ${e===`dark`?`light`:`dark`} mode`,children:l(e===`dark`?ne:te,{})})})}function Ye({children:t,button:n=w,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(f,{}),isClosedIcon:o=l(d,{}),onOpen:s,onClose:c}){let[p,m]=S(null),h=x(()=>!!p,[p]),g={...i,onClick:e=>{m(e.currentTarget)},"aria-controls":h?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":h};return n===w&&(g.endIcon=h?a:o),y(()=>{h&&s?s():!h&&c&&c()},[h,s,c]),u(e,{children:[l(n,{...g,children:r}),l(T,{id:`dropdown-menu`,anchorEl:p,open:h,onClose:()=>{m(null)},children:typeof t==`function`?l(e,{children:t(()=>{m(null)})}):t})]})}function X({href:e,children:t,ref:n,...r}){return l(M,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Xe={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`},Ze=A(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Qe=A(`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]=S(!1),c=u(w,{variant:`contained`,component:`label`,"aria-label":`File upload button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(`file-input`)?.click())},...a,startIcon:a.startIcon??l(ue,{}),children:[t,l(Ze,{id:`file-input`,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(Qe,{$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:c}):c}function $e({files:t,setFiles:n,...r}){function i(e){n(t=>[...t,...e])}let a={...r,onFileInput:i};return a?.multiple===void 0&&(a.multiple=!0),u(e,{children:[l(Z,{...a}),l(N,{children:t.map(e=>l(P,{secondaryAction:l(C,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(de,{})}),children:l(F,{primary:e.name})},e.name))})]})}function et({icon:t,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=S(null),c=!!o,d=b();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,sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function Q({to:e,component:t=I,children:n,ref:r,...i}){return l(M,{component:t,to:e,ref:r,...i,children:n})}function tt({children:e,...t}){return l(L,{component:Q,...t,children:e})}function nt({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(D,{}),...s}){return u(G,{loadingComponent:o,...s,children:[l(W,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(U,{children:e})]})}function rt({children:t,navItems:n}){let[r,i]=S(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(ge,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(me,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(he,{...e,component:I},e.value))})})]})}function $(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function it(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 at=A(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),ot=A(be,{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})}}]})),st=A(xe,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...$(e),"& .MuiDrawer-paper":$(e)}},{props:({open:e})=>!e,style:{...it(e),"& .MuiDrawer-paper":it(e)}}]}));function ct({title:t,navItems:n,children:r,headerElements:i}){let o=oe(),[c,d]=S(!0),f=pe();function p(){d(!0)}function m(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(k,{}),l(ot,{position:`fixed`,open:c,children:u(Ce,{children:[l(C,{color:`inherit`,"aria-label":`open drawer`,onClick:p,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(ye,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(st,{variant:`permanent`,open:c,children:[l(at,{children:l(C,{onClick:m,children:o.direction===`rtl`?l(ve,{}):l(_e,{})})}),l(a,{}),n.map(e=>u(h,{children:[u(N,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:j(e.category,4)}),e.options.map(e=>l(P,{disablePadding:!0,sx:{display:`block`},children:u(L,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:I,to:e.to,selected:f.pathname===e.to,children:[l(Se,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:j(e.label,4)})}),l(F,{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(at,{}),r]})]})}function lt({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 ut({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 dt({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 ft({columns:e}){return l(je,{children:se(e=>l(Ae,{children:l(ke,{})},e),e)})}function pt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Me();return l(w,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}const mt=A(Ne)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function ht({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(mt,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function gt(e){let[t,n]=S(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=_(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return y(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,_(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{Fe as Artwork,Ie as CollapsableItem,Je as DarkModeToggle,Ye as DropdownMenu,Ve as DropdownMenu2,Re as DropdownMenuExternalLink,ze as DropdownMenuInternalLink,Be as DropdownMenuItem,X as ExternalLink,Z as FileInput,$e as FileInputList,Xe as FileType,et as IconWithPopover,Q as InternalLink,tt as ListItemInternalLink,nt as Loader,U as LoaderData,W as LoaderError,G as LoaderProvider,Ue as ModeProvider,rt as NavigationBottom,ct as NavigationDrawer,lt as Page,ut as PopoverText,dt as ReactPlayground,Ge as ScreenSizeProvider,ft as SkeletonRow,qe as SnackbarProvider,pt as SubmitButton,ht as SwitchWithIcons,B as useDropdownMenu,gt as useHash,q as useMode,We as useScreenSize,Ke 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}from"react-icons/md";import C from"@mui/material/Button";import w from"@mui/material/Menu";import T from"@mui/material/Link";import{ThemeProvider as ce,createTheme as le,styled as E,useTheme as ue}from"@mui/material/styles";import D from"@mui/material/IconButton";import O from"@mui/material/List";import k from"@mui/material/ListItem";import A from"@mui/material/ListItemText";import de from"@mui/material/Popover";import{Link as j,useLocation as fe}from"react-router-dom";import M from"@mui/material/ListItemButton";import N from"@mui/material/CircularProgress";import P from"@mui/material/MenuItem";import F from"@mui/material/Alert";import I from"@mui/material/CssBaseline";import{fillArray as pe,truncate as L,wait as me}from"@alextheman/utility";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 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";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 Pe(){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 Fe(){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(Pe,{}),l(R,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Ie({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 Le({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(w,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function z({href:e,children:t,ref:n,...r}){return l(T,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Re={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`},ze=E(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Be=E(`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(ze,{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(Be,{$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 Ve({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(O,{children:t.map(e=>l(k,{secondaryAction:l(D,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(A,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function He({icon:t,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(de,{id:d,sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function V({to:e,component:t=j,children:n,ref:r,...i}){return l(T,{component:t,to:e,ref:r,...i,children:n})}function Ue({children:e,...t}){return l(M,{component:V,...t,children:e})}const H=m(void 0);function U({strict:e=!0}={}){let t=g(H);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function We({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(H.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(w,{anchorEl:a,open:s,onClose:c,children:e})]})}function Ge({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=U();return l(P,{component:z,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Ke({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=U();return l(P,{component:V,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function qe({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=U();return l(P,{component:e??C,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var Je=We;const W=m(void 0);function G({strict:e=!0}={}){let t=g(W);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function Ye({children:e,loadingComponent:t=l(N,{}),...n}){return l(W.Provider,{value:{loadingComponent:t,...n},children:e})}function K({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=G(),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 q({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=G(),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(F,{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(F,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var J=Ye;const Y=m({toggleMode:()=>{},mode:`dark`});function X({strict:e=!0}={}){let t=g(Y);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Xe({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>le({palette:{mode:n}}),[n]);return l(Y.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ce,{theme:i,children:[l(I,{}),e]})})}const Z=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ze({strict:e=!0}={}){let t=g(Z);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);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(Z.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Q=m(void 0);function $e({strict:e=!0}={}){let t=g(Q);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function et({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(Q.Provider,{value:{addSnackbar:f},children:[l(he,{open:n,autoHideDuration:i,onClose:p,children:l(F,{onClose:p,severity:c,children:o})}),e]})}function tt({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(N,{}),...s}){return u(J,{loadingComponent:o,...s,children:[l(q,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(K,{children:e})]})}const nt=E(_e)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function $({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(nt,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function rt(){let{mode:e,toggleMode:t}=X(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ge,{title:r,children:l($,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function it({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:j},e.value))})})]})}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)`}}}const st=E(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),ct=E(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})}}]})),lt=E(Se,{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)}}]}));function ut({title:t,navItems:n,children:r,headerElements:i}){let o=ue(),[c,d]=b(!0),f=fe();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(I,{}),l(ct,{position:`fixed`,open:c,children:u(we,{children:[l(D,{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(lt,{variant:`permanent`,open:c,children:[l(st,{children:l(D,{onClick:h,children:o.direction===`rtl`?l(ne,{}):l(te,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(O,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:L(e.category,4)}),e.options.map(e=>l(k,{disablePadding:!0,sx:{display:`block`},children:u(M,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:j,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:L(e.label,4)})}),l(A,{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(st,{}),r]})]})}function dt({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 ft({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 pt({code:t,previewStyles:n,...r}){let{mode:i}=X(),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 mt({columns:e}){return l(Me,{children:pe(e=>l(je,{children:l(Ae,{})},e),e)})}function ht({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ne();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function gt(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{Fe as Artwork,Ie as CollapsableItem,Le as DropdownMenu,Je as DropdownMenu2,Ge as DropdownMenuExternalLink,Ke as DropdownMenuInternalLink,qe as DropdownMenuItem,z as ExternalLink,B as FileInput,Ve as FileInputList,Re as FileType,He as IconWithPopover,V as InternalLink,Ue as ListItemInternalLink,tt as Loader,K as LoaderData,q as LoaderError,J as LoaderProvider,Xe as ModeProvider,rt as ModeToggle,it as NavigationBottom,ut as NavigationDrawer,dt as Page,ft as PopoverText,pt as ReactPlayground,Qe as ScreenSizeProvider,mt as SkeletonRow,et as SnackbarProvider,ht as SubmitButton,$ as SwitchWithIcons,U as useDropdownMenu,gt as useHash,X as useMode,Ze as useScreenSize,$e as useSnackbar};
 //# sourceMappingURL=index.js.map