@alextheman/components 6.6.2 → 6.8.0

package/dist/index.d.cts

@@ -6,14 +6,14 @@ import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWit
 import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { LinkProps } from "@mui/material/Link";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
-import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
-import { SvgIconTypeMap } from "@mui/material/SvgIcon";
-import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
-import { TypographyProps } from "@mui/material/Typography";
 import { LiveProvider } from "react-live";
+import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SwitchProps } from "@mui/material/Switch";
+import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { TypographyProps } from "@mui/material/Typography";
 
 //#region src/components/Artwork.d.ts
 /** The artwork associated with the package's theme song, _An Interface For You And I_. */
@@ -163,24 +163,6 @@ declare function FileInputList({
   ...fileInputProps
 }: FileInputListProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/IconWithPopover.d.ts
-interface IconWithPopoverProps {
-  icon: (OverridableComponent<SvgIconTypeMap<unknown, "svg">> & {
-    muiName: string;
-  }) | ElementType;
-  onOpen?: () => void;
-  onClose?: () => void;
-  iconProps?: SvgIconTypeMap<unknown, "svg">["props"];
-  children: ReactNode;
-}
-declare function IconWithPopover({
-  icon: Icon,
-  onOpen,
-  onClose,
-  iconProps,
-  children
-}: IconWithPopoverProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/InternalLink.d.ts
 interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
   to: `/${string}` | `~/${string}` | (string & {});
@@ -205,16 +187,6 @@ declare function InternalLink({
   ...linkProps
 }: InternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/ListItemInternalLink.d.ts
-interface ListItemInternalLinkProps extends Omit<ListItemButtonProps, "href"> {
-  children: ReactNode;
-  to: string;
-}
-declare function ListItemInternalLink({
-  children,
-  ...listItemButtonProps
-}: ListItemInternalLinkProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/types/ContextHookOptions.d.ts
 interface ContextHookOptions<S extends boolean = true> {
   strict?: S;
@@ -323,14 +295,6 @@ type LoaderProviderProps<T> = LoaderContextValue<T> & {
  * 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 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,
@@ -354,12 +318,6 @@ interface LoaderDataProps<T> {
  * The component responsible for showing the data provided by LoaderProvider.
  *
  * @template DataType - The type of data being 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 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,
@@ -390,13 +348,6 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
 type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
 /**
  * The component responsible for showing any errors provided by LoaderProvider.
- *
- * @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,
@@ -473,15 +424,6 @@ type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "l
  * 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 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,
@@ -555,16 +497,6 @@ declare function Page({
   children
 }: PageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/PopoverText.d.ts
-interface PopoverTextProps extends TypographyProps {
-  text: string;
-}
-declare function PopoverText({
-  text,
-  sx,
-  ...typographyProps
-}: PopoverTextProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/ReactPlayground.d.ts
 interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
   previewStyles?: SxProps<Theme>;
@@ -613,8 +545,64 @@ declare function SwitchWithIcons({
   ...switchProps
 }: SwitchWithIconsProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/DarkModeToggle.d.ts
+/** @deprecated This component has been renamed to `ModeToggle`. */
+declare const DarkModeToggle: typeof ModeToggle;
+//#endregion
+//#region src/deprecated/IconWithPopover.d.ts
+interface IconWithPopoverProps {
+  icon?: (OverridableComponent<SvgIconTypeMap<unknown, "svg">> & {
+    muiName: string;
+  }) | ElementType;
+  onOpen?: () => void;
+  onClose?: () => void;
+  iconProps?: SvgIconTypeMap<unknown, "svg">["props"];
+  children: ReactNode;
+}
+/**
+ * @deprecated This component is not well-designed for accessibility purposes. Please use the `Tooltip` component from `@mui/material` instead.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip title="Text to display on hover">
+ *   <MdVisibility />
+ * </Tooltip>
+ * ```
+ */
+declare function IconWithPopover({
+  icon: Icon,
+  onOpen,
+  onClose,
+  iconProps,
+  children
+}: IconWithPopoverProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/deprecated/ListItemInternalLink.d.ts
+interface ListItemInternalLinkProps extends Omit<ListItemButtonProps, "href"> {
+  children: ReactNode;
+  to: string;
+}
+/** @deprecated Probably not that worth centralising here - can be easily recreated per use case. */
+declare function ListItemInternalLink({
+  children,
+  ...listItemButtonProps
+}: ListItemInternalLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/deprecated/PopoverText.d.ts
+interface PopoverTextProps extends TypographyProps {
+  text: string;
+}
+/**
+ * @deprecated This component has been deprecated alongside `IconWithPopover`.
+ */
+declare function PopoverText({
+  text,
+  sx,
+  ...typographyProps
+}: PopoverTextProps): 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>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
+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, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -6,11 +6,11 @@ import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWit
 import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { LinkProps } from "@mui/material/Link";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
-import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import { SwitchProps } from "@mui/material/Switch";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { LiveProvider } from "react-live";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
@@ -163,24 +163,6 @@ declare function FileInputList({
   ...fileInputProps
 }: FileInputListProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/IconWithPopover.d.ts
-interface IconWithPopoverProps {
-  icon: (OverridableComponent<SvgIconTypeMap<unknown, "svg">> & {
-    muiName: string;
-  }) | ElementType;
-  onOpen?: () => void;
-  onClose?: () => void;
-  iconProps?: SvgIconTypeMap<unknown, "svg">["props"];
-  children: ReactNode;
-}
-declare function IconWithPopover({
-  icon: Icon,
-  onOpen,
-  onClose,
-  iconProps,
-  children
-}: IconWithPopoverProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/InternalLink.d.ts
 interface InternalLinkProps extends Omit<LinkProps, "href" | "component"> {
   to: `/${string}` | `~/${string}` | (string & {});
@@ -205,16 +187,6 @@ declare function InternalLink({
   ...linkProps
 }: InternalLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/ListItemInternalLink.d.ts
-interface ListItemInternalLinkProps extends Omit<ListItemButtonProps, "href"> {
-  children: ReactNode;
-  to: string;
-}
-declare function ListItemInternalLink({
-  children,
-  ...listItemButtonProps
-}: ListItemInternalLinkProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/types/ContextHookOptions.d.ts
 interface ContextHookOptions<S extends boolean = true> {
   strict?: S;
@@ -323,14 +295,6 @@ type LoaderProviderProps<T> = LoaderContextValue<T> & {
  * 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 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,
@@ -354,12 +318,6 @@ interface LoaderDataProps<T> {
  * The component responsible for showing the data provided by LoaderProvider.
  *
  * @template DataType - The type of data being 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 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,
@@ -390,13 +348,6 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
 type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
 /**
  * The component responsible for showing any errors provided by LoaderProvider.
- *
- * @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,
@@ -473,15 +424,6 @@ type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "l
  * 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 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,
@@ -555,16 +497,6 @@ declare function Page({
   children
 }: PageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/PopoverText.d.ts
-interface PopoverTextProps extends TypographyProps {
-  text: string;
-}
-declare function PopoverText({
-  text,
-  sx,
-  ...typographyProps
-}: PopoverTextProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/ReactPlayground.d.ts
 interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
   previewStyles?: SxProps<Theme>;
@@ -613,8 +545,64 @@ declare function SwitchWithIcons({
   ...switchProps
 }: SwitchWithIconsProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/DarkModeToggle.d.ts
+/** @deprecated This component has been renamed to `ModeToggle`. */
+declare const DarkModeToggle: typeof ModeToggle;
+//#endregion
+//#region src/deprecated/IconWithPopover.d.ts
+interface IconWithPopoverProps {
+  icon?: (OverridableComponent<SvgIconTypeMap<unknown, "svg">> & {
+    muiName: string;
+  }) | ElementType;
+  onOpen?: () => void;
+  onClose?: () => void;
+  iconProps?: SvgIconTypeMap<unknown, "svg">["props"];
+  children: ReactNode;
+}
+/**
+ * @deprecated This component is not well-designed for accessibility purposes. Please use the `Tooltip` component from `@mui/material` instead.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip title="Text to display on hover">
+ *   <MdVisibility />
+ * </Tooltip>
+ * ```
+ */
+declare function IconWithPopover({
+  icon: Icon,
+  onOpen,
+  onClose,
+  iconProps,
+  children
+}: IconWithPopoverProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/deprecated/ListItemInternalLink.d.ts
+interface ListItemInternalLinkProps extends Omit<ListItemButtonProps, "href"> {
+  children: ReactNode;
+  to: string;
+}
+/** @deprecated Probably not that worth centralising here - can be easily recreated per use case. */
+declare function ListItemInternalLink({
+  children,
+  ...listItemButtonProps
+}: ListItemInternalLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/deprecated/PopoverText.d.ts
+interface PopoverTextProps extends TypographyProps {
+  text: string;
+}
+/**
+ * @deprecated This component has been deprecated alongside `IconWithPopover`.
+ */
+declare function PopoverText({
+  text,
+  sx,
+  ...typographyProps
+}: PopoverTextProps): 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>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
+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, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,3 @@
-import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as x,MdArrowDropUp as S,MdChevronLeft as te,MdChevronRight as ne,MdCloudUpload as re,MdDelete as ie,MdMenu as ae,MdOutlineDarkMode as oe,MdOutlineLightMode as se}from"react-icons/md";import C from"@mui/material/Button";import w from"@mui/material/Menu";import T from"@mui/material/Link";import{ThemeProvider as ce,createTheme as le,styled as E,useTheme as ue}from"@mui/material/styles";import D from"@mui/material/IconButton";import O from"@mui/material/List";import k from"@mui/material/ListItem";import A from"@mui/material/ListItemText";import de from"@mui/material/Popover";import{Link as j,useLocation as fe}from"react-router-dom";import M from"@mui/material/ListItemButton";import N from"@mui/material/CircularProgress";import P from"@mui/material/MenuItem";import F from"@mui/material/Alert";import I from"@mui/material/CssBaseline";import{fillArray as pe,truncate as L,wait as me}from"@alextheman/utility";import he from"@mui/material/Snackbar";import ge from"@mui/material/Tooltip";import _e from"@mui/material/Switch";import ve from"@mui/material/BottomNavigation";import ye from"@mui/material/BottomNavigationAction";import be from"@mui/material/Paper";import xe from"@mui/material/AppBar";import Se from"@mui/material/Drawer";import Ce from"@mui/material/ListItemIcon";import we from"@mui/material/Toolbar";import{stripIndent as Te}from"common-tags";import{LiveEditor as Ee,LiveError as De,LivePreview as Oe,LiveProvider as ke}from"react-live";import Ae from"@mui/material/Skeleton";import je from"@mui/material/TableCell";import Me from"@mui/material/TableRow";import{useFormContext as Ne}from"react-hook-form";function R({containerLabel:e,chipLabels:r}){return l(t,{sx:{width:320,height:420,backgroundColor:`rgba(255,255,255,0.07)`,backdropFilter:`blur(8px)`,border:`1px solid rgba(255,255,255,0.06)`,boxShadow:`0 10px 40px rgba(0,0,0,0.35)`},children:u(n,{children:[l(s,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),l(o,{spacing:1,children:r.map(e=>l(i,{label:e,sx:{backgroundColor:`rgba(255,255,255,0.11)`,color:`rgba(255,255,255,0.88)`,border:`1px solid rgba(255,255,255,0.06)`}},e))})]})})}function Pe(){return l(e,{sx:{width:120,height:6,borderRadius:3,background:`linear-gradient(90deg, #f43f5e, #a78bfa, #22d3ee)`,boxShadow:`0 0 24px rgba(167,139,250,0.55)`}})}function Fe(){return u(t,{sx:{width:1e3,height:1e3,display:`flex`,flexDirection:`column`,justifyContent:`space-between`,p:4,background:`radial-gradient(circle at 20% 10%, rgba(167,139,250,0.35) 0%, rgba(167,139,250,0.12) 35%, rgba(0,0,0,0) 55%), linear-gradient(135deg, #3a3380 0%, #1d2e5f 40%, #2d3f55 100%)`,color:`white`},elevation:0,children:[l(r,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),l(a,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),l(n,{sx:{flex:1,display:`flex`,alignItems:`center`},children:u(o,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[l(R,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Pe,{}),l(R,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Ie({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(S,{}),closedIcon:m=l(x,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g]),u(e,{children:[u(s,{onClick:()=>{v(e=>!e)},sx:h?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===d?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":g,children:[o,g?p:m]}),l(f,{in:g,...c,children:i})]})}function Le({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(S,{}),isClosedIcon:o=l(x,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===C&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(w,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function z({href:e,children:t,ref:n,...r}){return l(T,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Re={PDF:`application/pdf`,PNG:`image/png`,JPEG:`image/jpeg`,JPG:`image/jpg`,XLSX:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`,DOCX:`application/vnd.openxmlformats-officedocument.wordprocessingml.document`,MP3:`audio/mp3`,MP4:`video/mp4`,WAV:`audio/wav`},ze=E(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Be=E(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function B({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(C,{variant:`contained`,component:`label`,"aria-label":`File input button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(c)?.click())},...a,startIcon:a.startIcon??l(re,{}),children:[t,l(ze,{id:c,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?l(Be,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:d}):d}function Ve({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(B,{...i,multiple:r,onFileInput:a}),l(O,{children:t.map(e=>l(k,{secondaryAction:l(D,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(A,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function He({icon:t,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(de,{id:d,sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function V({to:e,component:t=j,children:n,ref:r,...i}){return l(T,{component:t,to:e,ref:r,...i,children:n})}function Ue({children:e,...t}){return l(M,{component:V,...t,children:e})}const H=m(void 0);function U({strict:e=!0}={}){let t=g(H);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function We({children:e,button:t=C,buttonProps:n,openIcon:r=l(S,{}),closedIcon:i=l(x,{})}){let[a,o]=b(null),s=y(()=>!!a,[a]);function c(){o(null)}return u(H.Provider,{value:{closeMenu:c,isDropdownOpen:s},children:[l(t,{"aria-controls":s?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":s,endIcon:s?r:i,...n,onClick:e=>{e.defaultPrevented||o(e.currentTarget),n?.onClick&&n?.onClick(e)}}),l(w,{anchorEl:a,open:s,onClose:c,children:e})]})}function Ge({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=U();return l(P,{component:z,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Ke({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=U();return l(P,{component:V,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function qe({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=U();return l(P,{component:e??C,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var Je=We;const W=m(void 0);function G({strict:e=!0}={}){let t=g(W);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function Ye({children:e,loadingComponent:t=l(N,{}),...n}){return l(W.Provider,{value:{loadingComponent:t,...n},children:e})}function K({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=G(),u=t??a;return r?l(c,{children:n??o}):s||i==null?l(c,{}):u?typeof e==`function`?l(c,{children:e(u(i))}):l(c,{children:e}):typeof e==`function`?l(c,{children:e(i)}):l(c,{children:e})}function q({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=G(),f=i??d,p=ee(!1),m=e??u;return s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(F,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(f&&!p.current&&(console.error(`Data is nullable after loading.`),p.current=!0),l(c,{children:r})):o===void 0&&(f&&!p.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),p.current=!0),t)?l(c,{children:t}):o===null&&(f&&!p.current&&(console.error(`Data is null after loading.`),p.current=!0),n)?l(c,{children:n}):l(F,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var J=Ye;const Y=m({toggleMode:()=>{},mode:`dark`});function X({strict:e=!0}={}){let t=g(Y);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Xe({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>le({palette:{mode:n}}),[n]);return l(Y.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ce,{theme:i,children:[l(I,{}),e]})})}const Z=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ze({strict:e=!0}={}){let t=g(Z);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function Qe({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=b(window.innerWidth),[a,o]=b(window.innerHeight);_(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=y(()=>r>t&&a>n,[r,a,t,n]);return l(Z.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Q=m(void 0);function $e({strict:e=!0}={}){let t=g(Q);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function et({children:e,autoHideDuration:t=5e3}){let[n,r]=b(!1),[i,a]=b(t),[o,s]=b(``),[c,d]=b(`info`);function f(e,n,i){r(!0),a(i??t),d(n??`info`),s(e)}async function p(){r(!1),await me(.2),s(``)}return u(Q.Provider,{value:{addSnackbar:f},children:[l(he,{open:n,autoHideDuration:i,onClose:p,children:l(F,{onClose:p,severity:c,children:o})}),e]})}function tt({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(N,{}),...s}){return u(J,{loadingComponent:o,...s,children:[l(q,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(K,{children:e})]})}const nt=E(_e)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function $({checkedIcon:t,checkedIconStyles:n,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return l(nt,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function rt(){let{mode:e,toggleMode:t}=X(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ge,{title:r,children:l($,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function it({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(be,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(ve,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(ye,{...e,component:j},e.value))})})]})}function at(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ot(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const st=E(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),ct=E(xe,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),lt=E(Se,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...at(e),"& .MuiDrawer-paper":at(e)}},{props:({open:e})=>!e,style:{...ot(e),"& .MuiDrawer-paper":ot(e)}}]}));function ut({title:t,navItems:n,children:r,headerElements:i}){let o=ue(),[c,d]=b(!0),f=fe();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(I,{}),l(ct,{position:`fixed`,open:c,children:u(we,{children:[l(D,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(ae,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(lt,{variant:`permanent`,open:c,children:[l(st,{children:l(D,{onClick:h,children:o.direction===`rtl`?l(ne,{}):l(te,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(O,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:L(e.category,4)}),e.options.map(e=>l(k,{disablePadding:!0,sx:{display:`block`},children:u(M,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:j,to:e.to,selected:f.pathname===e.to,children:[l(Ce,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:L(e.label,4)})}),l(A,{primary:e.label,sx:[c?{opacity:1}:{opacity:0}]})]})},e.to))]}),l(a,{})]},e.category))]}),u(e,{component:`main`,sx:{flexGrow:1,p:3},children:[l(st,{}),r]})]})}function dt({title:e,subtitle:i,action:o,children:d}){return u(t,{children:[l(r,{title:u(c,{children:[l(s,{variant:`h6`,children:e}),i?l(s,{variant:`body2`,color:`text.secondary`,children:i}):null]}),action:o}),l(a,{}),l(n,{children:d})]})}function ft({text:e,sx:t,...n}){return l(c,{children:e.split(`
-`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}function pt({code:t,previewStyles:n,...r}){let{mode:i}=X(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=n?{...a,...n}:{...a};return l(e,{sx:{borderRadius:1,border:.5,padding:2},children:u(ke,{...r,code:Te(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Ee,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Oe,{}),l(De,{})]})]})})}function mt({columns:e}){return l(Me,{children:pe(e=>l(je,{children:l(Ae,{})},e),e)})}function ht({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ne();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function gt(e){let[t,n]=b(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=h(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return _(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,h(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{Fe as Artwork,Ie as CollapsableItem,Le as DropdownMenu,Je as DropdownMenu2,Ge as DropdownMenuExternalLink,Ke as DropdownMenuInternalLink,qe as DropdownMenuItem,z as ExternalLink,B as FileInput,Ve as FileInputList,Re as FileType,He as IconWithPopover,V as InternalLink,Ue as ListItemInternalLink,tt as Loader,K as LoaderData,q as LoaderError,J as LoaderProvider,Xe as ModeProvider,rt as ModeToggle,it as NavigationBottom,ut as NavigationDrawer,dt as Page,ft as PopoverText,pt as ReactPlayground,Qe as ScreenSizeProvider,mt as SkeletonRow,et as SnackbarProvider,ht as SubmitButton,$ as SwitchWithIcons,U as useDropdownMenu,gt as useHash,X as useMode,Ze as useScreenSize,$e as useSnackbar};
+import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as x,MdArrowDropUp as S,MdChevronLeft as te,MdChevronRight as ne,MdCloudUpload as re,MdDelete as ie,MdMenu as ae,MdOutlineDarkMode as oe,MdOutlineLightMode as se,MdVisibility as ce}from"react-icons/md";import C from"@mui/material/Button";import le from"@mui/material/Menu";import w from"@mui/material/Link";import{ThemeProvider as ue,createTheme as de,styled as T,useTheme as fe}from"@mui/material/styles";import E from"@mui/material/IconButton";import D from"@mui/material/List";import O from"@mui/material/ListItem";import k from"@mui/material/ListItemText";import{Link as A,useLocation as pe}from"react-router-dom";import j from"@mui/material/CircularProgress";import M from"@mui/material/MenuItem";import N from"@mui/material/Alert";import P from"@mui/material/CssBaseline";import{fillArray as me,truncate as F,wait as he}from"@alextheman/utility";import ge from"@mui/material/Snackbar";import _e from"@mui/material/Tooltip";import ve from"@mui/material/Switch";import ye from"@mui/material/BottomNavigation";import be from"@mui/material/BottomNavigationAction";import xe from"@mui/material/Paper";import Se from"@mui/material/AppBar";import Ce from"@mui/material/Drawer";import I from"@mui/material/ListItemButton";import we from"@mui/material/ListItemIcon";import Te from"@mui/material/Toolbar";import{stripIndent as Ee}from"common-tags";import{LiveEditor as De,LiveError as Oe,LivePreview as ke,LiveProvider as Ae}from"react-live";import je from"@mui/material/Skeleton";import Me from"@mui/material/TableCell";import Ne from"@mui/material/TableRow";import{useFormContext as Pe}from"react-hook-form";import Fe from"@mui/material/Popover";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 Ie(){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 Le(){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(Ie,{}),l(L,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Re({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(S,{}),closedIcon:m=l(x,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g]),u(e,{children:[u(s,{onClick:()=>{v(e=>!e)},sx:h?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===d?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":g,children:[o,g?p:m]}),l(f,{in:g,...c,children:i})]})}function ze({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(S,{}),isClosedIcon:o=l(x,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===C&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(le,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function R({href:e,children:t,ref:n,...r}){return l(w,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Be={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`},Ve=T(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),He=T(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function z({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(C,{variant:`contained`,component:`label`,"aria-label":`File input button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(c)?.click())},...a,startIcon:a.startIcon??l(re,{}),children:[t,l(Ve,{id:c,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?l(He,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:d}):d}function Ue({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(z,{...i,multiple:r,onFileInput:a}),l(D,{children:t.map(e=>l(O,{secondaryAction:l(E,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(k,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function B({to:e,component:t=A,children:n,ref:r,...i}){return l(w,{component:t,to:e,ref:r,...i,children:n})}const V=m(void 0);function H({strict:e=!0}={}){let t=g(V);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function We({children:e,button:t=C,buttonProps:n,openIcon:r=l(S,{}),closedIcon:i=l(x,{})}){let[a,o]=b(null),s=y(()=>!!a,[a]);function c(){o(null)}return u(V.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(le,{anchorEl:a,open:s,onClose:c,children:e})]})}function Ge({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=H();return l(M,{component:R,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Ke({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=H();return l(M,{component:B,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function qe({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=H();return l(M,{component:e??C,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var Je=We;const U=m(void 0);function W({strict:e=!0}={}){let t=g(U);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function Ye({children:e,loadingComponent:t=l(j,{}),...n}){return l(U.Provider,{value:{loadingComponent:t,...n},children:e})}function G({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=W(),u=t??a;return r?l(c,{children:n??o}):s||i==null?l(c,{}):u?typeof e==`function`?l(c,{children:e(u(i))}):l(c,{children:e}):typeof e==`function`?l(c,{children:e(i)}):l(c,{children:e})}function K({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=W(),f=i??d,p=ee(!1),m=e??u;return s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(N,{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(N,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var q=Ye;const J=m({toggleMode:()=>{},mode:`dark`});function Y({strict:e=!0}={}){let t=g(J);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Xe({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>de({palette:{mode:n}}),[n]);return l(J.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ue,{theme:i,children:[l(P,{}),e]})})}const X=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ze({strict:e=!0}={}){let t=g(X);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function Qe({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=b(window.innerWidth),[a,o]=b(window.innerHeight);_(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=y(()=>r>t&&a>n,[r,a,t,n]);return l(X.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Z=m(void 0);function $e({strict:e=!0}={}){let t=g(Z);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function et({children:e,autoHideDuration:t=5e3}){let[n,r]=b(!1),[i,a]=b(t),[o,s]=b(``),[c,d]=b(`info`);function f(e,n,i){r(!0),a(i??t),d(n??`info`),s(e)}async function p(){r(!1),await he(.2),s(``)}return u(Z.Provider,{value:{addSnackbar:f},children:[l(ge,{open:n,autoHideDuration:i,onClose:p,children:l(N,{onClose:p,severity:c,children:o})}),e]})}function tt({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(j,{}),...s}){return u(q,{loadingComponent:o,...s,children:[l(K,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(G,{children:e})]})}const nt=T(ve)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Q({checkedIcon:t,checkedIconStyles:n,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return l(nt,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function $(){let{mode:e,toggleMode:t}=Y(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(_e,{title:r,children:l(Q,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function rt({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(xe,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(ye,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(be,{...e,component:A},e.value))})})]})}function it(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function at(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 ot=T(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),st=T(Se,{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})}}]})),ct=T(Ce,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...it(e),"& .MuiDrawer-paper":it(e)}},{props:({open:e})=>!e,style:{...at(e),"& .MuiDrawer-paper":at(e)}}]}));function lt({title:t,navItems:n,children:r,headerElements:i}){let o=fe(),[c,d]=b(!0),f=pe();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(P,{}),l(st,{position:`fixed`,open:c,children:u(Te,{children:[l(E,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(ae,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(ct,{variant:`permanent`,open:c,children:[l(ot,{children:l(E,{onClick:h,children:o.direction===`rtl`?l(ne,{}):l(te,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(D,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:F(e.category,4)}),e.options.map(e=>l(O,{disablePadding:!0,sx:{display:`block`},children:u(I,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:A,to:e.to,selected:f.pathname===e.to,children:[l(we,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:F(e.label,4)})}),l(k,{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(ot,{}),r]})]})}function ut({title:e,subtitle:i,action:o,children:d}){return u(t,{children:[l(r,{title:u(c,{children:[l(s,{variant:`h6`,children:e}),i?l(s,{variant:`body2`,color:`text.secondary`,children:i}):null]}),action:o}),l(a,{}),l(n,{children:d})]})}function dt({code:t,previewStyles:n,...r}){let{mode:i}=Y(),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(Ae,{...r,code:Ee(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(De,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(ke,{}),l(Oe,{})]})]})})}function ft({columns:e}){return l(Ne,{children:me(e=>l(Me,{children:l(je,{})},e),e)})}function pt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Pe();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}const mt=$;function ht({icon:t=ce,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(Fe,{id:d,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function gt({children:e,...t}){return l(I,{component:B,...t,children:e})}function _t({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 vt(e){let[t,n]=b(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=h(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return _(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,h(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{Le as Artwork,Re as CollapsableItem,mt as DarkModeToggle,ze as DropdownMenu,Je as DropdownMenu2,Ge as DropdownMenuExternalLink,Ke as DropdownMenuInternalLink,qe as DropdownMenuItem,R as ExternalLink,z as FileInput,Ue as FileInputList,Be as FileType,ht as IconWithPopover,B as InternalLink,gt as ListItemInternalLink,tt as Loader,G as LoaderData,K as LoaderError,q as LoaderProvider,Xe as ModeProvider,$ as ModeToggle,rt as NavigationBottom,lt as NavigationDrawer,ut as Page,_t as PopoverText,dt as ReactPlayground,Qe as ScreenSizeProvider,ft as SkeletonRow,et as SnackbarProvider,pt as SubmitButton,Q as SwitchWithIcons,H as useDropdownMenu,vt as useHash,Y as useMode,Ze as useScreenSize,$e as useSnackbar};
 //# sourceMappingURL=index.js.map