@alextheman/components 6.9.1 → 6.10.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2026 alextheman231
+
+Permission is hereby granted, free
+of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# @alextheman/components
+
+![npm version](https://img.shields.io/npm/v/@alextheman/components)
+![npm downloads](https://img.shields.io/npm/dm/@alextheman/components)
+![npm license](https://img.shields.io/npm/l/@alextheman/components)
+
+[![CI](https://github.com/alextheman231/components/actions/workflows/ci.yml/badge.svg)](https://github.com/alextheman231/components/actions/workflows/ci.yml)
+[![Publish to NPM Registry and GitHub Releases/Pages](https://github.com/alextheman231/components/actions/workflows/publish.yml/badge.svg)](https://github.com/alextheman231/components/actions/workflows/publish.yml)
+
+
+This is a React component library used across my projects. It is built with React and Material UI, and integrates with tools such as react-router-dom (soon to be replaced with Wouter) and react-hook-form (soon to be replaced with TanStack Form).
+
+## Installation
+
+To install this into your project, you can do so with the following command:
+
+```bash
+npm install @alextheman/components
+```
+
+From there, you may import any of the package's components. If you're using this package in your own components package, you may need to install it as a peer dependency in order for contexts to work properly.
+
+```bash
+npm install --save-peer @alextheman/components
+```
+
+## Quick start
+
+You can import and use any component from the package in the following way:
+
+```tsx
+import { ExternalLink } from "@alextheman/components";
+
+function MyComponent() {
+  return (
+    <ExternalLink href="https://alextheman231.github.io/components/">
+      Link to documentation
+    </ExternalLink>
+  );
+}
+```
+
+## Documentation
+
+The hosted documentation site uses Storybook to provide interactive demos and general documentation of the features of the package. It can be found [here](https://alextheman231.github.io/components/).
+
+See the GitHub repository [here](https://github.com/alextheman231/components).

package/dist/index.cjs

@@ -1,3 +1,3 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`@mui/material/Box`);c=s(c);let l=require(`@mui/material/Card`);l=s(l);let u=require(`@mui/material/CardContent`);u=s(u);let d=require(`@mui/material/CardHeader`);d=s(d);let f=require(`@mui/material/Chip`);f=s(f);let p=require(`@mui/material/Divider`);p=s(p);let m=require(`@mui/material/Stack`);m=s(m);let h=require(`@mui/material/Typography`);h=s(h);let g=require(`react/jsx-runtime`),_=require(`@mui/material/ButtonBase`);_=s(_);let v=require(`@mui/material/Collapse`);v=s(v);let y=require(`react`),b=require(`react-icons/md`),x=require(`@mui/material/Button`);x=s(x);let S=require(`@mui/material/Menu`);S=s(S);let C=require(`@mui/material/Link`);C=s(C);let w=require(`@mui/material/styles`),T=require(`@mui/material/IconButton`);T=s(T);let E=require(`@mui/material/List`);E=s(E);let D=require(`@mui/material/ListItem`);D=s(D);let O=require(`@mui/material/ListItemText`);O=s(O);let k=require(`react-router-dom`),A=require(`@mui/material/CircularProgress`);A=s(A);let j=require(`@mui/material/MenuItem`);j=s(j);let M=require(`@mui/material/Alert`);M=s(M);let N=require(`@mui/material/CssBaseline`);N=s(N);let P=require(`@alextheman/utility`),F=require(`@mui/material/Snackbar`);F=s(F);let I=require(`@mui/material/Tooltip`);I=s(I);let L=require(`@mui/material/Switch`);L=s(L);let R=require(`@mui/material/BottomNavigation`);R=s(R);let z=require(`@mui/material/BottomNavigationAction`);z=s(z);let B=require(`@mui/material/Paper`);B=s(B);let V=require(`@mui/material/AppBar`);V=s(V);let H=require(`@mui/material/Drawer`);H=s(H);let U=require(`@mui/material/ListItemButton`);U=s(U);let W=require(`@mui/material/ListItemIcon`);W=s(W);let G=require(`@mui/material/Toolbar`);G=s(G);let ee=require(`common-tags`),K=require(`react-live`),q=require(`@mui/material/Skeleton`);q=s(q);let J=require(`@mui/material/TableCell`);J=s(J);let Y=require(`@mui/material/TableRow`);Y=s(Y);let te=require(`react-hook-form`),X=require(`@mui/material/Popover`);X=s(X);function ne({containerLabel:e,chipLabels:t}){return(0,g.jsx)(l.default,{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:(0,g.jsxs)(u.default,{children:[(0,g.jsx)(h.default,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),(0,g.jsx)(m.default,{spacing:1,children:t.map(e=>(0,g.jsx)(f.default,{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(0,g.jsx)(c.default,{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 ie(){return(0,g.jsxs)(l.default,{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:[(0,g.jsx)(d.default,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),(0,g.jsx)(p.default,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),(0,g.jsx)(u.default,{sx:{flex:1,display:`flex`,alignItems:`center`},children:(0,g.jsxs)(m.default,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[(0,g.jsx)(ne,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),(0,g.jsx)(re,{}),(0,g.jsx)(ne,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function ae({isInitiallyOpen:e,onOpen:t,onClose:n,children:r,buttonStyles:i,buttonContents:a,buttonComponent:o=_.default,collapseProps:s,openIcon:l=(0,g.jsx)(b.MdArrowDropUp,{}),closedIcon:u=(0,g.jsx)(b.MdArrowDropDown,{}),useDefaultStyling:d=o===_.default}){let[f,p]=(0,y.useState)(!!e);return(0,y.useEffect)(()=>{f&&t?t():!f&&n&&n()},[f]),(0,g.jsxs)(c.default,{children:[(0,g.jsxs)(o,{onClick:()=>{p(e=>!e)},sx:d?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":o===_.default?{backgroundColor:`action.hover`}:null,...i}:i,"aria-expanded":f,children:[a,f?l:u]}),(0,g.jsx)(v.default,{in:f,...s,children:r})]})}function oe({children:e,button:t=x.default,buttonChildren:n=`Menu`,buttonProps:r,isOpenIcon:i=(0,g.jsx)(b.MdArrowDropUp,{}),isClosedIcon:a=(0,g.jsx)(b.MdArrowDropDown,{}),onOpen:o,onClose:s}){let[l,u]=(0,y.useState)(null),d=(0,y.useMemo)(()=>!!l,[l]),f={...r,onClick:e=>{u(e.currentTarget)},"aria-controls":d?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":d};return t===x.default&&(f.endIcon=d?i:a),(0,y.useEffect)(()=>{d&&o?o():!d&&s&&s()},[d,o,s]),(0,g.jsxs)(c.default,{children:[(0,g.jsx)(t,{...f,children:n}),(0,g.jsx)(S.default,{id:`dropdown-menu`,anchorEl:l,open:d,onClose:()=>{u(null)},children:typeof e==`function`?(0,g.jsx)(c.default,{children:e(()=>{u(null)})}):e})]})}function se({href:e,children:t,ref:n,...r}){return(0,g.jsx)(C.default,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const ce={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`},le=(0,w.styled)(`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=(0,w.styled)(`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 de({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=(0,y.useState)(!1),c=(0,y.useId)(),l=(0,g.jsxs)(x.default,{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??(0,g.jsx)(b.MdCloudUpload,{}),children:[t,(0,g.jsx)(le,{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?(0,g.jsx)(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:l}):l}function fe({files:e,setFiles:t,multiple:n=!0,...r}){function i(e){t(t=>[...t,...e])}return(0,g.jsxs)(c.default,{children:[(0,g.jsx)(de,{...r,multiple:n,onFileInput:i}),(0,g.jsx)(E.default,{children:e.map(e=>(0,g.jsx)(D.default,{secondaryAction:(0,g.jsx)(T.default,{"aria-label":`Delete`,edge:`end`,onClick:()=>{t(t=>t.filter(t=>t!==e))},children:(0,g.jsx)(b.MdDelete,{})}),children:(0,g.jsx)(O.default,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function Z({to:e,component:t=k.Link,children:n,ref:r,...i}){return(0,g.jsx)(C.default,{component:t,to:e,ref:r,...i,children:n})}const pe=(0,y.createContext)(void 0);function Q({strict:e=!0}={}){let t=(0,y.useContext)(pe);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function me({children:e,button:t=x.default,buttonProps:n,openIcon:r=(0,g.jsx)(b.MdArrowDropUp,{}),closedIcon:i=(0,g.jsx)(b.MdArrowDropDown,{})}){let[a,o]=(0,y.useState)(null),s=(0,y.useMemo)(()=>!!a,[a]);function c(){o(null)}return(0,g.jsxs)(pe.Provider,{value:{closeMenu:c,isDropdownOpen:s},children:[(0,g.jsx)(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)}}),(0,g.jsx)(S.default,{anchorEl:a,open:s,onClose:c,children:e})]})}function he({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return(0,g.jsx)(j.default,{component:se,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function ge({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=Q();return(0,g.jsx)(j.default,{component:Z,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function _e({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Q();return(0,g.jsx)(j.default,{component:e??x.default,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ve=me;const ye=(0,y.createContext)(void 0);function be({strict:e=!0}={}){let t=(0,y.useContext)(ye);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function xe({children:e,loadingComponent:t=(0,g.jsx)(A.default,{}),...n}){return(0,g.jsx)(ye.Provider,{value:{loadingComponent:t,...n},children:e})}function Se({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=be(),c=t??a;return r?(0,g.jsx)(g.Fragment,{children:n??o}):s||i==null?(0,g.jsx)(g.Fragment,{}):c?typeof e==`function`?(0,g.jsx)(g.Fragment,{children:e(c(i))}):(0,g.jsx)(g.Fragment,{children:e}):typeof e==`function`?(0,g.jsx)(g.Fragment,{children:e(i)}):(0,g.jsx)(g.Fragment,{children:e})}function Ce({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:c,logError:l}=be(),u=i??l,d=(0,y.useRef)(!1),f=e??c;return s?(u&&!d.current&&(console.error(s),d.current=!0),typeof f==`function`?f(s):f?(0,g.jsx)(g.Fragment,{children:f}):(0,g.jsx)(M.default,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(u&&!d.current&&(console.error(`Data is nullable after loading.`),d.current=!0),(0,g.jsx)(g.Fragment,{children:r})):o===void 0&&(u&&!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),t)?(0,g.jsx)(g.Fragment,{children:t}):o===null&&(u&&!d.current&&(console.error(`Data is null after loading.`),d.current=!0),n)?(0,g.jsx)(g.Fragment,{children:n}):(0,g.jsx)(M.default,{severity:`error`,children:`Failed to load data. Please try again later.`}):(0,g.jsx)(g.Fragment,{})}var we=xe;const Te=(0,y.createContext)({toggleMode:()=>{},mode:`dark`});function $({strict:e=!0}={}){let t=(0,y.useContext)(Te);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Ee({children:e,mode:t=`dark`}){let[n,r]=(0,y.useState)(t),i=(0,y.useMemo)(()=>(0,w.createTheme)({palette:{mode:n}}),[n]);return(0,g.jsx)(Te.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:(0,g.jsxs)(w.ThemeProvider,{theme:i,children:[(0,g.jsx)(N.default,{}),e]})})}const De=(0,y.createContext)({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Oe({strict:e=!0}={}){let t=(0,y.useContext)(De);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function ke({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=(0,y.useState)(window.innerWidth),[a,o]=(0,y.useState)(window.innerHeight);(0,y.useEffect)(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=(0,y.useMemo)(()=>r>t&&a>n,[r,a,t,n]);return(0,g.jsx)(De.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const Ae=(0,y.createContext)(void 0);function je({strict:e=!0}={}){let t=(0,y.useContext)(Ae);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function Me({children:e,autoHideDuration:t=5e3}){let[n,r]=(0,y.useState)(!1),[i,a]=(0,y.useState)(t),[o,s]=(0,y.useState)(``),[c,l]=(0,y.useState)(`info`);function u(e,n,i){r(!0),a(i??t),l(n??`info`),s(e)}async function d(){r(!1),await(0,P.wait)(.2),s(``)}return(0,g.jsxs)(Ae.Provider,{value:{addSnackbar:u},children:[(0,g.jsx)(F.default,{open:n,autoHideDuration:i,onClose:d,children:(0,g.jsx)(M.default,{onClose:d,severity:c,children:o})}),e]})}function Ne({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=(0,g.jsx)(A.default,{}),...s}){return(0,g.jsxs)(we,{loadingComponent:o,...s,children:[(0,g.jsx)(Ce,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),(0,g.jsx)(Se,{children:e})]})}const Pe=(0,w.styled)(L.default)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Fe({checkedIcon:e,checkedIconStyles:t,uncheckedIcon:n,uncheckedIconStyles:r,...i}){let a={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},o={color:`black`,maxWidth:16.5,maxHeight:16.5};return(0,g.jsx)(Pe,{checkedIcon:(0,g.jsx)(c.default,{sx:a,children:(0,g.jsx)(e,{style:{...o,...t}})}),icon:(0,g.jsx)(c.default,{sx:a,children:(0,g.jsx)(n,{style:{...o,...r}})}),...i})}function Ie(){let{mode:e,toggleMode:t}=$(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return(0,g.jsx)(I.default,{title:r,children:(0,g.jsx)(Fe,{uncheckedIcon:b.MdOutlineLightMode,checkedIcon:b.MdOutlineDarkMode,checked:n,onChange:t,"aria-label":r})})}function Le({children:e,navItems:t}){let[n,r]=(0,y.useState)(``);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(c.default,{sx:{paddingBottom:7},children:e}),(0,g.jsx)(B.default,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:(0,g.jsx)(R.default,{showLabels:!0,value:n,onChange:(e,t)=>{r(t)},children:t.map(e=>(0,g.jsx)(z.default,{...e,component:k.Link},e.value))})})]})}function Re(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function ze(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 Be=(0,w.styled)(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Ve=(0,w.styled)(V.default,{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})}}]})),He=(0,w.styled)(H.default,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Re(e),"& .MuiDrawer-paper":Re(e)}},{props:({open:e})=>!e,style:{...ze(e),"& .MuiDrawer-paper":ze(e)}}]}));function Ue({title:e,navItems:t,children:n,headerElements:r}){let i=(0,w.useTheme)(),[a,o]=(0,y.useState)(!0),s=(0,k.useLocation)();function l(){o(!0)}function u(){o(!1)}return(0,g.jsxs)(c.default,{sx:{display:`flex`},children:[(0,g.jsx)(N.default,{}),(0,g.jsx)(Ve,{position:`fixed`,open:a,children:(0,g.jsxs)(G.default,{children:[(0,g.jsx)(T.default,{color:`inherit`,"aria-label":`open drawer`,onClick:l,edge:`start`,sx:[{marginRight:5},a&&{display:`none`}],children:(0,g.jsx)(b.MdMenu,{})}),(0,g.jsx)(h.default,{variant:`h6`,noWrap:!0,component:`div`,children:e}),r]})}),(0,g.jsxs)(He,{variant:`permanent`,open:a,children:[(0,g.jsx)(Be,{children:(0,g.jsx)(T.default,{onClick:u,children:i.direction===`rtl`?(0,g.jsx)(b.MdChevronRight,{}):(0,g.jsx)(b.MdChevronLeft,{})})}),(0,g.jsx)(p.default,{}),t.map(e=>(0,g.jsxs)(y.Fragment,{children:[(0,g.jsxs)(E.default,{children:[(0,g.jsx)(h.default,{variant:a?`h5`:`h6`,paddingLeft:a?2:1,children:a?e.category:(0,P.truncate)(e.category,4)}),e.options.map(e=>(0,g.jsx)(D.default,{disablePadding:!0,sx:{display:`block`},children:(0,g.jsxs)(U.default,{sx:[{minHeight:48,px:2.5},a?{justifyContent:`initial`}:{justifyContent:`center`}],component:k.Link,to:e.to,selected:s.pathname===e.to,children:[(0,g.jsx)(W.default,{sx:[{minWidth:0,justifyContent:`center`},a?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:a?null:(0,g.jsx)(h.default,{children:(0,P.truncate)(e.label,4)})}),(0,g.jsx)(O.default,{primary:e.label,sx:[a?{opacity:1}:{opacity:0}]})]})},e.to))]}),(0,g.jsx)(p.default,{})]},e.category))]}),(0,g.jsxs)(c.default,{component:`main`,sx:{flexGrow:1,p:3},children:[(0,g.jsx)(Be,{}),n]})]})}function We({title:e,subtitle:t,action:n,children:r}){return(0,g.jsxs)(l.default,{children:[(0,g.jsx)(d.default,{title:(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(h.default,{variant:`h6`,children:e}),t?(0,g.jsx)(h.default,{variant:`body2`,color:`text.secondary`,children:t}):null]}),action:n}),(0,g.jsx)(p.default,{}),(0,g.jsx)(u.default,{children:r})]})}function Ge({code:e,previewStyles:t,...n}){let{mode:r}=$(),i={backgroundColor:r===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},a=t?{...i,...t}:{...i};return(0,g.jsx)(c.default,{sx:{borderRadius:1,border:.5,padding:2},children:(0,g.jsxs)(K.LiveProvider,{...n,code:(0,ee.stripIndent)(e??``),children:[(0,g.jsx)(h.default,{variant:`h5`,children:`Code`}),(0,g.jsx)(c.default,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:(0,g.jsx)(K.LiveEditor,{})}),(0,g.jsx)(`br`,{}),(0,g.jsx)(h.default,{variant:`h5`,children:`Result`}),(0,g.jsxs)(c.default,{sx:a,children:[(0,g.jsx)(K.LivePreview,{}),(0,g.jsx)(K.LiveError,{})]})]})})}function Ke({columns:e}){return(0,g.jsx)(Y.default,{children:(0,P.fillArray)(e=>(0,g.jsx)(J.default,{children:(0,g.jsx)(q.default,{})},e),e)})}function qe({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=(0,te.useFormContext)();return(0,g.jsx)(x.default,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}const Je=Ie;function Ye({icon:e=b.MdVisibility,onOpen:t,onClose:n,iconProps:r,children:i}){let[a,o]=(0,y.useState)(null),s=!!a,l=(0,y.useId)();function u(e){o(e.currentTarget),t&&t()}function d(){o(null),n&&n()}return(0,g.jsxs)(c.default,{children:[(0,g.jsx)(e,{"aria-owns":s?l:void 0,"aria-haspopup":`true`,onMouseEnter:u,onMouseLeave:d,...r}),(0,g.jsx)(X.default,{id:l,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:s,anchorEl:a,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:d,disableRestoreFocus:!0,children:i})]})}function Xe({children:e,...t}){return(0,g.jsx)(U.default,{component:Z,...t,children:e})}function Ze({text:e,sx:t,...n}){return(0,g.jsx)(g.Fragment,{children:e.split(`
-`).map((e,r)=>(0,g.jsx)(h.default,{sx:{margin:1,...t},...n,children:e},r))})}function Qe(e){let[t,n]=(0,y.useState)(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=(0,y.useCallback)(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return(0,y.useEffect)(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,(0,y.useCallback)(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}exports.Artwork=ie,exports.CollapsableItem=ae,exports.DarkModeToggle=Je,exports.DropdownMenu=oe,exports.DropdownMenu2=ve,exports.DropdownMenuExternalLink=he,exports.DropdownMenuInternalLink=ge,exports.DropdownMenuItem=_e,exports.ExternalLink=se,exports.FileInput=de,exports.FileInputList=fe,exports.FileType=ce,exports.IconWithPopover=Ye,exports.InternalLink=Z,exports.ListItemInternalLink=Xe,exports.Loader=Ne,exports.LoaderData=Se,exports.LoaderError=Ce,exports.LoaderProvider=we,exports.ModeProvider=Ee,exports.ModeToggle=Ie,exports.NavigationBottom=Le,exports.NavigationDrawer=Ue,exports.Page=We,exports.PopoverText=Ze,exports.ReactPlayground=Ge,exports.ScreenSizeProvider=ke,exports.SkeletonRow=Ke,exports.SnackbarProvider=Me,exports.SubmitButton=qe,exports.SwitchWithIcons=Fe,exports.useDropdownMenu=Q,exports.useHash=Qe,exports.useMode=$,exports.useScreenSize=Oe,exports.useSnackbar=je;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`@mui/material/Box`);c=s(c);let l=require(`@mui/material/Card`);l=s(l);let u=require(`@mui/material/CardContent`);u=s(u);let d=require(`@mui/material/CardHeader`);d=s(d);let f=require(`@mui/material/Chip`);f=s(f);let p=require(`@mui/material/Divider`);p=s(p);let m=require(`@mui/material/Stack`);m=s(m);let h=require(`@mui/material/Typography`);h=s(h);let g=require(`react/jsx-runtime`),_=require(`@mui/material/ButtonBase`);_=s(_);let v=require(`@mui/material/Collapse`);v=s(v);let y=require(`react`),b=require(`react-icons/md`),x=require(`@mui/material/Link`);x=s(x);let S=require(`@mui/material/Button`);S=s(S);let C=require(`@mui/material/styles`),w=require(`@mui/material/IconButton`);w=s(w);let T=require(`@mui/material/List`);T=s(T);let E=require(`@mui/material/ListItem`);E=s(E);let D=require(`@mui/material/ListItemText`);D=s(D);let O=require(`react-router-dom`),k=require(`@mui/material/CircularProgress`);k=s(k);let A=require(`@alextheman/utility`),j=require(`@mui/material/Alert`);j=s(j);let M=require(`@mui/material/CssBaseline`);M=s(M);let N=require(`@mui/material/Snackbar`);N=s(N);let P=require(`@mui/material/Tooltip`);P=s(P);let F=require(`@mui/material/Switch`);F=s(F);let I=require(`@mui/material/BottomNavigation`);I=s(I);let L=require(`@mui/material/BottomNavigationAction`);L=s(L);let R=require(`@mui/material/Paper`);R=s(R);let z=require(`@mui/material/AppBar`);z=s(z);let B=require(`@mui/material/Drawer`);B=s(B);let V=require(`@mui/material/ListItemButton`);V=s(V);let H=require(`@mui/material/ListItemIcon`);H=s(H);let U=require(`@mui/material/Toolbar`);U=s(U);let ee=require(`common-tags`),W=require(`react-live`),G=require(`@mui/material/Skeleton`);G=s(G);let K=require(`@mui/material/TableCell`);K=s(K);let q=require(`@mui/material/TableRow`);q=s(q);let te=require(`react-hook-form`),J=require(`@mui/material/Menu`);J=s(J);let Y=require(`@mui/material/MenuItem`);Y=s(Y);let ne=require(`@tanstack/react-form`);require(`@mui/material/TextField`);let X=require(`@mui/material/Popover`);X=s(X);function re({containerLabel:e,chipLabels:t}){return(0,g.jsx)(l.default,{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:(0,g.jsxs)(u.default,{children:[(0,g.jsx)(h.default,{variant:`h6`,gutterBottom:!0,sx:{color:`#f8fafc`},children:e}),(0,g.jsx)(m.default,{spacing:1,children:t.map(e=>(0,g.jsx)(f.default,{label:e,sx:{backgroundColor:`rgba(255,255,255,0.11)`,color:`rgba(255,255,255,0.88)`,border:`1px solid rgba(255,255,255,0.06)`}},e))})]})})}function ie(){return(0,g.jsx)(c.default,{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 ae(){return(0,g.jsxs)(l.default,{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:[(0,g.jsx)(d.default,{title:`An Interface For You And I`,sx:{color:`#f8fafc`,textAlign:`center`,"& .MuiCardHeader-title":{fontSize:40,fontWeight:600,letterSpacing:2}}}),(0,g.jsx)(p.default,{sx:{borderColor:`rgba(255,255,255,0.2)`}}),(0,g.jsx)(u.default,{sx:{flex:1,display:`flex`,alignItems:`center`},children:(0,g.jsxs)(m.default,{direction:`row`,spacing:4,sx:{width:`100%`,justifyContent:`center`,alignItems:`center`},children:[(0,g.jsx)(re,{containerLabel:`You`,chipLabels:[`state`,`context`,`input`,`event`,`focus`,`value`,`history`]}),(0,g.jsx)(ie,{}),(0,g.jsx)(re,{containerLabel:`I`,chipLabels:[`render`,`effect`,`response`,`update`,`history`,`layout`,`provider`]})]})})]})}function oe({isInitiallyOpen:e,onOpen:t,onClose:n,children:r,buttonStyles:i,buttonContents:a,buttonComponent:o=_.default,collapseProps:s,openIcon:l=(0,g.jsx)(b.MdArrowDropUp,{}),closedIcon:u=(0,g.jsx)(b.MdArrowDropDown,{}),useDefaultStyling:d=o===_.default}){let[f,p]=(0,y.useState)(!!e);return(0,y.useEffect)(()=>{f&&t?t():!f&&n&&n()},[f]),(0,g.jsxs)(c.default,{children:[(0,g.jsxs)(o,{onClick:()=>{p(e=>!e)},sx:d?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":o===_.default?{backgroundColor:`action.hover`}:null,...i}:i,"aria-expanded":f,children:[a,f?l:u]}),(0,g.jsx)(v.default,{in:f,...s,children:r})]})}function se({href:e,children:t,ref:n,...r}){return(0,g.jsx)(x.default,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}const ce={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`},le=(0,C.styled)(`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=(0,C.styled)(`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 de({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=(0,y.useState)(!1),c=(0,y.useId)(),l=(0,g.jsxs)(S.default,{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??(0,g.jsx)(b.MdCloudUpload,{}),children:[t,(0,g.jsx)(le,{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?(0,g.jsx)(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:l}):l}function fe({files:e,setFiles:t,multiple:n=!0,...r}){function i(e){t(t=>[...t,...e])}return(0,g.jsxs)(c.default,{children:[(0,g.jsx)(de,{...r,multiple:n,onFileInput:i}),(0,g.jsx)(T.default,{children:e.map(e=>(0,g.jsx)(E.default,{secondaryAction:(0,g.jsx)(w.default,{"aria-label":`Delete`,edge:`end`,onClick:()=>{t(t=>t.filter(t=>t!==e))},children:(0,g.jsx)(b.MdDelete,{})}),children:(0,g.jsx)(D.default,{primary:e.name})},`${e.name}-${e.lastModified}`))})]})}function Z({to:e,component:t=O.Link,children:n,ref:r,...i}){return(0,g.jsx)(x.default,{component:t,to:e,ref:r,...i,children:n})}const pe=(0,y.createContext)(void 0);function me({strict:e=!0}={}){let t=(0,y.useContext)(pe);if(e&&!t)throw new A.DataError({strict:e,context:t},`LOADER_PROVIDER_NOT_FOUND`,`Could not find the LoaderProvider context. Please double-check that it is present.`);return t}function he({children:e,loadingComponent:t=(0,g.jsx)(k.default,{}),...n}){return(0,g.jsx)(pe.Provider,{value:{loadingComponent:t,...n},children:e})}function ge({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=me(),c=t??a;return r?(0,g.jsx)(g.Fragment,{children:n??o}):s||i==null?(0,g.jsx)(g.Fragment,{}):c?typeof e==`function`?(0,g.jsx)(g.Fragment,{children:e(c(i))}):(0,g.jsx)(g.Fragment,{children:e}):typeof e==`function`?(0,g.jsx)(g.Fragment,{children:e(i)}):(0,g.jsx)(g.Fragment,{children:e})}function _e({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:c,logError:l}=me(),u=i??l,d=(0,y.useRef)(!1),f=e??c;return s?(u&&!d.current&&(console.error(s),d.current=!0),typeof f==`function`?f(s):f?(0,g.jsx)(g.Fragment,{children:f}):(0,g.jsx)(j.default,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(u&&!d.current&&(console.error(`Data is nullable after loading.`),d.current=!0),(0,g.jsx)(g.Fragment,{children:r})):o===void 0&&(u&&!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),t)?(0,g.jsx)(g.Fragment,{children:t}):o===null&&(u&&!d.current&&(console.error(`Data is null after loading.`),d.current=!0),n)?(0,g.jsx)(g.Fragment,{children:n}):(0,g.jsx)(j.default,{severity:`error`,children:`Failed to load data. Please try again later.`}):(0,g.jsx)(g.Fragment,{})}var ve=he;const ye=(0,y.createContext)({toggleMode:()=>{},mode:`dark`});function Q({strict:e=!0}={}){let t=(0,y.useContext)(ye);if(e&&!t)throw new A.DataError({strict:e,context:t},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return t}function be({children:e,mode:t=`dark`}){let[n,r]=(0,y.useState)(t),i=(0,y.useMemo)(()=>(0,C.createTheme)({palette:{mode:n}}),[n]);return(0,g.jsx)(ye.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:(0,g.jsxs)(C.ThemeProvider,{theme:i,children:[(0,g.jsx)(M.default,{}),e]})})}const xe=(0,y.createContext)({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Se({strict:e=!0}={}){let t=(0,y.useContext)(xe);if(e&&!t)throw new A.DataError({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 Ce({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=(0,y.useState)(window.innerWidth),[a,o]=(0,y.useState)(window.innerHeight);(0,y.useEffect)(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=(0,y.useMemo)(()=>r>t&&a>n,[r,a,t,n]);return(0,g.jsx)(xe.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}const we=(0,y.createContext)(void 0);function Te({strict:e=!0}={}){let t=(0,y.useContext)(we);if(e&&!t)throw new A.DataError({strict:e,context:t},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return t}function Ee({children:e,autoHideDuration:t=5e3}){let[n,r]=(0,y.useState)(!1),[i,a]=(0,y.useState)(t),[o,s]=(0,y.useState)(``),[c,l]=(0,y.useState)(`info`);function u(e,n,i){r(!0),a(i??t),l(n??`info`),s(e)}async function d(){r(!1),await(0,A.wait)(.2),s(``)}return(0,g.jsxs)(we.Provider,{value:{addSnackbar:u},children:[(0,g.jsx)(N.default,{open:n,autoHideDuration:i,onClose:d,children:(0,g.jsx)(j.default,{onClose:d,severity:c,children:o})}),e]})}function De({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=(0,g.jsx)(k.default,{}),...s}){return(0,g.jsxs)(ve,{loadingComponent:o,...s,children:[(0,g.jsx)(_e,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),(0,g.jsx)(ge,{children:e})]})}const Oe=(0,C.styled)(F.default)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function ke({checkedIcon:e,checkedIconStyles:t,uncheckedIcon:n,uncheckedIconStyles:r,...i}){let a={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},o={color:`black`,maxWidth:16.5,maxHeight:16.5};return(0,g.jsx)(Oe,{checkedIcon:(0,g.jsx)(c.default,{sx:a,children:(0,g.jsx)(e,{style:{...o,...t}})}),icon:(0,g.jsx)(c.default,{sx:a,children:(0,g.jsx)(n,{style:{...o,...r}})}),...i})}function Ae(){let{mode:e,toggleMode:t}=Q(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return(0,g.jsx)(P.default,{title:r,children:(0,g.jsx)(ke,{uncheckedIcon:b.MdOutlineLightMode,checkedIcon:b.MdOutlineDarkMode,checked:n,onChange:t,"aria-label":r})})}function je({children:e,navItems:t}){let[n,r]=(0,y.useState)(``);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(c.default,{sx:{paddingBottom:7},children:e}),(0,g.jsx)(R.default,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:(0,g.jsx)(I.default,{showLabels:!0,value:n,onChange:(e,t)=>{r(t)},children:t.map(e=>(0,g.jsx)(L.default,{...e,component:O.Link},e.value))})})]})}function Me(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Ne(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 Pe=(0,C.styled)(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),Fe=(0,C.styled)(z.default,{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})}}]})),Ie=(0,C.styled)(B.default,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Me(e),"& .MuiDrawer-paper":Me(e)}},{props:({open:e})=>!e,style:{...Ne(e),"& .MuiDrawer-paper":Ne(e)}}]}));function Le({title:e,navItems:t,children:n,headerElements:r}){let i=(0,C.useTheme)(),[a,o]=(0,y.useState)(!0),s=(0,O.useLocation)();function l(){o(!0)}function u(){o(!1)}return(0,g.jsxs)(c.default,{sx:{display:`flex`},children:[(0,g.jsx)(M.default,{}),(0,g.jsx)(Fe,{position:`fixed`,open:a,children:(0,g.jsxs)(U.default,{children:[(0,g.jsx)(w.default,{color:`inherit`,"aria-label":`open drawer`,onClick:l,edge:`start`,sx:[{marginRight:5},a&&{display:`none`}],children:(0,g.jsx)(b.MdMenu,{})}),(0,g.jsx)(h.default,{variant:`h6`,noWrap:!0,component:`div`,children:e}),r]})}),(0,g.jsxs)(Ie,{variant:`permanent`,open:a,children:[(0,g.jsx)(Pe,{children:(0,g.jsx)(w.default,{onClick:u,children:i.direction===`rtl`?(0,g.jsx)(b.MdChevronRight,{}):(0,g.jsx)(b.MdChevronLeft,{})})}),(0,g.jsx)(p.default,{}),t.map(e=>(0,g.jsxs)(y.Fragment,{children:[(0,g.jsxs)(T.default,{children:[(0,g.jsx)(h.default,{variant:a?`h5`:`h6`,paddingLeft:a?2:1,children:a?e.category:(0,A.truncate)(e.category,4)}),e.options.map(e=>(0,g.jsx)(E.default,{disablePadding:!0,sx:{display:`block`},children:(0,g.jsxs)(V.default,{sx:[{minHeight:48,px:2.5},a?{justifyContent:`initial`}:{justifyContent:`center`}],component:O.Link,to:e.to,selected:s.pathname===e.to,children:[(0,g.jsx)(H.default,{sx:[{minWidth:0,justifyContent:`center`},a?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:a?null:(0,g.jsx)(h.default,{children:(0,A.truncate)(e.label,4)})}),(0,g.jsx)(D.default,{primary:e.label,sx:[a?{opacity:1}:{opacity:0}]})]})},e.to))]}),(0,g.jsx)(p.default,{})]},e.category))]}),(0,g.jsxs)(c.default,{component:`main`,sx:{flexGrow:1,p:3},children:[(0,g.jsx)(Pe,{}),n]})]})}function Re({title:e,subtitle:t,action:n,children:r}){return(0,g.jsxs)(l.default,{children:[(0,g.jsx)(d.default,{title:(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(h.default,{variant:`h6`,children:e}),t?(0,g.jsx)(h.default,{variant:`body2`,color:`text.secondary`,children:t}):null]}),action:n}),(0,g.jsx)(p.default,{}),(0,g.jsx)(u.default,{children:r})]})}function ze({code:e,previewStyles:t,...n}){let{mode:r}=Q(),i={backgroundColor:r===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},a=t?{...i,...t}:{...i};return(0,g.jsx)(c.default,{sx:{borderRadius:1,border:.5,padding:2},children:(0,g.jsxs)(W.LiveProvider,{...n,code:(0,ee.stripIndent)(e??``),children:[(0,g.jsx)(h.default,{variant:`h5`,children:`Code`}),(0,g.jsx)(c.default,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:(0,g.jsx)(W.LiveEditor,{})}),(0,g.jsx)(`br`,{}),(0,g.jsx)(h.default,{variant:`h5`,children:`Result`}),(0,g.jsxs)(c.default,{sx:a,children:[(0,g.jsx)(W.LivePreview,{}),(0,g.jsx)(W.LiveError,{})]})]})})}function Be({columns:e}){return(0,g.jsx)(q.default,{children:(0,A.fillArray)(e=>(0,g.jsx)(K.default,{children:(0,g.jsx)(G.default,{})},e),e)})}function Ve({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=(0,te.useFormContext)();return(0,g.jsx)(S.default,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}const He=Ae;function Ue({children:e,button:t=S.default,buttonChildren:n=`Menu`,buttonProps:r,isOpenIcon:i=(0,g.jsx)(b.MdArrowDropUp,{}),isClosedIcon:a=(0,g.jsx)(b.MdArrowDropDown,{}),onOpen:o,onClose:s}){let[l,u]=(0,y.useState)(null),d=(0,y.useMemo)(()=>!!l,[l]),f={...r,onClick:e=>{u(e.currentTarget)},"aria-controls":d?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":d};return t===S.default&&(f.endIcon=d?i:a),(0,y.useEffect)(()=>{d&&o?o():!d&&s&&s()},[d,o,s]),(0,g.jsxs)(c.default,{children:[(0,g.jsx)(t,{...f,children:n}),(0,g.jsx)(J.default,{id:`dropdown-menu`,anchorEl:l,open:d,onClose:()=>{u(null)},children:typeof e==`function`?(0,g.jsx)(c.default,{children:e(()=>{u(null)})}):e})]})}const We=(0,y.createContext)(void 0);function Ge({strict:e=!0}={}){let t=(0,y.useContext)(We);if(e&&!t)throw new A.DataError({strict:e,context:t},`DROPDOWN_MENU_NOT_FOUND`,`Could not find the DropdownMenu context. Please double-check that it is present.`);return t}function Ke({children:e,button:t=S.default,buttonProps:n,openIcon:r=(0,g.jsx)(b.MdArrowDropUp,{}),closedIcon:i=(0,g.jsx)(b.MdArrowDropDown,{})}){let[a,o]=(0,y.useState)(null),s=(0,y.useMemo)(()=>!!a,[a]);function c(){o(null)}return(0,g.jsxs)(We.Provider,{value:{closeMenu:c,isDropdownOpen:s},children:[(0,g.jsx)(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)}}),(0,g.jsx)(J.default,{anchorEl:a,open:s,onClose:c,children:e})]})}function qe({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=Ge();return(0,g.jsx)(Y.default,{component:e,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var Je=Ke;const{fieldContext:Ye,formContext:Xe,useFieldContext:Ze,useFormContext:Qe}=(0,ne.createFormHookContexts)(),$=Ge,$e=Je,et=qe;var tt=$e;function nt({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=$();return(0,g.jsx)(Y.default,{component:se,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function rt({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=$();return(0,g.jsx)(Y.default,{component:Z,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}function it({icon:e=b.MdVisibility,onOpen:t,onClose:n,iconProps:r,children:i}){let[a,o]=(0,y.useState)(null),s=!!a,l=(0,y.useId)();function u(e){o(e.currentTarget),t&&t()}function d(){o(null),n&&n()}return(0,g.jsxs)(c.default,{children:[(0,g.jsx)(e,{"aria-owns":s?l:void 0,"aria-haspopup":`true`,onMouseEnter:u,onMouseLeave:d,...r}),(0,g.jsx)(X.default,{id:l,disablePortal:!0,disableScrollLock:!0,slotProps:{root:{disableEnforceFocus:!0,disableAutoFocus:!0,disableRestoreFocus:!0}},sx:{pointerEvents:`none`},open:s,anchorEl:a,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:d,disableRestoreFocus:!0,children:i})]})}function at({children:e,...t}){return(0,g.jsx)(V.default,{component:Z,...t,children:e})}function ot({text:e,sx:t,...n}){return(0,g.jsx)(g.Fragment,{children:e.split(`
+`).map((e,r)=>(0,g.jsx)(h.default,{sx:{margin:1,...t},...n,children:e},r))})}function st(e){let[t,n]=(0,y.useState)(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=(0,y.useCallback)(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return(0,y.useEffect)(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,(0,y.useCallback)(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}exports.Artwork=ae,exports.CollapsableItem=oe,exports.DarkModeToggle=He,exports.DropdownMenu=Ue,exports.DropdownMenu2=tt,exports.DropdownMenuExternalLink=nt,exports.DropdownMenuInternalLink=rt,exports.DropdownMenuItem=et,exports.ExternalLink=se,exports.FileInput=de,exports.FileInputList=fe,exports.FileType=ce,exports.IconWithPopover=it,exports.InternalLink=Z,exports.ListItemInternalLink=at,exports.Loader=De,exports.LoaderData=ge,exports.LoaderError=_e,exports.LoaderProvider=ve,exports.ModeProvider=be,exports.ModeToggle=Ae,exports.NavigationBottom=je,exports.NavigationDrawer=Le,exports.Page=Re,exports.PopoverText=ot,exports.ReactPlayground=ze,exports.ScreenSizeProvider=Ce,exports.SkeletonRow=Be,exports.SnackbarProvider=Ee,exports.SubmitButton=Ve,exports.SwitchWithIcons=ke,exports.useDropdownMenu=$,exports.useHash=st,exports.useMode=Q,exports.useScreenSize=Se,exports.useSnackbar=Te;
 //# sourceMappingURL=index.cjs.map