@alextheman/components 5.4.2 → 5.4.4

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.
Files changed (7) hide show
  1. package/dist/index.cjs +2 -2
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +12 -11
  4. package/dist/index.d.ts +12 -11
  5. package/dist/index.js +2 -2
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { CollapseProps } from '@mui/material/Collapse';
3
3
  import { SxProps, Theme } from '@mui/material/styles';
4
4
  import * as react from 'react';
5
- import { ReactNode, ElementType, Dispatch, SetStateAction, JSX, ComponentType, CSSProperties } from 'react';
5
+ import { ReactNode, ElementType, Dispatch, SetStateAction, JSX, ComponentProps, ComponentType, CSSProperties } from 'react';
6
6
  import { ButtonOwnProps, ButtonProps } from '@mui/material/Button';
7
7
  import { LinkProps } from '@mui/material/Link';
8
8
  import { OverridableComponent, CommonProps } from '@mui/material/OverridableComponent';
9
9
  import { SvgIconTypeMap } from '@mui/material/SvgIcon';
10
10
  import { ListItemButtonProps } from '@mui/material/ListItemButton';
11
11
  import { TypographyProps } from '@mui/material/Typography';
12
+ import { LiveProvider } from 'react-live';
12
13
  import { SwitchProps } from '@mui/material/Switch';
13
14
  import { AlertColor } from '@mui/material/Alert';
14
15
 
@@ -112,12 +113,15 @@ interface LoaderProviderBaseProps<T> {
112
113
  interface LoaderProviderPropsWithNoError<T> extends LoaderProviderBaseProps<T> {
113
114
  error?: never;
114
115
  errorComponent?: never;
116
+ logError?: never;
115
117
  }
116
118
  interface LoaderProviderPropsWithError<T> extends LoaderProviderBaseProps<T> {
117
119
  /** The error given if the request gave an error. */
118
120
  error: unknown;
119
121
  /** 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. */
120
122
  errorComponent?: ReactNode | ((error: unknown) => ReactNode);
123
+ /** Whether you want to log the error to the console or not. */
124
+ logError?: boolean;
121
125
  }
122
126
  type LoaderContextValue<T> = LoaderProviderPropsWithNoError<T> | LoaderProviderPropsWithError<T>;
123
127
  type LoaderProviderProps<T> = LoaderContextValue<T> & {
@@ -162,6 +166,8 @@ declare function LoaderData<T>({ children, dataParser: loaderDataParser, loading
162
166
  interface LoaderErrorBaseProps {
163
167
  /** The component to show if an error has been thrown. */
164
168
  errorComponent?: ReactNode | ((error: unknown) => ReactNode);
169
+ /** Whether you want to log the error to the console or not. */
170
+ logError?: boolean;
165
171
  }
166
172
  interface LoaderErrorPropsWithUndefinedOrNull extends LoaderErrorBaseProps {
167
173
  /** The component to show if no error was thrown but data is undefined */
@@ -178,7 +184,7 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
178
184
  }
179
185
  type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
180
186
  /** The component responsible for showing any errors provided by LoaderProvider. */
181
- declare function LoaderError({ errorComponent: propsErrorComponent, undefinedComponent, nullComponent, nullableComponent, }: LoaderErrorProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
187
+ declare function LoaderError({ errorComponent: propsErrorComponent, undefinedComponent, nullComponent, nullableComponent, logError: propsLogError, }: LoaderErrorProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
182
188
 
183
189
  declare function useMode(): {
184
190
  toggleMode: () => void;
@@ -214,11 +220,11 @@ interface SnackbarContextValue {
214
220
  declare function useSnackbar(): SnackbarContextValue;
215
221
  declare function SnackbarProvider({ children, autoHideDuration }: SnackbarProviderProps): react_jsx_runtime.JSX.Element;
216
222
 
217
- type LoaderProps<T> = Omit<LoaderProviderProps<T>, "children" | "errorComponent"> & LoaderErrorProps & Omit<LoaderDataProps<T>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
223
+ type LoaderProps<T> = Omit<LoaderProviderProps<T>, "children"> & Omit<LoaderErrorProps, "errorComponent"> & Omit<LoaderDataProps<T>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
218
224
  /** An in-line component that deals with state management when fetching data from an API.
219
225
  * This may be used over LoaderProvider if you don't require as much control over the placement of the error message and data display.
220
226
  */
221
- declare function Loader<T>({ children, undefinedComponent, nullComponent, nullableComponent, loadingComponent, ...loaderProviderProps }: LoaderProps<T>): react_jsx_runtime.JSX.Element;
227
+ declare function Loader<T>({ children, errorComponent, undefinedComponent, nullComponent, nullableComponent, loadingComponent, ...loaderProviderProps }: LoaderProps<T>): react_jsx_runtime.JSX.Element;
222
228
 
223
229
  interface NavItemBottom {
224
230
  value: string;
@@ -253,15 +259,10 @@ interface PopoverTextProps extends TypographyProps {
253
259
  }
254
260
  declare function PopoverText({ text, sx, ...typographyProps }: PopoverTextProps): react_jsx_runtime.JSX.Element;
255
261
 
256
- interface ReactPlaygroundProps {
257
- code: string;
258
- scope?: Record<string, unknown>;
262
+ interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
259
263
  previewStyles?: SxProps<Theme>;
260
- noInline?: boolean;
261
- enableTypeScript?: boolean;
262
- language?: string;
263
264
  }
264
- declare function ReactPlayground({ code, scope, previewStyles, noInline, enableTypeScript, language, }: ReactPlaygroundProps): react_jsx_runtime.JSX.Element;
265
+ declare function ReactPlayground({ code, previewStyles, ...liveProviderProps }: ReactPlaygroundProps): react_jsx_runtime.JSX.Element;
265
266
 
266
267
  interface SkeletonRowProps {
267
268
  columns: number;
package/dist/index.d.ts CHANGED
@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { CollapseProps } from '@mui/material/Collapse';
3
3
  import { SxProps, Theme } from '@mui/material/styles';
4
4
  import * as react from 'react';
5
- import { ReactNode, ElementType, Dispatch, SetStateAction, JSX, ComponentType, CSSProperties } from 'react';
5
+ import { ReactNode, ElementType, Dispatch, SetStateAction, JSX, ComponentProps, ComponentType, CSSProperties } from 'react';
6
6
  import { ButtonOwnProps, ButtonProps } from '@mui/material/Button';
7
7
  import { LinkProps } from '@mui/material/Link';
8
8
  import { OverridableComponent, CommonProps } from '@mui/material/OverridableComponent';
9
9
  import { SvgIconTypeMap } from '@mui/material/SvgIcon';
10
10
  import { ListItemButtonProps } from '@mui/material/ListItemButton';
11
11
  import { TypographyProps } from '@mui/material/Typography';
12
+ import { LiveProvider } from 'react-live';
12
13
  import { SwitchProps } from '@mui/material/Switch';
13
14
  import { AlertColor } from '@mui/material/Alert';
14
15
 
@@ -112,12 +113,15 @@ interface LoaderProviderBaseProps<T> {
112
113
  interface LoaderProviderPropsWithNoError<T> extends LoaderProviderBaseProps<T> {
113
114
  error?: never;
114
115
  errorComponent?: never;
116
+ logError?: never;
115
117
  }
116
118
  interface LoaderProviderPropsWithError<T> extends LoaderProviderBaseProps<T> {
117
119
  /** The error given if the request gave an error. */
118
120
  error: unknown;
119
121
  /** 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. */
120
122
  errorComponent?: ReactNode | ((error: unknown) => ReactNode);
123
+ /** Whether you want to log the error to the console or not. */
124
+ logError?: boolean;
121
125
  }
122
126
  type LoaderContextValue<T> = LoaderProviderPropsWithNoError<T> | LoaderProviderPropsWithError<T>;
123
127
  type LoaderProviderProps<T> = LoaderContextValue<T> & {
@@ -162,6 +166,8 @@ declare function LoaderData<T>({ children, dataParser: loaderDataParser, loading
162
166
  interface LoaderErrorBaseProps {
163
167
  /** The component to show if an error has been thrown. */
164
168
  errorComponent?: ReactNode | ((error: unknown) => ReactNode);
169
+ /** Whether you want to log the error to the console or not. */
170
+ logError?: boolean;
165
171
  }
166
172
  interface LoaderErrorPropsWithUndefinedOrNull extends LoaderErrorBaseProps {
167
173
  /** The component to show if no error was thrown but data is undefined */
@@ -178,7 +184,7 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
178
184
  }
179
185
  type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
180
186
  /** The component responsible for showing any errors provided by LoaderProvider. */
181
- declare function LoaderError({ errorComponent: propsErrorComponent, undefinedComponent, nullComponent, nullableComponent, }: LoaderErrorProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
187
+ declare function LoaderError({ errorComponent: propsErrorComponent, undefinedComponent, nullComponent, nullableComponent, logError: propsLogError, }: LoaderErrorProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
182
188
 
183
189
  declare function useMode(): {
184
190
  toggleMode: () => void;
@@ -214,11 +220,11 @@ interface SnackbarContextValue {
214
220
  declare function useSnackbar(): SnackbarContextValue;
215
221
  declare function SnackbarProvider({ children, autoHideDuration }: SnackbarProviderProps): react_jsx_runtime.JSX.Element;
216
222
 
217
- type LoaderProps<T> = Omit<LoaderProviderProps<T>, "children" | "errorComponent"> & LoaderErrorProps & Omit<LoaderDataProps<T>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
223
+ type LoaderProps<T> = Omit<LoaderProviderProps<T>, "children"> & Omit<LoaderErrorProps, "errorComponent"> & Omit<LoaderDataProps<T>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
218
224
  /** An in-line component that deals with state management when fetching data from an API.
219
225
  * This may be used over LoaderProvider if you don't require as much control over the placement of the error message and data display.
220
226
  */
221
- declare function Loader<T>({ children, undefinedComponent, nullComponent, nullableComponent, loadingComponent, ...loaderProviderProps }: LoaderProps<T>): react_jsx_runtime.JSX.Element;
227
+ declare function Loader<T>({ children, errorComponent, undefinedComponent, nullComponent, nullableComponent, loadingComponent, ...loaderProviderProps }: LoaderProps<T>): react_jsx_runtime.JSX.Element;
222
228
 
223
229
  interface NavItemBottom {
224
230
  value: string;
@@ -253,15 +259,10 @@ interface PopoverTextProps extends TypographyProps {
253
259
  }
254
260
  declare function PopoverText({ text, sx, ...typographyProps }: PopoverTextProps): react_jsx_runtime.JSX.Element;
255
261
 
256
- interface ReactPlaygroundProps {
257
- code: string;
258
- scope?: Record<string, unknown>;
262
+ interface ReactPlaygroundProps extends ComponentProps<typeof LiveProvider> {
259
263
  previewStyles?: SxProps<Theme>;
260
- noInline?: boolean;
261
- enableTypeScript?: boolean;
262
- language?: string;
263
264
  }
264
- declare function ReactPlayground({ code, scope, previewStyles, noInline, enableTypeScript, language, }: ReactPlaygroundProps): react_jsx_runtime.JSX.Element;
265
+ declare function ReactPlayground({ code, previewStyles, ...liveProviderProps }: ReactPlaygroundProps): react_jsx_runtime.JSX.Element;
265
266
 
266
267
  interface SkeletonRowProps {
267
268
  columns: number;
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- var Ie=Object.defineProperty,Ce=Object.defineProperties;var ke=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var Y=(e,o,r)=>o in e?Ie(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,s=(e,o)=>{for(var r in o||(o={}))q.call(o,r)&&Y(e,r,o[r]);if(B)for(var r of B(o))Q.call(o,r)&&Y(e,r,o[r]);return e},f=(e,o)=>Ce(e,ke(o));var x=(e,o)=>{var r={};for(var n in e)q.call(e,n)&&o.indexOf(n)<0&&(r[n]=e[n]);if(e!=null&&B)for(var n of B(e))o.indexOf(n)<0&&Q.call(e,n)&&(r[n]=e[n]);return r};var Z=(e,o,r)=>new Promise((n,a)=>{var t=d=>{try{i(r.next(d))}catch(c){a(c)}},p=d=>{try{i(r.throw(d))}catch(c){a(c)}},i=d=>d.done?n(d.value):Promise.resolve(d.value).then(t,p);i((r=r.apply(e,o)).next())});import Te from"@mui/icons-material/ArrowDropDown";import Ne from"@mui/icons-material/ArrowDropUp";import Be from"@mui/material/Box";import O from"@mui/material/ButtonBase";import Ee from"@mui/material/Collapse";import{useEffect as Re,useState as De}from"react";import{jsx as A,jsxs as j}from"react/jsx-runtime";function Me({isInitiallyOpen:e,onOpen:o,onClose:r,children:n,buttonStyles:a,buttonContents:t,buttonComponent:p=O,collapseProps:i,openIcon:d=A(Ne,{}),closedIcon:c=A(Te,{}),useDefaultStyling:l=p===O}){let[u,m]=De(!!e);return Re(()=>{u&&o?o():!u&&r&&r()},[u]),j(Be,{children:[j(p,{onClick:()=>{m(v=>!v)},sx:l?s({width:"100%",display:"flex",alignItems:"center",justifyContent:"center",paddingY:1.5,paddingX:2,textAlign:"center","&:hover":p===O?{backgroundColor:"action.hover"}:null},a):a,"aria-expanded":u,children:[t,u?d:c]}),A(Ee,f(s({in:u},i),{children:n}))]})}var Oe=Me;import Po from"@mui/icons-material/DarkMode";import vo from"@mui/icons-material/LightMode";import go from"@mui/material/IconButton";import yo from"@mui/material/Tooltip";import Ae from"@mui/material/CircularProgress";import{createContext as Fe,useContext as We}from"react";import{jsx as ee}from"react/jsx-runtime";var oe=Fe(void 0);function I(){let e=We(oe);if(!e)throw new Error("LOADER_CONTEXT_NOT_SET");return e}function ze(n){var a=n,{children:e,loadingComponent:o=ee(Ae,{})}=a,r=x(a,["children","loadingComponent"]);return ee(oe.Provider,{value:s({loadingComponent:o},r),children:e})}var F=ze;import{Fragment as g,jsx as y}from"react/jsx-runtime";function Ue({children:e,dataParser:o,loadingComponent:r,onNullable:n,onUndefined:a,onNull:t}){let{isLoading:p,data:i,dataParser:d,loadingComponent:c,error:l}=I(),u=o!=null?o:d;if(p)return y(g,{children:r!=null?r:c});if(l)return y(g,{});if(i==null){if(n){let m=n();return m!=null?m:y(g,{})}if(i===void 0&&a){let m=a();return m!=null?m:y(g,{})}if(i===null&&t){let m=t();return m!=null?m:y(g,{})}return y(g,{})}return u?typeof e=="function"?y(g,{children:e(u(i))}):y(g,{children:e}):typeof e=="function"?y(g,{children:e(i)}):y(g,{children:e})}var W=Ue;import re from"@mui/material/Alert";import{useRef as He}from"react";import{Fragment as C,jsx as b}from"react/jsx-runtime";var Ve="Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.";function Xe({errorComponent:e,undefinedComponent:o,nullComponent:r,nullableComponent:n}){var l;let{isLoading:a,data:t,error:p,errorComponent:i}=I(),d=He(!1),c=e!=null?e:i;return p?typeof c=="function"?c(p):c?b(C,{children:c}):b(re,{severity:"error",children:(l=p==null?void 0:p.message)!=null?l:"An unknown error has occured. Please try again later."}):!a&&t==null?n?b(C,{children:n}):t===void 0&&(d.current||(console.warn(Ve),d.current=!0),o)?b(C,{children:o}):t===null&&r?b(C,{children:r}):b(re,{severity:"error",children:"Failed to load data. Please try again later."}):b(C,{})}var z=Xe;import $e from"@mui/material/CssBaseline";import{createTheme as _e,ThemeProvider as Ge}from"@mui/material/styles";import{createContext as Je,useContext as Ke,useMemo as Ye,useState as qe}from"react";import{jsx as te,jsxs as je}from"react/jsx-runtime";var ne=Je({toggleMode:()=>{},mode:"dark"});function k(){return Ke(ne)}function Qe({children:e,mode:o="dark"}){let[r,n]=qe(o),a=Ye(()=>_e({palette:{mode:r}}),[r]);return te(ne.Provider,{value:{mode:r,toggleMode:()=>{n(t=>t==="light"?"dark":"light")}},children:je(Ge,{theme:a,children:[te($e,{}),e]})})}var Ze=Qe;import{createContext as eo,useContext as oo,useEffect as ae,useState as U}from"react";import{jsx as ao}from"react/jsx-runtime";var ie=eo({windowWidth:0,windowHeight:0,isLargeScreen:!1});function ro(){return oo(ie)}function to({children:e,largeScreenWidth:o,largeScreenHeight:r}){let[n,a]=U(window.innerWidth),[t,p]=U(window.innerHeight);function i(l,u,m=669,v=600){return l>m&&u>v}let[d,c]=U(i(window.innerWidth,window.innerHeight,o,r));return ae(()=>{function l(){a(window.innerWidth),p(window.innerHeight)}return l(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}},[]),ae(()=>{c(i(n,t,o,r))},[n,t,o,r]),ao(ie.Provider,{value:{isLargeScreen:d,windowWidth:n,windowHeight:t},children:e})}var no=to;import{wait as io}from"@alextheman/utility";import po from"@mui/material/Alert";import so from"@mui/material/Snackbar";import{createContext as lo,useContext as mo,useState as E}from"react";import{jsx as pe,jsxs as xo}from"react/jsx-runtime";var se=lo(void 0);function co(){let e=mo(se);if(!e)throw new Error("SNACKBAR_CONTEXT_NOT_SET");return e}function uo({children:e,autoHideDuration:o=5e3}){let[r,n]=E(!1),[a,t]=E(o),[p,i]=E(""),[d,c]=E("info");function l(m,v,h){n(!0),t(h!=null?h:o),c(v!=null?v:"info"),i(m)}function u(){return Z(this,null,function*(){n(!1),yield io(.2),i("")})}return xo(se.Provider,{value:{addSnackbar:l},children:[pe(so,{open:r,autoHideDuration:a,onClose:u,children:pe(po,{onClose:u,severity:d,children:p})}),e]})}var fo=uo;import{jsx as R}from"react/jsx-runtime";function ho(){let{mode:e,toggleMode:o}=k();return R(yo,{title:`Enable ${e==="dark"?"light":"dark"} mode`,children:R(go,{sx:{marginLeft:"auto"},onClick:o,"aria-label":`Enable ${e==="dark"?"light":"dark"} mode`,children:e==="dark"?R(vo,{}):R(Po,{})})})}var Lo=ho;import bo from"@mui/icons-material/ArrowDropDown";import So from"@mui/icons-material/ArrowDropUp";import de from"@mui/material/Box";import le from"@mui/material/Button";import wo from"@mui/material/Menu";import{useEffect as Io,useMemo as Co,useState as ko}from"react";import{jsx as T,jsxs as Bo}from"react/jsx-runtime";function To({children:e,button:o=le,buttonChildren:r="Menu",buttonProps:n,isOpenIcon:a=T(So,{}),isClosedIcon:t=T(bo,{}),onOpen:p,onClose:i}){let[d,c]=ko(null),l=Co(()=>!!d,[d]),u=f(s({},n),{onClick:m=>{c(m.currentTarget)},"aria-controls":l?"dropdown-menu":void 0,"aria-haspopup":"true","aria-expanded":l});return o===le&&(u.endIcon=l?a:t),Io(()=>{l&&p?p():!l&&i&&i()},[l,p,i]),Bo(de,{children:[T(o,f(s({},u),{children:r})),T(wo,{id:"dropdown-menu",anchorEl:d,open:l,onClose:()=>{c(null)},children:typeof e=="function"?T(de,{children:e(()=>{c(null)})}):e})]})}var No=To;import Eo from"@mui/material/Link";import{jsx as Mo}from"react/jsx-runtime";function Ro(n){var a=n,{href:e,children:o}=a,r=x(a,["href","children"]);return Mo(Eo,f(s({component:"a",href:e,target:"_blank",rel:"noopener noreferrer"},r),{children:o}))}var Do=Ro;import Oo from"@mui/icons-material/CloudUpload";import Ao from"@mui/material/Button";import{styled as me}from"@mui/material/styles";import{useState as Fo}from"react";import{jsx as H,jsxs as Vo}from"react/jsx-runtime";var Wo={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"},zo=me("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),Uo=me("div")(({theme:e,$dragging:o})=>({border:"2px dashed",borderColor:o?e.palette.primary.main:"#ccc",backgroundColor:o?e.palette.action.hover:"transparent",borderRadius:8,padding:"1.5rem",textAlign:"center",transition:"border-color 0.2s",cursor:"pointer"}));function Ho(p){var i=p,{onFileInput:e,label:o="Upload files",multiple:r,accept:n,useDropzone:a}=i,t=x(i,["onFileInput","label","multiple","accept","useDropzone"]);var u;let[d,c]=Fo(!1),l=Vo(Ao,f(s({variant:"contained",component:"label","aria-label":"File upload button",onKeyDown:m=>{var v;(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),(v=document.getElementById("file-input"))==null||v.click())}},t),{startIcon:(u=t.startIcon)!=null?u:H(Oo,{}),children:[o,H(zo,{id:"file-input",type:"file",onChange:m=>{var h;let v=m.target;e(Array.from((h=v.files)!=null?h:[])),v.value=""},multiple:r,accept:n==null?void 0:n.join(","),disabled:t.disabled})]}));return a?H(Uo,{$dragging:d,onDragOver:m=>{m.preventDefault(),!t.disabled&&c(!0)},onDragLeave:m=>{m.preventDefault(),c(!1)},onDrop:m=>{var h;if(m.preventDefault(),c(!1),t.disabled)return;let v=Array.from((h=m.dataTransfer.files)!=null?h:[]);e(v)},children:l}):l}var V=Ho;import Xo from"@mui/icons-material/Delete";import $o from"@mui/material/Box";import _o from"@mui/material/IconButton";import Go from"@mui/material/List";import Jo from"@mui/material/ListItem";import Ko from"@mui/material/ListItemText";import{jsx as w,jsxs as Qo}from"react/jsx-runtime";function Yo(n){var a=n,{files:e,setFiles:o}=a,r=x(a,["files","setFiles"]);function t(i){o(d=>[...d,...i])}let p=f(s({},r),{onFileInput:t});return(p==null?void 0:p.multiple)===void 0&&(p.multiple=!0),Qo($o,{children:[w(V,s({},p)),w(Go,{children:e.map(i=>w(Jo,{secondaryAction:w(_o,{"aria-label":"Delete",edge:"end",onClick:()=>{o(d=>d.filter(c=>c!==i))},children:w(Xo,{})}),children:w(Ko,{primary:i.name})},i.name))})]})}var qo=Yo;import Zo from"@mui/material/Box";import jo from"@mui/material/Popover";import{useId as er,useState as or}from"react";import{jsx as ce,jsxs as nr}from"react/jsx-runtime";function rr({icon:e,onOpen:o,onClose:r,iconProps:n,children:a}){let[t,p]=or(null),i=!!t,d=er();function c(u){p(u.currentTarget),o&&o()}function l(){p(null),r&&r()}return nr(Zo,{children:[ce(e,s({"aria-owns":i?d:void 0,"aria-haspopup":"true",onMouseEnter:c,onMouseLeave:l},n)),ce(jo,{id:d,sx:{pointerEvents:"none"},open:i,anchorEl:t,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},onClose:l,disableRestoreFocus:!0,children:a})]})}var tr=rr;import ar from"@mui/material/Link";import{Link as ir}from"react-router-dom";import{jsx as sr}from"react/jsx-runtime";function pr(n){var a=n,{to:e,children:o}=a,r=x(a,["to","children"]);return sr(ar,f(s({component:ir,to:e},r),{children:o}))}var X=pr;import dr from"@mui/material/ListItemButton";import{jsx as cr}from"react/jsx-runtime";function lr(r){var n=r,{children:e}=n,o=x(n,["children"]);return cr(dr,f(s({component:X},o),{children:e}))}var mr=lr;import ur from"@mui/material/CircularProgress";import{jsx as $,jsxs as Pr}from"react/jsx-runtime";function fr(p){var i=p,{children:e,undefinedComponent:o,nullComponent:r,nullableComponent:n,loadingComponent:a=$(ur,{})}=i,t=x(i,["children","undefinedComponent","nullComponent","nullableComponent","loadingComponent"]);return Pr(F,f(s({loadingComponent:a},t),{children:[$(z,{undefinedComponent:o,nullComponent:r,nullableComponent:n}),$(W,{children:e})]}))}var xr=fr;import vr from"@mui/material/BottomNavigation";import gr from"@mui/material/BottomNavigationAction";import yr from"@mui/material/Box";import hr from"@mui/material/Paper";import{useState as Lr}from"react";import{Link as br}from"react-router-dom";import{Fragment as Ir,jsx as D,jsxs as Cr}from"react/jsx-runtime";function Sr({children:e,navItems:o}){let[r,n]=Lr("");return Cr(Ir,{children:[D(yr,{sx:{paddingBottom:7},children:e}),D(hr,{sx:{position:"fixed",bottom:0,left:0,right:0},children:D(vr,{showLabels:!0,value:r,onChange:(a,t)=>{n(t)},children:o.map(a=>D(gr,f(s({},a),{component:br}),a.value))})})]})}var wr=Sr;import{truncate as ue}from"@alextheman/utility";import kr from"@mui/icons-material/ChevronLeft";import Tr from"@mui/icons-material/ChevronRight";import Nr from"@mui/icons-material/Menu";import Br from"@mui/material/AppBar";import fe from"@mui/material/Box";import Er from"@mui/material/CssBaseline";import xe from"@mui/material/Divider";import Rr from"@mui/material/Drawer";import Pe from"@mui/material/IconButton";import Dr from"@mui/material/List";import Mr from"@mui/material/ListItem";import Or from"@mui/material/ListItemButton";import Ar from"@mui/material/ListItemIcon";import Fr from"@mui/material/ListItemText";import{styled as G,useTheme as Wr}from"@mui/material/styles";import zr from"@mui/material/Toolbar";import _ from"@mui/material/Typography";import{Fragment as Ur,useState as Hr}from"react";import{Link as Vr,useLocation as Xr}from"react-router-dom";import{jsx as P,jsxs as S}from"react/jsx-runtime";var M=240;function ve(e){return{width:M,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}}function ge(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)`}}}var ye=G("div")(({theme:e})=>s({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1)},e.mixins.toolbar)),$r=G(Br,{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:o})=>o,style:{marginLeft:M,width:`calc(100% - ${M}px)`,transition:e.transitions.create(["width","margin"],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),_r=G(Rr,{shouldForwardProp:e=>e!=="open"})(({theme:e})=>({width:M,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box",variants:[{props:({open:o})=>o,style:f(s({},ve(e)),{"& .MuiDrawer-paper":ve(e)})},{props:({open:o})=>!o,style:f(s({},ge(e)),{"& .MuiDrawer-paper":ge(e)})}]}));function Gr({title:e,navItems:o,children:r,headerElements:n}){let a=Wr(),[t,p]=Hr(!0),i=Xr();function d(){p(!0)}function c(){p(!1)}return S(fe,{sx:{display:"flex"},children:[P(Er,{}),P($r,{position:"fixed",open:t,children:S(zr,{children:[P(Pe,{color:"inherit","aria-label":"open drawer",onClick:d,edge:"start",sx:[{marginRight:5},t&&{display:"none"}],children:P(Nr,{})}),P(_,{variant:"h6",noWrap:!0,component:"div",children:e}),n]})}),S(_r,{variant:"permanent",open:t,children:[P(ye,{children:P(Pe,{onClick:c,children:a.direction==="rtl"?P(Tr,{}):P(kr,{})})}),P(xe,{}),o.map(l=>S(Ur,{children:[S(Dr,{children:[P(_,{variant:t?"h5":"h6",paddingLeft:t?2:1,children:t?l.category:ue(l.category,4)}),l.options.map(u=>P(Mr,{disablePadding:!0,sx:{display:"block"},children:S(Or,{sx:[{minHeight:48,px:2.5},t?{justifyContent:"initial"}:{justifyContent:"center"}],component:Vr,to:u.to,selected:i.pathname===u.to,children:[P(Ar,{sx:[{minWidth:0,justifyContent:"center"},t?{mr:3}:{mr:"auto"}],children:u.icon?u.icon:t?null:P(_,{children:ue(u.label,4)})}),P(Fr,{primary:u.label,sx:[t?{opacity:1}:{opacity:0}]})]})},u.to))]}),P(xe,{})]},l.category))]}),S(fe,{component:"main",sx:{flexGrow:1,p:3},children:[P(ye,{}),r]})]})}var Jr=Gr;import Kr from"@mui/material/Typography";import{Fragment as Qr,jsx as he}from"react/jsx-runtime";function Yr(n){var a=n,{text:e,sx:o}=a,r=x(a,["text","sx"]);return he(Qr,{children:e.split(`
2
- `).map((t,p)=>he(Kr,f(s({sx:s({margin:1},o)},r),{children:t}),p))})}var qr=Yr;import J from"@mui/material/Box";import Le from"@mui/material/Typography";import{stripIndent as Zr}from"common-tags";import{LiveEditor as jr,LiveError as et,LivePreview as ot,LiveProvider as rt}from"react-live";import{jsx as L,jsxs as be}from"react/jsx-runtime";function tt({code:e,scope:o,previewStyles:r,noInline:n,enableTypeScript:a,language:t}){let{mode:p}=k(),i={backgroundColor:p==="dark"?"black":"white",border:.3,borderRadius:1,padding:2,borderColor:"darkgray"},d=r?s(s({},i),r):s({},i);return L(J,{sx:{borderRadius:1,border:.5,padding:2},children:be(rt,{code:Zr(e),scope:o,noInline:n,enableTypeScript:a,language:t,children:[L(Le,{variant:"h5",children:"Code"}),L(J,{sx:{border:.3,borderRadius:.3,borderColor:"darkgray"},children:L(jr,{})}),L("br",{}),L(Le,{variant:"h5",children:"Result"}),be(J,{sx:d,children:[L(ot,{}),L(et,{})]})]})})}var nt=tt;import{fillArray as at}from"@alextheman/utility";import it from"@mui/material/Skeleton";import pt from"@mui/material/TableCell";import st from"@mui/material/TableRow";import{jsx as K}from"react/jsx-runtime";function dt({columns:e}){return K(st,{children:at(o=>K(pt,{children:K(it,{})},o),e)})}var lt=dt;import mt from"@mui/material/Button";import{useFormContext as ct}from"react-hook-form";import{jsx as xt}from"react/jsx-runtime";function ut(n){var a=n,{disableClean:e,label:o}=a,r=x(a,["disableClean","label"]);let{formState:{disabled:t,isDirty:p,isSubmitting:i}}=ct();return xt(mt,f(s({color:"primary",disabled:r.disabled||e&&!p||t,loading:i,type:"submit",variant:"contained"},r),{children:o}))}var ft=ut;import Se from"@mui/material/Box";import{styled as Pt}from"@mui/material/styles";import vt from"@mui/material/Switch";import{jsx as N}from"react/jsx-runtime";var gt=Pt(vt)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%)",fontSize:16,width:28,height:28}}}));function yt(t){var p=t,{checkedIcon:e,checkedIconStyles:o,uncheckedIcon:r,uncheckedIconStyles:n}=p,a=x(p,["checkedIcon","checkedIconStyles","uncheckedIcon","uncheckedIconStyles"]);let i={borderRadius:"50%",borderColor:"white",backgroundColor:"white",display:"flex",alignItems:"center",justifyContent:"center",padding:.25},d={color:"black",maxWidth:16.5,maxHeight:16.5};return N(gt,s({checkedIcon:N(Se,{sx:i,children:N(e,{style:s(s({},d),o)})}),icon:N(Se,{sx:i,children:N(r,{style:s(s({},d),n)})})},a))}var ht=yt;import{useCallback as we,useEffect as Lt,useState as bt}from"react";function St(e){let[o,r]=bt(()=>{let t=window.location.hash.replace("#","");return e&&t===""?e:t}),n=we(()=>{let t=window.location.hash.replace("#","");r(e&&t===""?e:t)},[r,e]);Lt(()=>(window.addEventListener("hashchange",n),()=>{window.removeEventListener("hashchange",n)}),[n]);let a=we(t=>{let p=typeof t=="function"?t(o):t;p!==o&&(window.location.hash=p)},[o]);return[o,a]}var wt=St;export{Oe as CollapsableItem,Lo as DarkModeToggle,No as DropdownMenu,Do as ExternalLink,V as FileInput,qo as FileInputList,Wo as FileType,tr as IconWithPopover,X as InternalLink,mr as ListItemInternalLink,xr as Loader,W as LoaderData,z as LoaderError,F as LoaderProvider,Ze as ModeProvider,wr as NavigationBottom,Jr as NavigationDrawer,qr as PopoverText,nt as ReactPlayground,no as ScreenSizeProvider,lt as SkeletonRow,fo as SnackbarProvider,ft as SubmitButton,ht as SwitchWithIcons,wt as useHash,I as useLoader,k as useMode,ro as useScreenSize,co as useSnackbar};
1
+ var Ie=Object.defineProperty,Ce=Object.defineProperties;var ke=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var Y=(e,o,r)=>o in e?Ie(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,s=(e,o)=>{for(var r in o||(o={}))q.call(o,r)&&Y(e,r,o[r]);if(B)for(var r of B(o))Q.call(o,r)&&Y(e,r,o[r]);return e},u=(e,o)=>Ce(e,ke(o));var x=(e,o)=>{var r={};for(var n in e)q.call(e,n)&&o.indexOf(n)<0&&(r[n]=e[n]);if(e!=null&&B)for(var n of B(e))o.indexOf(n)<0&&Q.call(e,n)&&(r[n]=e[n]);return r};var Z=(e,o,r)=>new Promise((n,a)=>{var t=l=>{try{i(r.next(l))}catch(f){a(f)}},p=l=>{try{i(r.throw(l))}catch(f){a(f)}},i=l=>l.done?n(l.value):Promise.resolve(l.value).then(t,p);i((r=r.apply(e,o)).next())});import Te from"@mui/icons-material/ArrowDropDown";import Ne from"@mui/icons-material/ArrowDropUp";import Be from"@mui/material/Box";import O from"@mui/material/ButtonBase";import Ee from"@mui/material/Collapse";import{useEffect as De,useState as Re}from"react";import{jsx as A,jsxs as j}from"react/jsx-runtime";function Me({isInitiallyOpen:e,onOpen:o,onClose:r,children:n,buttonStyles:a,buttonContents:t,buttonComponent:p=O,collapseProps:i,openIcon:l=A(Ne,{}),closedIcon:f=A(Te,{}),useDefaultStyling:c=p===O}){let[d,m]=Re(!!e);return De(()=>{d&&o?o():!d&&r&&r()},[d]),j(Be,{children:[j(p,{onClick:()=>{m(P=>!P)},sx:c?s({width:"100%",display:"flex",alignItems:"center",justifyContent:"center",paddingY:1.5,paddingX:2,textAlign:"center","&:hover":p===O?{backgroundColor:"action.hover"}:null},a):a,"aria-expanded":d,children:[t,d?l:f]}),A(Ee,u(s({in:d},i),{children:n}))]})}var Oe=Me;import xo from"@mui/icons-material/DarkMode";import Po from"@mui/icons-material/LightMode";import vo from"@mui/material/IconButton";import go from"@mui/material/Tooltip";import Ae from"@mui/material/CircularProgress";import{createContext as We,useContext as Fe}from"react";import{jsx as ee}from"react/jsx-runtime";var oe=We(void 0);function I(){let e=Fe(oe);if(!e)throw new Error("LOADER_CONTEXT_NOT_SET");return e}function ze(n){var a=n,{children:e,loadingComponent:o=ee(Ae,{})}=a,r=x(a,["children","loadingComponent"]);return ee(oe.Provider,{value:s({loadingComponent:o},r),children:e})}var W=ze;import{Fragment as g,jsx as y}from"react/jsx-runtime";function Ue({children:e,dataParser:o,loadingComponent:r,onNullable:n,onUndefined:a,onNull:t}){let{isLoading:p,data:i,dataParser:l,loadingComponent:f,error:c}=I(),d=o!=null?o:l;if(p)return y(g,{children:r!=null?r:f});if(c)return y(g,{});if(i==null){if(n){let m=n();return m!=null?m:y(g,{})}if(i===void 0&&a){let m=a();return m!=null?m:y(g,{})}if(i===null&&t){let m=t();return m!=null?m:y(g,{})}return y(g,{})}return d?typeof e=="function"?y(g,{children:e(d(i))}):y(g,{children:e}):typeof e=="function"?y(g,{children:e(i)}):y(g,{children:e})}var F=Ue;import re from"@mui/material/Alert";import{useRef as He}from"react";import{Fragment as C,jsx as b}from"react/jsx-runtime";function Ve({errorComponent:e,undefinedComponent:o,nullComponent:r,nullableComponent:n,logError:a}){var P;let{isLoading:t,data:p,error:i,errorComponent:l,logError:f}=I(),c=a!=null?a:f,d=He(!1),m=e!=null?e:l;return i?(c&&!d.current&&(console.error(i),d.current=!0),typeof m=="function"?m(i):m?b(C,{children:m}):b(re,{severity:"error",children:(P=i==null?void 0:i.message)!=null?P:"An unknown error has occured. Please try again later."})):!t&&p==null?n?(c&&!d.current&&(console.error("Data is nullable after loading."),d.current=!0),b(C,{children:n})):p===void 0&&(c&&!d.current&&(console.error("Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data."),d.current=!0),o)?b(C,{children:o}):p===null&&(c&&!d.current&&(console.error("Data is null after loading."),d.current=!0),r)?b(C,{children:r}):b(re,{severity:"error",children:"Failed to load data. Please try again later."}):b(C,{})}var z=Ve;import Xe from"@mui/material/CssBaseline";import{createTheme as $e,ThemeProvider as _e}from"@mui/material/styles";import{createContext as Ge,useContext as Je,useMemo as Ke,useState as Ye}from"react";import{jsx as te,jsxs as Ze}from"react/jsx-runtime";var ne=Ge({toggleMode:()=>{},mode:"dark"});function k(){return Je(ne)}function qe({children:e,mode:o="dark"}){let[r,n]=Ye(o),a=Ke(()=>$e({palette:{mode:r}}),[r]);return te(ne.Provider,{value:{mode:r,toggleMode:()=>{n(t=>t==="light"?"dark":"light")}},children:Ze(_e,{theme:a,children:[te(Xe,{}),e]})})}var Qe=qe;import{createContext as je,useContext as eo,useEffect as ae,useState as U}from"react";import{jsx as no}from"react/jsx-runtime";var ie=je({windowWidth:0,windowHeight:0,isLargeScreen:!1});function oo(){return eo(ie)}function ro({children:e,largeScreenWidth:o,largeScreenHeight:r}){let[n,a]=U(window.innerWidth),[t,p]=U(window.innerHeight);function i(c,d,m=669,P=600){return c>m&&d>P}let[l,f]=U(i(window.innerWidth,window.innerHeight,o,r));return ae(()=>{function c(){a(window.innerWidth),p(window.innerHeight)}return c(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)}},[]),ae(()=>{f(i(n,t,o,r))},[n,t,o,r]),no(ie.Provider,{value:{isLargeScreen:l,windowWidth:n,windowHeight:t},children:e})}var to=ro;import{wait as ao}from"@alextheman/utility";import io from"@mui/material/Alert";import po from"@mui/material/Snackbar";import{createContext as so,useContext as lo,useState as E}from"react";import{jsx as pe,jsxs as fo}from"react/jsx-runtime";var se=so(void 0);function mo(){let e=lo(se);if(!e)throw new Error("SNACKBAR_CONTEXT_NOT_SET");return e}function co({children:e,autoHideDuration:o=5e3}){let[r,n]=E(!1),[a,t]=E(o),[p,i]=E(""),[l,f]=E("info");function c(m,P,h){n(!0),t(h!=null?h:o),f(P!=null?P:"info"),i(m)}function d(){return Z(this,null,function*(){n(!1),yield ao(.2),i("")})}return fo(se.Provider,{value:{addSnackbar:c},children:[pe(po,{open:r,autoHideDuration:a,onClose:d,children:pe(io,{onClose:d,severity:l,children:p})}),e]})}var uo=co;import{jsx as D}from"react/jsx-runtime";function yo(){let{mode:e,toggleMode:o}=k();return D(go,{title:`Enable ${e==="dark"?"light":"dark"} mode`,children:D(vo,{sx:{marginLeft:"auto"},onClick:o,"aria-label":`Enable ${e==="dark"?"light":"dark"} mode`,children:e==="dark"?D(Po,{}):D(xo,{})})})}var ho=yo;import Lo from"@mui/icons-material/ArrowDropDown";import bo from"@mui/icons-material/ArrowDropUp";import de from"@mui/material/Box";import le from"@mui/material/Button";import So from"@mui/material/Menu";import{useEffect as wo,useMemo as Io,useState as Co}from"react";import{jsx as T,jsxs as No}from"react/jsx-runtime";function ko({children:e,button:o=le,buttonChildren:r="Menu",buttonProps:n,isOpenIcon:a=T(bo,{}),isClosedIcon:t=T(Lo,{}),onOpen:p,onClose:i}){let[l,f]=Co(null),c=Io(()=>!!l,[l]),d=u(s({},n),{onClick:m=>{f(m.currentTarget)},"aria-controls":c?"dropdown-menu":void 0,"aria-haspopup":"true","aria-expanded":c});return o===le&&(d.endIcon=c?a:t),wo(()=>{c&&p?p():!c&&i&&i()},[c,p,i]),No(de,{children:[T(o,u(s({},d),{children:r})),T(So,{id:"dropdown-menu",anchorEl:l,open:c,onClose:()=>{f(null)},children:typeof e=="function"?T(de,{children:e(()=>{f(null)})}):e})]})}var To=ko;import Bo from"@mui/material/Link";import{jsx as Ro}from"react/jsx-runtime";function Eo(n){var a=n,{href:e,children:o}=a,r=x(a,["href","children"]);return Ro(Bo,u(s({component:"a",href:e,target:"_blank",rel:"noopener noreferrer"},r),{children:o}))}var Do=Eo;import Mo from"@mui/icons-material/CloudUpload";import Oo from"@mui/material/Button";import{styled as me}from"@mui/material/styles";import{useState as Ao}from"react";import{jsx as H,jsxs as Ho}from"react/jsx-runtime";var Wo={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"},Fo=me("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),zo=me("div")(({theme:e,$dragging:o})=>({border:"2px dashed",borderColor:o?e.palette.primary.main:"#ccc",backgroundColor:o?e.palette.action.hover:"transparent",borderRadius:8,padding:"1.5rem",textAlign:"center",transition:"border-color 0.2s",cursor:"pointer"}));function Uo(p){var i=p,{onFileInput:e,label:o="Upload files",multiple:r,accept:n,useDropzone:a}=i,t=x(i,["onFileInput","label","multiple","accept","useDropzone"]);var d;let[l,f]=Ao(!1),c=Ho(Oo,u(s({variant:"contained",component:"label","aria-label":"File upload button",onKeyDown:m=>{var P;(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),(P=document.getElementById("file-input"))==null||P.click())}},t),{startIcon:(d=t.startIcon)!=null?d:H(Mo,{}),children:[o,H(Fo,{id:"file-input",type:"file",onChange:m=>{var h;let P=m.target;e(Array.from((h=P.files)!=null?h:[])),P.value=""},multiple:r,accept:n==null?void 0:n.join(","),disabled:t.disabled})]}));return a?H(zo,{$dragging:l,onDragOver:m=>{m.preventDefault(),!t.disabled&&f(!0)},onDragLeave:m=>{m.preventDefault(),f(!1)},onDrop:m=>{var h;if(m.preventDefault(),f(!1),t.disabled)return;let P=Array.from((h=m.dataTransfer.files)!=null?h:[]);e(P)},children:c}):c}var V=Uo;import Vo from"@mui/icons-material/Delete";import Xo from"@mui/material/Box";import $o from"@mui/material/IconButton";import _o from"@mui/material/List";import Go from"@mui/material/ListItem";import Jo from"@mui/material/ListItemText";import{jsx as w,jsxs as qo}from"react/jsx-runtime";function Ko(n){var a=n,{files:e,setFiles:o}=a,r=x(a,["files","setFiles"]);function t(i){o(l=>[...l,...i])}let p=u(s({},r),{onFileInput:t});return(p==null?void 0:p.multiple)===void 0&&(p.multiple=!0),qo(Xo,{children:[w(V,s({},p)),w(_o,{children:e.map(i=>w(Go,{secondaryAction:w($o,{"aria-label":"Delete",edge:"end",onClick:()=>{o(l=>l.filter(f=>f!==i))},children:w(Vo,{})}),children:w(Jo,{primary:i.name})},i.name))})]})}var Yo=Ko;import Qo from"@mui/material/Box";import Zo from"@mui/material/Popover";import{useId as jo,useState as er}from"react";import{jsx as ce,jsxs as tr}from"react/jsx-runtime";function or({icon:e,onOpen:o,onClose:r,iconProps:n,children:a}){let[t,p]=er(null),i=!!t,l=jo();function f(d){p(d.currentTarget),o&&o()}function c(){p(null),r&&r()}return tr(Qo,{children:[ce(e,s({"aria-owns":i?l:void 0,"aria-haspopup":"true",onMouseEnter:f,onMouseLeave:c},n)),ce(Zo,{id:l,sx:{pointerEvents:"none"},open:i,anchorEl:t,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},onClose:c,disableRestoreFocus:!0,children:a})]})}var rr=or;import nr from"@mui/material/Link";import{Link as ar}from"react-router-dom";import{jsx as pr}from"react/jsx-runtime";function ir(n){var a=n,{to:e,children:o}=a,r=x(a,["to","children"]);return pr(nr,u(s({component:ar,to:e},r),{children:o}))}var X=ir;import sr from"@mui/material/ListItemButton";import{jsx as mr}from"react/jsx-runtime";function dr(r){var n=r,{children:e}=n,o=x(n,["children"]);return mr(sr,u(s({component:X},o),{children:e}))}var lr=dr;import cr from"@mui/material/CircularProgress";import{jsx as $,jsxs as xr}from"react/jsx-runtime";function ur(i){var l=i,{children:e,errorComponent:o,undefinedComponent:r,nullComponent:n,nullableComponent:a,loadingComponent:t=$(cr,{})}=l,p=x(l,["children","errorComponent","undefinedComponent","nullComponent","nullableComponent","loadingComponent"]);return xr(W,u(s({loadingComponent:t},p),{children:[$(z,{errorComponent:o,undefinedComponent:r,nullComponent:n,nullableComponent:a}),$(F,{children:e})]}))}var fr=ur;import Pr from"@mui/material/BottomNavigation";import vr from"@mui/material/BottomNavigationAction";import gr from"@mui/material/Box";import yr from"@mui/material/Paper";import{useState as hr}from"react";import{Link as Lr}from"react-router-dom";import{Fragment as wr,jsx as R,jsxs as Ir}from"react/jsx-runtime";function br({children:e,navItems:o}){let[r,n]=hr("");return Ir(wr,{children:[R(gr,{sx:{paddingBottom:7},children:e}),R(yr,{sx:{position:"fixed",bottom:0,left:0,right:0},children:R(Pr,{showLabels:!0,value:r,onChange:(a,t)=>{n(t)},children:o.map(a=>R(vr,u(s({},a),{component:Lr}),a.value))})})]})}var Sr=br;import{truncate as ue}from"@alextheman/utility";import Cr from"@mui/icons-material/ChevronLeft";import kr from"@mui/icons-material/ChevronRight";import Tr from"@mui/icons-material/Menu";import Nr from"@mui/material/AppBar";import fe from"@mui/material/Box";import Br from"@mui/material/CssBaseline";import xe from"@mui/material/Divider";import Er from"@mui/material/Drawer";import Pe from"@mui/material/IconButton";import Dr from"@mui/material/List";import Rr from"@mui/material/ListItem";import Mr from"@mui/material/ListItemButton";import Or from"@mui/material/ListItemIcon";import Ar from"@mui/material/ListItemText";import{styled as G,useTheme as Wr}from"@mui/material/styles";import Fr from"@mui/material/Toolbar";import _ from"@mui/material/Typography";import{Fragment as zr,useState as Ur}from"react";import{Link as Hr,useLocation as Vr}from"react-router-dom";import{jsx as v,jsxs as S}from"react/jsx-runtime";var M=240;function ve(e){return{width:M,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}}function ge(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)`}}}var ye=G("div")(({theme:e})=>s({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1)},e.mixins.toolbar)),Xr=G(Nr,{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:o})=>o,style:{marginLeft:M,width:`calc(100% - ${M}px)`,transition:e.transitions.create(["width","margin"],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),$r=G(Er,{shouldForwardProp:e=>e!=="open"})(({theme:e})=>({width:M,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box",variants:[{props:({open:o})=>o,style:u(s({},ve(e)),{"& .MuiDrawer-paper":ve(e)})},{props:({open:o})=>!o,style:u(s({},ge(e)),{"& .MuiDrawer-paper":ge(e)})}]}));function _r({title:e,navItems:o,children:r,headerElements:n}){let a=Wr(),[t,p]=Ur(!0),i=Vr();function l(){p(!0)}function f(){p(!1)}return S(fe,{sx:{display:"flex"},children:[v(Br,{}),v(Xr,{position:"fixed",open:t,children:S(Fr,{children:[v(Pe,{color:"inherit","aria-label":"open drawer",onClick:l,edge:"start",sx:[{marginRight:5},t&&{display:"none"}],children:v(Tr,{})}),v(_,{variant:"h6",noWrap:!0,component:"div",children:e}),n]})}),S($r,{variant:"permanent",open:t,children:[v(ye,{children:v(Pe,{onClick:f,children:a.direction==="rtl"?v(kr,{}):v(Cr,{})})}),v(xe,{}),o.map(c=>S(zr,{children:[S(Dr,{children:[v(_,{variant:t?"h5":"h6",paddingLeft:t?2:1,children:t?c.category:ue(c.category,4)}),c.options.map(d=>v(Rr,{disablePadding:!0,sx:{display:"block"},children:S(Mr,{sx:[{minHeight:48,px:2.5},t?{justifyContent:"initial"}:{justifyContent:"center"}],component:Hr,to:d.to,selected:i.pathname===d.to,children:[v(Or,{sx:[{minWidth:0,justifyContent:"center"},t?{mr:3}:{mr:"auto"}],children:d.icon?d.icon:t?null:v(_,{children:ue(d.label,4)})}),v(Ar,{primary:d.label,sx:[t?{opacity:1}:{opacity:0}]})]})},d.to))]}),v(xe,{})]},c.category))]}),S(fe,{component:"main",sx:{flexGrow:1,p:3},children:[v(ye,{}),r]})]})}var Gr=_r;import Jr from"@mui/material/Typography";import{Fragment as qr,jsx as he}from"react/jsx-runtime";function Kr(n){var a=n,{text:e,sx:o}=a,r=x(a,["text","sx"]);return he(qr,{children:e.split(`
2
+ `).map((t,p)=>he(Jr,u(s({sx:s({margin:1},o)},r),{children:t}),p))})}var Yr=Kr;import J from"@mui/material/Box";import Le from"@mui/material/Typography";import{stripIndent as Qr}from"common-tags";import{LiveEditor as Zr,LiveError as jr,LivePreview as et,LiveProvider as ot}from"react-live";import{jsx as L,jsxs as be}from"react/jsx-runtime";function rt(n){var a=n,{code:e,previewStyles:o}=a,r=x(a,["code","previewStyles"]);let{mode:t}=k(),p={backgroundColor:t==="dark"?"black":"white",border:.3,borderRadius:1,padding:2,borderColor:"darkgray"},i=o?s(s({},p),o):s({},p);return L(J,{sx:{borderRadius:1,border:.5,padding:2},children:be(ot,u(s({},r),{code:Qr(e!=null?e:""),children:[L(Le,{variant:"h5",children:"Code"}),L(J,{sx:{border:.3,borderRadius:.3,borderColor:"darkgray"},children:L(Zr,{})}),L("br",{}),L(Le,{variant:"h5",children:"Result"}),be(J,{sx:i,children:[L(et,{}),L(jr,{})]})]}))})}var tt=rt;import{fillArray as nt}from"@alextheman/utility";import at from"@mui/material/Skeleton";import it from"@mui/material/TableCell";import pt from"@mui/material/TableRow";import{jsx as K}from"react/jsx-runtime";function st({columns:e}){return K(pt,{children:nt(o=>K(it,{children:K(at,{})},o),e)})}var dt=st;import lt from"@mui/material/Button";import{useFormContext as mt}from"react-hook-form";import{jsx as ft}from"react/jsx-runtime";function ct(n){var a=n,{disableClean:e,label:o}=a,r=x(a,["disableClean","label"]);let{formState:{disabled:t,isDirty:p,isSubmitting:i}}=mt();return ft(lt,u(s({color:"primary",disabled:r.disabled||e&&!p||t,loading:i,type:"submit",variant:"contained"},r),{children:o}))}var ut=ct;import Se from"@mui/material/Box";import{styled as xt}from"@mui/material/styles";import Pt from"@mui/material/Switch";import{jsx as N}from"react/jsx-runtime";var vt=xt(Pt)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%)",fontSize:16,width:28,height:28}}}));function gt(t){var p=t,{checkedIcon:e,checkedIconStyles:o,uncheckedIcon:r,uncheckedIconStyles:n}=p,a=x(p,["checkedIcon","checkedIconStyles","uncheckedIcon","uncheckedIconStyles"]);let i={borderRadius:"50%",borderColor:"white",backgroundColor:"white",display:"flex",alignItems:"center",justifyContent:"center",padding:.25},l={color:"black",maxWidth:16.5,maxHeight:16.5};return N(vt,s({checkedIcon:N(Se,{sx:i,children:N(e,{style:s(s({},l),o)})}),icon:N(Se,{sx:i,children:N(r,{style:s(s({},l),n)})})},a))}var yt=gt;import{useCallback as we,useEffect as ht,useState as Lt}from"react";function bt(e){let[o,r]=Lt(()=>{let t=window.location.hash.replace("#","");return e&&t===""?e:t}),n=we(()=>{let t=window.location.hash.replace("#","");r(e&&t===""?e:t)},[r,e]);ht(()=>(window.addEventListener("hashchange",n),()=>{window.removeEventListener("hashchange",n)}),[n]);let a=we(t=>{let p=typeof t=="function"?t(o):t;p!==o&&(window.location.hash=p)},[o]);return[o,a]}var St=bt;export{Oe as CollapsableItem,ho as DarkModeToggle,To as DropdownMenu,Do as ExternalLink,V as FileInput,Yo as FileInputList,Wo as FileType,rr as IconWithPopover,X as InternalLink,lr as ListItemInternalLink,fr as Loader,F as LoaderData,z as LoaderError,W as LoaderProvider,Qe as ModeProvider,Sr as NavigationBottom,Gr as NavigationDrawer,Yr as PopoverText,tt as ReactPlayground,to as ScreenSizeProvider,dt as SkeletonRow,uo as SnackbarProvider,ut as SubmitButton,yt as SwitchWithIcons,St as useHash,I as useLoader,k as useMode,oo as useScreenSize,mo as useSnackbar};
3
3
  //# sourceMappingURL=index.js.map