@alextheman/components 6.3.0 → 6.4.1

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
-import * as react0 from "react";
+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";
@@ -16,7 +16,7 @@ import { LiveProvider } from "react-live";
 import { SwitchProps } from "@mui/material/Switch";
 
 //#region src/components/Artwork.d.ts
-declare function Artwork(): react_jsx_runtime3.JSX.Element;
+declare function Artwork(): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/CollapsableItem.d.ts
 interface CollapsableItemProps {
@@ -65,10 +65,10 @@ declare function CollapsableItem({
   openIcon,
   closedIcon,
   useDefaultStyling
-}: CollapsableItemProps): react_jsx_runtime3.JSX.Element;
+}: CollapsableItemProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/DarkModeToggle.d.ts
-declare function DarkModeToggle(): react_jsx_runtime3.JSX.Element;
+declare function DarkModeToggle(): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/DropdownMenu.d.ts
 interface DropdownMenuProps {
@@ -93,21 +93,29 @@ declare function DropdownMenu({
   isClosedIcon,
   onOpen,
   onClose
-}: DropdownMenuProps): react_jsx_runtime3.JSX.Element;
+}: DropdownMenuProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/ExternalLink.d.ts
 interface ExternalLinkProps extends Omit<LinkProps, "to" | "target" | "rel"> {
+  /** The URL of the place you want to navigate to. */
   href: `https://${string}` | `http://${string}` | (string & {});
   to?: never;
+  /** The readable content to display on the link. */
   children: ReactNode;
+  /** An optional ref to allow it to be used with polymorphic components. */
   ref?: Ref<HTMLAnchorElement>;
 }
+/**
+ * A stylised link that is best used when you want to navigate to a different domain.
+ *
+ * Opens the destination in a new tab and applies recommended security defaults automatically.
+ */
 declare function ExternalLink({
   href,
   children,
   ref,
   ...linkProps
-}: ExternalLinkProps): react_jsx_runtime3.JSX.Element;
+}: ExternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/FileInput.d.ts
 declare const FileType: {
@@ -123,10 +131,10 @@ declare const FileType: {
 };
 type FileType = (typeof FileType)[keyof typeof FileType];
 interface FileInputProps extends ButtonOwnProps {
-  onFileInput: (allowedFiles: File[]) => void;
+  onFileInput: (allowedFiles: Array<File>) => void;
   label?: string;
   multiple?: boolean;
-  accept?: string[];
+  accept?: Array<string>;
   useDropzone?: boolean;
 }
 declare function FileInput({
@@ -136,18 +144,18 @@ declare function FileInput({
   accept,
   useDropzone,
   ...buttonProps
-}: FileInputProps): react_jsx_runtime3.JSX.Element;
+}: FileInputProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/FileInputList.d.ts
 interface FileInputListProps extends Omit<FileInputProps, "onFileInput"> {
-  files: File[];
-  setFiles: Dispatch<SetStateAction<File[]>>;
+  files: Array<File>;
+  setFiles: Dispatch<SetStateAction<Array<File>>>;
 }
 declare function FileInputList({
   files,
   setFiles,
   ...fileInputProps
-}: FileInputListProps): react_jsx_runtime3.JSX.Element;
+}: FileInputListProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/IconWithPopover.d.ts
 interface IconWithPopoverProps {
@@ -165,21 +173,31 @@ declare function IconWithPopover({
   onClose,
   iconProps,
   children
-}: IconWithPopoverProps): react_jsx_runtime3.JSX.Element;
+}: IconWithPopoverProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/InternalLink.d.ts
-interface InternalLinkProps extends Omit<LinkProps, "href"> {
+interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
   to: `/${string}` | `~/${string}` | (string & {});
+  component?: ElementType;
   href?: never;
   children: ReactNode;
   ref?: Ref<HTMLAnchorElement>;
 }
+/**
+ * A stylised link for navigating within your application.
+ *
+ * Uses the app router for client-side navigation and opens the destination in the same tab.
+ *
+ * Defaults to a React Router implementation but can be overridden via the `component` prop.
+ *
+ */
 declare function InternalLink({
   to,
+  component,
   children,
   ref,
   ...linkProps
-}: InternalLinkProps): react_jsx_runtime3.JSX.Element;
+}: InternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/ListItemInternalLink.d.ts
 interface ListItemInternalLinkProps extends Omit<ListItemButtonProps, "href"> {
@@ -189,7 +207,7 @@ interface ListItemInternalLinkProps extends Omit<ListItemButtonProps, "href"> {
 declare function ListItemInternalLink({
   children,
   ...listItemButtonProps
-}: ListItemInternalLinkProps): react_jsx_runtime3.JSX.Element;
+}: ListItemInternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/types/ContextHookOptions.d.ts
 interface ContextHookOptions<S extends boolean = true> {
@@ -219,7 +237,7 @@ declare function DropdownMenu2({
   buttonProps,
   openIcon,
   closedIcon
-}: DropdownMenu2Props): react_jsx_runtime3.JSX.Element;
+}: DropdownMenu2Props): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/DropdownMenu2/DropdownMenuExternalLink.d.ts
 interface DropdownMenuExternalLinkProps extends MenuItemOwnProps {
@@ -234,7 +252,7 @@ declare function DropdownMenuExternalLink({
   children,
   onClick,
   ...menuItemProps
-}: DropdownMenuExternalLinkProps): react_jsx_runtime3.JSX.Element;
+}: DropdownMenuExternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/DropdownMenu2/DropdownMenuInternalLink.d.ts
 interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
@@ -249,7 +267,7 @@ declare function DropdownMenuInternalLink({
   children,
   onClick,
   ...menuItemProps
-}: DropdownMenuInternalLinkProps): react_jsx_runtime3.JSX.Element;
+}: DropdownMenuInternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/DropdownMenu2/DropdownMenuItem.d.ts
 type DropdownMenuItemProps<RootComponent extends ElementType = typeof Button$1> = {
@@ -264,7 +282,7 @@ declare function DropdownMenuItem<RootComponent extends ElementType>({
   ref,
   onClick,
   ...menuItemProps
-}: DropdownMenuItemProps<RootComponent>): react_jsx_runtime3.JSX.Element;
+}: DropdownMenuItemProps<RootComponent>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderProvider.d.ts
 interface LoaderProviderBaseProps<DataType> {
@@ -312,7 +330,7 @@ declare function LoaderProvider<DataType>({
   children,
   loadingComponent,
   ...contextProps
-}: LoaderProviderProps<DataType>): react_jsx_runtime3.JSX.Element;
+}: LoaderProviderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderData.d.ts
 interface LoaderDataProps<T> {
@@ -341,7 +359,7 @@ declare function LoaderData<DataType>({
   children,
   dataParser: loaderDataParser,
   loadingComponent
-}: LoaderDataProps<DataType>): react_jsx_runtime3.JSX.Element;
+}: LoaderDataProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderError.d.ts
 interface LoaderErrorBaseProps {
@@ -380,7 +398,7 @@ declare function LoaderError({
   nullComponent,
   nullableComponent,
   logError: propsLogError
-}: LoaderErrorProps): string | number | bigint | boolean | react_jsx_runtime3.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react0.ReactPortal | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}: LoaderErrorProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 //#endregion
 //#region src/providers/ModeProvider.d.ts
 interface ModeContextValue {
@@ -397,27 +415,34 @@ interface ModeProviderProps {
 declare function ModeProvider({
   children,
   mode: modeProp
-}: ModeProviderProps): react_jsx_runtime3.JSX.Element;
+}: ModeProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/ScreenSizeProvider.d.ts
 interface ScreenSizeProps {
+  /** The children that will be receiving the ScreenSizeContext. */
   children: ReactNode;
+  /** The minimum screen width in pixels required to be considered a large screen. */
   largeScreenWidth?: number;
+  /** The minimum screen height in pixels required to be considered a large screen. */
   largeScreenHeight?: number;
 }
 interface ScreenSizeContextValue {
+  /** Whether the screen is a large screen or not. */
   isLargeScreen: boolean;
+  /** The current window width. */
   windowWidth: number;
+  /** The current window height. */
   windowHeight: number;
 }
 declare function useScreenSize<Strict extends boolean = true>({
   strict
 }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ScreenSizeContextValue>;
+/** Provides context about the current screen size. */
 declare function ScreenSizeProvider({
   children,
   largeScreenWidth,
   largeScreenHeight
-}: ScreenSizeProps): react_jsx_runtime3.JSX.Element;
+}: ScreenSizeProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/SnackbarProvider.d.ts
 interface SnackbarProviderProps {
@@ -433,7 +458,7 @@ declare function useSnackbar<Strict extends boolean = true>({
 declare function SnackbarProvider({
   children,
   autoHideDuration
-}: SnackbarProviderProps): react_jsx_runtime3.JSX.Element;
+}: SnackbarProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Loader.d.ts
 type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "logError"> & Omit<LoaderErrorProps, "errorComponent" | "children"> & Omit<LoaderDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
@@ -461,7 +486,7 @@ declare function Loader<DataType>({
   logError,
   loadingComponent,
   ...loaderProviderProps
-}: LoaderProps<DataType>): react_jsx_runtime3.JSX.Element;
+}: LoaderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/NavigationBottom.d.ts
 interface NavItemBottom {
@@ -472,25 +497,25 @@ interface NavItemBottom {
 }
 interface NavigationBottomProps {
   children: ReactNode;
-  navItems: NavItemBottom[];
+  navItems: Array<NavItemBottom>;
 }
 declare function NavigationBottom({
   children,
   navItems
-}: NavigationBottomProps): react_jsx_runtime3.JSX.Element;
+}: NavigationBottomProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/NavigationDrawer.d.ts
 interface NavMenuItem {
   category: string;
-  options: {
+  options: Array<{
     label: string;
     to: string;
     icon?: ReactNode;
-  }[];
+  }>;
 }
 interface NavigationDrawerProps {
   title: string;
-  navItems: NavMenuItem[];
+  navItems: Array<NavMenuItem>;
   headerElements?: ReactNode;
   children: ReactNode;
 }
@@ -499,7 +524,7 @@ declare function NavigationDrawer({
   navItems,
   children,
   headerElements
-}: NavigationDrawerProps): react_jsx_runtime3.JSX.Element;
+}: NavigationDrawerProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/PopoverText.d.ts
 interface PopoverTextProps extends TypographyProps {
@@ -509,7 +534,7 @@ declare function PopoverText({
   text,
   sx,
   ...typographyProps
-}: PopoverTextProps): react_jsx_runtime3.JSX.Element;
+}: PopoverTextProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/ReactPlayground.d.ts
 interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
@@ -519,7 +544,7 @@ declare function ReactPlayground({
   code,
   previewStyles,
   ...liveProviderProps
-}: ReactPlaygroundProps): react_jsx_runtime3.JSX.Element;
+}: ReactPlaygroundProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/SkeletonRow.d.ts
 interface SkeletonRowProps {
@@ -527,7 +552,7 @@ interface SkeletonRowProps {
 }
 declare function SkeletonRow({
   columns
-}: SkeletonRowProps): react_jsx_runtime3.JSX.Element;
+}: SkeletonRowProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/SubmitButton.d.ts
 interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
@@ -538,7 +563,7 @@ declare function SubmitButton({
   disableClean,
   label,
   ...buttonProps
-}: SubmitButtonProps): react_jsx_runtime3.JSX.Element;
+}: SubmitButtonProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/SwitchWithIcons.d.ts
 interface SwitchWithIconsProps extends Omit<SwitchProps, "icon" | "checkedIcon"> {
@@ -557,7 +582,7 @@ declare function SwitchWithIcons({
   uncheckedIcon: UncheckedIcon,
   uncheckedIconStyles,
   ...switchProps
-}: SwitchWithIconsProps): react_jsx_runtime3.JSX.Element;
+}: SwitchWithIconsProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/useHash.d.ts
 declare function useHash<S extends string>(initialHash: S | undefined): [S, Dispatch<SetStateAction<S>>];

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { TypographyProps } from "@mui/material/Typography";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
-import * as react0 from "react";
+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 { MenuItemOwnProps } from "@mui/material/MenuItem";
@@ -97,11 +97,19 @@ declare function DropdownMenu({
 //#endregion
 //#region src/components/ExternalLink.d.ts
 interface ExternalLinkProps extends Omit<LinkProps, "to" | "target" | "rel"> {
+  /** The URL of the place you want to navigate to. */
   href: `https://${string}` | `http://${string}` | (string & {});
   to?: never;
+  /** The readable content to display on the link. */
   children: ReactNode;
+  /** An optional ref to allow it to be used with polymorphic components. */
   ref?: Ref<HTMLAnchorElement>;
 }
+/**
+ * A stylised link that is best used when you want to navigate to a different domain.
+ *
+ * Opens the destination in a new tab and applies recommended security defaults automatically.
+ */
 declare function ExternalLink({
   href,
   children,
@@ -123,10 +131,10 @@ declare const FileType: {
 };
 type FileType = (typeof FileType)[keyof typeof FileType];
 interface FileInputProps extends ButtonOwnProps {
-  onFileInput: (allowedFiles: File[]) => void;
+  onFileInput: (allowedFiles: Array<File>) => void;
   label?: string;
   multiple?: boolean;
-  accept?: string[];
+  accept?: Array<string>;
   useDropzone?: boolean;
 }
 declare function FileInput({
@@ -140,8 +148,8 @@ declare function FileInput({
 //#endregion
 //#region src/components/FileInputList.d.ts
 interface FileInputListProps extends Omit<FileInputProps, "onFileInput"> {
-  files: File[];
-  setFiles: Dispatch<SetStateAction<File[]>>;
+  files: Array<File>;
+  setFiles: Dispatch<SetStateAction<Array<File>>>;
 }
 declare function FileInputList({
   files,
@@ -168,14 +176,24 @@ declare function IconWithPopover({
 }: IconWithPopoverProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/InternalLink.d.ts
-interface InternalLinkProps extends Omit<LinkProps, "href"> {
+interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
   to: `/${string}` | `~/${string}` | (string & {});
+  component?: ElementType;
   href?: never;
   children: ReactNode;
   ref?: Ref<HTMLAnchorElement>;
 }
+/**
+ * A stylised link for navigating within your application.
+ *
+ * Uses the app router for client-side navigation and opens the destination in the same tab.
+ *
+ * Defaults to a React Router implementation but can be overridden via the `component` prop.
+ *
+ */
 declare function InternalLink({
   to,
+  component,
   children,
   ref,
   ...linkProps
@@ -380,7 +398,7 @@ declare function LoaderError({
   nullComponent,
   nullableComponent,
   logError: propsLogError
-}: LoaderErrorProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react0.ReactPortal | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}: LoaderErrorProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 //#endregion
 //#region src/providers/ModeProvider.d.ts
 interface ModeContextValue {
@@ -401,18 +419,25 @@ declare function ModeProvider({
 //#endregion
 //#region src/providers/ScreenSizeProvider.d.ts
 interface ScreenSizeProps {
+  /** The children that will be receiving the ScreenSizeContext. */
   children: ReactNode;
+  /** The minimum screen width in pixels required to be considered a large screen. */
   largeScreenWidth?: number;
+  /** The minimum screen height in pixels required to be considered a large screen. */
   largeScreenHeight?: number;
 }
 interface ScreenSizeContextValue {
+  /** Whether the screen is a large screen or not. */
   isLargeScreen: boolean;
+  /** The current window width. */
   windowWidth: number;
+  /** The current window height. */
   windowHeight: number;
 }
 declare function useScreenSize<Strict extends boolean = true>({
   strict
 }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ScreenSizeContextValue>;
+/** Provides context about the current screen size. */
 declare function ScreenSizeProvider({
   children,
   largeScreenWidth,
@@ -472,7 +497,7 @@ interface NavItemBottom {
 }
 interface NavigationBottomProps {
   children: ReactNode;
-  navItems: NavItemBottom[];
+  navItems: Array<NavItemBottom>;
 }
 declare function NavigationBottom({
   children,
@@ -482,15 +507,15 @@ declare function NavigationBottom({
 //#region src/components/NavigationDrawer.d.ts
 interface NavMenuItem {
   category: string;
-  options: {
+  options: Array<{
     label: string;
     to: string;
     icon?: ReactNode;
-  }[];
+  }>;
 }
 interface NavigationDrawerProps {
   title: string;
-  navItems: NavMenuItem[];
+  navItems: Array<NavMenuItem>;
   headerElements?: ReactNode;
   children: ReactNode;
 }

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 ue from"@mui/material/Link";import de from"@mui/icons-material/CloudUpload";import fe from"@mui/icons-material/Delete";import M from"@mui/material/List";import N from"@mui/material/ListItem";import P from"@mui/material/ListItemText";import pe from"@mui/material/Popover";import{Link as F,useLocation as me}from"react-router-dom";import I from"@mui/material/ListItemButton";import he from"@mui/material/BottomNavigation";import ge from"@mui/material/BottomNavigationAction";import _e from"@mui/material/Paper";import ve from"@mui/icons-material/ChevronLeft";import ye from"@mui/icons-material/ChevronRight";import be from"@mui/icons-material/Menu";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";import Pe from"@mui/material/Switch";function L({containerLabel:e,chipLabels:r}){return l(t,{sx:{width:320,height:420,backgroundColor:`rgba(255,255,255,0.07)`,backdropFilter:`blur(8px)`,border:`1px solid rgba(255,255,255,0.06)`,boxShadow:`0 10px 40px rgba(0,0,0,0.35)`},children:u(n,{children:[l(s,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),l(o,{spacing:1,children:r.map(e=>l(i,{label:e,sx:{backgroundColor:`rgba(255,255,255,0.11)`,color:`rgba(255,255,255,0.88)`,border:`1px solid rgba(255,255,255,0.06)`}},e))})]})})}function Fe(){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 Ie(){return u(t,{sx:{width:1e3,height:1e3,display:`flex`,flexDirection:`column`,justifyContent:`space-between`,p:4,background:`radial-gradient(circle at 20% 10%, rgba(167,139,250,0.35) 0%, rgba(167,139,250,0.12) 35%, rgba(0,0,0,0) 55%), linear-gradient(135deg, #3a3380 0%, #1d2e5f 40%, #2d3f55 100%)`,color:`white`},elevation:0,children:[l(r,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),l(a,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),l(n,{sx:{flex:1,display:`flex`,alignItems:`center`},children:u(o,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[l(L,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Fe,{}),l(L,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}var Le=Ie;function Re({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})]})}var ze=Re;const R=g(void 0);function z({strict:e=!0}={}){let t=v(R);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function Be({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(R.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})]})}var Ve=Be;function He({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=z();return l(E,{component:Y,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}var Ue=He;function We({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=z();return l(E,{component:Z,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}var Ge=We;function Ke({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=z();return l(E,{component:e??w,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var qe=Ke,Je=Ve;const B=g(void 0);function V({strict:e=!0}={}){let t=v(B);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function Ye({children:e,loadingComponent:t=l(D,{}),...n}){return l(B.Provider,{value:{loadingComponent:t,...n},children:e})}var Xe=Ye;function Ze({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=V(),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})}var H=Ze;function Qe({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=V(),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 U=Qe,W=Xe;const G=g({toggleMode:()=>{},mode:`dark`});function K({strict:e=!0}={}){let t=v(G);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function $e({children:e,mode:t=`dark`}){let[n,r]=S(t),i=x(()=>ae({palette:{mode:n}}),[n]);return l(G.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ie,{theme:i,children:[l(k,{}),e]})})}var et=$e;const q=g({windowWidth:0,windowHeight:0,isLargeScreen:!1});function tt({strict:e=!0}={}){let t=v(q);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function nt({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(q.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}var rt=nt;const J=g(void 0);function it({strict:e=!0}={}){let t=v(J);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function at({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(J.Provider,{value:{addSnackbar:f},children:[l(le,{open:n,autoHideDuration:i,onClose:p,children:l(O,{onClose:p,severity:c,children:o})}),e]})}var ot=at;function st(){let{mode:e,toggleMode:t}=K();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,{})})})}var ct=st;function lt({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})]})}var ut=lt;function dt({href:e,children:t,ref:n,...r}){return l(ue,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}var Y=dt;const ft={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`},pt=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}),mt=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 ht({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(de,{}),children:[t,l(pt,{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(mt,{$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}var X=ht;function gt({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(X,{...a}),l(M,{children:t.map(e=>l(N,{secondaryAction:l(C,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(fe,{})}),children:l(P,{primary:e.name})},e.name))})]})}var _t=gt;function vt({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(pe,{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})]})}var yt=vt;function bt({to:e,children:t,ref:n,...r}){return l(ue,{component:F,to:e,ref:n,...r,children:t})}var Z=bt;function xt({children:e,...t}){return l(I,{component:Z,...t,children:e})}var St=xt;function Ct({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(D,{}),...s}){return u(W,{loadingComponent:o,...s,children:[l(U,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(H,{children:e})]})}var wt=Ct;function Tt({children:t,navItems:n}){let[r,i]=S(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(_e,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(he,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(ge,{...e,component:F},e.value))})})]})}var Et=Tt;function Q(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function $(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const Dt=A(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Ot=A(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})}}]})),kt=A(Se,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Q(e),"& .MuiDrawer-paper":Q(e)}},{props:({open:e})=>!e,style:{...$(e),"& .MuiDrawer-paper":$(e)}}]}));function At({title:t,navItems:n,children:r,headerElements:i}){let o=oe(),[c,d]=S(!0),f=me();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(we,{children:[l(C,{color:`inherit`,"aria-label":`open drawer`,onClick:p,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(be,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(kt,{variant:`permanent`,open:c,children:[l(Dt,{children:l(C,{onClick:m,children:o.direction===`rtl`?l(ye,{}):l(ve,{})})}),l(a,{}),n.map(e=>u(h,{children:[u(M,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:j(e.category,4)}),e.options.map(e=>l(N,{disablePadding:!0,sx:{display:`block`},children:u(I,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:F,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:j(e.label,4)})}),l(P,{primary:e.label,sx:[c?{opacity:1}:{opacity:0}]})]})},e.to))]}),l(a,{})]},e.category))]}),u(e,{component:`main`,sx:{flexGrow:1,p:3},children:[l(Dt,{}),r]})]})}var jt=At;function Mt({text:e,sx:t,...n}){return l(c,{children:e.split(`
-`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}var Nt=Mt;function Pt({code:t,previewStyles:n,...r}){let{mode:i}=K(),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,{})]})]})})}var Ft=Pt;function It({columns:e}){return l(Me,{children:se(e=>l(je,{children:l(Ae,{})},e),e)})}var Lt=It;function Rt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ne();return l(w,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}var zt=Rt;const Bt=A(Pe)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Vt({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(Bt,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}var Ht=Vt;function Ut(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])]}var Wt=Ut;export{Le as Artwork,ze as CollapsableItem,ct as DarkModeToggle,ut as DropdownMenu,Je as DropdownMenu2,Ue as DropdownMenuExternalLink,Ge as DropdownMenuInternalLink,qe as DropdownMenuItem,Y as ExternalLink,X as FileInput,_t as FileInputList,ft as FileType,yt as IconWithPopover,Z as InternalLink,St as ListItemInternalLink,wt as Loader,H as LoaderData,U as LoaderError,W as LoaderProvider,et as ModeProvider,Et as NavigationBottom,jt as NavigationDrawer,Nt as PopoverText,Ft as ReactPlayground,rt as ScreenSizeProvider,Lt as SkeletonRow,ot as SnackbarProvider,zt as SubmitButton,Ht as SwitchWithIcons,z as useDropdownMenu,Wt as useHash,K as useMode,tt as useScreenSize,it 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({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};
 //# sourceMappingURL=index.js.map