@alextheman/components 6.4.1 → 6.5.1

package/dist/index.d.cts

@@ -5,10 +5,10 @@ import * as react from "react";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { LinkProps } from "@mui/material/Link";
+import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
-import { OptionalOnCondition } from "@alextheman/utility";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
 import { TypographyProps } from "@mui/material/Typography";
@@ -16,6 +16,7 @@ import { LiveProvider } from "react-live";
 import { SwitchProps } from "@mui/material/Switch";
 
 //#region src/components/Artwork.d.ts
+/** The artwork associated with the package's theme song, _An Interface For You And I_. */
 declare function Artwork(): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/CollapsableItem.d.ts
@@ -50,8 +51,6 @@ interface CollapsableItemProps {
 }
 /**
  * Shows a display area that can be opened to show the children components, or hidden away.
- *
- * @param props - Props to pass to CollapsableItem
  */
 declare function CollapsableItem({
   isInitiallyOpen,
@@ -129,7 +128,7 @@ declare const FileType: {
   readonly MP4: "video/mp4";
   readonly WAV: "audio/wav";
 };
-type FileType = (typeof FileType)[keyof typeof FileType];
+type FileType = CreateEnumType<typeof FileType>;
 interface FileInputProps extends ButtonOwnProps {
   onFileInput: (allowedFiles: Array<File>) => void;
   label?: string;
@@ -526,6 +525,25 @@ declare function NavigationDrawer({
   headerElements
 }: NavigationDrawerProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/Page.d.ts
+interface PageProps {
+  /** The Page title to show */
+  title: string;
+  /** The subtitle to show under the Page title */
+  subtitle?: string;
+  /** The actions to show in the page header */
+  action?: ReactNode;
+  /** The actual page contents */
+  children: ReactNode;
+}
+/** Renders a pre-styled Page that can be used to structure pages throughout your React apps. */
+declare function Page({
+  title,
+  subtitle,
+  action,
+  children
+}: PageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/PopoverText.d.ts
 interface PopoverTextProps extends TypographyProps {
   text: string;
@@ -587,5 +605,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, 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, 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 };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
-import { OptionalOnCondition } from "@alextheman/utility";
+import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import { LinkProps } from "@mui/material/Link";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { LiveProvider } from "react-live";
@@ -16,6 +16,7 @@ import { CommonProps, OverridableComponent } from "@mui/material/OverridableComp
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
 //#region src/components/Artwork.d.ts
+/** The artwork associated with the package's theme song, _An Interface For You And I_. */
 declare function Artwork(): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/CollapsableItem.d.ts
@@ -50,8 +51,6 @@ interface CollapsableItemProps {
 }
 /**
  * Shows a display area that can be opened to show the children components, or hidden away.
- *
- * @param props - Props to pass to CollapsableItem
  */
 declare function CollapsableItem({
   isInitiallyOpen,
@@ -129,7 +128,7 @@ declare const FileType: {
   readonly MP4: "video/mp4";
   readonly WAV: "audio/wav";
 };
-type FileType = (typeof FileType)[keyof typeof FileType];
+type FileType = CreateEnumType<typeof FileType>;
 interface FileInputProps extends ButtonOwnProps {
   onFileInput: (allowedFiles: Array<File>) => void;
   label?: string;
@@ -526,6 +525,25 @@ declare function NavigationDrawer({
   headerElements
 }: NavigationDrawerProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/Page.d.ts
+interface PageProps {
+  /** The Page title to show */
+  title: string;
+  /** The subtitle to show under the Page title */
+  subtitle?: string;
+  /** The actions to show in the page header */
+  action?: ReactNode;
+  /** The actual page contents */
+  children: ReactNode;
+}
+/** Renders a pre-styled Page that can be used to structure pages throughout your React apps. */
+declare function Page({
+  title,
+  subtitle,
+  action,
+  children
+}: PageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/PopoverText.d.ts
 interface PopoverTextProps extends TypographyProps {
   text: string;
@@ -587,5 +605,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, 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, 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 };
 //# 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({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 ut({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 dt({columns:e}){return l(je,{children:se(e=>l(Ae,{children:l(ke,{})},e),e)})}function ft({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 pt=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 mt({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(pt,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function ht(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 PopoverText,ut as ReactPlayground,Ge as ScreenSizeProvider,dt as SkeletonRow,qe as SnackbarProvider,ft as SubmitButton,mt as SwitchWithIcons,B as useDropdownMenu,ht 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/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};
 //# sourceMappingURL=index.js.map