@alextheman/components 6.9.1 → 6.10.1

package/dist/index.d.ts

@@ -3,15 +3,15 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
 import * as _$react from "react";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
-import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { LinkProps } from "@mui/material/Link";
+import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
-import { MenuItemOwnProps } from "@mui/material/MenuItem";
-import { AlertColor } from "@mui/material/Alert";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
+import { AlertColor } from "@mui/material/Alert";
 import { SwitchProps } from "@mui/material/Switch";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { LiveProvider } from "react-live";
+import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
@@ -66,31 +66,6 @@ declare function CollapsableItem({
   useDefaultStyling
 }: CollapsableItemProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/DropdownMenu.d.ts
-interface DropdownMenuProps {
-  children: ReactNode | ((closeMenu: () => void) => ReactNode);
-  buttonChildren?: ReactNode;
-  button?: ElementType;
-  buttonProps?: Omit<ButtonOwnProps, "onClick" | "endIcon">;
-  isOpenIcon?: ReactNode;
-  isClosedIcon?: ReactNode;
-  onOpen?: () => void;
-  onClose?: () => void;
-}
-/**
- * @deprecated This component does not support the new context-based pattern and individual DropdownMenuItem components. Please use DropdownMenu2 instead.
- */
-declare function DropdownMenu({
-  children,
-  button: Button,
-  buttonChildren,
-  buttonProps: incomingButtonProps,
-  isOpenIcon,
-  isClosedIcon,
-  onOpen,
-  onClose
-}: DropdownMenuProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/components/ExternalLink.d.ts
 interface ExternalLinkProps extends Omit<LinkProps, "to" | "target" | "rel"> {
   /** The URL of the place you want to navigate to. */
@@ -198,79 +173,10 @@ declare function InternalLink({
 }: InternalLinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/types/ContextHookOptions.d.ts
-interface ContextHookOptions<S extends boolean = true> {
-  strict?: S;
-}
-//#endregion
-//#region src/providers/DropdownMenu2/DropdownMenu2.d.ts
-interface DropdownMenuContextValue {
-  closeMenu: () => void;
-  isDropdownOpen: boolean;
-}
-declare function useDropdownMenu<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
-interface DropdownMenu2Props {
-  children: ReactNode;
-  button?: ElementType;
-  buttonProps?: Omit<ButtonOwnProps, "endIcon"> & {
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-  };
-  openIcon?: ReactNode;
-  closedIcon?: ReactNode;
-}
-declare function DropdownMenu2({
-  children,
-  button: Button,
-  buttonProps,
-  openIcon,
-  closedIcon
-}: DropdownMenu2Props): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/providers/DropdownMenu2/DropdownMenuExternalLink.d.ts
-interface DropdownMenuExternalLinkProps extends MenuItemOwnProps {
-  ref?: Ref<HTMLAnchorElement>;
-  href: ComponentProps<typeof ExternalLink>["href"];
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-  children: ReactNode;
-}
-declare function DropdownMenuExternalLink({
-  ref,
-  href,
-  children,
-  onClick,
-  ...menuItemProps
-}: DropdownMenuExternalLinkProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/providers/DropdownMenu2/DropdownMenuInternalLink.d.ts
-interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
-  ref?: Ref<HTMLAnchorElement>;
-  to: ComponentProps<typeof InternalLink>["to"];
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-  children: ReactNode;
+interface ContextHookOptions<Strict extends boolean = true> {
+  /** Error if the context is missing if this is set to true. */
+  strict?: Strict;
 }
-declare function DropdownMenuInternalLink({
-  to,
-  ref,
-  children,
-  onClick,
-  ...menuItemProps
-}: DropdownMenuInternalLinkProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/providers/DropdownMenu2/DropdownMenuItem.d.ts
-type DropdownMenuItemProps<RootComponent extends ElementType = typeof MUIButton> = {
-  component?: RootComponent;
-  children?: ReactNode;
-  ref?: ComponentPropsWithRef<RootComponent>["ref"];
-  onClick?: ComponentProps<RootComponent>["onClick"];
-} & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
-declare function DropdownMenuItem<RootComponent extends ElementType>({
-  component,
-  children,
-  ref,
-  onClick,
-  ...menuItemProps
-}: DropdownMenuItemProps<RootComponent>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderProvider.d.ts
 interface LoaderProviderBaseProps<DataType> {
@@ -372,13 +278,17 @@ 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
@@ -401,6 +311,7 @@ interface ScreenSizeContextValue {
   /** 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>;
@@ -413,15 +324,20 @@ declare function ScreenSizeProvider({
 //#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
@@ -452,35 +368,53 @@ declare function ModeToggle(): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/NavigationBottom.d.ts
 interface NavItemBottom {
+  /** The value associated with the nav item. */
   value: string;
+  /** The label to display on the nav item. */
   label: string;
+  /** An icon to display alongside the nav item. */
   icon?: JSX.Element;
+  /** Where in your app the nav item should navigate to. */
   to: string;
 }
 interface NavigationBottomProps {
+  /** Children to display above the nav bar. */
   children: ReactNode;
+  /** An array of nav items to show. */
   navItems: Array<NavItemBottom>;
 }
+/** Renders a navigation bar at the bottom of the screen. Especially helpful for common navigation options in a mobile app. */
 declare function NavigationBottom({
   children,
   navItems
 }: NavigationBottomProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/NavigationDrawer.d.ts
+interface NavMenuItemOptions {
+  /** The label to display on the nav item option. */
+  label: string;
+  /** Where in your app the nav item option should navigate to. */
+  to: string;
+  /** An icon to display alongside the nav item option. */
+  icon?: ReactNode;
+}
 interface NavMenuItem {
+  /** The category to display all the nav item options under. */
   category: string;
-  options: Array<{
-    label: string;
-    to: string;
-    icon?: ReactNode;
-  }>;
+  /** An array of nav options to display under the chosen category. */
+  options: Array<NavMenuItemOptions>;
 }
 interface NavigationDrawerProps {
+  /** The title to display at the top of the wrapper. */
   title: string;
+  /** An array of nav items to show. */
   navItems: Array<NavMenuItem>;
+  /** Any extra elements to add to the header. */
   headerElements?: ReactNode;
+  /** Children to display within the wrapper. */
   children: ReactNode;
 }
+/** Renders a collapsable drawer to help with navigation. Best used as the main means of navigation on desktop apps. */
 declare function NavigationDrawer({
   title,
   navItems,
@@ -509,8 +443,10 @@ declare function Page({
 //#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,
@@ -519,17 +455,26 @@ declare function ReactPlayground({
 //#endregion
 //#region src/components/SkeletonRow.d.ts
 interface SkeletonRowProps {
+  /** The number of columns the SkeletonRow should display. */
   columns: number;
 }
+/** Renders the skeleton of a table row. Often helpful to represent the loading state of the data in your table. */
 declare function SkeletonRow({
   columns
 }: SkeletonRowProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/SubmitButton.d.ts
 interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
+  /** An option to disable the button on submit if the form is not dirty. */
   disableClean?: boolean;
+  /** The label for the button. */
   label: string;
 }
+/**
+ * A Submit Button for use with `react-hook-form`.
+ *
+ * Note that this is planned to eventually be deprecated and replaced with a newer version of `SubmitButton` that is instead compatible with `@tanstack/react-form`.
+ */
 declare function SubmitButton({
   disableClean,
   label,
@@ -538,15 +483,20 @@ declare function SubmitButton({
 //#endregion
 //#region src/components/SwitchWithIcons.d.ts
 interface SwitchWithIconsProps extends Omit<SwitchProps, "icon" | "checkedIcon"> {
+  /** The icon to show when the switch is in a checked state. */
   checkedIcon: ComponentType<{
     style?: CSSProperties;
   }>;
+  /** Additional styling to apply to the icon that shows when checked. */
   checkedIconStyles?: CommonProps["style"];
+  /** The icon to show when the switch is in an unchecked state. */
   uncheckedIcon: ComponentType<{
     style?: CSSProperties;
   }>;
+  /** Additional styling to apply to the icon that shows when unchecked. */
   uncheckedIconStyles?: CommonProps["style"];
 }
+/** Renders a switch with your provided icons. */
 declare function SwitchWithIcons({
   checkedIcon: CheckedIcon,
   checkedIconStyles,
@@ -555,10 +505,146 @@ declare function SwitchWithIcons({
   ...switchProps
 }: SwitchWithIconsProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/deprecated/DropdownMenu.d.ts
+interface DropdownMenuProps {
+  children: ReactNode | ((closeMenu: () => void) => ReactNode);
+  buttonChildren?: ReactNode;
+  button?: ElementType;
+  buttonProps?: Omit<ButtonOwnProps, "onClick" | "endIcon">;
+  isOpenIcon?: ReactNode;
+  isClosedIcon?: ReactNode;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+/**
+ * @deprecated This component does not support the new context-based pattern and individual DropdownMenuItem components. Please use DropdownMenu2 instead.
+ */
+declare function DropdownMenu({
+  children,
+  button: Button,
+  buttonChildren,
+  buttonProps: incomingButtonProps,
+  isOpenIcon,
+  isClosedIcon,
+  onOpen,
+  onClose
+}: DropdownMenuProps): _$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/v7/components/DropdownMenu/DropdownMenu.d.ts
+interface DropdownMenuContextValue {
+  /** A function responsible for closing the dropdown menu. */
+  closeMenu: () => void;
+  /** Represents whether or not the dropdown is open. */
+  isDropdownOpen: boolean;
+}
+/**
+  Access the DropdownMenu context directly.
+ */
+declare function useDropdownMenu$1<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
+interface DropdownMenuProps$1 {
+  /** The children to render inside of the dropdown. */
+  children: ReactNode;
+  /** The button component to be used as the dropdown toggle (defaults to a Material UI Button) */
+  button?: ElementType;
+  /** Props to pass to the Button. */
+  buttonProps?: Omit<ButtonOwnProps, "endIcon"> & {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+  };
+  /** The icon to display on the button when it is open. */
+  openIcon?: ReactNode;
+  /** The icon to display on the button when it is closed. */
+  closedIcon?: ReactNode;
+}
+/** Renders a dropdown menu consisting of `DropdownMenuItem` components imported from this package. */
+declare function DropdownMenu$1({
+  children,
+  button: Button,
+  buttonProps,
+  openIcon,
+  closedIcon
+}: DropdownMenuProps$1): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/v7/components/DropdownMenu/DropdownMenuItem.d.ts
+type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1> = {
+  /**
+   * An optional component to provide to override the current component.
+   *
+   * Note that the provided component must:
+   * - accept a `to` prop.
+   * - correctly handle the forwarded `ref`.
+   * - render a valid anchor element (or equivalent) for proper accessibility.
+   */
+  component?: RootComponent; /** The children to be rendered within the menu item. */
+  children?: ReactNode; /** The ref to forward to allow it to be used with polymorphic components */
+  ref?: ComponentPropsWithRef<RootComponent>["ref"]; /** A function to execute after clicking the item. */
+  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>({
+  component,
+  children,
+  ref,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuItemProps$1<RootComponent>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/deprecated/DropdownMenu2/DropdownMenu2.d.ts
+declare const useDropdownMenu: typeof useDropdownMenu$1;
+/**
+ * @deprecated Please use `DropdownMenuProps` from `@alextheman/components/v7` instead.
+ *
+ * This will be replaced in the root entrypoint in a future release.
+ */
+type DropdownMenu2Props = DropdownMenuProps$1;
+/**
+ * @deprecated Please use `DropdownMenu` from `@alextheman/components/v7` instead.
+ *
+ * This will be replaced in the root entrypoint in a future release.
+ */
+declare const DropdownMenu2: typeof DropdownMenu$1;
+//#endregion
+//#region src/deprecated/DropdownMenu2/DropdownMenuItem.d.ts
+type DropdownMenuItemProps<RootComponent extends ElementType> = DropdownMenuItemProps$1<RootComponent>;
+declare const DropdownMenuItem: typeof DropdownMenuItem$1;
+//#endregion
+//#region src/deprecated/DropdownMenuExternalLink.d.ts
+interface DropdownMenuExternalLinkProps extends MenuItemOwnProps {
+  ref?: Ref<HTMLAnchorElement>;
+  href: ComponentProps<typeof ExternalLink>["href"];
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}
+/** @deprecated Please use `<DropdownMenuItem component={ExternalLink} />` instead. */
+declare function DropdownMenuExternalLink({
+  ref,
+  href,
+  children,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuExternalLinkProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/deprecated/DropdownMenuInternalLink.d.ts
+interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
+  ref?: Ref<HTMLAnchorElement>;
+  to: ComponentProps<typeof InternalLink>["to"];
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}
+/** @deprecated Please use `<DropdownMenuItem component={InternalLink} />` instead. */
+declare function DropdownMenuInternalLink({
+  to,
+  ref,
+  children,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuInternalLinkProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/deprecated/IconWithPopover.d.ts
 interface IconWithPopoverProps {
   icon?: (OverridableComponent<SvgIconTypeMap<unknown, "svg">> & {
@@ -612,7 +698,16 @@ declare function PopoverText({
 }: 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>>];
+/**
+ * Stores changes to the window hash as React state.
+ *
+ * @template StateType - The type of the hash state.
+ *
+ * @param initialHash - The initial value of the hash.
+ *
+ * @returns A tuple containing the hash state, and a updater function to set the hash state.
+ */
+declare function useHash<StateType extends string>(initialHash: StateType | undefined): [StateType, Dispatch<SetStateAction<StateType>>];
 //#endregion
-export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, 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, DropdownMenuInternalLink, 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,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};
+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/Link";import w from"@mui/material/Button";import{ThemeProvider as le,createTheme as ue,styled as T,useTheme as de}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 fe}from"react-router-dom";import j from"@mui/material/CircularProgress";import{DataError as M,fillArray as pe,truncate as N,wait as me}from"@alextheman/utility";import P from"@mui/material/Alert";import F from"@mui/material/CssBaseline";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 I from"@mui/material/ListItemButton";import Ce from"@mui/material/ListItemIcon";import we from"@mui/material/Toolbar";import{stripIndent as Te}from"common-tags";import{LiveEditor as Ee,LiveError as De,LivePreview as Oe,LiveProvider as ke}from"react-live";import Ae from"@mui/material/Skeleton";import je from"@mui/material/TableCell";import Me from"@mui/material/TableRow";import{useFormContext as Ne}from"react-hook-form";import L from"@mui/material/Menu";import R from"@mui/material/MenuItem";import{createFormHookContexts as Pe}from"@tanstack/react-form";import"@mui/material/TextField";import Fe from"@mui/material/Popover";function z({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(z,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Ie,{}),l(z,{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 B({href:e,children:t,ref:n,...r}){return l(C,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const ze={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`},Be=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}),Ve=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 V({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(w,{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(Be,{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(Ve,{$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 He({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(V,{...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 H({to:e,component:t=A,children:n,ref:r,...i}){return l(C,{component:t,to:e,ref:r,...i,children:n})}const U=m(void 0);function W({strict:e=!0}={}){let t=g(U);if(e&&!t)throw new M({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the LoaderProvider context. Please double-check that it is present.`);return t}function Ue({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(P,{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(P,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var q=Ue;const J=m({toggleMode:()=>{},mode:`dark`});function Y({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new M({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function We({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>ue({palette:{mode:n}}),[n]);return l(J.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(le,{theme:i,children:[l(F,{}),e]})})}const X=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ge({strict:e=!0}={}){let t=g(X);if(e&&!t)throw new M({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 Ke({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 qe({strict:e=!0}={}){let t=g(Z);if(e&&!t)throw new M({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Je({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(Z.Provider,{value:{addSnackbar:f},children:[l(he,{open:n,autoHideDuration:i,onClose:p,children:l(P,{onClose:p,severity:c,children:o})}),e]})}function Ye({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 Xe=T(_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})}function Qe(){let{mode:e,toggleMode:t}=Y(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ge,{title:r,children:l(Ze,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function $e({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:A},e.value))})})]})}function et(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function tt(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 nt=T(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),rt=T(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})}}]})),it=T(Se,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...et(e),"& .MuiDrawer-paper":et(e)}},{props:({open:e})=>!e,style:{...tt(e),"& .MuiDrawer-paper":tt(e)}}]}));function at({title:t,navItems:n,children:r,headerElements:i}){let o=de(),[c,d]=b(!0),f=fe();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(F,{}),l(rt,{position:`fixed`,open:c,children:u(we,{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(it,{variant:`permanent`,open:c,children:[l(nt,{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:N(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(Ce,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:N(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(nt,{}),r]})]})}function ot({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 st({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(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 ct({columns:e}){return l(Me,{children:pe(e=>l(je,{children:l(Ae,{})},e),e)})}function lt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ne();return l(w,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}const ut=Qe;function dt({children:t,button:n=w,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===w&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(L,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const ft=m(void 0);function Q({strict:e=!0}={}){let t=g(ft);if(e&&!t)throw new M({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function pt({children:e,button:t=w,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(ft.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(L,{anchorEl:a,open:s,onClose:c,children:e})]})}function mt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(R,{component:e,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ht=pt;const{fieldContext:gt,formContext:_t,useFieldContext:vt,useFormContext:yt}=Pe(),$=Q,bt=ht,xt=mt;var St=bt;function Ct({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=$();return l(R,{component:B,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function wt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=$();return l(R,{component:H,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function Tt({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 Et({children:e,...t}){return l(I,{component:H,...t,children:e})}function Dt({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 Ot(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,ut as DarkModeToggle,dt as DropdownMenu,St as DropdownMenu2,Ct as DropdownMenuExternalLink,wt as DropdownMenuInternalLink,xt as DropdownMenuItem,B as ExternalLink,V as FileInput,He as FileInputList,ze as FileType,Tt as IconWithPopover,H as InternalLink,Et as ListItemInternalLink,Ye as Loader,G as LoaderData,K as LoaderError,q as LoaderProvider,We as ModeProvider,Qe as ModeToggle,$e as NavigationBottom,at as NavigationDrawer,ot as Page,Dt as PopoverText,st as ReactPlayground,Ke as ScreenSizeProvider,ct as SkeletonRow,Je as SnackbarProvider,lt as SubmitButton,Ze as SwitchWithIcons,$ as useDropdownMenu,Ot as useHash,Y as useMode,Ge as useScreenSize,qe as useSnackbar};
 //# sourceMappingURL=index.js.map