@alextheman/components 6.23.1 → 6.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -7,8 +7,8 @@ import { LinkProps } from "@mui/material/Link";
7
7
  import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
8
8
  import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
9
9
  import { SwitchProps } from "@mui/material/Switch";
10
- import { AlertColor } from "@mui/material/Alert";
11
10
  import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
11
+ import { AlertColor } from "@mui/material/Alert";
12
12
  import { LiveProvider } from "react-live";
13
13
  import { MenuProps } from "@mui/material/Menu";
14
14
  import { ListItemButtonProps } from "@mui/material/ListItemButton";
@@ -168,78 +168,7 @@ declare function Page({
168
168
  disablePadding
169
169
  }: PageProps): _$react_jsx_runtime0.JSX.Element;
170
170
  //#endregion
171
- //#region src/types/ContextHookOptions.d.ts
172
- interface ContextHookOptions<Strict extends boolean = true> {
173
- /** Error if the context is missing if this is set to true. */
174
- strict?: Strict;
175
- }
176
- //#endregion
177
- //#region src/providers/ModeProvider.d.ts
178
- interface ModeContextValue {
179
- toggleMode: () => void;
180
- mode: PaletteMode;
181
- }
182
- /** Access the mode context directly. */
183
- declare function useMode<Strict extends boolean = true>({
184
- strict
185
- }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ModeContextValue>;
186
- interface ModeProviderProps {
187
- /** The children that will have access to the current mode. */
188
- children: ReactNode;
189
- /** The initial mode. */
190
- mode?: PaletteMode;
191
- }
192
- /** Provides information about the current theme mode to its children components. */
193
- declare function ModeProvider({
194
- children,
195
- mode: modeProp
196
- }: ModeProviderProps): _$react_jsx_runtime0.JSX.Element;
197
- //#endregion
198
- //#region src/providers/QueryBoundaryProvider/QueryBoundaryProvider.d.ts
199
- interface QueryBoundaryProviderBaseProps<DataType> {
200
- /** The current loading status (true if loading, false if not) */
201
- isLoading?: boolean;
202
- /** The data being loaded. */
203
- data?: DataType | null | undefined;
204
- /** A parser for the data. */
205
- dataParser?: (data: unknown) => NonNullable<DataType>;
206
- /** The component to show when the data is being fetched. */
207
- loadingComponent?: ReactNode;
208
- }
209
- interface QueryBoundaryProviderPropsWithNoError<DataType> extends QueryBoundaryProviderBaseProps<DataType> {
210
- error?: never;
211
- errorComponent?: never;
212
- logError?: never;
213
- }
214
- interface QueryBoundaryProviderPropsWithError<DataType> extends QueryBoundaryProviderBaseProps<DataType> {
215
- /** The error given if the request gave an error. */
216
- error: unknown;
217
- /** The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided. */
218
- errorComponent?: ReactNode | ((error: unknown) => ReactNode);
219
- /** Whether you want to log the error to the console or not. */
220
- logError?: boolean;
221
- }
222
- type QueryBoundaryContextValue<DataType> = QueryBoundaryProviderPropsWithNoError<DataType> | QueryBoundaryProviderPropsWithError<DataType>;
223
- type QueryBoundaryProviderProps<DataType> = QueryBoundaryContextValue<DataType> & {
224
- children: ReactNode;
225
- };
226
- /** Access the QueryBoundary context directly. */
227
- declare function useQueryBoundary<DataType, Strict extends boolean = true>({
228
- strict
229
- }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, QueryBoundaryContextValue<DataType>>;
230
- /**
231
- * A provider for a context that deals with state management when fetching data from an API.
232
- * This may be used over QueryBoundary if you require more control over the placement of the error message and data display.
233
- *
234
- * @template DataType - The type of data being loaded.
235
- */
236
- declare function QueryBoundaryProvider<DataType>({
237
- children,
238
- loadingComponent,
239
- ...contextProps
240
- }: QueryBoundaryProviderProps<DataType>): _$react_jsx_runtime0.JSX.Element;
241
- //#endregion
242
- //#region src/providers/QueryBoundaryProvider/QueryBoundaryData.d.ts
171
+ //#region src/groups/QueryBoundary/QueryBoundaryData.d.ts
243
172
  interface QueryBoundaryDataProps<DataType> {
244
173
  /**
245
174
  * The elements to show after data has been loaded.
@@ -262,7 +191,7 @@ declare function QueryBoundaryData<DataType>({
262
191
  loadingComponent
263
192
  }: QueryBoundaryDataProps<DataType>): _$react_jsx_runtime0.JSX.Element | null;
264
193
  //#endregion
265
- //#region src/providers/QueryBoundaryProvider/QueryBoundaryDataMap.d.ts
194
+ //#region src/groups/QueryBoundary/QueryBoundaryDataMap.d.ts
266
195
  interface QueryBoundaryDataMapBaseProps<ItemType> {
267
196
  /**
268
197
  * The elements to show after data has been loaded.
@@ -317,7 +246,7 @@ declare function QueryBoundaryDataMap<ItemType>({
317
246
  strictlyRequireArray
318
247
  }: QueryBoundaryDataMapProps<ItemType>): _$react_jsx_runtime0.JSX.Element | null;
319
248
  //#endregion
320
- //#region src/providers/QueryBoundaryProvider/QueryBoundaryError.d.ts
249
+ //#region src/groups/QueryBoundary/QueryBoundaryError.d.ts
321
250
  interface QueryBoundaryErrorProps {
322
251
  /** The component to show if an error has been thrown. */
323
252
  children?: ReactNode | ((error: unknown) => ReactNode);
@@ -332,7 +261,7 @@ declare function QueryBoundaryError({
332
261
  logError: propsLogError
333
262
  }: QueryBoundaryErrorProps): string | number | bigint | boolean | _$react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
334
263
  //#endregion
335
- //#region src/providers/QueryBoundaryProvider/QueryBoundaryNullable.d.ts
264
+ //#region src/groups/QueryBoundary/QueryBoundaryNullable.d.ts
336
265
  interface QueryBoundaryNullablePropsWithUndefinedOrNull {
337
266
  /** The component to show if no error was thrown but data is undefined */
338
267
  undefinedComponent?: ReactNode;
@@ -354,7 +283,7 @@ declare function QueryBoundaryNullable({
354
283
  nullableComponent
355
284
  }: QueryBoundaryNullableProps): _$react_jsx_runtime0.JSX.Element | null;
356
285
  //#endregion
357
- //#region src/providers/QueryBoundaryProvider/QueryBoundaryFallback.d.ts
286
+ //#region src/groups/QueryBoundary/QueryBoundaryFallback.d.ts
358
287
  type QueryBoundaryFallbackProps = Omit<QueryBoundaryErrorProps, "children"> & {
359
288
  /** The component to show if an error has been thrown. */errorComponent?: ReactNode | ((error: unknown) => ReactNode);
360
289
  } & QueryBoundaryNullableProps;
@@ -367,54 +296,95 @@ declare function QueryBoundaryFallback({
367
296
  ...queryBoundaryNullableProps
368
297
  }: QueryBoundaryFallbackProps): _$react_jsx_runtime0.JSX.Element;
369
298
  //#endregion
370
- //#region src/providers/ScreenSizeProvider.d.ts
371
- interface ScreenSizeProps {
372
- /** The children that will be receiving the ScreenSizeContext. */
373
- children: ReactNode;
374
- /** The minimum screen width in pixels required to be considered a large screen. */
375
- largeScreenWidth?: number;
376
- /** The minimum screen height in pixels required to be considered a large screen. */
377
- largeScreenHeight?: number;
299
+ //#region src/groups/QueryBoundary/index.d.ts
300
+ interface QueryBase {
301
+ /** The current loading status (true if loading, false if not) */
302
+ isLoading?: boolean;
303
+ /** The error given if the response gave an error. */
304
+ error?: unknown;
378
305
  }
379
- interface ScreenSizeContextValue {
380
- /** Whether the screen is a large screen or not. */
381
- isLargeScreen: boolean;
382
- /** The current window width. */
383
- windowWidth: number;
384
- /** The current window height. */
385
- windowHeight: number;
306
+ interface QuerySingle<DataType> extends QueryBase {
307
+ /** The data being loaded. */
308
+ data: DataType | null | undefined;
309
+ dataCollection?: never;
386
310
  }
387
- /** Access the screen size context directly. */
388
- declare function useScreenSize<Strict extends boolean = true>({
389
- strict
390
- }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ScreenSizeContextValue>;
391
- /** Provides context about the current screen size. */
392
- declare function ScreenSizeProvider({
393
- children,
394
- largeScreenWidth,
395
- largeScreenHeight
396
- }: ScreenSizeProps): _$react_jsx_runtime0.JSX.Element;
311
+ interface QueryMultiple<ItemType> extends QueryBase {
312
+ /** An array of data items being loaded. */
313
+ dataCollection: Array<ItemType> | null | undefined;
314
+ data?: never;
315
+ }
316
+ type Query<DataType> = QuerySingle<DataType> | QueryMultiple<DataType>;
317
+ interface CreateQueryBoundaryParameters<DataType> {
318
+ query: Query<DataType>;
319
+ }
320
+ interface DefaultQueryBoundaryComponents<DataType> {
321
+ Context: (props: {
322
+ children: ReactNode;
323
+ }) => JSX.Element;
324
+ Error: typeof QueryBoundaryError;
325
+ Data: typeof QueryBoundaryData<DataType>;
326
+ DataMap: typeof QueryBoundaryDataMap<DataType>;
327
+ Fallback: typeof QueryBoundaryFallback;
328
+ Nullable: typeof QueryBoundaryNullable;
329
+ }
330
+ /**
331
+ * A creator function to create a system of QueryBoundary components with the data fully typed throughout.
332
+ *
333
+ * @deprecated Please use either `createBaseQueryBoundary`, `createItemQueryBoundary`, or `createListQueryBoundary` from `@alextheman/components/v7` instead.
334
+ */
335
+ declare function createQueryBoundary<DataType>({
336
+ query
337
+ }: CreateQueryBoundaryParameters<DataType>): DefaultQueryBoundaryComponents<DataType>;
397
338
  //#endregion
398
- //#region src/providers/SnackbarProvider.d.ts
399
- interface SnackbarProviderProps {
400
- /** The children that will have access to the snackbar context. */
401
- children: ReactNode;
402
- /** The amount of seconds to wait before hiding the snackbar. */
403
- autoHideDuration?: number;
339
+ //#region src/types/ContextHookOptions.d.ts
340
+ interface ContextHookOptions<Strict extends boolean = true> {
341
+ /** Error if the context is missing if this is set to true. */
342
+ strict?: Strict;
404
343
  }
405
- interface SnackbarContextValue {
406
- /** A function that adds the snackbar to the page. */
407
- addSnackbar: (message: string, severity?: AlertColor, duration?: number) => void;
344
+ //#endregion
345
+ //#region src/groups/QueryBoundary/QueryBoundaryProvider.d.ts
346
+ interface QueryBoundaryProviderBaseProps<DataType> {
347
+ /** The current loading status (true if loading, false if not) */
348
+ isLoading?: boolean;
349
+ /** The data being loaded. */
350
+ data?: DataType | null | undefined;
351
+ /** A parser for the data. */
352
+ dataParser?: (data: unknown) => NonNullable<DataType>;
353
+ /** The component to show when the data is being fetched. */
354
+ loadingComponent?: ReactNode;
408
355
  }
409
- /** Access the snackbar context directly. */
410
- declare function useSnackbar<Strict extends boolean = true>({
356
+ interface QueryBoundaryProviderPropsWithNoError<DataType> extends QueryBoundaryProviderBaseProps<DataType> {
357
+ error?: never;
358
+ errorComponent?: never;
359
+ logError?: never;
360
+ }
361
+ interface QueryBoundaryProviderPropsWithError<DataType> extends QueryBoundaryProviderBaseProps<DataType> {
362
+ /** The error given if the request gave an error. */
363
+ error: unknown;
364
+ /** The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided. */
365
+ errorComponent?: ReactNode | ((error: unknown) => ReactNode);
366
+ /** Whether you want to log the error to the console or not. */
367
+ logError?: boolean;
368
+ }
369
+ type QueryBoundaryContextValue<DataType> = QueryBoundaryProviderPropsWithNoError<DataType> | QueryBoundaryProviderPropsWithError<DataType>;
370
+ type QueryBoundaryProviderProps<DataType> = QueryBoundaryContextValue<DataType> & {
371
+ children: ReactNode;
372
+ };
373
+ /** Access the QueryBoundary context directly. */
374
+ declare function useQueryBoundary<DataType, Strict extends boolean = true>({
411
375
  strict
412
- }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, SnackbarContextValue>;
413
- /** Controls the display of the snackbars on the page. */
414
- declare function SnackbarProvider({
376
+ }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, QueryBoundaryContextValue<DataType>>;
377
+ /**
378
+ * A provider for a context that deals with state management when fetching data from an API.
379
+ * This may be used over QueryBoundary if you require more control over the placement of the error message and data display.
380
+ *
381
+ * @template DataType - The type of data being loaded.
382
+ */
383
+ declare function QueryBoundaryProvider<DataType>({
415
384
  children,
416
- autoHideDuration
417
- }: SnackbarProviderProps): _$react_jsx_runtime0.JSX.Element;
385
+ loadingComponent,
386
+ ...contextProps
387
+ }: QueryBoundaryProviderProps<DataType>): _$react_jsx_runtime0.JSX.Element;
418
388
  //#endregion
419
389
  //#region src/components/QueryBoundaryMap.d.ts
420
390
  type QueryBoundaryMapProps<ItemType> = Omit<QueryBoundaryProviderProps<Array<ItemType>>, "children" | "logError"> & Omit<QueryBoundaryFallbackProps, "errorComponent"> & QueryBoundaryDataMapProps<ItemType>;
@@ -855,42 +825,6 @@ declare function SubmitButton({
855
825
  ...buttonProps
856
826
  }: SubmitButtonProps): _$react_jsx_runtime0.JSX.Element;
857
827
  //#endregion
858
- //#region src/hooks/createQueryBoundary.d.ts
859
- interface QueryBase {
860
- /** The current loading status (true if loading, false if not) */
861
- isLoading?: boolean;
862
- /** The error given if the response gave an error. */
863
- error?: unknown;
864
- }
865
- interface QuerySingle<DataType> extends QueryBase {
866
- /** The data being loaded. */
867
- data: DataType | null | undefined;
868
- dataCollection?: never;
869
- }
870
- interface QueryMultiple<ItemType> extends QueryBase {
871
- /** An array of data items being loaded. */
872
- dataCollection: Array<ItemType> | null | undefined;
873
- data?: never;
874
- }
875
- type Query<DataType> = QuerySingle<DataType> | QueryMultiple<DataType>;
876
- interface CreateQueryBoundaryParameters<DataType> {
877
- query: Query<DataType>;
878
- }
879
- interface DefaultQueryBoundaryComponents<DataType> {
880
- Context: (props: {
881
- children: ReactNode;
882
- }) => JSX.Element;
883
- Error: typeof QueryBoundaryError;
884
- Data: typeof QueryBoundaryData<DataType>;
885
- DataMap: typeof QueryBoundaryDataMap<DataType>;
886
- Fallback: typeof QueryBoundaryFallback;
887
- Nullable: typeof QueryBoundaryNullable;
888
- }
889
- /** A creator function to create a system of QueryBoundary components with the data fully typed throughout. */
890
- declare function createQueryBoundary<DataType>({
891
- query
892
- }: CreateQueryBoundaryParameters<DataType>): DefaultQueryBoundaryComponents<DataType>;
893
- //#endregion
894
828
  //#region src/hooks/useDebounce.d.ts
895
829
  /**
896
830
  * Assign a variable a given value after a given amount of milliseconds.
@@ -916,5 +850,75 @@ declare function useDebounce<ValueType>(value: ValueType, delay?: number): Value
916
850
  */
917
851
  declare function useHash<StateType extends string>(initialHash: StateType | undefined): [StateType, Dispatch<SetStateAction<StateType>>];
918
852
  //#endregion
919
- export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, type CreateQueryBoundaryParameters, DarkModeToggle, type DefaultQueryBoundaryComponents, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, Loader, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, type Query, type QueryBase, QueryBoundary, QueryBoundaryData, QueryBoundaryDataMap, type QueryBoundaryDataMapBaseProps, type QueryBoundaryDataMapProps, type QueryBoundaryDataMapPropsWithDataParser, type QueryBoundaryDataMapPropsWithItemParser, type QueryBoundaryDataMapPropsWithNoParser, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorProps, QueryBoundaryFallback, type QueryBoundaryFallbackProps, QueryBoundaryMap, type QueryBoundaryMapProps, QueryBoundaryNullable, type QueryBoundaryNullableProps, type QueryBoundaryNullablePropsWithNullable, type QueryBoundaryNullablePropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, QueryBoundaryWrapper, type QueryBoundaryWrapperProps, type QueryMultiple, type QuerySingle, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, createQueryBoundary, useDebounce, useDropdownMenu, useHash, useMode, useQueryBoundary, useScreenSize, useSnackbar };
853
+ //#region src/providers/ModeProvider.d.ts
854
+ interface ModeContextValue {
855
+ toggleMode: () => void;
856
+ mode: PaletteMode;
857
+ }
858
+ /** Access the mode context directly. */
859
+ declare function useMode<Strict extends boolean = true>({
860
+ strict
861
+ }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ModeContextValue>;
862
+ interface ModeProviderProps {
863
+ /** The children that will have access to the current mode. */
864
+ children: ReactNode;
865
+ /** The initial mode. */
866
+ mode?: PaletteMode;
867
+ }
868
+ /** Provides information about the current theme mode to its children components. */
869
+ declare function ModeProvider({
870
+ children,
871
+ mode: modeProp
872
+ }: ModeProviderProps): _$react_jsx_runtime0.JSX.Element;
873
+ //#endregion
874
+ //#region src/providers/ScreenSizeProvider.d.ts
875
+ interface ScreenSizeProps {
876
+ /** The children that will be receiving the ScreenSizeContext. */
877
+ children: ReactNode;
878
+ /** The minimum screen width in pixels required to be considered a large screen. */
879
+ largeScreenWidth?: number;
880
+ /** The minimum screen height in pixels required to be considered a large screen. */
881
+ largeScreenHeight?: number;
882
+ }
883
+ interface ScreenSizeContextValue {
884
+ /** Whether the screen is a large screen or not. */
885
+ isLargeScreen: boolean;
886
+ /** The current window width. */
887
+ windowWidth: number;
888
+ /** The current window height. */
889
+ windowHeight: number;
890
+ }
891
+ /** Access the screen size context directly. */
892
+ declare function useScreenSize<Strict extends boolean = true>({
893
+ strict
894
+ }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, ScreenSizeContextValue>;
895
+ /** Provides context about the current screen size. */
896
+ declare function ScreenSizeProvider({
897
+ children,
898
+ largeScreenWidth,
899
+ largeScreenHeight
900
+ }: ScreenSizeProps): _$react_jsx_runtime0.JSX.Element;
901
+ //#endregion
902
+ //#region src/providers/SnackbarProvider.d.ts
903
+ interface SnackbarProviderProps {
904
+ /** The children that will have access to the snackbar context. */
905
+ children: ReactNode;
906
+ /** The amount of seconds to wait before hiding the snackbar. */
907
+ autoHideDuration?: number;
908
+ }
909
+ interface SnackbarContextValue {
910
+ /** A function that adds the snackbar to the page. */
911
+ addSnackbar: (message: string, severity?: AlertColor, duration?: number) => void;
912
+ }
913
+ /** Access the snackbar context directly. */
914
+ declare function useSnackbar<Strict extends boolean = true>({
915
+ strict
916
+ }?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, SnackbarContextValue>;
917
+ /** Controls the display of the snackbars on the page. */
918
+ declare function SnackbarProvider({
919
+ children,
920
+ autoHideDuration
921
+ }: SnackbarProviderProps): _$react_jsx_runtime0.JSX.Element;
922
+ //#endregion
923
+ export { Artwork, CollapsableItem, type CollapsableItemProps, ContextHookOptions, type CreateQueryBoundaryParameters, DarkModeToggle, type DefaultQueryBoundaryComponents, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, DropdownMenuInternalLink, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, Loader, type LoaderContextValue, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, ModeToggle, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, Page, PopoverText, type PopoverTextProps, type QueryBase, QueryBoundary, QueryBoundaryData, QueryBoundaryDataMap, type QueryBoundaryDataMapBaseProps, type QueryBoundaryDataMapProps, type QueryBoundaryDataMapPropsWithDataParser, type QueryBoundaryDataMapPropsWithItemParser, type QueryBoundaryDataMapPropsWithNoParser, type QueryBoundaryDataProps, QueryBoundaryError, type QueryBoundaryErrorProps, QueryBoundaryFallback, type QueryBoundaryFallbackProps, QueryBoundaryMap, type QueryBoundaryMapProps, QueryBoundaryNullable, type QueryBoundaryNullableProps, type QueryBoundaryNullablePropsWithNullable, type QueryBoundaryNullablePropsWithUndefinedOrNull, type QueryBoundaryProps, QueryBoundaryProvider, type QueryBoundaryProviderBaseProps, type QueryBoundaryProviderProps, type QueryBoundaryProviderPropsWithError, type QueryBoundaryProviderPropsWithNoError, QueryBoundaryWrapper, type QueryBoundaryWrapperProps, type QueryMultiple, type QuerySingle, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, createQueryBoundary, useDebounce, useDropdownMenu, useHash, useMode, useQueryBoundary, useScreenSize, useSnackbar };
920
924
  //# sourceMappingURL=index.d.ts.map
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- 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 ne,MdChevronLeft as re,MdChevronRight as ie,MdCloudUpload as ae,MdDelete as oe,MdMenu as se,MdOutlineDarkMode as ce,MdOutlineLightMode as le,MdVisibility as ue}from"react-icons/md";import x 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{stripIndent as ye}from"common-tags";import{LiveEditor as be,LiveError as xe,LivePreview as Se,LiveProvider as Ce}from"react-live";import we from"@mui/material/Skeleton";import Te from"@mui/material/TableCell";import Ee from"@mui/material/TableRow";import N from"@mui/material/Menu";import De from"@mui/material/BottomNavigation";import Oe from"@mui/material/BottomNavigationAction";import ke from"@mui/material/Paper";import Ae from"@mui/material/AppBar";import je from"@mui/material/Drawer";import P from"@mui/material/ListItemButton";import Me from"@mui/material/ListItemIcon";import Ne from"@mui/material/Toolbar";import F from"@mui/material/MenuItem";import{Link as I,useLocation as Pe}from"react-router-dom";import Fe from"@mui/material/Popover";import{useFormContext as Ie}from"react-hook-form";function Le({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(Le,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Re,{}),l(Le,{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(ne,{}),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 Ve({href:e,children:t,ref:n,...r}){return l(x,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const He={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`},Ue=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}),We=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 Ge({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(ae,{}),children:[t,l(Ue,{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(We,{$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 Ke({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(Ge,{...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(oe,{})}),children:l(D,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const qe=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 Je({checkedIcon:t,checkedIconStyles:n,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return l(qe,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const L=m({toggleMode:()=>{},mode:`dark`});function R({strict:e=!0}={}){let t=g(L);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 Ye({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>fe({palette:{mode:n},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider})}}}}),[n]);return l(L.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(de,{theme:i,children:[l(k,{}),e]})})}const z=m(void 0);function B({strict:e=!0}={}){let t=g(z);if(e&&!t)throw new O({strict:e,context:t},`QUERY_BOUNDARY_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function Xe({children:e,loadingComponent:t=l(A,{}),...n}){return l(z.Provider,{value:{loadingComponent:t,...n},children:e})}function V({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=B(),u=t??a;return s?null:r?l(c,{children:n??o}):i==null?null:l(c,{children:typeof e==`function`?e(u?u(i):i):e})}function H({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}=B(),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 U({children:e,logError:t}){let{data:n,error:r,errorComponent:i,logError:a}=B(),o=t??a,s=ee(!1),u=e??i;return r?(o&&!s.current&&(n!=null&&console.error(`An error has occurred but data is still present. This may indicate an invalid query state.`,{data:n,error:r}),console.error(r),s.current=!0),typeof u==`function`?u(r):u?l(c,{children:u}):l(j,{severity:`error`,children:typeof r==`object`&&`message`in r&&typeof r.message==`string`?r.message:`An unknown error has occured. Please try again later.`})):null}function W({undefinedComponent:e,nullComponent:t,nullableComponent:n}){let{isLoading:r,data:i,error:a}=B();return r||a?null:i==null?n?l(c,{children:n}):i===void 0&&e?l(c,{children:e}):i===null&&t?l(c,{children:t}):l(j,{severity:`error`,children:`Failed to load data. Please try again later.`}):null}function G({errorComponent:e,logError:t,...n}){return u(c,{children:[l(U,{logError:t,children:e}),l(W,{...n})]})}var K=Xe;const q=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ze({strict:e=!0}={}){let t=g(q);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 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(q.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const J=m(void 0);function $e({strict:e=!0}={}){let t=g(J);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 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 _e(.2),s(``)}return u(J.Provider,{value:{addSnackbar:f},children:[l(ve,{open:n,autoHideDuration:i,onClose:p,children:l(j,{onClose:p,severity:c,children:o})}),e]})}function tt(){let{mode:e,toggleMode:t}=R(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(me,{title:r,children:l(Je,{uncheckedIcon:le,checkedIcon:ce,checked:n,onChange:t,"aria-label":r})})}function nt({title:e,subtitle:i,action:o,children:d,tabs:f,disablePadding:p}){return u(t,{children:[l(r,{title:u(c,{children:[typeof e==`string`?l(s,{variant:`h6`,children:e}):e,i?typeof i==`string`?l(s,{variant:`body2`,color:`text.secondary`,children:i}):i:null]}),action:o}),f,l(a,{}),p?d:l(n,{children:d})]})}function Y({query:e}){return{Context:({children:t})=>l(K,{isLoading:e.isLoading,error:e.error,data:`data`in e?e.data:e.dataCollection,children:t}),Error:U,Data:V,DataMap:H,Fallback:G,Nullable:W}}function rt(e,t=500){let[n,r]=b(e);return _(()=>{let n=setTimeout(()=>{r(e)},t);return()=>{clearTimeout(n)}},[e,t]),n}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])]}function at({loadingComponent:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,errorComponent:a,children:o,isLoading:s,error:c,data:d,dataParser:f,itemParser:p,itemKey:m}){let h=Y({query:{isLoading:s,error:c,dataCollection:d}}),g=l(h.Fallback,{logError:i,errorComponent:a});r?g=l(h.Fallback,{nullableComponent:r,logError:i,errorComponent:a}):(t||n)&&(g=l(h.Fallback,{undefinedComponent:t,nullComponent:n,logError:i,errorComponent:a}));let _=l(h.DataMap,{loadingComponent:e,itemKey:m,children:o});return f?_=l(h.DataMap,{loadingComponent:e,itemKey:m,dataParser:f,children:o}):p&&(_=l(h.DataMap,{loadingComponent:e,itemKey:m,itemParser:p,children:o})),u(h.Context,{children:[g,_]})}function X({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(A,{}),isLoading:s,error:c,data:d,dataParser:f}){let p=Y({query:{isLoading:s,error:c,data:d}}),m=l(p.Fallback,{logError:a,errorComponent:t});return i?m=l(p.Fallback,{nullableComponent:i,logError:a,errorComponent:t}):(n||r)&&(m=l(p.Fallback,{undefinedComponent:n,nullComponent:r,logError:a,errorComponent:t})),u(p.Context,{children:[m,l(p.Data,{loadingComponent:o,dataParser:f,children:e})]})}function ot({code:t,previewStyles:n,...r}){let{mode:i}=R(),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(Ce,{...r,code:ye(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(be,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Se,{}),l(xe,{})]})]})})}function st({columns:e}){return l(Ee,{children:ge(e=>l(Te,{children:l(we,{})},e),e)})}const ct=tt;function lt({children:t,button:n=S,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(ne,{}),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(N,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const ut=m(void 0);function Z({strict:e=!0}={}){let t=g(ut);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 dt({strict:e=!0}={}){return Z({strict:e})}function ft({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=dt();return l(N,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function pt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(F,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,mt=ft,ht=pt;var gt=mt;function _t({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(F,{component:Ve,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=I,children:n,ref:r,...i}){return l(x,{component:t,to:e,ref:r,...i,children:n})}function vt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(F,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function yt({icon:t=ue,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(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 bt({children:e,...t}){return l(P,{component:$,...t,children:e})}const xt=X,St=V,Ct=G,wt=K;function Tt({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(ke,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(De,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(Oe,{...e,component:I},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 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(Ae,{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(je,{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=Pe();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(k,{}),l(kt,{position:`fixed`,open:c,children:u(Ne,{children:[l(w,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(se,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(At,{variant:`permanent`,open:c,children:[l(Ot,{children:l(w,{onClick:h,children:o.direction===`rtl`?l(ie,{}):l(re,{})})}),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(P,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:I,to:e.to,selected:f.pathname===e.to,children:[l(Me,{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(Ot,{}),r]})]})}function Mt({text:e,sx:t,...n}){return l(c,{children:e.split(`
2
- `).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}const Nt=X;function Pt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ie();return l(S,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}export{ze as Artwork,Be as CollapsableItem,ct as DarkModeToggle,lt as DropdownMenu,gt as DropdownMenu2,_t as DropdownMenuExternalLink,vt as DropdownMenuInternalLink,ht as DropdownMenuItem,Ve as ExternalLink,Ge as FileInput,Ke as FileInputList,He as FileType,yt as IconWithPopover,$ as InternalLink,bt as ListItemInternalLink,xt as Loader,St as LoaderData,Ct as LoaderError,wt as LoaderProvider,Ye as ModeProvider,tt as ModeToggle,Tt as NavigationBottom,jt as NavigationDrawer,nt as Page,Mt as PopoverText,Nt as QueryBoundary,V as QueryBoundaryData,H as QueryBoundaryDataMap,U as QueryBoundaryError,G as QueryBoundaryFallback,at as QueryBoundaryMap,W as QueryBoundaryNullable,K as QueryBoundaryProvider,X as QueryBoundaryWrapper,ot as ReactPlayground,Qe as ScreenSizeProvider,st as SkeletonRow,et as SnackbarProvider,Pt as SubmitButton,Je as SwitchWithIcons,Y as createQueryBoundary,rt as useDebounce,Q as useDropdownMenu,it as useHash,R as useMode,B as useQueryBoundary,Ze as useScreenSize,$e as useSnackbar};
1
+ import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as x,MdArrowDropUp as te,MdChevronLeft as ne,MdChevronRight as re,MdCloudUpload as ie,MdDelete as ae,MdMenu as oe,MdOutlineDarkMode as se,MdOutlineLightMode as ce,MdVisibility as le}from"react-icons/md";import S from"@mui/material/Link";import C from"@mui/material/Button";import{ThemeProvider as ue,createTheme as de,styled as w,useTheme as fe}from"@mui/material/styles";import T from"@mui/material/IconButton";import E from"@mui/material/List";import pe from"@mui/material/ListItem";import me 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{fillArray as _e,truncate as k,wait as ve}from"@alextheman/utility";import A from"@mui/material/Alert";import ye from"@mui/material/Snackbar";import j from"@mui/material/CircularProgress";import{stripIndent as be}from"common-tags";import{LiveEditor as xe,LiveError as Se,LivePreview as Ce,LiveProvider as we}from"react-live";import Te from"@mui/material/Skeleton";import Ee from"@mui/material/TableCell";import De from"@mui/material/TableRow";import M from"@mui/material/Menu";import Oe from"@mui/material/BottomNavigation";import ke from"@mui/material/BottomNavigationAction";import Ae from"@mui/material/Paper";import je from"@mui/material/AppBar";import Me from"@mui/material/Drawer";import N from"@mui/material/ListItemButton";import Ne from"@mui/material/ListItemIcon";import Pe from"@mui/material/Toolbar";import P from"@mui/material/MenuItem";import{Link as F,useLocation as Fe}from"react-router-dom";import Ie from"@mui/material/Popover";import{useFormContext as Le}from"react-hook-form";function I({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(I,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Re,{}),l(I,{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 Ve({href:e,children:t,ref:n,...r}){return l(S,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const He={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`},Ue=w(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),We=w(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function Ge({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(C,{variant:`contained`,component:`label`,"aria-label":`File input button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(c)?.click())},...a,startIcon:a.startIcon??l(ie,{}),children:[t,l(Ue,{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(We,{$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 Ke({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(Ge,{...i,multiple:r,onFileInput:a}),l(E,{children:t.map(e=>l(pe,{secondaryAction:l(T,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ae,{})}),children:l(me,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const qe=w(ge)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Je({checkedIcon:t,checkedIconStyles:n,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return l(qe,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}const L=m({toggleMode:()=>{},mode:`dark`});function R({strict:e=!0}={}){let t=g(L);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 Ye({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>de({palette:{mode:n},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider})}}}}),[n]);return l(L.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ue,{theme:i,children:[l(O,{}),e]})})}const z=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Xe({strict:e=!0}={}){let t=g(z);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 Ze({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=b(window.innerWidth),[a,o]=b(window.innerHeight);_(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=y(()=>r>t&&a>n,[r,a,t,n]);return l(z.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const B=m(void 0);function Qe({strict:e=!0}={}){let t=g(B);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 $e({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 ve(.2),s(``)}return u(B.Provider,{value:{addSnackbar:f},children:[l(ye,{open:n,autoHideDuration:i,onClose:p,children:l(A,{onClose:p,severity:c,children:o})}),e]})}function V(){let{mode:e,toggleMode:t}=R(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(he,{title:r,children:l(Je,{uncheckedIcon:ce,checkedIcon:se,checked:n,onChange:t,"aria-label":r})})}function et({title:e,subtitle:i,action:o,children:d,tabs:f,disablePadding:p}){return u(t,{children:[l(r,{title:u(c,{children:[typeof e==`string`?l(s,{variant:`h6`,children:e}):e,i?typeof i==`string`?l(s,{variant:`body2`,color:`text.secondary`,children:i}):i:null]}),action:o}),f,l(a,{}),p?d:l(n,{children:d})]})}const H=m(void 0);function U({strict:e=!0}={}){let t=g(H);if(e&&!t)throw new D({strict:e,context:t},`QUERY_BOUNDARY_PROVIDER_NOT_FOUND`,`Could not find the QueryBoundaryProvider context. Please double-check that it is present.`);return t}function W({children:e,loadingComponent:t=l(j,{}),...n}){return l(H.Provider,{value:{loadingComponent:t,...n},children:e})}function G({children:e,loadingComponent:t,itemKey:n,itemParser:r,dataParser:i,emptyComponent:a=l(s,{children:`No data present`}),strictlyRequireArray:o=!0}){let{isLoading:u,data:d,dataParser:f,loadingComponent:m,error:h}=U(),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 D({data:d,strictlyRequireArray:o},`NOT_AN_ARRAY`,`Expected the data to be an array but it was not an array.`);return null}if(d.length===0)return l(c,{children:a});let v;return v=g?g(d):r?d.map(r):d,l(c,{children:v.map((t,r)=>l(p,{children:typeof e==`function`?e(t):e},n?n(t,r):r))})}function K({children:e,logError:t}){let{data:n,error:r,errorComponent:i,logError:a}=U(),o=t??a,s=ee(!1),u=e??i;return r?(o&&!s.current&&(n!=null&&console.error(`An error has occurred but data is still present. This may indicate an invalid query state.`,{data:n,error:r}),console.error(r),s.current=!0),typeof u==`function`?u(r):u?l(c,{children:u}):l(A,{severity:`error`,children:typeof r==`object`&&`message`in r&&typeof r.message==`string`?r.message:`An unknown error has occured. Please try again later.`})):null}function q({undefinedComponent:e,nullComponent:t,nullableComponent:n}){let{isLoading:r,data:i,error:a}=U();return r||a?null:i==null?n?l(c,{children:n}):i===void 0&&e?l(c,{children:e}):i===null&&t?l(c,{children:t}):l(A,{severity:`error`,children:`Failed to load data. Please try again later.`}):null}function J({errorComponent:e,logError:t,...n}){return u(c,{children:[l(K,{logError:t,children:e}),l(q,{...n})]})}function tt({query:e}){return{Context:({children:t})=>l(W,{isLoading:e.isLoading,error:e.error,data:e.data,children:t}),Error:K,Fallback:J,Nullable:q}}function nt({query:e}){return{...tt({query:e}),DataMap:G}}function rt({loadingComponent:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i,errorComponent:a,children:o,isLoading:s,error:c,data:d,dataParser:f,itemParser:p,itemKey:m}){let h=nt({query:{isLoading:s,error:c,data:d}}),g=l(h.Fallback,{logError:i,errorComponent:a});r?g=l(h.Fallback,{nullableComponent:r,logError:i,errorComponent:a}):(t||n)&&(g=l(h.Fallback,{undefinedComponent:t,nullComponent:n,logError:i,errorComponent:a}));let _=l(h.DataMap,{loadingComponent:e,itemKey:m,children:o});return f?_=l(h.DataMap,{loadingComponent:e,itemKey:m,dataParser:f,children:o}):p&&(_=l(h.DataMap,{loadingComponent:e,itemKey:m,itemParser:p,children:o})),u(h.Context,{children:[g,_]})}function Y({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=U(),u=t??a;return s?null:r?l(c,{children:n??o}):i==null?null:l(c,{children:typeof e==`function`?e(u?u(i):i):e})}function it({query:e}){return{...tt({query:e}),Data:Y}}function X({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(j,{}),isLoading:s,error:c,data:d,dataParser:f}){let p=it({query:{isLoading:s,error:c,data:d}}),m=l(p.Fallback,{logError:a,errorComponent:t});return i?m=l(p.Fallback,{nullableComponent:i,logError:a,errorComponent:t}):(n||r)&&(m=l(p.Fallback,{undefinedComponent:n,nullComponent:r,logError:a,errorComponent:t})),u(p.Context,{children:[m,l(p.Data,{loadingComponent:o,dataParser:f,children:e})]})}function at({code:t,previewStyles:n,...r}){let{mode:i}=R(),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(we,{...r,code:be(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(xe,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Ce,{}),l(Se,{})]})]})})}function ot({columns:e}){return l(De,{children:_e(e=>l(Ee,{children:l(Te,{})},e),e)})}const st=V;function ct({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(te,{}),isClosedIcon:o=l(x,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===C&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(M,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const lt=m(void 0);function Z({strict:e=!0}={}){let t=g(lt);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 ut({strict:e=!0}={}){return Z({strict:e})}function dt({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=ut();return l(M,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function ft({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(P,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,pt=dt,mt=ft;var ht=pt;function gt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(P,{component:Ve,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=F,children:n,ref:r,...i}){return l(S,{component:t,to:e,ref:r,...i,children:n})}function _t({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(P,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function vt({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 yt({children:e,...t}){return l(N,{component:$,...t,children:e})}const bt=X;function xt({query:e}){return{Context:({children:t})=>l(W,{isLoading:e.isLoading,error:e.error,data:`data`in e?e.data:e.dataCollection,children:t}),Error:K,Data:Y,DataMap:G,Fallback:J,Nullable:q}}const St=Y,Ct=J,wt=W;function Tt({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Ae,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(Oe,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(ke,{...e,component:F},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 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=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),kt=w(je,{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=w(Me,{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=fe(),[c,d]=b(!0),f=Fe();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(T,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(oe,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(At,{variant:`permanent`,open:c,children:[l(Ot,{children:l(T,{onClick:h,children:o.direction===`rtl`?l(re,{}):l(ne,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(E,{children:[l(s,{variant:c?`h5`:`h6`,sx:{paddingLeft:c?2:1},children:c?e.category:k(e.category,4)}),e.options.map(e=>l(pe,{disablePadding:!0,sx:{display:`block`},children:u(N,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:F,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:k(e.label,4)})}),l(me,{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(`
2
+ `).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}const Nt=X;function Pt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Le();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function Ft(e,t=500){let[n,r]=b(e);return _(()=>{let n=setTimeout(()=>{r(e)},t);return()=>{clearTimeout(n)}},[e,t]),n}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{ze as Artwork,Be as CollapsableItem,st as DarkModeToggle,ct as DropdownMenu,ht as DropdownMenu2,gt as DropdownMenuExternalLink,_t as DropdownMenuInternalLink,mt as DropdownMenuItem,Ve as ExternalLink,Ge as FileInput,Ke as FileInputList,He as FileType,vt as IconWithPopover,$ as InternalLink,yt as ListItemInternalLink,bt as Loader,St as LoaderData,Ct as LoaderError,wt as LoaderProvider,Ye as ModeProvider,V as ModeToggle,Tt as NavigationBottom,jt as NavigationDrawer,et as Page,Mt as PopoverText,Nt as QueryBoundary,Y as QueryBoundaryData,G as QueryBoundaryDataMap,K as QueryBoundaryError,J as QueryBoundaryFallback,rt as QueryBoundaryMap,q as QueryBoundaryNullable,W as QueryBoundaryProvider,X as QueryBoundaryWrapper,at as ReactPlayground,Ze as ScreenSizeProvider,ot as SkeletonRow,$e as SnackbarProvider,Pt as SubmitButton,Je as SwitchWithIcons,xt as createQueryBoundary,Ft as useDebounce,Q as useDropdownMenu,It as useHash,R as useMode,U as useQueryBoundary,Xe as useScreenSize,Qe as useSnackbar};
3
3
  //# sourceMappingURL=index.js.map