@alextheman/components 6.2.2 → 6.3.0

package/dist/index.d.cts

@@ -15,20 +15,44 @@ import { TypographyProps } from "@mui/material/Typography";
 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;
+//#endregion
 //#region src/components/CollapsableItem.d.ts
 interface CollapsableItemProps {
+  /** Whether the item should initially be open or not. */
   isInitiallyOpen?: boolean;
+  /** A callback function to execute when the item is open. */
   onOpen?: () => void;
+  /** A callback function to execute when the item is closed. */
   onClose?: () => void;
+  /** The components to render when the item is open. */
   children: ReactNode;
+  /** Styling for the button. */
   buttonStyles?: SxProps;
+  /** The children to pass to the button. */
   buttonContents: ReactNode;
+  /** The specific button component to use. */
   buttonComponent?: ElementType;
+  /** The icon to show next to the button when open. */
   openIcon?: ReactNode;
+  /** The icon to show next to the button when closed. */
   closedIcon?: ReactNode;
+  /** Props to pass to collapse. */
   collapseProps?: Omit<CollapseProps, "in">;
+  /**
+   * Whether or not to use the default button styling.
+   *
+   * Defaults to `true` if `buttonComponent` is `ButtonBase`,
+   * otherwise defaults to `false`.
+   */
   useDefaultStyling?: boolean;
 }
+/**
+ * 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,
   onOpen,
@@ -58,15 +82,6 @@ interface DropdownMenuProps {
   onClose?: () => void;
 }
 /**
- * @param root0
- * @param root0.children
- * @param root0.button
- * @param root0.buttonChildren
- * @param root0.buttonProps
- * @param root0.isOpenIcon
- * @param root0.isClosedIcon
- * @param root0.onOpen
- * @param root0.onClose
  * @deprecated This component does not support the new context-based pattern and individual DropdownMenuItem components. Please use DropdownMenu2 instead.
  */
 declare function DropdownMenu({
@@ -282,14 +297,16 @@ type LoaderProviderProps<T> = LoaderContextValue<T> & {
 /**
  * A provider for a context that deals with state management when fetching data from an API.
  * This may be used over Loader if you require more control over the placement of the error message and data display.
+ *
  * @template DataType - The type of data being loaded.
- * @param root0 - Props to pass to LoaderProvider.
- * @param root0.children - The components that may receive access to the LoaderContext value.
- * @param root0.loadingComponent - The component to show when the data is being fetched.
- * @param root0.isLoading - The current loading status (true if loading, false if not)
- * @param root0.error - The error given if the request gave an error.
- * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
- * @param root0.logError - An option to log the error to the console. Note that this may not be provided unless the error prop has also been provided.
+ *
+ * @param props - Props to pass to LoaderProvider.
+ * @param props.children - The components that may receive access to the LoaderContext value.
+ * @param props.loadingComponent - The component to show when the data is being fetched.
+ * @param props.isLoading - The current loading status (true if loading, false if not)
+ * @param props.error - The error given if the request gave an error.
+ * @param props.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param props.logError - An option to log the error to the console. Note that this may not be provided unless the error prop has also been provided.
  */
 declare function LoaderProvider<DataType>({
   children,
@@ -311,12 +328,14 @@ interface LoaderDataProps<T> {
 }
 /**
  * The component responsible for showing the data provided by LoaderProvider.
+ *
  * @template DataType - The type of data being loaded.
- * @param root0 - Props to pass to LoaderData.
- * @param root0.children - The elements to show after data has been loaded.
+ *
+ * @param props - Props to pass to LoaderData.
+ * @param props.children - The elements to show after data has been loaded.
  * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
- * @param root0.dataParser - A parser for the data.
- * @param root0.loadingComponent - The component to show when the data is being fetched.
+ * @param props.dataParser - A parser for the data.
+ * @param props.loadingComponent - The component to show when the data is being fetched.
  */
 declare function LoaderData<DataType>({
   children,
@@ -347,12 +366,13 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
 type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
 /**
  * The component responsible for showing any errors provided by LoaderProvider.
- * @param root0 - The props to be passed to LoaderError.
- * @param root0.children - The component to show if an error has been thrown.
- * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
- * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
- * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
- * @param root0.logError - An option to log the error to the console.
+ *
+ * @param props - The props to be passed to LoaderError.
+ * @param props.children - The component to show if an error has been thrown.
+ * @param props.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param props.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param props.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param props.logError - An option to log the error to the console.
  */
 declare function LoaderError({
   children,
@@ -420,15 +440,17 @@ type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "l
 /**
  * An in-line component that deals with state management when fetching data from an API.
  * This may be used over LoaderProvider if you don't require as much control over the placement of the error message and data display.
+ *
  * @template DataType - The type of data being loaded.
- * @param root0 - Props to pass to Loader.
- * @param root0.children - The elements to show after data has been loaded.
- * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
- * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
- * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
- * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
- * @param root0.loadingComponent - The component to show when the data is being fetched.
- * @param root0.logError - An option to log the error to the console.
+ *
+ * @param props - Props to pass to Loader.
+ * @param props.children - The elements to show after data has been loaded.
+ * @param props.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param props.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param props.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param props.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param props.loadingComponent - The component to show when the data is being fetched.
+ * @param props.logError - An option to log the error to the console.
  */
 declare function Loader<DataType>({
   children,
@@ -540,5 +562,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 { 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, 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

@@ -1,7 +1,8 @@
+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 { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
@@ -9,26 +10,49 @@ import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import { OptionalOnCondition } from "@alextheman/utility";
 import { LinkProps } from "@mui/material/Link";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
-import { TypographyProps } from "@mui/material/Typography";
 import { LiveProvider } from "react-live";
 import { SwitchProps } from "@mui/material/Switch";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
+//#region src/components/Artwork.d.ts
+declare function Artwork(): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/CollapsableItem.d.ts
 interface CollapsableItemProps {
+  /** Whether the item should initially be open or not. */
   isInitiallyOpen?: boolean;
+  /** A callback function to execute when the item is open. */
   onOpen?: () => void;
+  /** A callback function to execute when the item is closed. */
   onClose?: () => void;
+  /** The components to render when the item is open. */
   children: ReactNode;
+  /** Styling for the button. */
   buttonStyles?: SxProps;
+  /** The children to pass to the button. */
   buttonContents: ReactNode;
+  /** The specific button component to use. */
   buttonComponent?: ElementType;
+  /** The icon to show next to the button when open. */
   openIcon?: ReactNode;
+  /** The icon to show next to the button when closed. */
   closedIcon?: ReactNode;
+  /** Props to pass to collapse. */
   collapseProps?: Omit<CollapseProps, "in">;
+  /**
+   * Whether or not to use the default button styling.
+   *
+   * Defaults to `true` if `buttonComponent` is `ButtonBase`,
+   * otherwise defaults to `false`.
+   */
   useDefaultStyling?: boolean;
 }
+/**
+ * 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,
   onOpen,
@@ -58,15 +82,6 @@ interface DropdownMenuProps {
   onClose?: () => void;
 }
 /**
- * @param root0
- * @param root0.children
- * @param root0.button
- * @param root0.buttonChildren
- * @param root0.buttonProps
- * @param root0.isOpenIcon
- * @param root0.isClosedIcon
- * @param root0.onOpen
- * @param root0.onClose
  * @deprecated This component does not support the new context-based pattern and individual DropdownMenuItem components. Please use DropdownMenu2 instead.
  */
 declare function DropdownMenu({
@@ -282,14 +297,16 @@ type LoaderProviderProps<T> = LoaderContextValue<T> & {
 /**
  * A provider for a context that deals with state management when fetching data from an API.
  * This may be used over Loader if you require more control over the placement of the error message and data display.
+ *
  * @template DataType - The type of data being loaded.
- * @param root0 - Props to pass to LoaderProvider.
- * @param root0.children - The components that may receive access to the LoaderContext value.
- * @param root0.loadingComponent - The component to show when the data is being fetched.
- * @param root0.isLoading - The current loading status (true if loading, false if not)
- * @param root0.error - The error given if the request gave an error.
- * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
- * @param root0.logError - An option to log the error to the console. Note that this may not be provided unless the error prop has also been provided.
+ *
+ * @param props - Props to pass to LoaderProvider.
+ * @param props.children - The components that may receive access to the LoaderContext value.
+ * @param props.loadingComponent - The component to show when the data is being fetched.
+ * @param props.isLoading - The current loading status (true if loading, false if not)
+ * @param props.error - The error given if the request gave an error.
+ * @param props.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param props.logError - An option to log the error to the console. Note that this may not be provided unless the error prop has also been provided.
  */
 declare function LoaderProvider<DataType>({
   children,
@@ -311,12 +328,14 @@ interface LoaderDataProps<T> {
 }
 /**
  * The component responsible for showing the data provided by LoaderProvider.
+ *
  * @template DataType - The type of data being loaded.
- * @param root0 - Props to pass to LoaderData.
- * @param root0.children - The elements to show after data has been loaded.
+ *
+ * @param props - Props to pass to LoaderData.
+ * @param props.children - The elements to show after data has been loaded.
  * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
- * @param root0.dataParser - A parser for the data.
- * @param root0.loadingComponent - The component to show when the data is being fetched.
+ * @param props.dataParser - A parser for the data.
+ * @param props.loadingComponent - The component to show when the data is being fetched.
  */
 declare function LoaderData<DataType>({
   children,
@@ -347,12 +366,13 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
 type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
 /**
  * The component responsible for showing any errors provided by LoaderProvider.
- * @param root0 - The props to be passed to LoaderError.
- * @param root0.children - The component to show if an error has been thrown.
- * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
- * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
- * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
- * @param root0.logError - An option to log the error to the console.
+ *
+ * @param props - The props to be passed to LoaderError.
+ * @param props.children - The component to show if an error has been thrown.
+ * @param props.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param props.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param props.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param props.logError - An option to log the error to the console.
  */
 declare function LoaderError({
   children,
@@ -420,15 +440,17 @@ type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "l
 /**
  * An in-line component that deals with state management when fetching data from an API.
  * This may be used over LoaderProvider if you don't require as much control over the placement of the error message and data display.
+ *
  * @template DataType - The type of data being loaded.
- * @param root0 - Props to pass to Loader.
- * @param root0.children - The elements to show after data has been loaded.
- * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
- * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
- * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
- * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
- * @param root0.loadingComponent - The component to show when the data is being fetched.
- * @param root0.logError - An option to log the error to the console.
+ *
+ * @param props - Props to pass to Loader.
+ * @param props.children - The elements to show after data has been loaded.
+ * @param props.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param props.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param props.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param props.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param props.loadingComponent - The component to show when the data is being fetched.
+ * @param props.logError - An option to log the error to the console.
  */
 declare function Loader<DataType>({
   children,
@@ -540,5 +562,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 { 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, 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/icons-material/ArrowDropDown";import t from"@mui/icons-material/ArrowDropUp";import n from"@mui/material/Box";import r from"@mui/material/ButtonBase";import i from"@mui/material/Collapse";import{Fragment as a,createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import _ from"@mui/icons-material/DarkMode";import v from"@mui/icons-material/LightMode";import y from"@mui/material/IconButton";import b from"@mui/material/Tooltip";import x from"@mui/material/Button";import S from"@mui/material/Menu";import C from"@mui/material/MenuItem";import w from"@mui/material/CircularProgress";import T from"@mui/material/Alert";import E from"@mui/material/CssBaseline";import{ThemeProvider as ee,createTheme as te,styled as D,useTheme as ne}from"@mui/material/styles";import{fillArray as re,truncate as O,wait as ie}from"@alextheman/utility";import ae from"@mui/material/Snackbar";import k from"@mui/material/Link";import oe from"@mui/icons-material/CloudUpload";import se from"@mui/icons-material/Delete";import A from"@mui/material/List";import j from"@mui/material/ListItem";import M from"@mui/material/ListItemText";import ce from"@mui/material/Popover";import{Link as N,useLocation as le}from"react-router-dom";import P from"@mui/material/ListItemButton";import ue from"@mui/material/BottomNavigation";import de from"@mui/material/BottomNavigationAction";import fe from"@mui/material/Paper";import pe from"@mui/icons-material/ChevronLeft";import me from"@mui/icons-material/ChevronRight";import he from"@mui/icons-material/Menu";import ge from"@mui/material/AppBar";import F from"@mui/material/Divider";import _e from"@mui/material/Drawer";import ve from"@mui/material/ListItemIcon";import ye from"@mui/material/Toolbar";import I from"@mui/material/Typography";import{stripIndent as be}from"common-tags";import{LiveEditor as xe,LiveError as Se,LivePreview as Ce,LiveProvider as we}from"react-live";import Te from"@mui/material/Skeleton";import Ee from"@mui/material/TableCell";import De from"@mui/material/TableRow";import{useFormContext as Oe}from"react-hook-form";import ke from"@mui/material/Switch";function Ae({isInitiallyOpen:a,onOpen:o,onClose:s,children:c,buttonStyles:u,buttonContents:d,buttonComponent:f=r,collapseProps:m,openIcon:_=h(t,{}),closedIcon:v=h(e,{}),useDefaultStyling:y=f===r}){let[b,x]=p(!!a);return l(()=>{b&&o?o():!b&&s&&s()},[b]),g(n,{children:[g(f,{onClick:()=>{x(e=>!e)},sx:y?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":f===r?{backgroundColor:`action.hover`}:null,...u}:u,"aria-expanded":b,children:[d,b?_:v]}),h(i,{in:b,...m,children:c})]})}var je=Ae;const L=o(void 0);function R({strict:e=!0}={}){let t=c(L);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function Me({children:n,button:r=x,buttonProps:i,openIcon:a=h(t,{}),closedIcon:o=h(e,{})}){let[s,c]=p(null),l=d(()=>!!s,[s]);function u(){c(null)}return g(L.Provider,{value:{closeMenu:u,isDropdownOpen:l},children:[h(r,{"aria-controls":l?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":l,endIcon:l?a:o,...i,onClick:e=>{e.defaultPrevented||c(e.currentTarget),i?.onClick&&i?.onClick(e)}}),h(S,{anchorEl:s,open:l,onClose:u,children:n})]})}var Ne=Me;function Pe({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=R();return h(C,{component:J,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}var Fe=Pe;function Ie({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=R();return h(C,{component:X,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}var Le=Ie;function Re({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=R();return h(C,{component:e??x,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ze=Re,Be=Ne;const z=o(void 0);function B({strict:e=!0}={}){let t=c(z);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function Ve({children:e,loadingComponent:t=h(w,{}),...n}){return h(z.Provider,{value:{loadingComponent:t,...n},children:e})}var He=Ve;function Ue({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=B(),c=t??a;return r?h(m,{children:n??o}):s||i==null?h(m,{}):c?typeof e==`function`?h(m,{children:e(c(i))}):h(m,{children:e}):typeof e==`function`?h(m,{children:e(i)}):h(m,{children:e})}var V=Ue;function We({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:c,logError:l}=B(),u=i??l,d=f(!1),p=e??c;return s?(u&&!d.current&&(console.error(s),d.current=!0),typeof p==`function`?p(s):p?h(m,{children:p}):h(T,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(u&&!d.current&&(console.error(`Data is nullable after loading.`),d.current=!0),h(m,{children:r})):o===void 0&&(u&&!d.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.`),d.current=!0),t)?h(m,{children:t}):o===null&&(u&&!d.current&&(console.error(`Data is null after loading.`),d.current=!0),n)?h(m,{children:n}):h(T,{severity:`error`,children:`Failed to load data. Please try again later.`}):h(m,{})}var H=We,U=He;const W=o({toggleMode:()=>{},mode:`dark`});function G({strict:e=!0}={}){let t=c(W);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Ge({children:e,mode:t=`dark`}){let[n,r]=p(t),i=d(()=>te({palette:{mode:n}}),[n]);return h(W.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:g(ee,{theme:i,children:[h(E,{}),e]})})}var Ke=Ge;const K=o({windowWidth:0,windowHeight:0,isLargeScreen:!1});function qe({strict:e=!0}={}){let t=c(K);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function Je({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=p(window.innerWidth),[a,o]=p(window.innerHeight);l(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=d(()=>r>t&&a>n,[r,a,t,n]);return h(K.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}var Ye=Je;const q=o(void 0);function Xe({strict:e=!0}={}){let t=c(q);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function Ze({children:e,autoHideDuration:t=5e3}){let[n,r]=p(!1),[i,a]=p(t),[o,s]=p(``),[c,l]=p(`info`);function u(e,n,i){r(!0),a(i??t),l(n??`info`),s(e)}async function d(){r(!1),await ie(.2),s(``)}return g(q.Provider,{value:{addSnackbar:u},children:[h(ae,{open:n,autoHideDuration:i,onClose:d,children:h(T,{onClose:d,severity:c,children:o})}),e]})}var Qe=Ze;function $e(){let{mode:e,toggleMode:t}=G();return h(b,{title:`Enable ${e===`dark`?`light`:`dark`} mode`,children:h(y,{sx:{marginLeft:`auto`},onClick:t,"aria-label":`Enable ${e===`dark`?`light`:`dark`} mode`,children:h(e===`dark`?v:_,{})})})}var et=$e;function tt({children:r,button:i=x,buttonChildren:a=`Menu`,buttonProps:o,isOpenIcon:s=h(t,{}),isClosedIcon:c=h(e,{}),onOpen:u,onClose:f}){let[m,_]=p(null),v=d(()=>!!m,[m]),y={...o,onClick:e=>{_(e.currentTarget)},"aria-controls":v?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":v};return i===x&&(y.endIcon=v?s:c),l(()=>{v&&u?u():!v&&f&&f()},[v,u,f]),g(n,{children:[h(i,{...y,children:a}),h(S,{id:`dropdown-menu`,anchorEl:m,open:v,onClose:()=>{_(null)},children:typeof r==`function`?h(n,{children:r(()=>{_(null)})}):r})]})}var nt=tt;function rt({href:e,children:t,ref:n,...r}){return h(k,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}var J=rt;const it={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`},at=D(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),ot=D(`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 st({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=p(!1),c=g(x,{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??h(oe,{}),children:[t,h(at,{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?h(ot,{$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 Y=st;function ct({files:e,setFiles:t,...r}){function i(e){t(t=>[...t,...e])}let a={...r,onFileInput:i};return a?.multiple===void 0&&(a.multiple=!0),g(n,{children:[h(Y,{...a}),h(A,{children:e.map(e=>h(j,{secondaryAction:h(y,{"aria-label":`Delete`,edge:`end`,onClick:()=>{t(t=>t.filter(t=>t!==e))},children:h(se,{})}),children:h(M,{primary:e.name})},e.name))})]})}var lt=ct;function ut({icon:e,onOpen:t,onClose:r,iconProps:i,children:a}){let[o,s]=p(null),c=!!o,l=u();function d(e){s(e.currentTarget),t&&t()}function f(){s(null),r&&r()}return g(n,{children:[h(e,{"aria-owns":c?l:void 0,"aria-haspopup":`true`,onMouseEnter:d,onMouseLeave:f,...i}),h(ce,{id:l,sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:f,disableRestoreFocus:!0,children:a})]})}var dt=ut;function ft({to:e,children:t,ref:n,...r}){return h(k,{component:N,to:e,ref:n,...r,children:t})}var X=ft;function pt({children:e,...t}){return h(P,{component:X,...t,children:e})}var mt=pt;function ht({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=h(w,{}),...s}){return g(U,{loadingComponent:o,...s,children:[h(H,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),h(V,{children:e})]})}var gt=ht;function _t({children:e,navItems:t}){let[r,i]=p(``);return g(m,{children:[h(n,{sx:{paddingBottom:7},children:e}),h(fe,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:h(ue,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:t.map(e=>h(de,{...e,component:N},e.value))})})]})}var vt=_t;function Z(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Q(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 $=D(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),yt=D(ge,{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})}}]})),bt=D(_e,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Z(e),"& .MuiDrawer-paper":Z(e)}},{props:({open:e})=>!e,style:{...Q(e),"& .MuiDrawer-paper":Q(e)}}]}));function xt({title:e,navItems:t,children:r,headerElements:i}){let o=ne(),[s,c]=p(!0),l=le();function u(){c(!0)}function d(){c(!1)}return g(n,{sx:{display:`flex`},children:[h(E,{}),h(yt,{position:`fixed`,open:s,children:g(ye,{children:[h(y,{color:`inherit`,"aria-label":`open drawer`,onClick:u,edge:`start`,sx:[{marginRight:5},s&&{display:`none`}],children:h(he,{})}),h(I,{variant:`h6`,noWrap:!0,component:`div`,children:e}),i]})}),g(bt,{variant:`permanent`,open:s,children:[h($,{children:h(y,{onClick:d,children:o.direction===`rtl`?h(me,{}):h(pe,{})})}),h(F,{}),t.map(e=>g(a,{children:[g(A,{children:[h(I,{variant:s?`h5`:`h6`,paddingLeft:s?2:1,children:s?e.category:O(e.category,4)}),e.options.map(e=>h(j,{disablePadding:!0,sx:{display:`block`},children:g(P,{sx:[{minHeight:48,px:2.5},s?{justifyContent:`initial`}:{justifyContent:`center`}],component:N,to:e.to,selected:l.pathname===e.to,children:[h(ve,{sx:[{minWidth:0,justifyContent:`center`},s?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:s?null:h(I,{children:O(e.label,4)})}),h(M,{primary:e.label,sx:[s?{opacity:1}:{opacity:0}]})]})},e.to))]}),h(F,{})]},e.category))]}),g(n,{component:`main`,sx:{flexGrow:1,p:3},children:[h($,{}),r]})]})}var St=xt;function Ct({text:e,sx:t,...n}){return h(m,{children:e.split(`
-`).map((e,r)=>h(I,{sx:{margin:1,...t},...n,children:e},r))})}var wt=Ct;function Tt({code:e,previewStyles:t,...r}){let{mode:i}=G(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=t?{...a,...t}:{...a};return h(n,{sx:{borderRadius:1,border:.5,padding:2},children:g(we,{...r,code:be(e??``),children:[h(I,{variant:`h5`,children:`Code`}),h(n,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:h(xe,{})}),h(`br`,{}),h(I,{variant:`h5`,children:`Result`}),g(n,{sx:o,children:[h(Ce,{}),h(Se,{})]})]})})}var Et=Tt;function Dt({columns:e}){return h(De,{children:re(e=>h(Ee,{children:h(Te,{})},e),e)})}var Ot=Dt;function kt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Oe();return h(x,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}var At=kt;const jt=D(ke)(()=>({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:e,checkedIconStyles:t,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 h(jt,{checkedIcon:h(n,{sx:o,children:h(e,{style:{...s,...t}})}),icon:h(n,{sx:o,children:h(r,{style:{...s,...i}})}),...a})}var Nt=Mt;function Pt(e){let[t,n]=p(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=s(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return l(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,s(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}var Ft=Pt;export{je as CollapsableItem,et as DarkModeToggle,nt as DropdownMenu,Be as DropdownMenu2,Fe as DropdownMenuExternalLink,Le as DropdownMenuInternalLink,ze as DropdownMenuItem,J as ExternalLink,Y as FileInput,lt as FileInputList,it as FileType,dt as IconWithPopover,X as InternalLink,mt as ListItemInternalLink,gt as Loader,V as LoaderData,H as LoaderError,U as LoaderProvider,Ke as ModeProvider,vt as NavigationBottom,St as NavigationDrawer,wt as PopoverText,Et as ReactPlayground,Ye as ScreenSizeProvider,Ot as SkeletonRow,Qe as SnackbarProvider,At as SubmitButton,Nt as SwitchWithIcons,R as useDropdownMenu,Ft as useHash,G as useMode,qe as useScreenSize,Xe as useSnackbar};
+import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/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};
 //# sourceMappingURL=index.js.map