@alextheman/components 6.11.0 → 6.12.0

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import * as _$react from "react";
-import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import { LinkProps } from "@mui/material/Link";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
@@ -10,6 +10,7 @@ import { AlertColor } from "@mui/material/Alert";
 import { LiveProvider } from "react-live";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SwitchProps } from "@mui/material/Switch";
+import { MenuProps } from "@mui/material/Menu";
 import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
@@ -450,39 +451,19 @@ declare function DropdownMenu({
 declare const DarkModeToggle: typeof ModeToggle;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenu.d.ts
-interface DropdownMenuContextValue {
-  /** A function responsible for closing the dropdown menu. */
-  closeMenu: () => void;
-  /** Represents whether or not the dropdown is open. */
-  isDropdownOpen: boolean;
-}
-/**
-  Access the DropdownMenu context directly.
- */
-declare function useDropdownMenu$1<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
-interface DropdownMenuProps$1 {
+interface DropdownMenuProps$1 extends Omit<MenuProps, "anchorEl" | "open"> {
   /** The children to render inside of the dropdown. */
   children: ReactNode;
-  /** The button component to be used as the dropdown toggle (defaults to a Material UI Button) */
-  button?: ElementType;
-  /** Props to pass to the Button. */
-  buttonProps?: Omit<ButtonOwnProps, "endIcon"> & {
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-  };
-  /** The icon to display on the button when it is open. */
-  openIcon?: ReactNode;
-  /** The icon to display on the button when it is closed. */
-  closedIcon?: ReactNode;
 }
-/** Renders a dropdown menu consisting of `DropdownMenuItem` components imported from this package. */
+/**
+ * Renders a menu component that can be used alongside the `DropdownMenuProvider`.
+ *
+ * This component's open state would be controlled by the `DropdownMenuTrigger`.
+ */
 declare function DropdownMenu$1({
   children,
-  button: Button,
-  buttonProps,
-  openIcon,
-  closedIcon
+  onClose,
+  ...menuProps
 }: DropdownMenuProps$1): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenuItem.d.ts
@@ -501,7 +482,7 @@ type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1
   onClick?: ComponentProps<RootComponent>["onClick"];
 } & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
 /** Represents a menu item to be used inside the `DropdownMenu`. It must be used as children of the `DropdownMenu` component. */
-declare function DropdownMenuItem$1<RootComponent extends ElementType>({
+declare function DropdownMenuItem$1<RootComponent extends ElementType = typeof Button$1>({
   component,
   children,
   ref,
@@ -509,6 +490,20 @@ declare function DropdownMenuItem$1<RootComponent extends ElementType>({
   ...menuItemProps
 }: DropdownMenuItemProps$1<RootComponent>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/v7/components/DropdownMenu/DropdownMenuProvider.d.ts
+interface DropdownMenuContextValue {
+  /** A function responsible for closing the dropdown menu. */
+  closeMenu: () => void;
+  /** Represents whether or not the dropdown is open. */
+  isDropdownOpen: boolean;
+}
+/**
+  Access the DropdownMenu context directly.
+ */
+declare function useDropdownMenu$1<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
+//#endregion
 //#region src/deprecated/DropdownMenu2/DropdownMenu2.d.ts
 declare const useDropdownMenu: typeof useDropdownMenu$1;
 /**

package/dist/index.d.ts

@@ -2,16 +2,17 @@ import { TypographyProps } from "@mui/material/Typography";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
 import * as _$react from "react";
-import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import { LinkProps } from "@mui/material/Link";
-import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
+import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import { CreateEnumType, OptionalOnCondition } from "@alextheman/utility";
 import { AlertColor } from "@mui/material/Alert";
 import { SwitchProps } from "@mui/material/Switch";
 import { LiveProvider } from "react-live";
-import { MenuItemOwnProps } from "@mui/material/MenuItem";
+import { MenuProps } from "@mui/material/Menu";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
@@ -450,43 +451,23 @@ declare function DropdownMenu({
 declare const DarkModeToggle: typeof ModeToggle;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenu.d.ts
-interface DropdownMenuContextValue {
-  /** A function responsible for closing the dropdown menu. */
-  closeMenu: () => void;
-  /** Represents whether or not the dropdown is open. */
-  isDropdownOpen: boolean;
-}
-/**
-  Access the DropdownMenu context directly.
- */
-declare function useDropdownMenu$1<Strict extends boolean = true>({
-  strict
-}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
-interface DropdownMenuProps$1 {
+interface DropdownMenuProps$1 extends Omit<MenuProps, "anchorEl" | "open"> {
   /** The children to render inside of the dropdown. */
   children: ReactNode;
-  /** The button component to be used as the dropdown toggle (defaults to a Material UI Button) */
-  button?: ElementType;
-  /** Props to pass to the Button. */
-  buttonProps?: Omit<ButtonOwnProps, "endIcon"> & {
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-  };
-  /** The icon to display on the button when it is open. */
-  openIcon?: ReactNode;
-  /** The icon to display on the button when it is closed. */
-  closedIcon?: ReactNode;
 }
-/** Renders a dropdown menu consisting of `DropdownMenuItem` components imported from this package. */
+/**
+ * Renders a menu component that can be used alongside the `DropdownMenuProvider`.
+ *
+ * This component's open state would be controlled by the `DropdownMenuTrigger`.
+ */
 declare function DropdownMenu$1({
   children,
-  button: Button,
-  buttonProps,
-  openIcon,
-  closedIcon
+  onClose,
+  ...menuProps
 }: DropdownMenuProps$1): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/v7/components/DropdownMenu/DropdownMenuItem.d.ts
-type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof MUIButton> = {
+type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof Button$1> = {
   /**
    * An optional component to provide to override the current component.
    *
@@ -501,7 +482,7 @@ type DropdownMenuItemProps$1<RootComponent extends ElementType = typeof MUIButto
   onClick?: ComponentProps<RootComponent>["onClick"];
 } & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
 /** Represents a menu item to be used inside the `DropdownMenu`. It must be used as children of the `DropdownMenu` component. */
-declare function DropdownMenuItem$1<RootComponent extends ElementType>({
+declare function DropdownMenuItem$1<RootComponent extends ElementType = typeof Button$1>({
   component,
   children,
   ref,
@@ -509,6 +490,20 @@ declare function DropdownMenuItem$1<RootComponent extends ElementType>({
   ...menuItemProps
 }: DropdownMenuItemProps$1<RootComponent>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/v7/components/DropdownMenu/DropdownMenuProvider.d.ts
+interface DropdownMenuContextValue {
+  /** A function responsible for closing the dropdown menu. */
+  closeMenu: () => void;
+  /** Represents whether or not the dropdown is open. */
+  isDropdownOpen: boolean;
+}
+/**
+  Access the DropdownMenu context directly.
+ */
+declare function useDropdownMenu$1<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
+//#endregion
 //#region src/deprecated/DropdownMenu2/DropdownMenu2.d.ts
 declare const useDropdownMenu: typeof useDropdownMenu$1;
 /**

package/dist/index.js

@@ -1,3 +1,3 @@
-import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as x,MdArrowDropUp as S,MdChevronLeft as te,MdChevronRight as ne,MdCloudUpload as re,MdDelete as ie,MdMenu as ae,MdOutlineDarkMode as oe,MdOutlineLightMode as se,MdVisibility as ce}from"react-icons/md";import le from"@mui/material/Link";import C from"@mui/material/Button";import{ThemeProvider as ue,createTheme as de,styled as w,useTheme as fe}from"@mui/material/styles";import T from"@mui/material/IconButton";import pe from"@mui/material/List";import E from"@mui/material/ListItem";import D from"@mui/material/ListItemText";import O from"@mui/material/CircularProgress";import{DataError as k,fillArray as me,truncate as he,wait as ge}from"@alextheman/utility";import A from"@mui/material/Alert";import j from"@mui/material/CssBaseline";import _e from"@mui/material/Snackbar";import ve from"@mui/material/Tooltip";import ye from"@mui/material/Switch";import be from"@mui/material/BottomNavigation";import xe from"@mui/material/BottomNavigationAction";import Se from"@mui/material/Paper";import{Link as M,useLocation as Ce}from"react-router-dom";import{stripIndent as we}from"common-tags";import{LiveEditor as Te,LiveError as Ee,LivePreview as De,LiveProvider as Oe}from"react-live";import ke from"@mui/material/Skeleton";import Ae from"@mui/material/TableCell";import je from"@mui/material/TableRow";import N from"@mui/material/Menu";import P from"@mui/material/MenuItem";import F from"@mui/material/AppBar";import I from"@mui/material/Drawer";import L from"@mui/material/ListItemButton";import Me from"@mui/material/ListItemIcon";import Ne from"@mui/material/Toolbar";import"wouter";import"@mui/material/AlertTitle";import"@mui/material/Container";import"wouter/memory-location";import"wouter/use-browser-location";import{createFormHookContexts as Pe}from"@tanstack/react-form";import"@mui/material/TextField";import Fe from"@mui/material/Popover";import{useFormContext as Ie}from"react-hook-form";function R({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 Le(){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 Re(){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(R,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Le,{}),l(R,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function ze({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(S,{}),closedIcon:m=l(x,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g]),u(e,{children:[u(s,{onClick:()=>{v(e=>!e)},sx:h?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===d?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":g,children:[o,g?p:m]}),l(f,{in:g,...c,children:i})]})}function z({href:e,children:t,ref:n,...r}){return l(le,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Be={PDF:`application/pdf`,PNG:`image/png`,JPEG:`image/jpeg`,JPG:`image/jpg`,XLSX:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`,DOCX:`application/vnd.openxmlformats-officedocument.wordprocessingml.document`,MP3:`audio/mp3`,MP4:`video/mp4`,WAV:`audio/wav`},Ve=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}),He=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 B({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(C,{variant:`contained`,component:`label`,"aria-label":`File input button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(c)?.click())},...a,startIcon:a.startIcon??l(re,{}),children:[t,l(Ve,{id:c,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?l(He,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:d}):d}function Ue({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(B,{...i,multiple:r,onFileInput:a}),l(pe,{children:t.map(e=>l(E,{secondaryAction:l(T,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ie,{})}),children:l(D,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const V=m(void 0);function H({strict:e=!0}={}){let t=g(V);if(e&&!t)throw new k({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the LoaderProvider context. Please double-check that it is present.`);return t}function We({children:e,loadingComponent:t=l(O,{}),...n}){return l(V.Provider,{value:{loadingComponent:t,...n},children:e})}function U({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=H(),u=t??a;return r?l(c,{children:n??o}):s||i==null?l(c,{}):u?typeof e==`function`?l(c,{children:e(u(i))}):l(c,{children:e}):typeof e==`function`?l(c,{children:e(i)}):l(c,{children:e})}function W({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=H(),f=i??d,p=ee(!1),m=e??u;return s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(A,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(f&&!p.current&&(console.error(`Data is nullable after loading.`),p.current=!0),l(c,{children:r})):o===void 0&&(f&&!p.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),p.current=!0),t)?l(c,{children:t}):o===null&&(f&&!p.current&&(console.error(`Data is null after loading.`),p.current=!0),n)?l(c,{children:n}):l(A,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var G=We;const K=m({toggleMode:()=>{},mode:`dark`});function q({strict:e=!0}={}){let t=g(K);if(e&&!t)throw new k({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function Ge({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>de({palette:{mode:n}}),[n]);return l(K.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(ue,{theme:i,children:[l(j,{}),e]})})}const J=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Ke({strict:e=!0}={}){let t=g(J);if(e&&!t)throw new k({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(J.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Y=m(void 0);function Je({strict:e=!0}={}){let t=g(Y);if(e&&!t)throw new k({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Ye({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 ge(.2),s(``)}return u(Y.Provider,{value:{addSnackbar:f},children:[l(_e,{open:n,autoHideDuration:i,onClose:p,children:l(A,{onClose:p,severity:c,children:o})}),e]})}function Xe({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(O,{}),...s}){return u(G,{loadingComponent:o,...s,children:[l(W,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(U,{children:e})]})}const Ze=w(ye)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function X({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(Ze,{checkedIcon:l(e,{sx:o,children:l(t,{style:{...s,...n}})}),icon:l(e,{sx:o,children:l(r,{style:{...s,...i}})}),...a})}function Z(){let{mode:e,toggleMode:t}=q(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ve,{title:r,children:l(X,{uncheckedIcon:se,checkedIcon:oe,checked:n,onChange:t,"aria-label":r})})}function Qe({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Se,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(be,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(xe,{...e,component:M},e.value))})})]})}function $e({title:e,subtitle:i,action:o,children:d}){return u(t,{children:[l(r,{title:u(c,{children:[l(s,{variant:`h6`,children:e}),i?l(s,{variant:`body2`,color:`text.secondary`,children:i}):null]}),action:o}),l(a,{}),l(n,{children:d})]})}function et({code:t,previewStyles:n,...r}){let{mode:i}=q(),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(Oe,{...r,code:we(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Te,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(De,{}),l(Ee,{})]})]})})}function tt({columns:e}){return l(je,{children:me(e=>l(Ae,{children:l(ke,{})},e),e)})}const nt=Z;function rt({children:t,button:n=C,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(S,{}),isClosedIcon:o=l(x,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===C&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(N,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}const it=m(void 0);function at({strict:e=!0}={}){let t=g(it);if(e&&!t)throw new k({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function ot({children:e,button:t=C,buttonProps:n,openIcon:r=l(S,{}),closedIcon:i=l(x,{})}){let[a,o]=b(null),s=y(()=>!!a,[a]);function c(){o(null)}return u(it.Provider,{value:{closeMenu:c,isDropdownOpen:s},children:[l(t,{"aria-controls":s?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":s,endIcon:s?r:i,...n,onClick:e=>{e.defaultPrevented||o(e.currentTarget),n?.onClick&&n?.onClick(e)}}),l(N,{anchorEl:a,open:s,onClose:c,children:e})]})}function st({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=at();return l(P,{component:e,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ct=ot;function lt(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ut(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)`}}}w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),w(F,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),w(I,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...lt(e),"& .MuiDrawer-paper":lt(e)}},{props:({open:e})=>!e,style:{...ut(e),"& .MuiDrawer-paper":ut(e)}}]}));const{fieldContext:dt,formContext:ft,useFieldContext:pt,useFormContext:mt}=Pe(),Q=at,ht=ct,gt=st;var _t=ht;function vt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(P,{component:z,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=M,children:n,ref:r,...i}){return l(le,{component:t,to:e,ref:r,...i,children:n})}function yt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(P,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function bt({icon:t=ce,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(Fe,{id:d,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function xt({children:e,...t}){return l(L,{component:$,...t,children:e})}function St(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Ct(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const wt=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Tt=w(F,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),Et=w(I,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...St(e),"& .MuiDrawer-paper":St(e)}},{props:({open:e})=>!e,style:{...Ct(e),"& .MuiDrawer-paper":Ct(e)}}]}));function Dt({title:t,navItems:n,children:r,headerElements:i}){let o=fe(),[c,d]=b(!0),f=Ce();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(j,{}),l(Tt,{position:`fixed`,open:c,children:u(Ne,{children:[l(T,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(ae,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(Et,{variant:`permanent`,open:c,children:[l(wt,{children:l(T,{onClick:h,children:o.direction===`rtl`?l(ne,{}):l(te,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(pe,{children:[l(s,{variant:c?`h5`:`h6`,paddingLeft:c?2:1,children:c?e.category:he(e.category,4)}),e.options.map(e=>l(E,{disablePadding:!0,sx:{display:`block`},children:u(L,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:M,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:he(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(wt,{}),r]})]})}function Ot({text:e,sx:t,...n}){return l(c,{children:e.split(`
-`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}function kt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Ie();return l(C,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function At(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{Re as Artwork,ze as CollapsableItem,nt as DarkModeToggle,rt as DropdownMenu,_t as DropdownMenu2,vt as DropdownMenuExternalLink,yt as DropdownMenuInternalLink,gt as DropdownMenuItem,z as ExternalLink,B as FileInput,Ue as FileInputList,Be as FileType,bt as IconWithPopover,$ as InternalLink,xt as ListItemInternalLink,Xe as Loader,U as LoaderData,W as LoaderError,G as LoaderProvider,Ge as ModeProvider,Z as ModeToggle,Qe as NavigationBottom,Dt as NavigationDrawer,$e as Page,Ot as PopoverText,et as ReactPlayground,qe as ScreenSizeProvider,tt as SkeletonRow,Ye as SnackbarProvider,kt as SubmitButton,X as SwitchWithIcons,Q as useDropdownMenu,At as useHash,q as useMode,Ke as useScreenSize,Je as useSnackbar};
+import e from"@mui/material/Box";import t from"@mui/material/Card";import n from"@mui/material/CardContent";import r from"@mui/material/CardHeader";import i from"@mui/material/Chip";import a from"@mui/material/Divider";import o from"@mui/material/Stack";import s from"@mui/material/Typography";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@mui/material/ButtonBase";import f from"@mui/material/Collapse";import{Fragment as p,createContext as m,useCallback as h,useContext as g,useEffect as _,useId as v,useMemo as y,useRef as ee,useState as b}from"react";import{MdArrowDropDown as te,MdArrowDropUp as x,MdChevronLeft as ne,MdChevronRight as re,MdCloudUpload as ie,MdDelete as ae,MdMenu as oe,MdOutlineDarkMode as se,MdOutlineLightMode as ce,MdVisibility as le}from"react-icons/md";import ue from"@mui/material/Link";import S from"@mui/material/Button";import{ThemeProvider as de,createTheme as fe,styled as C,useTheme as pe}from"@mui/material/styles";import w from"@mui/material/IconButton";import T from"@mui/material/List";import E from"@mui/material/ListItem";import D from"@mui/material/ListItemText";import me from"@mui/material/CircularProgress";import{DataError as O,fillArray as he,truncate as ge,wait as _e}from"@alextheman/utility";import k from"@mui/material/Alert";import A from"@mui/material/CssBaseline";import ve from"@mui/material/Snackbar";import ye from"@mui/material/Tooltip";import be from"@mui/material/Switch";import xe from"@mui/material/BottomNavigation";import Se from"@mui/material/BottomNavigationAction";import Ce from"@mui/material/Paper";import{Link as j,useLocation as we}from"react-router-dom";import{stripIndent as Te}from"common-tags";import{LiveEditor as Ee,LiveError as De,LivePreview as Oe,LiveProvider as ke}from"react-live";import Ae from"@mui/material/Skeleton";import je from"@mui/material/TableCell";import Me from"@mui/material/TableRow";import M from"@mui/material/Menu";import N from"@mui/material/AppBar";import P from"@mui/material/Drawer";import F from"@mui/material/ListItemButton";import Ne from"@mui/material/ListItemIcon";import Pe from"@mui/material/Toolbar";import"wouter";import"@mui/material/AlertTitle";import"@mui/material/Container";import"wouter/memory-location";import"wouter/use-browser-location";import{createFormHookContexts as Fe}from"@tanstack/react-form";import"@mui/material/TextField";import I from"@mui/material/MenuItem";import Ie from"@mui/material/Popover";import{useFormContext as Le}from"react-hook-form";function L({containerLabel:e,chipLabels:r}){return l(t,{sx:{width:320,height:420,backgroundColor:`rgba(255,255,255,0.07)`,backdropFilter:`blur(8px)`,border:`1px solid rgba(255,255,255,0.06)`,boxShadow:`0 10px 40px rgba(0,0,0,0.35)`},children:u(n,{children:[l(s,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),l(o,{spacing:1,children:r.map(e=>l(i,{label:e,sx:{backgroundColor:`rgba(255,255,255,0.11)`,color:`rgba(255,255,255,0.88)`,border:`1px solid rgba(255,255,255,0.06)`}},e))})]})})}function Re(){return l(e,{sx:{width:120,height:6,borderRadius:3,background:`linear-gradient(90deg, #f43f5e, #a78bfa, #22d3ee)`,boxShadow:`0 0 24px rgba(167,139,250,0.55)`}})}function ze(){return u(t,{sx:{width:1e3,height:1e3,display:`flex`,flexDirection:`column`,justifyContent:`space-between`,p:4,background:`radial-gradient(circle at 20% 10%, rgba(167,139,250,0.35) 0%, rgba(167,139,250,0.12) 35%, rgba(0,0,0,0) 55%), linear-gradient(135deg, #3a3380 0%, #1d2e5f 40%, #2d3f55 100%)`,color:`white`},elevation:0,children:[l(r,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),l(a,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),l(n,{sx:{flex:1,display:`flex`,alignItems:`center`},children:u(o,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[l(L,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),l(Re,{}),l(L,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function Be({isInitiallyOpen:t,onOpen:n,onClose:r,children:i,buttonStyles:a,buttonContents:o,buttonComponent:s=d,collapseProps:c,openIcon:p=l(x,{}),closedIcon:m=l(te,{}),useDefaultStyling:h=s===d}){let[g,v]=b(!!t);return _(()=>{g&&n?n():!g&&r&&r()},[g]),u(e,{children:[u(s,{onClick:()=>{v(e=>!e)},sx:h?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":s===d?{backgroundColor:`action.hover`}:null,...a}:a,"aria-expanded":g,children:[o,g?p:m]}),l(f,{in:g,...c,children:i})]})}function R({href:e,children:t,ref:n,...r}){return l(ue,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const Ve={PDF:`application/pdf`,PNG:`image/png`,JPEG:`image/jpeg`,JPG:`image/jpg`,XLSX:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`,DOCX:`application/vnd.openxmlformats-officedocument.wordprocessingml.document`,MP3:`audio/mp3`,MP4:`video/mp4`,WAV:`audio/wav`},He=C(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Ue=C(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function z({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=b(!1),c=v(),d=u(S,{variant:`contained`,component:`label`,"aria-label":`File input button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(c)?.click())},...a,startIcon:a.startIcon??l(ie,{}),children:[t,l(He,{id:c,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?l(Ue,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:d}):d}function We({files:t,setFiles:n,multiple:r=!0,...i}){function a(e){n(t=>[...t,...e])}return u(e,{children:[l(z,{...i,multiple:r,onFileInput:a}),l(T,{children:t.map(e=>l(E,{secondaryAction:l(w,{"aria-label":`Delete`,edge:`end`,onClick:()=>{n(t=>t.filter(t=>t!==e))},children:l(ae,{})}),children:l(D,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}const B=m(void 0);function V({strict:e=!0}={}){let t=g(B);if(e&&!t)throw new O({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the LoaderProvider context. Please double-check that it is present.`);return t}function Ge({children:e,loadingComponent:t=l(me,{}),...n}){return l(B.Provider,{value:{loadingComponent:t,...n},children:e})}function H({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=V(),u=t??a;return r?l(c,{children:n??o}):s||i==null?l(c,{}):u?typeof e==`function`?l(c,{children:e(u(i))}):l(c,{children:e}):typeof e==`function`?l(c,{children:e(i)}):l(c,{children:e})}function U({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:u,logError:d}=V(),f=i??d,p=ee(!1),m=e??u;return s?(f&&!p.current&&(console.error(s),p.current=!0),typeof m==`function`?m(s):m?l(c,{children:m}):l(k,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(f&&!p.current&&(console.error(`Data is nullable after loading.`),p.current=!0),l(c,{children:r})):o===void 0&&(f&&!p.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),p.current=!0),t)?l(c,{children:t}):o===null&&(f&&!p.current&&(console.error(`Data is null after loading.`),p.current=!0),n)?l(c,{children:n}):l(k,{severity:`error`,children:`Failed to load data. Please try again later.`}):l(c,{})}var W=Ge;const G=m({toggleMode:()=>{},mode:`dark`});function K({strict:e=!0}={}){let t=g(G);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 Ke({children:e,mode:t=`dark`}){let[n,r]=b(t),i=y(()=>fe({palette:{mode:n}}),[n]);return l(G.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:u(de,{theme:i,children:[l(A,{}),e]})})}const q=m({windowWidth:0,windowHeight:0,isLargeScreen:!1});function qe({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 Je({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=b(window.innerWidth),[a,o]=b(window.innerHeight);_(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=y(()=>r>t&&a>n,[r,a,t,n]);return l(q.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const J=m(void 0);function Ye({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 Xe({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(k,{onClose:p,severity:c,children:o})}),e]})}function Ze({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=l(me,{}),...s}){return u(W,{loadingComponent:o,...s,children:[l(U,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),l(H,{children:e})]})}const Qe=C(be)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Y({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})}function X(){let{mode:e,toggleMode:t}=K(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return l(ye,{title:r,children:l(Y,{uncheckedIcon:ce,checkedIcon:se,checked:n,onChange:t,"aria-label":r})})}function $e({children:t,navItems:n}){let[r,i]=b(``);return u(c,{children:[l(e,{sx:{paddingBottom:7},children:t}),l(Ce,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:l(xe,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:n.map(e=>l(Se,{...e,component:j},e.value))})})]})}function et({title:e,subtitle:i,action:o,children:d}){return u(t,{children:[l(r,{title:u(c,{children:[l(s,{variant:`h6`,children:e}),i?l(s,{variant:`body2`,color:`text.secondary`,children:i}):null]}),action:o}),l(a,{}),l(n,{children:d})]})}function tt({code:t,previewStyles:n,...r}){let{mode:i}=K(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=n?{...a,...n}:{...a};return l(e,{sx:{borderRadius:1,border:.5,padding:2},children:u(ke,{...r,code:Te(t??``),children:[l(s,{variant:`h5`,children:`Code`}),l(e,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:l(Ee,{})}),l(`br`,{}),l(s,{variant:`h5`,children:`Result`}),u(e,{sx:o,children:[l(Oe,{}),l(De,{})]})]})})}function nt({columns:e}){return l(Me,{children:he(e=>l(je,{children:l(Ae,{})},e),e)})}const rt=X;function it({children:t,button:n=S,buttonChildren:r=`Menu`,buttonProps:i,isOpenIcon:a=l(x,{}),isClosedIcon:o=l(te,{}),onOpen:s,onClose:c}){let[d,f]=b(null),p=y(()=>!!d,[d]),m={...i,onClick:e=>{f(e.currentTarget)},"aria-controls":p?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":p};return n===S&&(m.endIcon=p?a:o),_(()=>{p&&s?s():!p&&c&&c()},[p,s,c]),u(e,{children:[l(n,{...m,children:r}),l(M,{id:`dropdown-menu`,anchorEl:d,open:p,onClose:()=>{f(null)},children:typeof t==`function`?l(e,{children:t(()=>{f(null)})}):t})]})}function at(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ot(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),C(N,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),C(P,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...at(e),"& .MuiDrawer-paper":at(e)}},{props:({open:e})=>!e,style:{...ot(e),"& .MuiDrawer-paper":ot(e)}}]}));const{fieldContext:st,formContext:ct,useFieldContext:lt,useFormContext:ut}=Fe(),dt=m(void 0);function Z({strict:e=!0}={}){let t=g(dt);if(e&&!t)throw new 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 ft({strict:e=!0}={}){return Z({strict:e})}function pt({children:e,onClose:t,...n}){let{anchorElement:r,isDropdownOpen:i,closeMenu:a}=ft();return l(M,{anchorEl:r,open:i,onClose:(e,n)=>{e.defaultPrevented||a(),t&&t(e,n)},...n,children:e})}function mt({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Z();return l(I,{component:e,ref:n,...i,onClick:e=>{r&&r(e),!e.defaultPrevented&&a()},children:t})}const Q=Z,ht=pt,gt=mt;var _t=ht;function vt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(I,{component:R,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function $({to:e,component:t=j,children:n,ref:r,...i}){return l(ue,{component:t,to:e,ref:r,...i,children:n})}function yt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return l(I,{component:$,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function bt({icon:t=le,onOpen:n,onClose:r,iconProps:i,children:a}){let[o,s]=b(null),c=!!o,d=v();function f(e){s(e.currentTarget),n&&n()}function p(){s(null),r&&r()}return u(e,{children:[l(t,{"aria-owns":c?d:void 0,"aria-haspopup":`true`,onMouseEnter:f,onMouseLeave:p,...i}),l(Ie,{id:d,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:p,disableRestoreFocus:!0,children:a})]})}function xt({children:e,...t}){return l(F,{component:$,...t,children:e})}function St(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Ct(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const wt=C(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Tt=C(N,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),Et=C(P,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...St(e),"& .MuiDrawer-paper":St(e)}},{props:({open:e})=>!e,style:{...Ct(e),"& .MuiDrawer-paper":Ct(e)}}]}));function Dt({title:t,navItems:n,children:r,headerElements:i}){let o=pe(),[c,d]=b(!0),f=we();function m(){d(!0)}function h(){d(!1)}return u(e,{sx:{display:`flex`},children:[l(A,{}),l(Tt,{position:`fixed`,open:c,children:u(Pe,{children:[l(w,{color:`inherit`,"aria-label":`open drawer`,onClick:m,edge:`start`,sx:[{marginRight:5},c&&{display:`none`}],children:l(oe,{})}),l(s,{variant:`h6`,noWrap:!0,component:`div`,children:t}),i]})}),u(Et,{variant:`permanent`,open:c,children:[l(wt,{children:l(w,{onClick:h,children:o.direction===`rtl`?l(re,{}):l(ne,{})})}),l(a,{}),n.map(e=>u(p,{children:[u(T,{children:[l(s,{variant:c?`h5`:`h6`,sx:{paddingLeft:c?2:1},children:c?e.category:ge(e.category,4)}),e.options.map(e=>l(E,{disablePadding:!0,sx:{display:`block`},children:u(F,{sx:[{minHeight:48,px:2.5},c?{justifyContent:`initial`}:{justifyContent:`center`}],component:j,to:e.to,selected:f.pathname===e.to,children:[l(Ne,{sx:[{minWidth:0,justifyContent:`center`},c?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:c?null:l(s,{children:ge(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(wt,{}),r]})]})}function Ot({text:e,sx:t,...n}){return l(c,{children:e.split(`
+`).map((e,r)=>l(s,{sx:{margin:1,...t},...n,children:e},r))})}function kt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Le();return l(S,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}function At(e){let[t,n]=b(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=h(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return _(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,h(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}export{ze as Artwork,Be as CollapsableItem,rt as DarkModeToggle,it as DropdownMenu,_t as DropdownMenu2,vt as DropdownMenuExternalLink,yt as DropdownMenuInternalLink,gt as DropdownMenuItem,R as ExternalLink,z as FileInput,We as FileInputList,Ve as FileType,bt as IconWithPopover,$ as InternalLink,xt as ListItemInternalLink,Ze as Loader,H as LoaderData,U as LoaderError,W as LoaderProvider,Ke as ModeProvider,X as ModeToggle,$e as NavigationBottom,Dt as NavigationDrawer,et as Page,Ot as PopoverText,tt as ReactPlayground,Je as ScreenSizeProvider,nt as SkeletonRow,Xe as SnackbarProvider,kt as SubmitButton,Y as SwitchWithIcons,Q as useDropdownMenu,At as useHash,K as useMode,qe as useScreenSize,Ye as useSnackbar};
 //# sourceMappingURL=index.js.map