@alextheman/components 6.25.2 → 6.26.0

package/dist/index.d.ts

@@ -2,15 +2,15 @@ import { TypographyProps } from "@mui/material/Typography";
 import { CollapseProps } from "@mui/material/Collapse";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, Key, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import { LinkProps } from "@mui/material/Link";
-import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
-import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
-import { SwitchProps } from "@mui/material/Switch";
-import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
+import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
+import { PaletteMode, SxProps, Theme, ThemeOptions } from "@mui/material/styles";
 import { AlertColor } from "@mui/material/Alert";
-import { LiveProvider } from "react-live";
+import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
+import { SwitchProps } from "@mui/material/Switch";
 import { MenuProps } from "@mui/material/Menu";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
+import { LiveProvider } from "react-live";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
@@ -137,10 +137,6 @@ declare function FileInputList({
   ...fileInputProps
 }: FileInputListProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-//#region src/components/ModeToggle.d.ts
-/** A toggle to switch between dark mode and light mode. Must be used in a `ModeProvider`. */
-declare function ModeToggle(): import("react/jsx-runtime").JSX.Element;
-//#endregion
 //#region src/components/Page.d.ts
 interface PageProps {
   /** The Page title to show */
@@ -294,46 +290,6 @@ declare function QueryBoundaryFallback({
   ...queryBoundaryNullableProps
 }: QueryBoundaryFallbackProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-//#region src/groups/QueryBoundary/index.d.ts
-interface QueryBase {
-  /** The current loading status (true if loading, false if not) */
-  isLoading?: boolean;
-  /** The error given if the response gave an error. */
-  error?: unknown;
-}
-interface QuerySingle<DataType> extends QueryBase {
-  /** The data being loaded. */
-  data: DataType | null | undefined;
-  dataCollection?: never;
-}
-interface QueryMultiple<ItemType> extends QueryBase {
-  /** An array of data items being loaded. */
-  dataCollection: Array<ItemType> | null | undefined;
-  data?: never;
-}
-type Query<DataType> = QuerySingle<DataType> | QueryMultiple<DataType>;
-interface CreateQueryBoundaryParameters<DataType> {
-  query: Query<DataType>;
-}
-interface DefaultQueryBoundaryComponents<DataType> {
-  Context: (props: {
-    children: ReactNode;
-  }) => JSX.Element;
-  Error: typeof QueryBoundaryError;
-  Data: typeof QueryBoundaryData<DataType>;
-  DataMap: typeof QueryBoundaryDataMap<DataType>;
-  Fallback: typeof QueryBoundaryFallback;
-  Nullable: typeof QueryBoundaryNullable;
-}
-/**
- * A creator function to create a system of QueryBoundary components with the data fully typed throughout.
- *
- * @deprecated Please use either `createBaseQueryBoundary`, `createItemQueryBoundary`, or `createListQueryBoundary` from `@alextheman/components/v7` instead.
- */
-declare function createQueryBoundary<DataType>({
-  query
-}: CreateQueryBoundaryParameters<DataType>): DefaultQueryBoundaryComponents<DataType>;
-//#endregion
 //#region src/types/ContextHookOptions.d.ts
 interface ContextHookOptions<Strict extends boolean = true> {
   /** Error if the context is missing if this is set to true. */
@@ -385,7 +341,7 @@ declare function QueryBoundaryProvider<DataType>({
 }: QueryBoundaryProviderProps<DataType>): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/groups/QueryBoundary/creators/createBaseQueryBoundary.d.ts
-interface QueryBase$1<DataType> {
+interface QueryBase<DataType> {
   /** The current loading status (true if loading, false if not) */
   isLoading?: boolean;
   /** The error given if the response gave an error. */
@@ -394,7 +350,7 @@ interface QueryBase$1<DataType> {
   data: DataType;
 }
 interface CreateBaseQueryBoundaryParameters<DataType> {
-  query: QueryBase$1<DataType>;
+  query: QueryBase<DataType>;
 }
 interface DefaultQueryBoundaryComponentsBase {
   Context: (props: {
@@ -410,7 +366,7 @@ declare function createBaseQueryBoundary<DataType>({
 }: CreateBaseQueryBoundaryParameters<DataType>): DefaultQueryBoundaryComponentsBase;
 //#endregion
 //#region src/groups/QueryBoundary/creators/createItemQueryBoundary.d.ts
-interface QueryItem<DataType> extends Omit<QueryBase$1<DataType>, "data"> {
+interface QueryItem<DataType> extends Omit<QueryBase<DataType>, "data"> {
   /** The data being loaded. */
   data: DataType | null | undefined;
 }
@@ -426,7 +382,7 @@ declare function createItemQueryBoundary<DataType>({
 }: CreateItemQueryBoundaryParameters<DataType>): DefaultQueryBoundaryItemComponents<DataType>;
 //#endregion
 //#region src/groups/QueryBoundary/creators/createListQueryBoundary.d.ts
-interface QueryList<DataType> extends Omit<QueryBase$1<DataType>, "data"> {
+interface QueryList<DataType> extends Omit<QueryBase<DataType>, "data"> {
   /** The data being loaded. */
   data: Array<DataType> | null | undefined;
 }
@@ -488,18 +444,6 @@ declare function QueryBoundaryWrapper<DataType>({
   dataParser
 }: QueryBoundaryWrapperProps<DataType>): import("react/jsx-runtime").JSX.Element;
 //#endregion
-//#region src/components/ReactPlayground.d.ts
-interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
-  /** Extra styling to apply to the preview. Must be compatible with the Material UI `sx` prop. */
-  previewStyles?: SxProps<Theme>;
-}
-/** Renders a playground to help demonstrate your React code in an interactive setting. */
-declare function ReactPlayground({
-  code,
-  previewStyles,
-  ...liveProviderProps
-}: ReactPlaygroundProps): import("react/jsx-runtime").JSX.Element;
-//#endregion
 //#region src/components/SkeletonRow.d.ts
 interface SkeletonRowProps {
   /** The number of columns the SkeletonRow should display. */
@@ -534,6 +478,10 @@ declare function SwitchWithIcons({
   ...switchProps
 }: SwitchWithIconsProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
+//#region src/components/ThemeToggle.d.ts
+/** A toggle to switch between dark mode and light mode. Must be used in a `ThemeProvider`. */
+declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+//#endregion
 //#region src/deprecated/DropdownMenu.d.ts
 interface DropdownMenuProps {
   children: ReactNode | ((closeMenu: () => void) => ReactNode);
@@ -559,9 +507,49 @@ declare function DropdownMenu({
   onClose
 }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
+//#region src/deprecated/createQueryBoundary.d.ts
+interface QueryBase$1 {
+  /** The current loading status (true if loading, false if not) */
+  isLoading?: boolean;
+  /** The error given if the response gave an error. */
+  error?: unknown;
+}
+interface QuerySingle<DataType> extends QueryBase$1 {
+  /** The data being loaded. */
+  data: DataType | null | undefined;
+  dataCollection?: never;
+}
+interface QueryMultiple<ItemType> extends QueryBase$1 {
+  /** An array of data items being loaded. */
+  dataCollection: Array<ItemType> | null | undefined;
+  data?: never;
+}
+type Query<DataType> = QuerySingle<DataType> | QueryMultiple<DataType>;
+interface CreateQueryBoundaryParameters<DataType> {
+  query: Query<DataType>;
+}
+interface DefaultQueryBoundaryComponents<DataType> {
+  Context: (props: {
+    children: ReactNode;
+  }) => JSX.Element;
+  Error: typeof QueryBoundaryError;
+  Data: typeof QueryBoundaryData<DataType>;
+  DataMap: typeof QueryBoundaryDataMap<DataType>;
+  Fallback: typeof QueryBoundaryFallback;
+  Nullable: typeof QueryBoundaryNullable;
+}
+/**
+ * A creator function to create a system of QueryBoundary components with the data fully typed throughout.
+ *
+ * @deprecated Please use either `createBaseQueryBoundary`, `createItemQueryBoundary`, or `createListQueryBoundary` from `@alextheman/components/v7` instead.
+ */
+declare function createQueryBoundary<DataType>({
+  query
+}: CreateQueryBoundaryParameters<DataType>): DefaultQueryBoundaryComponents<DataType>;
+//#endregion
 //#region src/deprecated/DarkModeToggle.d.ts
-/** @deprecated This component has been renamed to `ModeToggle`. */
-declare const DarkModeToggle: typeof ModeToggle;
+/** @deprecated This component has been renamed to `ThemeToggle`. */
+declare const DarkModeToggle: typeof ThemeToggle;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenu.d.ts
 interface DropdownMenuProps$1 extends Omit<MenuProps, "anchorEl" | "open"> {
@@ -580,7 +568,7 @@ declare function DropdownMenu$1({
 }: DropdownMenuProps$1): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenuItem.d.ts
-type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1> = {
+type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof MUIButton> = {
   /**
    * An optional component to provide to override the current component.
    *
@@ -595,7 +583,7 @@ type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1
   onClick?: ComponentProps<RootComponent>["onClick"];
 } & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
 /** Represents a menu item to be used inside the `DropdownMenu`. It must be used as children of the `DropdownMenu` component. */
-declare function DropdownMenuItem$1<RootComponent extends ElementType = typeof Button$1>({
+declare function DropdownMenuItem$1<RootComponent extends ElementType = typeof MUIButton>({
   component,
   children,
   ref,
@@ -779,6 +767,118 @@ type LoaderProviderProps<DataType> = QueryBoundaryProviderProps<DataType>;
 /** @deprecated This component has been renamed to QueryBoundaryProvider */
 declare const LoaderProvider: typeof QueryBoundaryProvider;
 //#endregion
+//#region src/providers/AudioProvider/index.d.ts
+interface TrackData {
+  title: string;
+  src: string;
+  artist: string;
+}
+interface AudioContextValue {
+  tracks: Array<TrackData>;
+  currentTrack: TrackData | null;
+  setCurrentTrack: Dispatch<SetStateAction<TrackData | null>>;
+}
+interface AudioProviderProps {
+  tracks: Array<TrackData>;
+  children: ReactNode;
+}
+/** Allows access to the audio information provided by AudioProvider. Will fail if AudioProvider could not be accessed and strict mode is true. */
+declare function useAudioContext<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, AudioContextValue>;
+/** Provides audio information to the children components. */
+declare function AudioProvider({
+  tracks,
+  children
+}: AudioProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/providers/AudioProvider/AudioControls.d.ts
+/** Controls the tracks provided by the AudioProvider. */
+declare function AudioControls(): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/providers/ScreenSizeProvider.d.ts
+interface ScreenSizeProps {
+  /** The children that will be receiving the ScreenSizeContext. */
+  children: ReactNode;
+  /** The minimum screen width in pixels required to be considered a large screen. */
+  largeScreenWidth?: number;
+  /** The minimum screen height in pixels required to be considered a large screen. */
+  largeScreenHeight?: number;
+}
+interface ScreenDimensions {
+  /** The current window width. */
+  windowWidth: number;
+  /** The current window height. */
+  windowHeight: number;
+}
+interface ScreenSizeContextValue extends ScreenDimensions {
+  /** Whether the screen is a large screen or not. */
+  isLargeScreen: boolean;
+}
+/** Access the screen size context directly. */
+declare function useScreenSize<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ScreenSizeContextValue>;
+/** Provides context about the current screen size. */
+declare function ScreenSizeProvider({
+  children,
+  largeScreenWidth,
+  largeScreenHeight
+}: ScreenSizeProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/providers/SnackbarProvider.d.ts
+interface SnackbarProviderProps {
+  /** The children that will have access to the snackbar context. */
+  children: ReactNode;
+  /** The amount of seconds to wait before hiding the snackbar. */
+  autoHideDuration?: number;
+}
+interface SnackbarContextValue {
+  /** A function that adds the snackbar to the page. */
+  addSnackbar: (message: string, severity?: AlertColor, duration?: number) => void;
+}
+/** Access the snackbar context directly. */
+declare function useSnackbar<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, SnackbarContextValue>;
+/** Controls the display of the snackbars on the page. */
+declare function SnackbarProvider({
+  children,
+  autoHideDuration
+}: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/providers/ThemeProvider.d.ts
+interface ThemeContextValue {
+  toggleMode: () => void;
+  mode: PaletteMode;
+}
+/** Access the mode context directly. */
+declare function useTheme<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ThemeContextValue>;
+interface ThemeProviderProps {
+  /** The children that will have access to the current mode. */
+  children: ReactNode;
+  /** The initial mode. */
+  mode?: PaletteMode;
+  /** Extra options to apply on top of our default theme options */
+  themeOptions?: ThemeOptions;
+}
+/** Provides information about the current theme mode to its children components. */
+declare function ThemeProvider({
+  children,
+  mode: modeProp,
+  themeOptions
+}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/deprecated/ModeProvider.d.ts
+/** @deprecated This component has been renamed to `ThemeProvider`. */
+declare const ModeProvider: typeof ThemeProvider;
+//#endregion
+//#region src/deprecated/ModeToggle.d.ts
+/** @deprecated This component has been renamed to `ThemeToggle` */
+declare const ModeToggle: typeof ThemeToggle;
+//#endregion
 //#region src/deprecated/NavigationBottom.d.ts
 interface NavItemBottom {
   /** The value associated with the nav item. */
@@ -862,6 +962,23 @@ type QueryBoundaryProps<DataType> = QueryBoundaryWrapperProps<DataType>;
 /** @deprecated This component has been renamed to `QueryBoundaryWrapper` */
 declare const QueryBoundary: typeof QueryBoundaryWrapper;
 //#endregion
+//#region src/deprecated/ReactPlayground.d.ts
+/** @deprecated This type is no longer being maintained. Please use the type of the components from `react-live` directly. */
+interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
+  /** Extra styling to apply to the preview. Must be compatible with the Material UI `sx` prop. */
+  previewStyles?: SxProps<Theme>;
+}
+/**
+ * Renders a playground to help demonstrate your React code in an interactive setting.
+ *
+ * @deprecated This component is no longer being maintained. Please use the components from `react-live` directly.
+ */
+declare function ReactPlayground({
+  code,
+  previewStyles,
+  ...liveProviderProps
+}: ReactPlaygroundProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
 //#region src/deprecated/SubmitButton.d.ts
 interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
   /** An option to disable the button on submit if the form is not dirty. */
@@ -905,104 +1022,5 @@ declare function useDebounce<ValueType>(value: ValueType, delay?: number): Value
  */
 declare function useHash<StateType extends string>(initialHash: StateType | undefined): [StateType, Dispatch<SetStateAction<StateType>>];
 //#endregion
-//#region src/providers/AudioProvider/index.d.ts
-interface TrackData {
-  title: string;
-  src: string;
-  artist: string;
-}
-interface AudioContextValue {
-  tracks: Array<TrackData>;
-  currentTrack: TrackData;
-  setCurrentTrack: Dispatch<SetStateAction<TrackData>>;
-}
-interface AudioProviderProps {
-  tracks: Array<TrackData>;
-  children: ReactNode;
-}
-/** Allows access to the audio information provided by AudioProvider. Will fail if AudioProvider could not be accessed and strict mode is true. */
-declare function useAudioContext<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, AudioContextValue>;
-/** Provides audio information to the children components. */
-declare function AudioProvider({
-  tracks,
-  children
-}: AudioProviderProps): import("react/jsx-runtime").JSX.Element;
-//#endregion
-//#region src/providers/AudioProvider/AudioControls.d.ts
-/** Controls the tracks provided by the AudioProvider. */
-declare function AudioControls(): import("react/jsx-runtime").JSX.Element;
-//#endregion
-//#region src/providers/ModeProvider.d.ts
-interface ModeContextValue {
-  toggleMode: () => void;
-  mode: PaletteMode;
-}
-/** Access the mode context directly. */
-declare function useMode<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ModeContextValue>;
-interface ModeProviderProps {
-  /** The children that will have access to the current mode. */
-  children: ReactNode;
-  /** The initial mode. */
-  mode?: PaletteMode;
-}
-/** Provides information about the current theme mode to its children components. */
-declare function ModeProvider({
-  children,
-  mode: modeProp
-}: ModeProviderProps): import("react/jsx-runtime").JSX.Element;
-//#endregion
-//#region src/providers/ScreenSizeProvider.d.ts
-interface ScreenSizeProps {
-  /** The children that will be receiving the ScreenSizeContext. */
-  children: ReactNode;
-  /** The minimum screen width in pixels required to be considered a large screen. */
-  largeScreenWidth?: number;
-  /** The minimum screen height in pixels required to be considered a large screen. */
-  largeScreenHeight?: number;
-}
-interface ScreenSizeContextValue {
-  /** Whether the screen is a large screen or not. */
-  isLargeScreen: boolean;
-  /** The current window width. */
-  windowWidth: number;
-  /** The current window height. */
-  windowHeight: number;
-}
-/** Access the screen size context directly. */
-declare function useScreenSize<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ScreenSizeContextValue>;
-/** Provides context about the current screen size. */
-declare function ScreenSizeProvider({
-  children,
-  largeScreenWidth,
-  largeScreenHeight
-}: ScreenSizeProps): import("react/jsx-runtime").JSX.Element;
-//#endregion
-//#region src/providers/SnackbarProvider.d.ts
-interface SnackbarProviderProps {
-  /** The children that will have access to the snackbar context. */
-  children: ReactNode;
-  /** The amount of seconds to wait before hiding the snackbar. */
-  autoHideDuration?: number;
-}
-interface SnackbarContextValue {
-  /** A function that adds the snackbar to the page. */
-  addSnackbar: (message: string, severity?: AlertColor, duration?: number) => void;
-}
-/** Access the snackbar context directly. */
-declare function useSnackbar<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, SnackbarContextValue>;
-/** Controls the display of the snackbars on the page. */
-declare function SnackbarProvider({
-  children,
-  autoHideDuration
-}: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Artwork, type AudioContextValue, AudioControls, AudioProvider, type AudioProviderProps, CollapsableItem, type CollapsableItemProps, type ContextHookOptions, type CreateBaseQueryBoundaryParameters, type CreateItemQueryBoundaryParameters, type CreateListQueryBoundaryParameters, type CreateQueryBoundaryParameters, DarkModeToggle, type DefaultQueryBoundaryComponents, type DefaultQueryBoundaryComponentsBase, type DefaultQueryBoundaryItemComponents, type DefaultQueryBoundaryListComponents, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, Loader, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, 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, type QueryBase, QueryBoundary, QueryBoundaryData, QueryBoundaryDataMap, type QueryBoundaryDataMapBaseProps, type QueryBoundaryDataMapProps, type QueryBoundaryDataMapPropsWithDataParser, type QueryBoundaryDataMapPropsWithItemParser, type QueryBoundaryDataMapPropsWithNoParser, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorProps, QueryBoundaryFallback, type QueryBoundaryFallbackProps, QueryBoundaryMap, type QueryBoundaryMapProps, QueryBoundaryNullable, type QueryBoundaryNullableProps, type QueryBoundaryNullablePropsWithNullable, type QueryBoundaryNullablePropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, QueryBoundaryWrapper, type QueryBoundaryWrapperProps, type QueryItem, type QueryList, type QueryMultiple, type QuerySingle, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, type TrackData, createBaseQueryBoundary, createItemQueryBoundary, createListQueryBoundary, createQueryBoundary, useAudioContext, useDebounce, useDropdownMenu, useHash, useMode, useQueryBoundary, useScreenSize, useSnackbar };
+export { Artwork, type AudioContextValue, AudioControls, AudioProvider, type AudioProviderProps, CollapsableItem, type CollapsableItemProps, type ContextHookOptions, type CreateBaseQueryBoundaryParameters, type CreateItemQueryBoundaryParameters, type CreateListQueryBoundaryParameters, DarkModeToggle, type DefaultQueryBoundaryComponentsBase, type DefaultQueryBoundaryItemComponents, type DefaultQueryBoundaryListComponents, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, Loader, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, type QueryBase, QueryBoundary, QueryBoundaryData, QueryBoundaryDataMap, type QueryBoundaryDataMapBaseProps, type QueryBoundaryDataMapProps, type QueryBoundaryDataMapPropsWithDataParser, type QueryBoundaryDataMapPropsWithItemParser, type QueryBoundaryDataMapPropsWithNoParser, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorProps, QueryBoundaryFallback, type QueryBoundaryFallbackProps, QueryBoundaryMap, type QueryBoundaryMapProps, QueryBoundaryNullable, type QueryBoundaryNullableProps, type QueryBoundaryNullablePropsWithNullable, type QueryBoundaryNullablePropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, QueryBoundaryWrapper, type QueryBoundaryWrapperProps, type QueryItem, type QueryList, ReactPlayground, type ReactPlaygroundProps, type ScreenDimensions, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, type TrackData, createBaseQueryBoundary, createItemQueryBoundary, createListQueryBoundary, createQueryBoundary, useAudioContext, useDebounce, useDropdownMenu, useHash, useQueryBoundary, useScreenSize, useSnackbar, useTheme };
 //# 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 te,MdChevronLeft as ne,MdChevronRight as re,MdCloudUpload as ie,MdDelete as ae,MdMenu as oe,MdOutlineDarkMode as se,MdOutlineLightMode as ce,MdVisibility as le}from"react-icons/md";import S from"@mui/material/Link";import C from"@mui/material/Button";import{ThemeProvider as ue,createTheme as de,styled as w,useTheme as fe}from"@mui/material/styles";import T from"@mui/material/IconButton";import pe from"@mui/material/List";import me from"@mui/material/ListItem";import he from"@mui/material/ListItemText";import ge from"@mui/material/Tooltip";import _e from"@mui/material/Switch";import{DataError as E}from"@alextheman/utility/v6";import D from"@mui/material/CssBaseline";import{fillArray as ve,truncate as O,wait as ye}from"@alextheman/utility";import k from"@mui/material/Alert";import be from"@mui/material/Snackbar";import xe from"@mui/material/CircularProgress";import{stripIndent as Se}from"common-tags";import{LiveEditor as Ce,LiveError as we,LivePreview as Te,LiveProvider as Ee}from"react-live";import De from"@mui/material/Skeleton";import Oe from"@mui/material/TableCell";import ke from"@mui/material/TableRow";import A from"@mui/material/Menu";import Ae from"@mui/material/BottomNavigation";import je from"@mui/material/BottomNavigationAction";import Me from"@mui/material/Paper";import Ne from"@mui/material/AppBar";import Pe from"@mui/material/Drawer";import j from"@mui/material/ListItemButton";import Fe from"@mui/material/ListItemIcon";import Ie from"@mui/material/Toolbar";import M from"@mui/material/MenuItem";import{Link as N,useLocation as Le}from"react-router-dom";import Re from"@mui/material/Popover";import{useFormContext as ze}from"react-hook-form";function Be({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 Ve(){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 He(){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(Be,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Ve,{}),l(Be,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Ue({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(te,{}),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 We({href:e,children:t,ref:n,...r}){return l(S,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Ge={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`},Ke=w(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),qe=w(`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 Je({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(ie,{}),children:[t,l(Ke,{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(qe,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:d}):d}function Ye({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(Je,{...i,multiple:r,onFileInput:a}),l(pe,{children:t.map(e=>l(me,{secondaryAction:l(T,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ae,{})}),children:l(he,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const Xe=w(_e)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Ze({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(Xe,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const P=m(void 0);function F({strict:e=!0}={}){let t=g(P);if(e&&!t)throw new E({strict:e,context:t},`AUDIO_PROVIDER_NOT_FOUND`,`Could not find the AudioProvider context. Please double-check that it is present.`);return t}function Qe({tracks:e,children:t}){let[n,r]=b(e[0]);return l(P.Provider,{value:{tracks:e,currentTrack:n,setCurrentTrack:r},children:t})}function $e(){let{currentTrack:e}=F();return l(`audio`,{src:e.src,controls:!0,children:l(`track`,{kind:`captions`})})}const I=m({toggleMode:()=>{},mode:`dark`});function L({strict:e=!0}={}){let t=g(I);if(e&&!t)throw new E({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function et({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>de({palette:{mode:n},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider})}}}}),[n]);return l(I.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ue,{theme:i,children:[l(D,{}),e]})})}const R=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function tt({strict:e=!0}={}){let t=g(R);if(e&&!t)throw new E({strict:e,context:t},`SCREEN_SIZE_PROVIDER_NOT_FOUND`,`Could not find the ScreenSizeProvider context. Please double-check that it is present.`);return t}function nt({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(R.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const z=m(void 0);function rt({strict:e=!0}={}){let t=g(z);if(e&&!t)throw new E({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function it({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 ye(.2),s(``)}return u(z.Provider,{value:{addSnackbar:f},children:[l(be,{open:n,autoHideDuration:i,onClose:p,children:l(k,{onClose:p,severity:c,children:o})}),e]})}function B(){let{mode:e,toggleMode:t}=L(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ge,{title:r,children:l(Ze,{uncheckedIcon:ce,checkedIcon:se,checked:n,onChange:t,"aria-label":r})})}function at({title:e,subtitle:i,action:o,children:d,tabs:f,disablePadding:p}){return u(t,{children:[l(r,{title:u(c,{children:[typeof e==`string`?l(s,{variant:`h6`,children:e}):e,i?typeof i==`string`?l(s,{variant:`body2`,color:`text.secondary`,children:i}):i:null]}),action:o}),f,l(a,{}),p?d:l(n,{children:d})]})}const V=m(void 0);function H({strict:e=!0}={}){let t=g(V);if(e&&!t)throw new E({strict:e,context:t},`QUERY_BOUNDARY_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function U({children:e,loadingComponent:t=l(xe,{}),...n}){return l(V.Provider,{value:{loadingComponent:t,...n},children:e})}function W({children:e,logError:t}){let{data:n,error:r,errorComponent:i,logError:a}=H(),o=t??a,s=ee(!1),u=e??i;return r?(o&&!s.current&&(n==null?console.error(r):console.error(`An error has occurred but data is still present. This may indicate an invalid query state.`,{data:n,error:r}),s.current=!0),typeof u==`function`?u(r):u===void 0?l(k,{severity:`error`,children:typeof r==`object`&&`message`in r&&typeof r.message==`string`?r.message:`An unknown error has occured.`}):l(c,{children:u})):null}function G({undefinedComponent:e,nullComponent:t,nullableComponent:n}){let{isLoading:r,data:i,error:a}=H();if(r||a)return null;if(i==null){if(n!==void 0)return l(c,{children:n});if(i===void 0)return e===void 0?l(s,{children:`No data available.`}):l(c,{children:e});if(i===null)return t===void 0?l(s,{children:`No data found.`}):l(c,{children:t})}return null}function K({errorComponent:e,logError:t,...n}){return u(c,{children:[l(W,{logError:t,children:e}),l(G,{...n})]})}function q({query:e}){return{Context:({children:t})=>l(U,{isLoading:e.isLoading,error:e.error,data:e.data,children:t}),Error:W,Fallback:K,Nullable:G}}function J({children:e,loadingComponent:t,itemKey:n,itemParser:r,dataParser:i,emptyComponent:a=l(s,{children:`No data present`}),strictlyRequireArray:o=!0}){let{isLoading:u,data:d,dataParser:f,loadingComponent:m,error:h}=H(),g=i??f,_=t??m;if(u)return l(c,{children:_});if(h||d==null)return null;if(!Array.isArray(d)){if(o)throw new E({data:d,strictlyRequireArray:o},`NOT_AN_ARRAY`,`Expected the data to be an array but it was not an array.`);return null}if(d.length===0)return l(c,{children:a});let v;return v=g?g(d):r?d.map(r):d,l(c,{children:v.map((t,r)=>l(p,{children:typeof e==`function`?e(t):e},n?n(t,r):r))})}function ot({query:e}){return{...q({query:e}),DataMap:J}}function st({loadingComponent:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,errorComponent:a,children:o,isLoading:s,error:c,data:d,dataParser:f,itemParser:p,itemKey:m}){let h=ot({query:{isLoading:s,error:c,data:d}}),g=l(h.Fallback,{logError:i,errorComponent:a});r?g=l(h.Fallback,{nullableComponent:r,logError:i,errorComponent:a}):(t||n)&&(g=l(h.Fallback,{undefinedComponent:t,nullComponent:n,logError:i,errorComponent:a}));let _=l(h.DataMap,{loadingComponent:e,itemKey:m,children:o});return f?_=l(h.DataMap,{loadingComponent:e,itemKey:m,dataParser:f,children:o}):p&&(_=l(h.DataMap,{loadingComponent:e,itemKey:m,itemParser:p,children:o})),u(h.Context,{children:[g,_]})}function Y({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=H(),u=t??a;return s?null:r?l(c,{children:n??o}):i==null?null:l(c,{children:typeof e==`function`?e(u?u(i):i):e})}function ct({query:e}){return{...q({query:e}),Data:Y}}function X({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(xe,{}),isLoading:s,error:c,data:d,dataParser:f}){let p=ct({query:{isLoading:s,error:c,data:d}}),m=l(p.Fallback,{logError:a,errorComponent:t});return i?m=l(p.Fallback,{nullableComponent:i,logError:a,errorComponent:t}):(n||r)&&(m=l(p.Fallback,{undefinedComponent:n,nullComponent:r,logError:a,errorComponent:t})),u(p.Context,{children:[m,l(p.Data,{loadingComponent:o,dataParser:f,children:e})]})}function lt({code:t,previewStyles:n,...r}){let{mode:i}=L(),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(Ee,{...r,code:Se(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Ce,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Te,{}),l(we,{})]})]})})}function ut({columns:e}){return l(ke,{children:ve(e=>l(Oe,{children:l(De,{})},e),e)})}const dt=B;function ft({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(te,{}),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(A,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const pt=m(void 0);function Z({strict:e=!0}={}){let t=g(pt);if(e&&!t)throw new E({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function mt({strict:e=!0}={}){return Z({strict:e})}function ht({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=mt();return l(A,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function gt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(M,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,_t=ht,vt=gt;var yt=_t;function bt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(M,{component:We,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=N,children:n,ref:r,...i}){return l(S,{component:t,to:e,ref:r,...i,children:n})}function xt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(M,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function St({icon:t=le,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(Re,{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 Ct({children:e,...t}){return l(j,{component:$,...t,children:e})}const wt=X;function Tt({query:e}){return{Context:({children:t})=>l(U,{isLoading:e.isLoading,error:e.error,data:`data`in e?e.data:e.dataCollection,children:t}),Error:W,Data:Y,DataMap:J,Fallback:K,Nullable:G}}const Et=Y,Dt=K,Ot=U;function kt({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Me,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(Ae,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(je,{...e,component:N},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 jt(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 Mt=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Nt=w(Ne,{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})}}]})),Pt=w(Pe,{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:{...jt(e),"& .MuiDrawer-paper":jt(e)}}]}));function Ft({title:t,navItems:n,children:r,headerElements:i}){let o=fe(),[c,d]=b(!0),f=Le();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(D,{}),l(Nt,{position:`fixed`,open:c,children:u(Ie,{children:[l(T,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(oe,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(Pt,{variant:`permanent`,open:c,children:[l(Mt,{children:l(T,{onClick:h,children:o.direction===`rtl`?l(re,{}):l(ne,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(pe,{children:[l(s,{variant:c?`h5`:`h6`,sx:{paddingLeft:c?2:1},children:c?e.category:O(e.category,4)}),e.options.map(e=>l(me,{disablePadding:!0,sx:{display:`block`},children:u(j,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:N,to:e.to,selected:f.pathname===e.to,children:[l(Fe,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:O(e.label,4)})}),l(he,{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(Mt,{}),r]})]})}function It({text:e,sx:t,...n}){return l(c,{children:e.split(`
-`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}const Lt=X;function Rt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=ze();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function zt(e,t=500){let[n,r]=b(e);return _(()=>{let n=setTimeout(()=>{r(e)},t);return()=>{clearTimeout(n)}},[e,t]),n}function Bt(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{He as Artwork,$e as AudioControls,Qe as AudioProvider,Ue as CollapsableItem,dt as DarkModeToggle,ft as DropdownMenu,yt as DropdownMenu2,bt as DropdownMenuExternalLink,xt as DropdownMenuInternalLink,vt as DropdownMenuItem,We as ExternalLink,Je as FileInput,Ye as FileInputList,Ge as FileType,St as IconWithPopover,$ as InternalLink,Ct as ListItemInternalLink,wt as Loader,Et as LoaderData,Dt as LoaderError,Ot as LoaderProvider,et as ModeProvider,B as ModeToggle,kt as NavigationBottom,Ft as NavigationDrawer,at as Page,It as PopoverText,Lt as QueryBoundary,Y as QueryBoundaryData,J as QueryBoundaryDataMap,W as QueryBoundaryError,K as QueryBoundaryFallback,st as QueryBoundaryMap,G as QueryBoundaryNullable,U as QueryBoundaryProvider,X as QueryBoundaryWrapper,lt as ReactPlayground,nt as ScreenSizeProvider,ut as SkeletonRow,it as SnackbarProvider,Rt as SubmitButton,Ze as SwitchWithIcons,q as createBaseQueryBoundary,ct as createItemQueryBoundary,ot as createListQueryBoundary,Tt as createQueryBoundary,F as useAudioContext,zt as useDebounce,Q as useDropdownMenu,Bt as useHash,L as useMode,H as useQueryBoundary,tt as useScreenSize,rt 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,use as h,useCallback as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b,useSyncExternalStore as te}from"react";import{MdArrowDropDown as ne,MdArrowDropUp as x,MdChevronLeft as re,MdChevronRight as ie,MdCloudUpload as ae,MdDelete as oe,MdMenu as se,MdOutlineDarkMode as ce,MdOutlineLightMode as le,MdVisibility as ue}from"react-icons/md";import S from"@mui/material/Link";import C from"@mui/material/Button";import{ThemeProvider as de,createTheme as fe,styled as w,useTheme as pe}from"@mui/material/styles";import T from"@mui/material/IconButton";import me from"@mui/material/List";import he from"@mui/material/ListItem";import ge from"@mui/material/ListItemText";import _e from"@mui/material/Alert";import{DataError as E}from"@alextheman/utility/v6";import D from"@mui/material/CircularProgress";import{fillArray as ve,omitProperties as O,truncate as k,wait as ye}from"@alextheman/utility";import be from"@mui/material/Skeleton";import xe from"@mui/material/TableCell";import Se from"@mui/material/TableRow";import Ce from"@mui/material/Switch";import we from"@mui/material/Tooltip";import Te from"@mui/material/Snackbar";import A from"@mui/material/CssBaseline";import j from"@mui/material/Menu";import Ee from"@mui/material/BottomNavigation";import De from"@mui/material/BottomNavigationAction";import Oe from"@mui/material/Paper";import ke from"@mui/material/AppBar";import Ae from"@mui/material/Drawer";import M from"@mui/material/ListItemButton";import je from"@mui/material/ListItemIcon";import Me from"@mui/material/Toolbar";import N from"@mui/material/MenuItem";import{Link as P,useLocation as Ne}from"react-router-dom";import Pe from"@mui/material/Popover";import{stripIndent as Fe}from"common-tags";import{LiveEditor as Ie,LiveError as Le,LivePreview as Re,LiveProvider as ze}from"react-live";import{useFormContext as Be}from"react-hook-form";function F({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 Ve(){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 He(){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(F,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Ve,{}),l(F,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Ue({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(x,{}),closedIcon:m=l(ne,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g,n,r]),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 I({href:e,children:t,ref:n,...r}){return l(S,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const We={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`},Ge=w(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Ke=w(`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 L({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(ae,{}),children:[t,l(Ge,{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(Ke,{$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 qe({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(L,{...i,multiple:r,onFileInput:a}),l(me,{children:t.map(e=>l(he,{secondaryAction:l(T,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(oe,{})}),children:l(ge,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function Je({title:e,subtitle:i,action:o,children:d,tabs:f,disablePadding:p}){return u(t,{children:[l(r,{title:u(c,{children:[typeof e==`string`?l(s,{variant:`h6`,children:e}):e,i?typeof i==`string`?l(s,{variant:`body2`,color:`text.secondary`,children:i}):i:null]}),action:o}),f,l(a,{}),p?d:l(n,{children:d})]})}const R=m(void 0);function z({strict:e=!0}={}){let t=h(R);if(e&&!t)throw new E({strict:e,context:t},`QUERY_BOUNDARY_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function B({children:e,loadingComponent:t=l(D,{}),...n}){return l(R,{value:{loadingComponent:t,...n},children:e})}function V({children:e,logError:t}){let{data:n,error:r,errorComponent:i,logError:a}=z(),o=t??a,s=ee(!1),u=e??i;return r?(o&&!s.current&&(n==null?console.error(r):console.error(`An error has occurred but data is still present. This may indicate an invalid query state.`,{data:n,error:r}),s.current=!0),typeof u==`function`?u(r):u===void 0?l(_e,{severity:`error`,children:typeof r==`object`&&`message`in r&&typeof r.message==`string`?r.message:`An unknown error has occured.`}):l(c,{children:u})):null}function H({undefinedComponent:e,nullComponent:t,nullableComponent:n}){let{isLoading:r,data:i,error:a}=z();if(r||a)return null;if(i==null){if(n!==void 0)return l(c,{children:n});if(i===void 0)return e===void 0?l(s,{children:`No data available.`}):l(c,{children:e});if(i===null)return t===void 0?l(s,{children:`No data found.`}):l(c,{children:t})}return null}function U({errorComponent:e,logError:t,...n}){return u(c,{children:[l(V,{logError:t,children:e}),l(H,{...n})]})}function W({query:e}){return{Context:({children:t})=>l(B,{isLoading:e.isLoading,error:e.error,data:e.data,children:t}),Error:V,Fallback:U,Nullable:H}}function G({children:e,loadingComponent:t,itemKey:n,itemParser:r,dataParser:i,emptyComponent:a=l(s,{children:`No data present`}),strictlyRequireArray:o=!0}){let{isLoading:u,data:d,dataParser:f,loadingComponent:m,error:h}=z(),g=i??f,_=t??m;if(u)return l(c,{children:_});if(h||d==null)return null;if(!Array.isArray(d)){if(o)throw new E({data:d,strictlyRequireArray:o},`NOT_AN_ARRAY`,`Expected the data to be an array but it was not an array.`);return null}if(d.length===0)return l(c,{children:a});let v;return v=g?g(d):r?d.map(r):d,l(c,{children:v.map((t,r)=>l(p,{children:typeof e==`function`?e(t):e},n?n(t,r):r))})}function K({query:e}){return{...W({query:e}),DataMap:G}}function Ye({loadingComponent:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,errorComponent:a,children:o,isLoading:s,error:c,data:d,dataParser:f,itemParser:p,itemKey:m}){let h=K({query:{isLoading:s,error:c,data:d}}),g=l(h.Fallback,{logError:i,errorComponent:a});r?g=l(h.Fallback,{nullableComponent:r,logError:i,errorComponent:a}):(t||n)&&(g=l(h.Fallback,{undefinedComponent:t,nullComponent:n,logError:i,errorComponent:a}));let _=l(h.DataMap,{loadingComponent:e,itemKey:m,children:o});return f?_=l(h.DataMap,{loadingComponent:e,itemKey:m,dataParser:f,children:o}):p&&(_=l(h.DataMap,{loadingComponent:e,itemKey:m,itemParser:p,children:o})),u(h.Context,{children:[g,_]})}function q({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=z(),u=t??a;return s?null:r?l(c,{children:n??o}):i==null?null:l(c,{children:typeof e==`function`?e(u?u(i):i):e})}function Xe({query:e}){return{...W({query:e}),Data:q}}function J({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(D,{}),isLoading:s,error:c,data:d,dataParser:f}){let p=Xe({query:{isLoading:s,error:c,data:d}}),m=l(p.Fallback,{logError:a,errorComponent:t});return i===void 0?(n!==void 0||r!==void 0)&&(m=l(p.Fallback,{undefinedComponent:n,nullComponent:r,logError:a,errorComponent:t})):m=l(p.Fallback,{nullableComponent:i,logError:a,errorComponent:t}),u(p.Context,{children:[m,l(p.Data,{loadingComponent:o,dataParser:f,children:e})]})}function Ze({columns:e}){return l(Se,{children:ve(e=>l(xe,{children:l(be,{})},e),e)})}const Qe=w(Ce)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function $e({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(Qe,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const et=m(void 0);function tt({strict:e=!0}={}){let t=h(et);if(e&&!t)throw new E({strict:e,context:t},`AUDIO_PROVIDER_NOT_FOUND`,`Could not find the AudioProvider context. Please double-check that it is present.`);return t}function nt({tracks:e,children:t}){let[n,r]=b(e.length===0?null:e[0]);return l(et,{value:{tracks:e,currentTrack:n,setCurrentTrack:r},children:t})}function rt(){let{currentTrack:e}=tt();return e===null?l(s,{children:`No track selected`}):l(`audio`,{src:e.src,controls:!0,children:l(`track`,{kind:`captions`})})}const it=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function at({strict:e=!0}={}){let t=h(it);if(e&&!t)throw new E({strict:e,context:t},`SCREEN_SIZE_PROVIDER_NOT_FOUND`,`Could not find the ScreenSizeProvider context. Please double-check that it is present.`);return t}let ot={windowWidth:window.innerWidth,windowHeight:window.innerHeight};function st(){return ot}function ct(e){function t(){ot={windowWidth:window.innerWidth,windowHeight:window.innerHeight},e()}return window.addEventListener(`resize`,t),()=>{window.removeEventListener(`resize`,t)}}function lt({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let{windowWidth:r,windowHeight:i}=te(ct,st);return l(it,{value:{isLargeScreen:y(()=>r>t&&i>n,[r,i,t,n]),windowWidth:r,windowHeight:i},children:e})}const ut=m(void 0);function dt({strict:e=!0}={}){let t=h(ut);if(e&&!t)throw new E({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function ft({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 ye(.2),s(``)}return u(ut,{value:{addSnackbar:f},children:[l(Te,{open:n,autoHideDuration:i,onClose:p,children:l(_e,{onClose:p,severity:c,children:o})}),e]})}const pt=m({toggleMode:()=>{},mode:`dark`});function Y({strict:e=!0}={}){let t=h(pt);if(e&&!t)throw new E({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function mt({children:e,mode:t=`dark`,themeOptions:n}){let[r,i]=b(t),a=y(()=>fe({palette:{mode:r,...O(n?.palette??{},[`mode`])},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider}),...n?.components?.MuiPaper?.styleOverrides},...O(n?.components?.MuiPaper??{},`styleOverrides`)},...O(n?.components??{},`MuiPaper`)},...O(n??{},[`components`,`palette`])}),[r,n]);return l(pt,{value:{mode:r,toggleMode:()=>{i(e=>e===`light`?`dark`:`light`)}},children:u(de,{theme:a,children:[l(A,{}),e]})})}function X(){let{mode:e,toggleMode:t}=Y(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(we,{title:r,children:l($e,{uncheckedIcon:le,checkedIcon:ce,checked:n,onChange:t,"aria-label":r})})}function ht({query:e}){return{Context:({children:t})=>l(B,{isLoading:e.isLoading,error:e.error,data:`data`in e?e.data:e.dataCollection,children:t}),Error:V,Data:q,DataMap:G,Fallback:U,Nullable:H}}const gt=X;function _t({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(x,{}),isClosedIcon:o=l(ne,{}),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(j,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const vt=m(void 0);function Z({strict:e=!0}={}){let t=h(vt);if(e&&!t)throw new E({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function yt({strict:e=!0}={}){return Z({strict:e})}function bt({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=yt();return l(j,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function xt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(N,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,St=bt,Ct=xt;var wt=St;function Tt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(N,{component:I,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=P,children:n,ref:r,...i}){return l(S,{component:t,to:e,ref:r,...i,children:n})}function Et({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(N,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Dt({icon:t=ue,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(Pe,{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 Ot({children:e,...t}){return l(M,{component:$,...t,children:e})}const kt=J,At=q,jt=U,Mt=B,Nt=mt,Pt=X;function Ft({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Oe,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(Ee,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(De,{...e,component:P},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 Lt(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 Rt=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),zt=w(ke,{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=w(Ae,{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:{...Lt(e),"& .MuiDrawer-paper":Lt(e)}}]}));function Vt({title:t,navItems:n,children:r,headerElements:i}){let o=pe(),[c,d]=b(!0),f=Ne();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(A,{}),l(zt,{position:`fixed`,open:c,children:u(Me,{children:[l(T,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(se,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(Bt,{variant:`permanent`,open:c,children:[l(Rt,{children:l(T,{onClick:h,children:o.direction===`rtl`?l(ie,{}):l(re,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(me,{children:[l(s,{variant:c?`h5`:`h6`,sx:{paddingLeft:c?2:1},children:c?e.category:k(e.category,4)}),e.options.map(e=>l(he,{disablePadding:!0,sx:{display:`block`},children:u(M,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:P,to:e.to,selected:f.pathname===e.to,children:[l(je,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:k(e.label,4)})}),l(ge,{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(Rt,{}),r]})]})}function Ht({text:e,sx:t,...n}){return l(c,{children:e.split(`
+`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}const Ut=J;function Wt({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(ze,{...r,code:Fe(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Ie,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Re,{}),l(Le,{})]})]})})}function Gt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Be();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function Kt(e,t=500){let[n,r]=b(e);return _(()=>{let n=setTimeout(()=>{r(e)},t);return()=>{clearTimeout(n)}},[e,t]),n}function qt(e){let[t,n]=b(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=g(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return _(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,g(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{He as Artwork,rt as AudioControls,nt as AudioProvider,Ue as CollapsableItem,gt as DarkModeToggle,_t as DropdownMenu,wt as DropdownMenu2,Tt as DropdownMenuExternalLink,Et as DropdownMenuInternalLink,Ct as DropdownMenuItem,I as ExternalLink,L as FileInput,qe as FileInputList,We as FileType,Dt as IconWithPopover,$ as InternalLink,Ot as ListItemInternalLink,kt as Loader,At as LoaderData,jt as LoaderError,Mt as LoaderProvider,Nt as ModeProvider,Pt as ModeToggle,Ft as NavigationBottom,Vt as NavigationDrawer,Je as Page,Ht as PopoverText,Ut as QueryBoundary,q as QueryBoundaryData,G as QueryBoundaryDataMap,V as QueryBoundaryError,U as QueryBoundaryFallback,Ye as QueryBoundaryMap,H as QueryBoundaryNullable,B as QueryBoundaryProvider,J as QueryBoundaryWrapper,Wt as ReactPlayground,lt as ScreenSizeProvider,Ze as SkeletonRow,ft as SnackbarProvider,Gt as SubmitButton,$e as SwitchWithIcons,mt as ThemeProvider,X as ThemeToggle,W as createBaseQueryBoundary,Xe as createItemQueryBoundary,K as createListQueryBoundary,ht as createQueryBoundary,tt as useAudioContext,Kt as useDebounce,Q as useDropdownMenu,qt as useHash,z as useQueryBoundary,at as useScreenSize,dt as useSnackbar,Y as useTheme};
 //# sourceMappingURL=index.js.map