@alextheman/components 6.15.3 → 6.15.5

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import * as _$react from "react";
-import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, Key, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import { LinkProps } from "@mui/material/Link";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
@@ -275,6 +275,61 @@ declare function QueryBoundaryData<DataType>({
   loadingComponent
 }: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
+//#region src/providers/QueryBoundaryProvider/QueryBoundaryDataMap.d.ts
+interface QueryBoundaryDataMapBaseProps<ItemType> {
+  /**
+   * The elements to show after data has been loaded.
+   *
+   * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
+   */
+  children: ReactNode | ((data: ItemType) => ReactNode);
+  /** The component to show when the data is being fetched. */
+  loadingComponent?: ReactNode;
+  /** The component to show if the array is empty. */
+  emptyComponent?: ReactNode;
+  /** Throw an error if the provided data is not an array. (defaults to `true`) */
+  strictlyRequireArray?: boolean;
+  /**
+   * A function that takes a data item and returns the key to be used for the item.
+   *
+   * If not provided, it will fall back to using the index.
+   */
+  itemKey?: (item: ItemType, index: number) => Key;
+}
+interface QueryBoundaryDataMapPropsWithItemParser<ItemType> extends QueryBoundaryDataMapBaseProps<ItemType> {
+  /** A parser for each data item. */
+  itemParser: (data: unknown) => ItemType;
+  dataParser?: never;
+}
+interface QueryBoundaryDataMapPropsWithDataParser<ItemType> extends QueryBoundaryDataMapBaseProps<ItemType> {
+  /** A parser for each data item. */
+  dataParser: (data: unknown) => Array<ItemType>;
+  itemParser?: never;
+}
+interface QueryBoundaryDataMapPropsWithNoParser<ItemType> extends QueryBoundaryDataMapBaseProps<ItemType> {
+  dataParser?: never;
+  itemParser?: never;
+}
+type QueryBoundaryDataMapProps<ItemType> = QueryBoundaryDataMapPropsWithItemParser<ItemType> | QueryBoundaryDataMapPropsWithDataParser<ItemType> | QueryBoundaryDataMapPropsWithNoParser<ItemType>;
+/**
+ * The component responsible for handling an array of data provided by `QueryBoundaryProvider`.
+ *
+ * It will map through the data array, rendering the result of the children function in a fragment with a key of its index in the list, unless overridden by the `itemKey` prop.
+ *
+ * @template ItemType - The type of data being loaded.
+ *
+ * @throws {DataError} If the data provided by `QueryBoundaryProvider` is not an array, and the `strictlyRequireArray` prop is `true` (it is by default).
+ */
+declare function QueryBoundaryDataMap<ItemType>({
+  children,
+  loadingComponent: propLoadingComponent,
+  itemKey,
+  itemParser,
+  dataParser: propDataParser,
+  emptyComponent,
+  strictlyRequireArray
+}: QueryBoundaryDataMapProps<ItemType>): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
 //#region src/providers/QueryBoundaryProvider/QueryBoundaryError.d.ts
 interface QueryBoundaryErrorBaseProps {
   /** The component to show if an error has been thrown. */
@@ -375,6 +430,29 @@ declare function QueryBoundary<DataType>({
   ...loaderProviderProps
 }: QueryBoundaryProps<DataType>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/QueryBoundaryMap.d.ts
+type QueryBoundaryMapProps<ItemType> = Omit<QueryBoundaryProviderProps<Array<ItemType>>, "children" | "logError"> & Omit<QueryBoundaryErrorProps, "children"> & QueryBoundaryDataMapProps<ItemType>;
+/**
+ * An in-line component that handles an array of data provided by `QueryBoundaryProvider`.
+ *
+ * This may be used over QueryBoundaryProvider/QueryBoundaryDataMap if you don't require as much control over the placement of the error message and data display.
+ *
+ * @template DataType - The type of data being loaded.
+ */
+declare function QueryBoundaryMap<ItemType>({
+  loadingComponent,
+  undefinedComponent,
+  nullComponent,
+  nullableComponent,
+  logError,
+  errorComponent,
+  children,
+  isLoading,
+  error,
+  data,
+  ...props
+}: QueryBoundaryMapProps<ItemType>): _$react_jsx_runtime0.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. */
@@ -746,5 +824,5 @@ declare function SubmitButton({
  */
 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, 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, QueryBoundary, QueryBoundaryData, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, 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, 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, QueryBoundary, QueryBoundaryData, QueryBoundaryDataMap, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, QueryBoundaryMap, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { TypographyProps } from "@mui/material/Typography";
 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, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, Key, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import { LinkProps } from "@mui/material/Link";
 import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
@@ -275,6 +275,61 @@ declare function QueryBoundaryData<DataType>({
   loadingComponent
 }: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
+//#region src/providers/QueryBoundaryProvider/QueryBoundaryDataMap.d.ts
+interface QueryBoundaryDataMapBaseProps<ItemType> {
+  /**
+   * The elements to show after data has been loaded.
+   *
+   * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
+   */
+  children: ReactNode | ((data: ItemType) => ReactNode);
+  /** The component to show when the data is being fetched. */
+  loadingComponent?: ReactNode;
+  /** The component to show if the array is empty. */
+  emptyComponent?: ReactNode;
+  /** Throw an error if the provided data is not an array. (defaults to `true`) */
+  strictlyRequireArray?: boolean;
+  /**
+   * A function that takes a data item and returns the key to be used for the item.
+   *
+   * If not provided, it will fall back to using the index.
+   */
+  itemKey?: (item: ItemType, index: number) => Key;
+}
+interface QueryBoundaryDataMapPropsWithItemParser<ItemType> extends QueryBoundaryDataMapBaseProps<ItemType> {
+  /** A parser for each data item. */
+  itemParser: (data: unknown) => ItemType;
+  dataParser?: never;
+}
+interface QueryBoundaryDataMapPropsWithDataParser<ItemType> extends QueryBoundaryDataMapBaseProps<ItemType> {
+  /** A parser for each data item. */
+  dataParser: (data: unknown) => Array<ItemType>;
+  itemParser?: never;
+}
+interface QueryBoundaryDataMapPropsWithNoParser<ItemType> extends QueryBoundaryDataMapBaseProps<ItemType> {
+  dataParser?: never;
+  itemParser?: never;
+}
+type QueryBoundaryDataMapProps<ItemType> = QueryBoundaryDataMapPropsWithItemParser<ItemType> | QueryBoundaryDataMapPropsWithDataParser<ItemType> | QueryBoundaryDataMapPropsWithNoParser<ItemType>;
+/**
+ * The component responsible for handling an array of data provided by `QueryBoundaryProvider`.
+ *
+ * It will map through the data array, rendering the result of the children function in a fragment with a key of its index in the list, unless overridden by the `itemKey` prop.
+ *
+ * @template ItemType - The type of data being loaded.
+ *
+ * @throws {DataError} If the data provided by `QueryBoundaryProvider` is not an array, and the `strictlyRequireArray` prop is `true` (it is by default).
+ */
+declare function QueryBoundaryDataMap<ItemType>({
+  children,
+  loadingComponent: propLoadingComponent,
+  itemKey,
+  itemParser,
+  dataParser: propDataParser,
+  emptyComponent,
+  strictlyRequireArray
+}: QueryBoundaryDataMapProps<ItemType>): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
 //#region src/providers/QueryBoundaryProvider/QueryBoundaryError.d.ts
 interface QueryBoundaryErrorBaseProps {
   /** The component to show if an error has been thrown. */
@@ -375,6 +430,29 @@ declare function QueryBoundary<DataType>({
   ...loaderProviderProps
 }: QueryBoundaryProps<DataType>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/QueryBoundaryMap.d.ts
+type QueryBoundaryMapProps<ItemType> = Omit<QueryBoundaryProviderProps<Array<ItemType>>, "children" | "logError"> & Omit<QueryBoundaryErrorProps, "children"> & QueryBoundaryDataMapProps<ItemType>;
+/**
+ * An in-line component that handles an array of data provided by `QueryBoundaryProvider`.
+ *
+ * This may be used over QueryBoundaryProvider/QueryBoundaryDataMap if you don't require as much control over the placement of the error message and data display.
+ *
+ * @template DataType - The type of data being loaded.
+ */
+declare function QueryBoundaryMap<ItemType>({
+  loadingComponent,
+  undefinedComponent,
+  nullComponent,
+  nullableComponent,
+  logError,
+  errorComponent,
+  children,
+  isLoading,
+  error,
+  data,
+  ...props
+}: QueryBoundaryMapProps<ItemType>): _$react_jsx_runtime0.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. */
@@ -746,5 +824,5 @@ declare function SubmitButton({
  */
 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, 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, QueryBoundary, QueryBoundaryData, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, 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, 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, QueryBoundary, QueryBoundaryData, QueryBoundaryDataMap, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorBaseProps, type QueryBoundaryErrorProps, type QueryBoundaryErrorPropsWithNullable, type QueryBoundaryErrorPropsWithUndefinedOrNull, QueryBoundaryMap, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, 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 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 ue from"@mui/material/Link";import S from"@mui/material/Button";import{ThemeProvider as de,createTheme as fe,styled as C,useTheme as pe}from"@mui/material/styles";import w from"@mui/material/IconButton";import me from"@mui/material/List";import T from"@mui/material/ListItem";import E from"@mui/material/ListItemText";import he from"@mui/material/Tooltip";import ge from"@mui/material/Switch";import{DataError as D}from"@alextheman/utility/v6";import O from"@mui/material/CssBaseline";import k from"@mui/material/CircularProgress";import A from"@mui/material/Alert";import{fillArray as _e,truncate as ve,wait as ye}from"@alextheman/utility";import be from"@mui/material/Snackbar";import xe from"@mui/material/BottomNavigation";import Se from"@mui/material/BottomNavigationAction";import Ce from"@mui/material/Paper";import{Link as j,useLocation as we}from"react-router-dom";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 M from"@mui/material/Menu";import N from"@mui/material/AppBar";import P from"@mui/material/Drawer";import F from"@mui/material/ListItemButton";import Ne from"@mui/material/ListItemIcon";import Pe from"@mui/material/Toolbar";import"wouter";import"@mui/material/AlertTitle";import"@mui/material/Container";import"wouter/memory-location";import"wouter/use-browser-location";import{createFormHookContexts as Fe}from"@tanstack/react-form";import"@mui/material/TextField";import I from"@mui/material/MenuItem";import Ie from"@mui/material/Popover";import{useFormContext as Le}from"react-hook-form";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 Re(){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 ze(){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(Re,{}),l(L,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Be({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 R({href:e,children:t,ref:n,...r}){return l(ue,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Ve={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`},He=C(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Ue=C(`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(S,{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(He,{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(Ue,{$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 We({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(me,{children:t.map(e=>l(T,{secondaryAction:l(w,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ae,{})}),children:l(E,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const Ge=C(ge)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function B({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(Ge,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const V=m({toggleMode:()=>{},mode:`dark`});function H({strict:e=!0}={}){let t=g(V);if(e&&!t)throw new D({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function Ke({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>fe({palette:{mode:n}}),[n]);return l(V.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(de,{theme:i,children:[l(O,{}),e]})})}const U=m(void 0);function W({strict:e=!0}={}){let t=g(U);if(e&&!t)throw new D({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function qe({children:e,loadingComponent:t=l(k,{}),...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?null:l(c,{children:typeof e==`function`?e(u?u(i):i):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 o==null?s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(A,{severity:`error`,children:typeof s==`object`&&`message`in s&&typeof s.message==`string`?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 QueryBoundaryProvider. 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(A,{severity:`error`,children:`Failed to load data. Please try again later.`}):null:null}var q=qe;const J=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Je({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new D({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 Ye({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(J.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Y=m(void 0);function Xe({strict:e=!0}={}){let t=g(Y);if(e&&!t)throw new D({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Ze({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(Y.Provider,{value:{addSnackbar:f},children:[l(be,{open:n,autoHideDuration:i,onClose:p,children:l(A,{onClose:p,severity:c,children:o})}),e]})}function X(){let{mode:e,toggleMode:t}=H(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(he,{title:r,children:l(B,{uncheckedIcon:ce,checkedIcon:se,checked:n,onChange:t,"aria-label":r})})}function Qe({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Ce,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(xe,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(Se,{...e,component:j},e.value))})})]})}function $e({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 et({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(k,{}),...s}){return u(q,{loadingComponent:o,...s,children:[l(K,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(G,{children:e})]})}function tt({code:t,previewStyles:n,...r}){let{mode:i}=H(),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 nt({columns:e}){return l(Me,{children:_e(e=>l(je,{children:l(Ae,{})},e),e)})}const rt=X;function it({children:t,button:n=S,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===S&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(M,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function at(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ot(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),C(N,{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})}}]})),C(P,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...at(e),"& .MuiDrawer-paper":at(e)}},{props:({open:e})=>!e,style:{...ot(e),"& .MuiDrawer-paper":ot(e)}}]}));const{fieldContext:st,formContext:ct,useFieldContext:lt,useFormContext:ut}=Fe(),dt=m(void 0);function Z({strict:e=!0}={}){let t=g(dt);if(e&&!t)throw new D({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function ft({strict:e=!0}={}){return Z({strict:e})}function pt({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=ft();return l(M,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function mt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(I,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,ht=pt,gt=mt;var _t=ht;function vt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(I,{component:R,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=j,children:n,ref:r,...i}){return l(ue,{component:t,to:e,ref:r,...i,children:n})}function yt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(I,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function bt({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(Ie,{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 xt({children:e,...t}){return l(F,{component:$,...t,children:e})}const St=et,Ct=G,wt=K,Tt=q;function Et(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Dt(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=C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),kt=C(N,{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})}}]})),At=C(P,{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:{...Dt(e),"& .MuiDrawer-paper":Dt(e)}}]}));function jt({title:t,navItems:n,children:r,headerElements:i}){let o=pe(),[c,d]=b(!0),f=we();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(O,{}),l(kt,{position:`fixed`,open:c,children:u(Pe,{children:[l(w,{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(At,{variant:`permanent`,open:c,children:[l(Ot,{children:l(w,{onClick:h,children:o.direction===`rtl`?l(re,{}):l(ne,{})})}),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:ve(e.category,4)}),e.options.map(e=>l(T,{disablePadding:!0,sx:{display:`block`},children:u(F,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:j,to:e.to,selected:f.pathname===e.to,children:[l(Ne,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:ve(e.label,4)})}),l(E,{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 Mt({text:e,sx:t,...n}){return l(c,{children:e.split(`
-`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}function Nt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Le();return l(S,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function Pt(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{ze as Artwork,Be as CollapsableItem,rt as DarkModeToggle,it as DropdownMenu,_t as DropdownMenu2,vt as DropdownMenuExternalLink,yt as DropdownMenuInternalLink,gt as DropdownMenuItem,R as ExternalLink,z as FileInput,We as FileInputList,Ve as FileType,bt as IconWithPopover,$ as InternalLink,xt as ListItemInternalLink,St as Loader,Ct as LoaderData,wt as LoaderError,Tt as LoaderProvider,Ke as ModeProvider,X as ModeToggle,Qe as NavigationBottom,jt as NavigationDrawer,$e as Page,Mt as PopoverText,et as QueryBoundary,G as QueryBoundaryData,K as QueryBoundaryError,q as QueryBoundaryProvider,tt as ReactPlayground,Ye as ScreenSizeProvider,nt as SkeletonRow,Ze as SnackbarProvider,Nt as SubmitButton,B as SwitchWithIcons,Q as useDropdownMenu,Pt as useHash,H as useMode,Je as useScreenSize,Xe as useSnackbar};
+import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/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 te,MdArrowDropUp as x,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 ue from"@mui/material/Link";import S from"@mui/material/Button";import{ThemeProvider as de,createTheme as fe,styled as C,useTheme as pe}from"@mui/material/styles";import w from"@mui/material/IconButton";import T from"@mui/material/List";import E from"@mui/material/ListItem";import D from"@mui/material/ListItemText";import me from"@mui/material/Tooltip";import he from"@mui/material/Switch";import{DataError as O}from"@alextheman/utility/v6";import k from"@mui/material/CssBaseline";import A from"@mui/material/CircularProgress";import j from"@mui/material/Alert";import{fillArray as ge,truncate as M,wait as _e}from"@alextheman/utility";import ve from"@mui/material/Snackbar";import ye from"@mui/material/BottomNavigation";import be from"@mui/material/BottomNavigationAction";import xe from"@mui/material/Paper";import{Link as N,useLocation as Se}from"react-router-dom";import{stripIndent as Ce}from"common-tags";import{LiveEditor as we,LiveError as Te,LivePreview as Ee,LiveProvider as De}from"react-live";import Oe from"@mui/material/Skeleton";import ke from"@mui/material/TableCell";import Ae from"@mui/material/TableRow";import P from"@mui/material/Menu";import F from"@mui/material/AppBar";import I from"@mui/material/Drawer";import L from"@mui/material/ListItemButton";import je from"@mui/material/ListItemIcon";import Me from"@mui/material/Toolbar";import"wouter";import"@mui/material/AlertTitle";import"@mui/material/Container";import"wouter/memory-location";import"wouter/use-browser-location";import{createFormHookContexts as Ne}from"@tanstack/react-form";import"@mui/material/TextField";import R from"@mui/material/MenuItem";import Pe from"@mui/material/Popover";import{useFormContext as Fe}from"react-hook-form";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(x,{}),closedIcon:m=l(te,{}),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(ue,{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=C(`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=C(`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(S,{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(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(T,{children:t.map(e=>l(E,{secondaryAction:l(w,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ae,{})}),children:l(D,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const Ue=C(he)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function H({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(Ue,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const U=m({toggleMode:()=>{},mode:`dark`});function W({strict:e=!0}={}){let t=g(U);if(e&&!t)throw new O({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(()=>fe({palette:{mode:n}}),[n]);return l(U.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(de,{theme:i,children:[l(k,{}),e]})})}const G=m(void 0);function K({strict:e=!0}={}){let t=g(G);if(e&&!t)throw new O({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function Ge({children:e,loadingComponent:t=l(A,{}),...n}){return l(G.Provider,{value:{loadingComponent:t,...n},children:e})}function q({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=K(),u=t??a;return r?l(c,{children:n??o}):s||i==null?null:l(c,{children:typeof e==`function`?e(u?u(i):i):e})}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}=K(),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 O({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 Y({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=K(),f=i??d,p=ee(!1),m=e??u;return o==null?s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(j,{severity:`error`,children:typeof s==`object`&&`message`in s&&typeof s.message==`string`?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 QueryBoundaryProvider. 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(j,{severity:`error`,children:`Failed to load data. Please try again later.`}):null:null}var X=Ge;const Ke=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function qe({strict:e=!0}={}){let t=g(Ke);if(e&&!t)throw new O({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 Je({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(Ke.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Ye=m(void 0);function Xe({strict:e=!0}={}){let t=g(Ye);if(e&&!t)throw new O({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Ze({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 _e(.2),s(``)}return u(Ye.Provider,{value:{addSnackbar:f},children:[l(ve,{open:n,autoHideDuration:i,onClose:p,children:l(j,{onClose:p,severity:c,children:o})}),e]})}function Qe(){let{mode:e,toggleMode:t}=W(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(me,{title:r,children:l(H,{uncheckedIcon:ce,checkedIcon:se,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(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:N},e.value))})})]})}function et({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 tt({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(A,{}),...s}){return u(X,{loadingComponent:o,...s,children:[l(Y,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(q,{children:e})]})}function nt({loadingComponent:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,errorComponent:a,children:o,isLoading:s,error:c,data:d,...f}){return u(X,{loadingComponent:e,isLoading:s,error:c,data:d,children:[l(Y,{undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,children:a}),l(J,{...f,children:o})]})}function rt({code:t,previewStyles:n,...r}){let{mode:i}=W(),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(De,{...r,code:Ce(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(we,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Ee,{}),l(Te,{})]})]})})}function it({columns:e}){return l(Ae,{children:ge(e=>l(ke,{children:l(Oe,{})},e),e)})}const at=Qe;function ot({children:t,button:n=S,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(x,{}),isClosedIcon:o=l(te,{}),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===S&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(P,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function st(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ct(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)`}}}C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),C(F,{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})}}]})),C(I,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...st(e),"& .MuiDrawer-paper":st(e)}},{props:({open:e})=>!e,style:{...ct(e),"& .MuiDrawer-paper":ct(e)}}]}));const{fieldContext:lt,formContext:ut,useFieldContext:dt,useFormContext:ft}=Ne(),pt=m(void 0);function Z({strict:e=!0}={}){let t=g(pt);if(e&&!t)throw new O({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(P,{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(R,{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(R,{component:B,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(ue,{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(R,{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(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 Ct({children:e,...t}){return l(L,{component:$,...t,children:e})}const wt=tt,Tt=q,Et=Y,Dt=X;function Ot(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function kt(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const At=C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),jt=C(F,{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})}}]})),Mt=C(I,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Ot(e),"& .MuiDrawer-paper":Ot(e)}},{props:({open:e})=>!e,style:{...kt(e),"& .MuiDrawer-paper":kt(e)}}]}));function Nt({title:t,navItems:n,children:r,headerElements:i}){let o=pe(),[c,d]=b(!0),f=Se();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(k,{}),l(jt,{position:`fixed`,open:c,children:u(Me,{children:[l(w,{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(Mt,{variant:`permanent`,open:c,children:[l(At,{children:l(w,{onClick:h,children:o.direction===`rtl`?l(re,{}):l(ne,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(T,{children:[l(s,{variant:c?`h5`:`h6`,sx:{paddingLeft:c?2:1},children:c?e.category:M(e.category,4)}),e.options.map(e=>l(E,{disablePadding:!0,sx:{display:`block`},children:u(L,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:N,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:M(e.label,4)})}),l(D,{primary:e.label,sx:[c?{opacity:1}:{opacity:0}]})]})},e.to))]}),l(a,{})]},e.category))]}),u(e,{component:`main`,sx:{flexGrow:1,p:3},children:[l(At,{}),r]})]})}function Pt({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 Ft({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Fe();return l(S,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function It(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,at as DarkModeToggle,ot as DropdownMenu,yt as DropdownMenu2,bt as DropdownMenuExternalLink,xt as DropdownMenuInternalLink,vt as DropdownMenuItem,B as ExternalLink,V as FileInput,He as FileInputList,ze as FileType,St as IconWithPopover,$ as InternalLink,Ct as ListItemInternalLink,wt as Loader,Tt as LoaderData,Et as LoaderError,Dt as LoaderProvider,We as ModeProvider,Qe as ModeToggle,$e as NavigationBottom,Nt as NavigationDrawer,et as Page,Pt as PopoverText,tt as QueryBoundary,q as QueryBoundaryData,J as QueryBoundaryDataMap,Y as QueryBoundaryError,nt as QueryBoundaryMap,X as QueryBoundaryProvider,rt as ReactPlayground,Je as ScreenSizeProvider,it as SkeletonRow,Ze as SnackbarProvider,Ft as SubmitButton,H as SwitchWithIcons,Q as useDropdownMenu,It as useHash,W as useMode,qe as useScreenSize,Xe as useSnackbar};
 //# sourceMappingURL=index.js.map