@maker-ui/layout - npm Package Compare versions

Comparing version 1.0.0-beta.10 to 1.0.0-beta.11

dist/components/Footer.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
  * The `Footer` component stores important site information, links, and widgets at
- * the bottom of your layout. It is not compatible with workspace layouts.
+ * the bottom of your layout.
  *
@@ -14,0 +14,0 @@ * @link https://maker-ui.com/docs/layout/footer

dist/components/index.d.ts

@@ -13,7 +13,5 @@ export { Layout } from './Layout';
 export { ColorButton } from './Navbar/ColorButton';
-export { CollapsibleMenu, MenuProps } from './Menu';
+export { CollapsibleMenu, MenuItemProps, MakerMenu } from './Menu';
 export { ErrorBoundary } from './Errors/ErrorBoundary';
-export { Workspace, PanelButton, useWorkspace } from './Workspace';
-export { Dock } from './Dock';
 export { Template } from './Template';
 export * from '../types';

dist/components/Menu/CollapsibleMenu.d.ts

 /// <reference types="react" />
 /** @jsx jsx */
 import { MakerProps } from '@maker-ui/css';
-import { MenuProps } from './MenuItem';
+import { MenuItemProps } from './MenuItem';
 interface CollapsibleProps extends MakerProps, React.HTMLAttributes<HTMLUListElement> {
-    menu: MenuProps[];
+    menu: MenuItemProps[];
     menuType?: 'mobile' | 'sideNav' | string;
@@ -8,0 +8,0 @@ pathname?: string;

dist/components/Menu/index.d.ts

 export { CollapsibleMenu } from './CollapsibleMenu';
 export { ExpandButton } from './ExpandButton';
 export { MenuButton } from './MenuButton';
-export { MenuProps, MenuItem } from './MenuItem';
+export { MakerMenu, MenuItemProps, MenuItem } from './MenuItem';
 export { NavMenu } from './NavMenu';

dist/components/Menu/MenuItem.d.ts

 /// <reference types="react" />
 import { MakerOptions } from '../../types';
-export interface MenuProps {
+export interface MenuItemProps {
     label: string;
@@ -9,7 +9,8 @@ path: string;
     newTab?: boolean;
-    submenu?: MenuProps[];
+    submenu?: MenuItemProps[];
     openNested?: boolean;
 }
-interface MenuItemProps {
-    data: MenuProps;
+export declare type MakerMenu = MenuItemProps[];
+interface MenuInternalProps {
+    data: MenuItemProps;
     caret?: MakerOptions['header']['dropdown']['caret'];
@@ -29,3 +30,3 @@ menuControls?: any;
  */
-export declare const MenuItem: import("react").MemoExoticComponent<({ data: { label, path, newTab, submenu, openNested, classes, icon, }, caret, menuControls, pathname, isHeader, linkFunction, depth, }: MenuItemProps) => JSX.Element>;
+export declare const MenuItem: import("react").MemoExoticComponent<({ data: { label, path, newTab, submenu, openNested, classes, icon, }, caret, menuControls, pathname, isHeader, linkFunction, depth, }: MenuInternalProps) => JSX.Element>;
 export {};

dist/components/Menu/NavMenu.d.ts

@@ -1,4 +0,4 @@
-import { MenuProps } from './MenuItem';
+import { MenuItemProps } from './MenuItem';
 interface NavMenuProps {
-    menuItems?: MenuProps[];
+    menuItems?: MenuItemProps[];
     pathname?: string;
@@ -5,0 +5,0 @@ }

dist/components/MobileMenu.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { MakerOptions } from '../types';
-import { MenuProps } from './Menu';
+import { MenuItemProps } from './Menu';
 interface MobileMenuProps extends MakerProps, React.HTMLAttributes<HTMLDivElement> {
@@ -11,3 +11,3 @@ transition?: MakerOptions['mobileMenu']['transition'];
     width?: ResponsiveScale;
-    menu?: MenuProps[];
+    menu?: MenuItemProps[];
     center?: boolean;
@@ -14,0 +14,0 @@ pathname?: string;

dist/components/Navbar/ColorButton.d.ts

@@ -11,5 +11,2 @@ import { ButtonProps } from '@maker-ui/primitives';
  *
- * @todo - Find a way to (efficiently) sync multiple instances of ColorButton without using
- * an app provider
- *
  * @link https://maker-ui.com/docs/layout/buttons/#colorButton
@@ -16,0 +13,0 @@ */

dist/components/Navbar/index.d.ts

 import * as React from 'react';
 import { MakerProps, ResponsiveScale } from '@maker-ui/css';
 import { MakerOptions } from '../../types';
-import { MenuProps } from '../Menu';
+import { MenuItemProps } from '../Menu';
 export interface NavProps extends MakerProps {
@@ -9,3 +9,3 @@ type?: MakerOptions['header']['navType'];
     logo?: React.ReactElement | string;
-    menu?: MenuProps[];
+    menu?: MenuItemProps[];
     colorButton?: MakerOptions['header']['colorButton'];
@@ -19,6 +19,8 @@ menuButton?: MakerOptions['header']['menuButton'];
     className?: string;
+    id?: string;
 }
 /**
  * The `Navbar` component renders your layout's primary navigation in one of
- * 8 conventional styles or you can fully customize it with the `grid` prop.
+ * 8 common styles or you can fully customize it with the `navArea`, `logoArea`, and
+ * `menuArea` props.
  *
@@ -25,0 +27,0 @@ * @link https://maker-ui.com/components/layout/navbar

dist/components/SideNav.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { MakerOptions } from '../types';
-import { MenuProps } from './Menu';
+import { MenuItemProps } from './Menu';
 export interface SideNavProps extends MakerProps, React.HTMLAttributes<HTMLDivElement> {
@@ -11,3 +11,3 @@ background?: string | string[];
     toggleButton?: MakerOptions['sideNav']['toggleButton'];
-    menu?: MenuProps[];
+    menu?: MenuItemProps[];
     pathname?: string;
@@ -14,0 +14,0 @@ header?: React.ReactElement;

dist/components/Template.d.ts

 import * as React from 'react';
 import { MakerOptions } from '../types';
-import { MenuProps } from './Menu';
+import { MakerMenu } from './Menu';
 import { navTypes, contentTypes } from '../constants';
@@ -14,3 +14,3 @@ interface TemplateProps {
     logo?: React.ReactElement;
-    menu: MenuProps[];
+    menu: MakerMenu;
     mobileMenu?: string;
@@ -17,0 +17,0 @@ navType?: typeof navTypes[number];

dist/constants.d.ts

 /**
  * All configurations for `<Content>` layouts.
  */
-export declare const contentTypes: readonly ["content sidebar", "content sidenav", "content", "sidebar content", "sidebar content sidebar", "sidenav content", "dock workspace", "workspace", "workspace dock", "page-transition"];
+export declare const contentTypes: readonly ["content sidebar", "content sidenav", "content", "sidebar content", "sidebar content sidebar", "sidenav content", "page-transition"];
 /**
- * All configurations for `<Workspace>` layouts.
- */
-export declare const workspaceTypes: readonly ["panel canvas panel", "panel canvas", "canvas panel", "canvas", "toolbar panel canvas panel", "toolbar panel canvas", "toolbar canvas panel", "toolbar canvas"];
-/**
  * All configurations for `<Navbar>` layouts.
@@ -11,0 +7,0 @@ */

dist/context/ActionContext.d.ts

@@ -31,8 +31,2 @@ import * as React from 'react';
 declare function useSideNav(): [boolean, () => void];
-/**
- * Returns the current state and a toggle function for the left or right `Workspace.Panel`
- *
- * @link https://maker-ui.com/hooks/#usePanel
- */
-declare function usePanel(panel: 'left' | 'right'): [boolean, () => void];
-export { ActionProvider, useMenu, useSideNav, usePanel };
+export { ActionProvider, useMenu, useSideNav };

dist/context/LayoutContext.d.ts

 import * as React from 'react';
-import { contentTypes, workspaceTypes, navTypes, mobileNavTypes } from '../constants';
-export declare type LayoutString<T> = T extends 'content' ? typeof contentTypes[number] : T extends 'workspace' ? typeof workspaceTypes[number] : T extends 'nav' ? typeof navTypes[number] : typeof mobileNavTypes[number];
+import { contentTypes, navTypes, mobileNavTypes } from '../constants';
+export declare type LayoutString<T> = T extends 'content' ? typeof contentTypes[number] : T extends 'nav' ? typeof navTypes[number] : typeof mobileNavTypes[number];
 export interface LayoutState {
@@ -8,6 +8,6 @@ layout_nav: typeof navTypes[number];
     layout_content: typeof contentTypes[number];
-    layout_workspace: typeof workspaceTypes[number];
     height_header: number;
     height_topbar: number;
     height_toolbar: number;
+    colorTheme: string;
 }
@@ -27,2 +27,4 @@ interface LayoutProviderProps {
  *
+ * @todo clean up / optimize color mode logic. Fix default color mode
+ *
  * @internal usage only
@@ -32,7 +34,7 @@ */
 /**
- * Retrieves and allows you to edit the current nav, content, and workspace layout
+ * Retrieves and allows you to edit the current nav, and content layout
  *
  * @link https://maker-ui.com/hooks/#useLayout
  */
-declare function useLayout<T extends 'content' | 'workspace' | 'nav' | 'mobileNav'>(type: T): [LayoutString<T>, (layout: LayoutString<T>) => void];
+declare function useLayout<T extends 'content' | 'nav' | 'mobileNav'>(type: T): [LayoutString<T>, (layout: LayoutString<T>) => void];
 /**
@@ -51,10 +53,15 @@ * Fetches Maker UI's key layout measurements
  *
- * Currently used in the `Workspace` and `Content` wrapper components
+ * Currently used in the `Content` wrapper components
  *
  * @internal usage only
  */
-declare function useLayoutDetector<T extends 'content' | 'workspace', K extends React.ReactNode>(type: T, children: K): {
+declare function useLayoutDetector<T extends 'content', K extends React.ReactNode>(type: T, children: K): {
     layout: LayoutString<T>;
     showError: boolean;
 };
-export { LayoutProvider, useMeasurements, useLayout, useLayoutDetector };
+declare function useColorTheme(): {
+    colorTheme: string | undefined;
+    setColorTheme: (theme: string) => void;
+    colors: string[];
+};
+export { LayoutProvider, useMeasurements, useLayout, useColorTheme, useLayoutDetector, };

dist/hooks/useMakerUI.d.ts

@@ -1,6 +0,3 @@
-import { useMenu, useSideNav } from '../context/ActionContext';
 export declare function useMakerUI(): {
     options: import("..").MakerOptions;
-    useMenu: typeof useMenu;
-    useSideNav: typeof useSideNav;
 };

dist/hooks/useScrollPosition.d.ts

@@ -17,2 +17,2 @@ /**
     currPos: number;
-}) => void, wait: number, active: boolean): void;
+}) => void, wait: number, active?: boolean): void;

dist/index.d.ts

@@ -0,5 +1,8 @@
+import useMeasure from 'react-use-measure';
 export * from './components';
 export { useMakerUI } from './hooks/useMakerUI';
 export { useScrollPosition } from './hooks/useScrollPosition';
-export { useMeasure } from './hooks/useMeasure';
-export { generateId, mergeSelector } from './utils/helper';
+export { useMenu, useSideNav } from './context/ActionContext';
+export { generateId, mergeSelectors } from './utils/helper';
+export * from './types';
+export { useMeasure };

dist/layout.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(require("deepmerge")),a=require("@emotion/react"),r=require("@maker-ui/css"),o=require("@maker-ui/primitives"),i=e(require("resize-observer-polyfill")),s={fonts:{body:"sans-serif",heading:"sans-serif",monospace:"monospace"},breakpoints:["768px","960px","1440px"],colors:{light:{link:"red",link_hover:"green",text:"#333",background:"#ffffff",primary:"#1858dc",secondary:"#355cac",accent:"#1858dc",muted:"#f6f6f6",border:"#e6e6e6",bg_topbar:"#355cac",bg_header:"#ffffff",bg_mobileMenu:"black",bg_sideNav:"#eee",bg_footer:"#d3d3d3",bg_toolbar:"#fbfbfb"}},useColorDefaults:!0,useMeasurementDefaults:!0,variables:{},topbar:{maxWidth:1260,hideOnMobile:!1,breakpoint:0},header:{navType:"basic",mobileNavType:"basic",maxWidth:1460,sticky:!1,stickyOnMobile:!1,stickyUpScroll:!1,hideColorButtonOnMobile:!1,hideWidgetsOnMobile:!0,menuOverflow:"wrap",dropdown:{caret:"default",transition:"fade"},breakpoint:0},mobileMenu:{width:"60vw",transition:"slide-left",cssTransition:"all ease 0.3s",visibleOnDesktop:!1,showCloseButton:!0,closeOnBlur:!0,closeOnRouteChange:!1},sideNav:{width:[250,300],isHeader:!1,isPrimaryMobileNav:!1,showToggleOnMobile:!0,toggleButton:"default",closeOnBlur:!0,closeOnRouteChange:!0,cssTransition:"transform ease 0.3s",breakpoint:0},content:{maxWidth:1020,maxWidthSection:1020,sidebarGap:30,deferMeasurements:0,breakpoint:0},sidebar:{width:300,secondWidth:200},footer:{maxWidth:1020},a11y:{skiplinks:!0},errors:{showStackTrace:!1},workspace:{canvasMaxWidth:"100%",breakpoint:0,panelLeft:{width:".25fr",collapseWidth:0},panelRight:{width:".25fr",collapseWidth:0},dock:{width:50,hideOnMobile:!0,breakpoint:0}}},l=t.createContext({}),c=t.createContext((function(){}));function u(e,t){return n(e,t,{arrayMerge:function(e,t,n){return t}})}var d=function(e){var n=e.options,a=e.children,r=t.useState(u(function(e){var t=s;return e||(t.colors={}),t}(!1!==(null==n?void 0:n.useColorDefaults)),n)),o=r[0],i=r[1];return t.useEffect((function(){i((function(e){return u(e,n)}))}),[n]),t.createElement(l.Provider,{value:o},t.createElement(c.Provider,{value:i},a))};function m(){var e=t.useContext(l);if(void 0===e)throw new Error("useOptions must be used within an Maker UI Layout component");return e}function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t.indexOf(n=o[a])>=0||(r[n]=e[n]);return r}function f(e,t){switch(t.type){case"MENU":return p({},e,{menuActive:!e.menuActive});case"SIDENAV":return p({},e,{sideNavActive:!e.sideNavActive});case"PANEL-LEFT":return p({},e,{leftPanelActive:!e.leftPanelActive});case"PANEL-RIGHT":return p({},e,{rightPanelActive:!e.rightPanelActive});default:throw new Error("Unhandled action type.")}}var b=t.createContext({}),h=t.createContext((function(){})),g=function(e){var n=e.children,a=t.useReducer(f,{menuActive:!1,sideNavActive:!1,leftPanelActive:!0,rightPanelActive:!0,toolbarActive:!0});return t.createElement(b.Provider,{value:a[0]},t.createElement(h.Provider,{value:a[1]},n))};function y(){var e=t.useContext(b).menuActive,n=t.useContext(h);if(void 0===typeof e)throw new Error("useMenu must be used within an Maker UI layout");return[e,function(){n({type:"MENU"})}]}function k(){var e=t.useContext(b).sideNavActive,n=t.useContext(h);if(void 0===typeof e)throw new Error("useSideNav must be used within an Maker UI layout");return[e,function(){n({type:"SIDENAV"})}]}var x=function(e,t){return"string"==typeof e?[e]:e<t.length?[t[e]]:[e]},w=function(e){return isNaN(e)?e:e+"px"},E=["fade","fade-up","fade-down"],N=function(e,t,n){var a=t.includes("fade")?e?1:0:1,r=e?"visible":"hidden",o=t.includes("right")?{right:0,width:n,transform:e?null:"translateX(100%)"}:{left:0,width:n,transform:e?null:"translateX(-100%)"},i=E.includes(t)?p({width:"100%",left:0},"fade"!==t?{transform:e?null:"translateY("+("fade-up"===t?"":"-")+"20px)"}:null):o;return p({opacity:a,visibility:r},i)};function j(e,t){return e.length>1?t?[e,t].join(" ").replace(/ +(?= )/g,"").trim():e:t||void 0}var _={"*":{boxSizing:"border-box"},body:{margin:0,fontFamily:"var(--font-body)",color:"var(--color-text)",backgroundColor:"var(--color-background)"},"h1, h2, h3, h4, h5, h6":{fontFamily:"var(--font-heading)"},"code, pre":{fontFamily:"var(--font-monospace)"},"b, strong":{fontWeight:"bold"},a:{color:"var(--color-link)","&:hover":{color:"var(--color-link_hover)"}}},M=["content sidebar","content sidenav","content","sidebar content","sidebar content sidebar","sidenav content","dock workspace","workspace","workspace dock","page-transition"],C=["panel canvas panel","panel canvas","canvas panel","canvas","toolbar panel canvas panel","toolbar panel canvas","toolbar canvas panel","toolbar canvas"],O=t.createContext({state:{},setState:function(){}}),A=function(e){var a=e.styles,o=void 0===a?{}:a,i=e.children,l=m(),c=t.useState({layout_nav:l.header.navType,layout_navMobile:l.header.mobileNavType,layout_content:"content",layout_workspace:"canvas",height_header:0,height_topbar:0,height_toolbar:0}),u=c[0],d=c[1];t.useEffect((function(){d((function(e){return p({},e,{layout_nav:l.header.navType,layout_navMobile:l.header.mobileNavType})}))}),[l]),t.useEffect((function(){document.body.dataset.theme=Object.keys(l.colors)[0]||"light"}),[]);var v=n(function(e){var t=Object.keys(e),n={};return t.forEach((function(t){for(var a,r="body[data-theme='"+t+"']",o=((a={})[r]={},a),i=0,s=Object.entries(e[t]);i<s.length;i++){var l=s[i];o[r]["--color-"+l[0]]=l[1]}n=p({},n,o)})),n}(l.colors),function(e){for(var t,a,r,o,i,l=n(s,e,{arrayMerge:function(e,t,n){return t}}),c=l.breakpoints,u=l.fonts,d=l.topbar,m=l.header,p=l.mobileMenu,v=l.variables,f=l.content,b=l.sidebar,h=l.sideNav,g=l.footer,y=l.workspace,k=c.map((function(e){return"@media(min-width: "+w(e)+")"})),x={},E={},N=0,j=Object.entries(v);N<j.length;N++){var _=j[N];E["--"+_[0]]=_[1]}function M(e){for(var t=function(){var e=r[a],t=e[0],o=e[1];if(o)if(Array.isArray(o)){var i={};i[t]=w(o[0]),o.forEach((function(e,n){var a;0!==n&&(i[k[n]]=((a={})[t]=w(e),a))})),x=n(x,i)}else x[t]=w(o)},a=0,r=Object.entries(e);a<r.length;a++)t()}M({"--maxWidth_header":null==m?void 0:m.maxWidth,"--maxWidth_topbar":null==d?void 0:d.maxWidth,"--maxWidth_content":null==f?void 0:f.maxWidth,"--maxWidth_section":null==f?void 0:f.maxWidthSection,"--maxWidth_footer":null==g?void 0:g.maxWidth,"--maxWidth_workspace":null==y?void 0:y.canvasMaxWidth,"--width_mobileMenu":null==p?void 0:p.width,"--width_sidebar":null==b?void 0:b.width,"--width_second_sidebar":null==b?void 0:b.secondWidth,"--width_sideNav":null==h?void 0:h.width,"--width_dock":null===(t=y.dock)||void 0===t?void 0:t.width,"--width_panel_left":null===(a=y.panelLeft)||void 0===a?void 0:a.width,"--width_panel_left_collapse":null===(r=y.panelLeft)||void 0===r?void 0:r.collapseWidth,"--width_panel_right":null===(o=y.panelRight)||void 0===o?void 0:o.width,"--width_panel_right_collapse":null===(i=y.panelRight)||void 0===i?void 0:i.collapseWidth,"--gap_content":null==f?void 0:f.sidebarGap}),M(E);for(var C=0,O=Object.entries(u);C<O.length;C++){var A=O[C];x["--font-"+A[0]]=A[1]}return x["--breakpoints"]=c.join(","),{html:x}}(l));return t.createElement(O.Provider,{value:{state:u,setState:d}},t.createElement(r.Global,{styles:v}),t.createElement(r.Global,{styles:_}),t.createElement(r.Global,{styles:o}),i)};function T(e){var n=t.useContext(O),a=n.state,r=n.setState;if(void 0===a)throw new Error("useLayout must be used within a Maker UI Layout component");function o(t){r((function(n){var a;return p({},n,((a={})["layout_"+e]=t,a))}))}return"workspace"===e?[a.layout_workspace,o]:"nav"===e?[a.layout_nav,o]:"mobileNav"===e?[a.layout_navMobile,o]:[a.layout_content,o]}function S(){var e=t.useContext(O),n=e.state,a=e.setState;if(void 0===n)throw new Error("useMeasurement must be used within an Maker UI Layout component");return{measurements:n,setMeasurement:function(e,t){a((function(n){var a;return p({},n,((a={})["height_"+e]=t,a))}))}}}function B(e,n){var a=T(e),r=a[0],o=a[1],i=t.useState(!1),s=i[0],l=i[1];return t.useEffect((function(){if(n){var a=function(e,n){if("string"==typeof n)return"unknown";var a,r=t.Children.toArray(n);return r?(a=r.map((function(e){return e.type.displayName?e.type.displayName.toLowerCase():"unknown"})).join(" "),("content"===e?a.replace("main","content"):a).replace(/fixed|provider|context/g,"").replace(/ {2,}/g," ").trim()):"unknown"}(e,n);("content"===e?M.find((function(e){return e===a})):C.find((function(e){return e===a})))?r!==a&&o(a):l(!0)}}),[r,o,e,n]),{layout:r,showError:s}}var W=function(e){var t=m().a11y,n=T("content"),a=[];return a=e.links?e.links:[{id:"#content",label:"Skip to content"},{id:"#footer",label:"Skip to footer"}],n[0].includes("sidenav")&&a.splice(1,0,{id:"#sidenav",label:"Skip to side navigation"}),t.skiplinks?r.jsx("ul",{className:"skiplinks",css:{listStyle:"none",position:"relative",zIndex:1e3,padding:0,margin:0,a:{background:"var(--color-bg_header)",display:"block",position:"absolute",fontFamily:"body",left:-9999,padding:"1em","&:focus":{left:0}}}},a.map((function(e){var t=e.id;return r.jsx("li",{key:t},r.jsx("a",{href:t},e.label))}))):null};W.displayName="Skiplinks";var P=function(e){return t.createElement(o.SVG,Object.assign({viewBox:"0 0 512 512"},e),t.createElement("path",{d:"M256 0C114.497 0 0 114.507 0 256c0 141.503 114.507 256 256 256 141.503 0 256-114.507 256-256C512 114.497 397.493 0 256 0zm0 472c-119.393 0-216-96.615-216-216 0-119.393 96.615-216 216-216 119.393 0 216 96.615 216 216 0 119.393-96.615 216-216 216z"}),t.createElement("path",{d:"M256 128.877c-11.046 0-20 8.954-20 20V277.67c0 11.046 8.954 20 20 20s20-8.954 20-20V148.877c0-11.046-8.954-20-20-20z"}),t.createElement("circle",{cx:"256",cy:"349.16",r:"27"}))},R=function(e){var n=e.showStackTrace,a=e.errorInfo;return t.createElement(o.Div,{className:"error-boundary"},t.createElement(P,{css:{height:30}}),t.createElement("div",null,"There was an issue loading this section of the app.",t.createElement(o.Span,{css:{marginLeft:"5px",cursor:"pointer",color:"var(--color-primary)"},onClick:function(){var e;return null===(e=window)||void 0===e?void 0:e.location.reload()}},"Try reloading the page.")),n?t.createElement(o.Div,{css:{details:{paddingLeft:"20px",whiteSpace:"pre"},summary:{cursor:"pointer"}}},t.createElement("details",{className:"error-details"},t.createElement("summary",null,"Click for error details"),a?a.componentStack.toString():null)):null)},I=["Main","SideNav","Sidebar","Workspace","Dock","PageTransition"],F=function(){return t.createElement(o.Div,{css:{margin:"150px auto",maxWidth:600,fontSize:"20px",lineHeight:1.5,"li, span":{padding:"0 8px",fontFamily:"monospace",backgroundColor:"var(--color-muted)",fontSize:"18px",borderRadius:3,border:"1px solid gainsboro"}}},t.createElement(o.Flex,{inline:!0,align:"center",justify:"center",css:{width:"100%",padding:"20px",mb:"30px",background:"var(--color-muted)",strong:{marginRight:"20px"}}},t.createElement(P,{css:{height:35,marginRight:"10px"}}),t.createElement("strong",null,"Error")," Invalid layout configuration."),t.createElement(o.Div,null,t.createElement("p",null,"The ",t.createElement("span",null,"Content")," component only accepts the following direct children:"),t.createElement(o.UList,{css:{columns:2,margin:"50px 0 35px",li:{marginBottom:"10px",width:"min-content"}}},I.map((function(e,n){return t.createElement("li",{key:n},e)}))),t.createElement("p",null,"If your custom child component has fixed positioning or is a Provider, you can still use it here by assigning the component a"," ",t.createElement("strong",null,"displayName")," of 'Fixed', 'Provider', or 'Context'."),t.createElement("p",null,t.createElement("a",{href:"https://maker-ui.com/docs/content",target:"_blank",rel:"noreferrer"},"See the docs")," ","for a complete list of layout configurations.")))},L=function(e){var n,a;function r(){var t;return(t=e.apply(this,arguments)||this).state={error:"",errorInfo:"",hasError:!1},t}a=e,(n=r).prototype=Object.create(a.prototype),n.prototype.constructor=n,n.__proto__=a,r.getDerivedStateFromError=function(e){return{error:e,hasError:!0}};var o=r.prototype;return o.componentDidCatch=function(e,t){var n=this.props.logFunction||this.context.errors.logFunction||!1;n&&n(e,t,this.props.errorKey),this.setState({errorInfo:t})},o.render=function(){return this.state.hasError?this.props.errorMessage||this.context.errors.errorMessage[""+this.props.errorKey]?this.context.errors.errorMessage[""+this.props.errorKey]:t.createElement(R,{showStackTrace:this.context.errors.errorMessage.showStackTrace,errorInfo:this.state.errorInfo}):this.props.children},r}(t.Component);L.contextType=l;var D=function(e){var r=e.options,o=e.styles,i=e.theme,s=void 0===i?{}:i,l=e.skiplinks,c=e.children;return t.createElement(a.ThemeProvider,{theme:r.breakpoints?n(s,{breakpoints:r.breakpoints}):s},t.createElement(d,{options:r},t.createElement(A,{styles:o},t.createElement(g,null,t.createElement(W,{links:l}),t.createElement(L,{errorKey:"layout"},c)))))};function H(e){var n=(null==e?void 0:e.observe)||!0,a=(null==e?void 0:e.contentRect)||!1,r=null==e?void 0:e.ref,o=null==e?void 0:e.documentResize,s=(null==e?void 0:e.timeout)||0,l=t.useRef(null),c=r||l,u=t.useState({top:0,bottom:0,left:0,right:0,width:0,height:0,documentTop:0}),d=u[0],m=u[1],p=t.useState((function(){return new i((function(e){var t,n,r=e[0],i=o?null===(t=c.current)||void 0===t?void 0:t.getBoundingClientRect():a?r.contentRect:null===(n=r.target)||void 0===n?void 0:n.getBoundingClientRect(),s=i.top,l="undefined"!=typeof window?s+document.documentElement.scrollTop:0;m({top:s,bottom:i.bottom,left:i.left,right:i.right,width:i.width,height:i.height,documentTop:l})}))}))[0];return t.useEffect((function(){if(n)return c.current&&setTimeout((function(){p.observe(o?document.querySelector("body"):c.current)}),s),function(){return p.disconnect()}}),[n,c,p,o,s]),[{ref:c},d]}D.displayName="MakerUI_Layout";var z=function(e){var n=m(),a=n.topbar,o=n.breakpoints,i=H({observe:T("content")[0].includes("workspace")}),s=i[0],l=i[1].height,c=S().setMeasurement;t.useEffect((function(){0!==l&&c("topbar",l)}),[l]);var u=e.id,d=e.background,f=void 0===d?"var(--color-bg_topbar)":d,b=e.maxWidth,h=void 0===b?"var(--maxWidth_topbar)":b,g=e.sticky,y=void 0===g?a.sticky:g,k=e.stickyOnMobile,w=void 0===k?a.stickyOnMobile:k,E=e.scrollOverflow,N=void 0!==E&&E,_=e.className,M=e._css,C=e.css,O=e.children,A=v(e,["id","background","maxWidth","sticky","stickyOnMobile","scrollOverflow","className","_css","css","children"]),B=y?w?"sticky":["relative","sticky"]:!y&&w?["sticky","relative"]:void 0;return r.jsx("aside",Object.assign({},s,{id:j("topbar",u),className:_,breakpoints:x(a.breakpoint,o),css:p({background:f,top:0,zIndex:101,position:B,display:a.hideOnMobile?["none","block"]:["block"]},M)}),r.jsx("div",Object.assign({className:"container",css:p({margin:"0 auto",overflowX:N?"scroll":void 0,whiteSpace:N?"nowrap":void 0,maxWidth:h},C)},A),r.jsx(L,{errorKey:"topbar"},O)))};z.displayName="Topbar";var K="undefined"!=typeof window;function U(){if(!K)return 0;var e=document.body.getBoundingClientRect();return Math.abs(e.top)}function G(e,n,a){var r=t.useRef(U());t.useEffect((function(){if(a&&K){var t,o=function(){var n=U();e({prevPos:r.current,currPos:n}),r.current=n,t=void 0},i=function(){n?void 0===t&&(t=setTimeout(o,n)):o()};return window.addEventListener("scroll",i),function(){return window.removeEventListener("scroll",i)}}}),[e,n,a])}var V=function(e){var n=t.useState(""),a=n[0],o=n[1],i=t.useState(!0),s=i[0],l=i[1],c=t.useState(!0),u=c[0],d=c[1],f=T("content")[0],b=S(),h=b.measurements,g=b.setMeasurement,y=m(),k=y.framework,w=y.header,E=y.topbar,N=y.breakpoints,_=!!w.scrollClass,M=H({observe:f.includes("workspace")}),C=M[0],O=M[1].height;t.useEffect((function(){0!==O&&g("header",O)}),[O]),t.useEffect((function(){l(!1)}),[]);var A=e.absolute,B=void 0===A?w.absolute:A,W=e.background,P=void 0===W?"var(--color-bg_header)":W,R=e.sticky,I=void 0===R?w.sticky:R,F=e.stickyOnMobile,D=void 0===F?w.stickyOnMobile:F,z=e.stickyUpScroll,K=void 0===z?w.stickyUpScroll:z,U=e.className,V=e.css,q=e.children,Y=v(e,["absolute","background","sticky","stickyOnMobile","stickyUpScroll","className","css","children"]);G((function(e){var t=e.currPos,n=t>e.prevPos,a=t>500;a||u||d(!0),a&&n&&u&&d(!1),!a||n||u||d(!0)}),350,K),G((function(e){if(_){var t=w.scrollClass,n=e.currPos>t.scrollTop?t.className:"";n!==a&&o(n)}}),0,_);var X=function(){return E.sticky&&!E.stickyOnMobile?[0,h.height_topbar]:E.sticky&&E.stickyOnMobile?h.height_topbar:!E.sticky&&E.stickyOnMobile?[h.height_topbar,0]:0},J=B?"fixed":"sticky",Q=B?"absolute":"relative",Z=[a,K&&!u?"scroll-active":""].join(" ");return r.jsx("header",Object.assign({},C,{className:j(Z,U),role:"banner",breakpoints:x(w.breakpoint,N),css:p({background:P,zIndex:100,width:B?"100%":void 0,visibility:"gatsby"===k&&s?"hidden":void 0},K?{position:J,top:X(),transition:"transform .3s ease-in","&.scroll-active":{transform:"translateY(-100%)"}}:I?{top:X(),position:D?[J]:[Q,J]}:!I&&D?{top:X(),position:[J,Q]}:{position:Q},V)},Y),r.jsx(L,{errorKey:"header"},q))};V.displayName="Header";var q=function(e){var n=e.children,a=m().linkFunction,r={id:"site-logo","aria-label":"Home page"};return a?a("/",n,r):t.createElement(o.Link,Object.assign({href:"/"},r,{css:{display:"inline-flex"}}),n)};q.displayName="Logo";var Y=function(e){var n=e.isHeaderButton,a=e.customButton,r=e.breakpoints,i=e.className,s=e.css,l=v(e,["isHeaderButton","customButton","breakpoints","className","css"]),c=m(),u=c.header,d=c.colors,f=c.breakpoints,b=t.useState(Object.keys(d)[0]||"light"),h=b[0],g=b[1],y=d?Object.keys(d):["light"];t.useEffect((function(){document.body.dataset.theme=h}),[h]);var k=p({title:"Color Mode",className:j("color-button",i),"aria-label":"Toggle Color Mode",onClick:function(){var e=y.indexOf(h);g(y[(e+1)%y.length])},breakpoints:n?x(u.breakpoint,f):r},l),w=a||u.colorButton;return 1===y.length?null:n&&u.showColorButton||!n?"function"==typeof w?w(h,k):t.createElement(o.Button,Object.assign({},k,{css:p({display:n&&u.hideColorButtonOnMobile?["none","block"]:["block"]},s)}),w||h):null};Y.displayName="ColorButton";var X=function(e){var n=e.show,a=e.set;return t.createElement(o.Button,{title:"Expand Section",className:"submenu-toggle","aria-expanded":n?"true":"false","aria-label":"Expand Section",onClick:function(){return a(!n)},css:{border:"none",background:"transparent"}},t.createElement(o.SVG,{viewBox:"0 0 16 16",width:"12",height:"12",css:{transition:"transform ease .2s",transformOrigin:"50% 55%",transform:n?"rotate(180deg)":void 0}},t.createElement("path",{stroke:"currentcolor",strokeWidth:"2",fill:"none",d:"M14 6 L8 12 L2 6"})))};X.displayName="ExpandButton";var J={opacity:1,visibility:"visible"},Q={transition:"all ease .3s"},Z=function(e){switch(e){case"scale":return{transform:"scale(1, 1)",li:{opacity:1,transition:"opacity ease-in-out .2s .2s"}};case"fade-down":case"fade-up":return p({},J,{transform:"translateY(0)"});case"fade":default:return J}},$={display:"inline-block",background:"var(--color-bg_header)",width:"max-content",opacity:0,visibility:"hidden",margin:0,padding:0,zIndex:1,listStyle:"none",a:{width:"100%"},li:{display:"block"}},ee=function(e){switch(e){case"scale":return p({},J,{transform:"scale(1, 0)",transformOrigin:"0 0",transition:"transform ease-in-out .25s",li:{opacity:0,transition:"opacity .03s ease-in-out"}});case"fade-up":return p({},Q,{transform:"translateY(10px)"});case"fade-down":return p({},Q,{transform:"translateY(-10px)"});case"fade":return p({},Q,{transform:"translateY(0)"});default:return{}}},te={position:"absolute",top:"99%",left:0},ne={position:"fixed",height:"100%",left:"100%",top:0},ae=function(e,t,a){return e?n.all([$,0===a?te:ne,ee(t)],{arrayMerge:function(e,t,n){return t}}):{}},re={content:'""',display:"inline-block",width:0,height:0,marginLeft:".4em",verticalAlign:".25em",borderTop:".25em solid",borderRight:".25em solid transparent",borderLeft:".25em solid transparent"},oe=t.memo((function(e){var n=e.data,a=n.label,i=n.path,s=n.newTab,l=n.submenu,c=n.openNested,u=void 0!==c&&c,d=n.classes,v=void 0===d?"":d,f=n.icon,b=e.caret,h=void 0!==b&&b,g=e.menuControls,y=e.pathname,k=e.isHeader,x=void 0!==k&&k,w=e.linkFunction,E=e.depth,N=void 0===E?0:E,_=m().header,M=t.useState(u),C=M[0],O=M[1],A="submenu depth-"+N,T=p({className:y===i?"current":void 0,target:s&&"_blank",rel:s&&"noopener noreferrer","aria-label":f&&a,"aria-haspopup":l&&"true","aria-current":y===i&&"page"},g);return r.jsx("li",{className:j("menu-item",v),css:x?{position:"relative",display:"inline-flex","&:focus-within > .submenu, &:hover > .submenu":p({},Z(_.dropdown.transition)),"> a .menu-text:after":l&&"default"===h&&re}:void 0},r.jsx(ie,{condition:!(x||!l),wrapper:function(e){return r.jsx("div",{css:{display:"flex"}},e)}},r.jsx(t.Fragment,null,w?w(i,a,T,f):r.jsx(o.Link,Object.assign({href:i},T),f?r.jsx("span",{className:"menu-icon"},f):void 0,r.jsx("span",{className:"menu-text"},a),l&&h&&t.isValidElement(h)?h:null),!x&&l?r.jsx(X,{set:O,show:C}):null)),l&&r.jsx(t.Fragment,null,x||!x&&C?r.jsx("ul",{className:A,role:"menu","aria-label":"submenu",css:p({},ae(x,_.dropdown.transition,N))},l.map((function(e,t){return r.jsx(oe,{key:t,data:e,caret:h,menuControls:g,pathname:y,isHeader:x,depth:N+1})}))):null))}));oe.displayName="MenuItem";var ie=function(e){var t=e.children;return e.condition?(0,e.wrapper)(t):t},se=t.forwardRef((function(e,t){var n=e.menu,a=void 0===n?[]:n,o=e.menuType,i=e.pathname,s=e.className,l=e.css,c=v(e,["menu","menuType","pathname","className","css"]),u=m(),d=u.mobileMenu,f=u.sideNav,b=u.linkFunction,h=y()[1],g=k()[1],x=function(){if("mobile"===o&&d.closeOnRouteChange)return{onClick:function(){return h()}};if("undefined"!=typeof window&&"sideNav"===o&&f.closeOnRouteChange){var e=document.getElementById("sidenav");if(!window||!e)return;return{onClick:"fixed"===window.getComputedStyle(e,"").position?function(){return g()}:void 0}}};return r.jsx("ul",Object.assign({ref:t,className:j("collapse-menu",s),role:"navigation",css:p({},l)},c),a.map((function(e,t){return r.jsx(oe,{key:t,data:e,menuControls:x(),pathname:i,linkFunction:b})})))}));se.displayName="CollapsibleMenu";var le=function(e){var n=e.customButton,a=e.visibleOnDesktop,r=e.isCloseButton,i=e.className,s=e.css,l=v(e,["customButton","visibleOnDesktop","isCloseButton","className","css"]),c=y(),u=c[0],d=c[1],f=k(),b=f[0],h=f[1],g=m(),w=g.header,E=g.sideNav,N=g.breakpoints,_=n||(null==w?void 0:w.menuButton),M=a?"block":["block","none"],C=null!=E&&E.isPrimaryMobileNav?{"aria-expanded":!!b,onClick:h}:{"aria-expanded":!!u,onClick:d},O=p({title:"Menu",className:j("menu-button",i),"aria-label":"Toggle Menu"},C,l);return"function"==typeof _?_(E.isPrimaryMobileNav?b:u,O):t.createElement(o.Button,Object.assign({},O,{breakpoints:x(null==w?void 0:w.breakpoint,N),css:p({display:M,margin:0,border:"none",background:"none",svg:{margin:"0 auto"}},s)}),_||t.createElement(o.SVG,{viewBox:"0 0 24 24",css:{display:"block",height:r?35:27}},t.createElement("path",r?{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}:{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"})))};le.displayName="MenuButton";var ce=function(e){var t=e.menuItems,n=void 0===t?[]:t,a=e.pathname,o=m(),i=o.header,s=o.linkFunction;return r.jsx("nav",{className:"nav-primary",role:"navigation",breakpoints:x(i.breakpoint,o.breakpoints),css:{display:["none","flex"]}},r.jsx("ul",{className:"menu-primary"},n.map((function(e,t){var n;return r.jsx(oe,{key:t,data:e,caret:null===(n=i.dropdown)||void 0===n?void 0:n.caret,pathname:a,linkFunction:s,isHeader:!0})}))))};ce.displayName="NavMenu";var ue=function(e){var t=e.content,n=m(),a=n.header;return t?r.jsx("div",{className:"widget-area",breakpoints:a?x(a.breakpoint,n.breakpoints):void 0,css:{display:null!=a&&a.hideWidgetsOnMobile?["none","flex"]:"flex"}},t):null};ue.displayName="WidgetArea";var de={basic:{areas:'"logo menu nav"',columns:"auto 1fr auto",navArea:"flex-start",menuArea:"flex-end"},"basic-left":{areas:'"logo menu nav"',columns:"auto 1fr auto",navArea:"flex-start",menuArea:"flex-start"},"basic-center":{areas:'"logo menu nav"',columns:"auto 1fr auto",navArea:"flex-start",menuArea:"center"},center:{areas:'"logo logo" "menu nav"',columns:"1fr",navArea:"flex-start",menuArea:"center"},split:{areas:'"menu-split logo menu nav"',columns:"1fr auto 1fr",navArea:"flex-start",menuArea:!1},reverse:{areas:'"menu logo nav"',columns:"1fr auto 1fr",navArea:"flex-end",menuArea:!1},minimal:{areas:'"logo nav"',columns:"auto 1fr",navArea:"flex-end",menuArea:!1},"minimal-left":{areas:'"button logo nav"',columns:"auto auto 1fr",navArea:"flex-end",menuArea:!1},"minimal-center":{areas:'"button logo nav"',columns:"1fr auto 1fr",navArea:"flex-end",menuArea:!1}},me={basic:{areas:'"logo nav"',columns:"auto 1fr",navArea:"flex-end"},"basic-menu-left":{areas:'"button logo nav"',columns:"auto auto 1fr",navArea:"flex-end"},"logo-center":{areas:'"button logo nav"',columns:"1fr auto 1fr",navArea:"flex-end"},"logo-center-alt":{areas:'"nav logo button"',columns:"1fr auto 1fr",navArea:"flex-start"}};function pe(e,t){return{gridTemplateAreas:[me[t].areas,de[e].areas],gridTemplateColumns:[me[t].columns,de[e].columns],gridTemplateRows:["1fr","center"!==e?"1fr":"1fr 1fr"],gap:0,".nav-area":p({},ve(e),{justifyContent:[me[t].navArea,de[e].navArea]}),".menu-area":{justifyContent:de[e].menuArea?de[e].menuArea:void 0},".menu-area.split":{justifyContent:"flex-end"},"&.layout-center .logo-area":{justifyContent:"center"},"&.layout-minimal, &.layout-minimal-left, &.layout-minimal-center":{".menu-area":{display:"none"}},"&.layout-minimal-center .button-area":{justifyContent:"flex-start"},"&.m-layout-logo-center-alt .button-area":{justifyContent:["flex-end","flex-start"]}}}function ve(e){return["center","split"].includes(e)?{position:["relative","absolute"],top:0,right:0,height:"100%"}:void 0}var fe=["minimal-left","minimal-center"],be=["basic-menu-left","logo-center","logo-center-alt"],he=function(e){var n=m(),a=n.header,r=n.mobileMenu,i=n.breakpoints,s=T("nav"),l=s[0],c=s[1],u=T("mobileNav"),d=u[0],v=u[1],f=x(a.breakpoint,i),b=e.type,h=e.mobileType,g=e.logo,y=void 0===g?"Logo":g,k=e.menu,w=e.logoArea,E=e.navArea,N=e.menuArea,_=e.menuButton,M=e.colorButton,C=e.maxWidth,O=void 0===C?"var(--maxWidth_header)":C,A=e.className,S=e.css,B=k&&Math.ceil(k.length/2);t.useEffect((function(){void 0!==b&&b!==l&&c(b),void 0!==h&&h!==d&&v(h)}),[b,h,l,d,c,v]);var W="scroll"===a.menuOverflow?{".menu-area":{overflowX:"scroll",whiteSpace:"nowrap"}}:void 0;return t.createElement(o.Grid,{className:j("nav-grid layout-"+l+" m-layout-"+d,A),breakpoints:f,css:p({maxWidth:O,margin:"0 auto",position:"relative"},pe(l,d),W,S)},fe.includes(l)||be.includes(d)?t.createElement(o.Flex,{align:"center",className:"button-area",breakpoints:f,css:{gridArea:"button",display:[be.includes(d)?"flex":"none",fe.includes(l)?"flex":"none"]}},t.createElement(le,{breakpoints:f,customButton:_,visibleOnDesktop:!0})):null,"split"===l?t.createElement(o.Flex,{align:"center",className:"menu-area split",breakpoints:f,css:{gridArea:"menu-split",display:["none","flex"]}},N?null:t.createElement(ce,{menuItems:null==k?void 0:k.slice(0,B)})):null,t.createElement(o.Flex,{align:"center",className:"logo-area",css:{gridArea:"logo"}},w||t.createElement(q,null,y)),t.createElement(o.Flex,{align:"center",className:"menu-area",breakpoints:f,css:{gridArea:"menu",display:["none","flex"]}},N||t.createElement(ce,{menuItems:"split"===l?null==k?void 0:k.slice(B):k})),t.createElement(o.Flex,{align:"center",className:"nav-area",css:{gridArea:"nav"}},t.createElement(ue,{content:E}),t.createElement(le,{customButton:_,breakpoints:f,css:{display:[be.includes(d)?"none":"block","minimal"===l||r.visibleOnDesktop?"block":"none"]}}),t.createElement(Y,{isHeaderButton:!0,customButton:M})))};he.displayName="Navbar";var ge=function(e){return r.jsx("div",{className:"menu-overlay"+(e.show?" active":""),role:"button",onClick:e.toggle,css:{position:"fixed",top:0,left:0,right:0,bottom:0,background:"rgba(0, 0, 0, 0.15)",zIndex:100,willChange:"opacity",transition:"all ease .4s",visibility:"hidden",opacity:0,"&.active":{visibility:"visible",opacity:1}}})};ge.displayName="Overlay";var ye=t.forwardRef((function(e,n){var a=y(),o=a[0],i=a[1],s=m().mobileMenu,l=e.id,c=e.background,u=void 0===c?"var(--color-bg_mobileMenu)":c,d=e.center,f=e.closeButton,b=void 0===f?s.closeButton:f,h=e.closeButtonPosition,g=void 0===h?"top-right":h,k=e.width,x=void 0===k?"var(--width_mobileMenu)":k,w=e.transition,_=void 0===w?s.transition:w,M=e.menu,C=void 0===M?[]:M,O=e.pathname,A=e.header,T=e.footer,S=e.className,B=e.css,W=e.children,P=v(e,["id","background","center","closeButton","closeButtonPosition","width","transition","menu","pathname","header","footer","className","css","children"]),R=d?{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column"}:void 0,I=g.includes("right")?{right:0}:{left:0},F=g.includes("top")?{top:0}:{bottom:0};return r.jsx(t.Fragment,null,s.closeOnBlur&&!E.includes(_)?r.jsx(ge,{show:o,toggle:i}):null,r.jsx("div",Object.assign({ref:n,id:j("mobile-menu",l),className:j(o?"active":"",S),css:p({position:"fixed",background:u,top:0,bottom:0,zIndex:100,willChange:"transform, opacity",transition:s.cssTransition},N(o,_,x),R,B)},P),r.jsx(L,{errorKey:"mobileMenu"},s.showCloseButton||b?r.jsx(le,{customButton:b,isCloseButton:!0,css:p({position:"absolute"},F,I)}):null,A||null,W||r.jsx(se,{menu:C,menuType:"mobile",pathname:O}),T||null)))}));ye.displayName="MobileMenu";var ke=function(e){var n=e.id,a=e.children,o=e.css,i=v(e,["id","children","css"]),s=t.useState(!0),l=s[0],c=s[1],u=m(),d=u.framework,f=u.content,b=u.sideNav,h=u.breakpoints,g=B("content",a),y=g.layout,k=g.showError;t.useEffect((function(){c(!1)}),[]);var w=function(e){var t,n,a=S().measurements,r=m(),o=r.topbar,i=r.header,s=r.sideNav,l=r.workspace;if(e&&e.includes("sidebar"))return p({display:"grid",gap:"var(--gap_content)",maxWidth:"var(--maxWidth_content)",margin:"0 auto",minHeight:"80vh"},"sidebar content"===e?{".sidebar":{gridRow:[2,"auto"]}}:"sidebar content sidebar"===e?{".sidebar:first-of-type":{gridRow:[2,"auto"]}}:null,{gridTemplateColumns:["1fr",(t="var(--width_sidebar)","sidebar content"===e?t+" 1fr":"sidebar content sidebar"===e?t+" 1fr var(--width_second_sidebar)":"content sidebar"===e?"1fr "+t:null)]});if(e&&e.includes("sidenav")){var c=function(){var e=i.sticky?a.height_header:0;return o.sticky&&(e+=a.height_topbar),e};return{display:"flex","#sidenav":{position:["fixed","relative"],zIndex:[101,0],top:0,bottom:0,width:"var(--width_sideNav)",right:"content sidenav"===e&&0,left:"sidenav content"===e&&0,willChange:"transform",transform:"translateX(0)",transition:s.isHeader||0!==a.height_header?s.cssTransition:null,"&.hide":{transform:["translateX("+("sidenav content"===e?"calc(-1 * var(--width_sideNav))":"var(--width_sideNav)")+")","none"]},"> .container":{position:"sticky",top:[0,c()],height:"calc(100vh - "+c()+"px)",overflowY:"auto"}},"#content":{maxWidth:"var(--maxWidth_content)",margin:"0 auto"},"#toggle-sidenav":{right:"sidenav content"===e&&30,left:"content sidenav"===e&&30}}}return e&&e.includes("workspace")?{display:"flex","#workspace":{flex:1},"#dock":{width:"var(--width_dock)",display:null!==(n=l.dock)&&void 0!==n&&n.hideOnMobile?["none","block"]:["block"]}}:{display:"block",maxWidth:"var(--maxWidth_content)",margin:"0 auto"}}(y),E=y.includes("sidenav")?b.breakpoint:f.breakpoint;return r.jsx("div",Object.assign({id:j("site-inner",n),breakpoints:x(E,h),css:p({position:"relative",visibility:"gatsby"===d&&l?"hidden":void 0},w,o)},i),k?r.jsx(F,null):r.jsx(L,{errorKey:"content"},a))};ke.displayName="Content";var xe=function(e){var t=e.id,n=e.background,a=e.css,o=e.children,i=v(e,["id","background","css","children"]);return r.jsx("main",Object.assign({id:j("content",t),role:"main",css:p({background:n,position:"relative",flex:1},a)},i),r.jsx(L,{errorKey:"main"},o))};xe.displayName="Main";var we=function(e){var t=e.isHeader,n=v(e,["isHeader"]);return r.jsx(t?"header":"div",Object.assign({},n))},Ee=function(e){var t=e.id,n=e.background,a=void 0===n?"var(--color-bg_sideNav)":n,i=e.toggleButton,s=e.menu,l=e.pathname,c=e.header,u=e.footer,d=e.className,f=e._css,b=e.css,h=e.children,g=v(e,["id","background","toggleButton","menu","pathname","header","footer","className","_css","css","children"]),y=k(),w=y[0],E=y[1],N=m(),_=N.sideNav,M=i||_.toggleButton,C={id:"toggle-sidenav",title:"Toggle side navigation","aria-label":"Toggle side navigation",onClick:E,breakpoints:x(_.breakpoint,N.breakpoints)};return r.jsx(L,{errorKey:"sideNav"},_.closeOnBlur?r.jsx(ge,{show:w,toggle:E}):null,r.jsx(we,Object.assign({isHeader:_.isHeader,id:j("sidenav",t),className:j(w?"":"hide",d),css:p({background:a},f)},g),r.jsx("div",{className:"container",css:b},c||null,h||null,s?r.jsx(se,{menu:s,menuType:"sideNav",pathname:l}):null,u||null)),"function"==typeof M?M(w,C):_.showToggleOnMobile?r.jsx(o.Button,Object.assign({},C,{css:{position:"fixed",display:["inline-block","none"],bottom:30,zIndex:100}}),"default"===M?w?"close":"open":M):null)};Ee.displayName="SideNav";var Ne=function(e){var t=e.background,n=e.className,a=e.css,o=e.children,i=v(e,["background","className","css","children"]);return r.jsx("div",Object.assign({className:j("sidebar",n),role:"complementary",css:p({background:t},a)},i),r.jsx(L,{errorKey:"sidebar"},o))};Ne.displayName="Sidebar";var je=function(e){var t=e.id,n=e.maxWidth,a=void 0===n?"var(--maxWidth_footer)":n,o=e.background,i=void 0===o?"var(--color-bg_footer)":o,s=e._css,l=e.css,c=e.children,u=v(e,["id","maxWidth","background","_css","css","children"]);return r.jsx("footer",Object.assign({id:j("footer",t),role:"contentinfo",css:p({background:i},s)},u),r.jsx("div",{className:"container",css:p({display:"flex",maxWidth:a,margin:"0 auto"},l)},r.jsx(L,{errorKey:"footer"},c)))};je.displayName="Footer";var _e=t.forwardRef((function(e,t){var n=e.maxWidth,a=void 0===n?"var(--maxWidth_section)":n,o=e.background,i=e.color,s=e.container,l=void 0===s||s,c=e.id,u=e.className,d=e._css,m=e.css,f=e.children,b=v(e,["maxWidth","background","color","container","id","className","_css","css","children"]),h=l?d:p({},d,m);return r.jsx("section",{ref:t,id:c,className:u,css:p({background:o,color:i,width:"100%"},h)},r.jsx(L,{errorKey:"section"},l?r.jsx("div",Object.assign({className:"container",css:p({maxWidth:a,margin:"0 auto"},m)},b),f):f))}));_e.displayName="Section";var Me=t.createContext({}),Ce=t.createContext((function(){})),Oe=function(e){var n=e.children,a=t.useState({});return t.createElement(Me.Provider,{value:a[0]},t.createElement(Ce.Provider,{value:a[1]},n))},Ae=function(e){var t=p({display:"grid",gridGap:0,".workspace-panel, .workspace-canvas, .workspace-toolbar":{overflow:"hidden"},".workspace-container":{height:"100%",overflowY:"scroll"},".workspace-canvas":{gridArea:"c"}},function(e){return e.includes("panel canvas panel")?{".panel:last-of-type":{gridArea:"panel2"}}:null}(e));switch(e){case"toolbar canvas":return p({},t,{gridTemplateRows:["1fr","auto 1fr"],gridTemplateAreas:'"t" "c"'});case"toolbar panel canvas":return p({},t,{gridTemplateRows:["1fr","auto 1fr"],gridTemplateAreas:'\n        "toolbar toolbar"\n        "panel canvas"\n        '});case"toolbar canvas panel":return p({},t,{gridTemplateAreas:'\n          "toolbar toolbar"\n          "canvas panel"\n          '});case"toolbar panel canvas panel":return p({},t,{gridTemplateRows:["1fr","auto 1fr"],gridTemplateAreas:'\n        "toolbar toolbar toolbar"\n        "panel canvas panel2"\n        '});case"canvas panel":return p({},t,{gridTemplateRows:"1fr",gridTemplateAreas:'"canvas panel"'});case"panel canvas panel":return p({},t,{gridTemplateRows:"1fr",gridTemplateAreas:'"panel canvas panel2"'});case"panel canvas":default:return p({},t,{gridTemplateRows:"1fr",gridTemplateAreas:'"panel canvas"'})}},Te=function(e){var t=e.background,n=void 0===t?"var(--color-background)":t,a=e._css,o=e.css,i=e.children,s=v(e,["background","_css","css","children"]);return r.jsx("div",Object.assign({className:"ws-canvas",css:p({background:n,gridArea:"canvas"},a)},s),r.jsx(L,{errorKey:"canvas"},r.jsx("div",{className:"container",css:o},i)))};Te.displayName="Canvas";var Se=function(e){var n=e.background,a=void 0===n?"var(--color-bg_toolbar)":n,o=e.css,i=e.children,s=v(e,["background","css","children"]),l=S().setMeasurement,c=H(),u=c[0],d=c[1].height;return t.useEffect((function(){0!==d&&l("toolbar",d)}),[d]),r.jsx("div",Object.assign({},u,{className:"ws-toolbar",css:p({background:a,gridArea:"toolbar",overflowX:"scroll"},o)},s),r.jsx(L,{errorKey:"toolbar"},i))};Se.displayName="Toolbar";var Be=function(e){var n=e.background,a=void 0===n?"var(--color-bg_panel)":n,o=e.css,i=e.children,s=v(e,["background","css","children"]),l=S().setMeasurement,c=H(),u=c[0],d=c[1].height;return t.useEffect((function(){0!==d&&l("toolbar",d)}),[d]),r.jsx("div",Object.assign({},u,{className:"ws-panel",css:p({background:a,gridArea:"panel"},o)},s),r.jsx(L,{errorKey:"toolbar"},i))};Be.displayName="Panel";var We=function(e){var t=e.css,n=e.children,a=m(),o=a.workspace,i=a.breakpoints,s=B("workspace",n),l=s.layout,c=s.showError;return r.jsx(Oe,null,r.jsx("div",{id:"workspace",breakpoints:x(o.breakpoint,i),css:p({},Ae(l),t)},c?"Error!":n))};We.Canvas=Te,We.Toolbar=Se,We.Panel=Be,We.displayName="Workspace";var Pe=function(){return t.createElement("div",{id:"dock"},"Dock")};Pe.displayName="Dock";var Re=function(e){var n=e.sideNav,a=e.sidebar,r=e.sidebarTwo,o=e.menu,i=e.children;switch(e.layout){case"content sidebar":return t.createElement(ke,null,t.createElement(xe,null,i),t.createElement(Ne,null,a));case"sidebar content":return t.createElement(ke,null,t.createElement(Ne,null,a),t.createElement(xe,null,i));case"sidebar content sidebar":return t.createElement(ke,null,t.createElement(Ne,null,a),t.createElement(xe,null,i),t.createElement(Ne,null,r));case"content sidenav":return t.createElement(ke,null,t.createElement(xe,null,i),t.createElement(Ee,{menu:o,toggleButton:n[1],pathname:n[2]},n[0]));case"sidenav content":return t.createElement(ke,null,t.createElement(Ee,{menu:o,toggleButton:n[1],pathname:n[2]},n[0]),t.createElement(xe,null,i));default:return t.createElement(ke,null,t.createElement(xe,null,i))}};exports.CollapsibleMenu=se,exports.ColorButton=Y,exports.Content=ke,exports.Dock=Pe,exports.ErrorBoundary=L,exports.Footer=je,exports.Header=V,exports.Layout=D,exports.Main=xe,exports.MobileMenu=ye,exports.Navbar=he,exports.PanelButton=function(){return t.createElement("div",null,"PanelButton")},exports.Section=_e,exports.SideNav=Ee,exports.Sidebar=Ne,exports.Template=function(e){var n=e.topbar,a=e.menuButton,r=e.colorButton,o=e.layoutType,i=e.navType,s=e.logo,l=e.menu,c=e.mobileMenu,u=void 0===c?"default":c,d=e.sideNav,m=e.sideNavToggle,p=e.sidebar,v=e.sidebarTwo,f=e.footer,b=e.pathname,h=e.children;return t.createElement(D,{options:e.options},n&&t.createElement(z,null,n),t.createElement(V,null,t.createElement(he,{type:i,logo:s,menu:l,menuButton:a,colorButton:r,pathname:b}),"default"===u?t.createElement(ye,{menu:l}):t.isValidElement(u)?t.createElement(ye,null,u):null),t.createElement(Re,{layout:o,sideNav:[d,m,b],sidebar:p,sidebarTwo:v,menu:l},h),f?t.createElement(je,null,f):null)},exports.Topbar=z,exports.Workspace=We,exports.generateId=function(e){void 0===e&&(e=5);for(var t="",n="abcdefghijklmnopqrstuv1234567890",a=n.length,r=0;r<e;r++)t+=n.charAt(Math.floor(Math.random()*a));return t},exports.mergeSelector=j,exports.useMakerUI=function(){return{options:m(),useMenu:y,useSideNav:k}},exports.useMeasure=H,exports.useScrollPosition=G,exports.useWorkspace=function(){var e=t.useContext(Me),n=t.useContext(Ce);if(void 0===typeof e)throw new Error("useWorkspace must be called inside a Workspace component.");return{settings:e,updateSetting:function(e,t){n((function(n){var a;return p({},n,((a={})[e]=t,a))}))}}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react-use-measure")),n=require("react"),r=e(require("deepmerge")),a=require("@emotion/react"),o=require("@maker-ui/css"),i=require("@maker-ui/primitives"),s={fonts:{body:"sans-serif",heading:"sans-serif",monospace:"monospace"},breakpoints:["768px","960px","1440px"],colors:{light:{link:"red",link_hover:"green",text:"#333",background:"#ffffff",primary:"#1858dc",secondary:"#355cac",accent:"#1858dc",muted:"#f6f6f6",border:"#e6e6e6",bg_topbar:"#355cac",bg_header:"#ffffff",bg_mobileMenu:"black",bg_sideNav:"#eee",bg_footer:"#d3d3d3",bg_toolbar:"#fbfbfb"}},persistentColorMode:!0,useColorDefaults:!0,useMeasurementDefaults:!0,variables:{},topbar:{maxWidth:1260,hideOnMobile:!1,breakpoint:0},header:{navType:"basic",mobileNavType:"basic",maxWidth:1460,sticky:!1,stickyOnMobile:!1,stickyUpScroll:!1,showColorButton:!0,hideColorButtonOnMobile:!1,hideWidgetsOnMobile:!0,menuOverflow:"wrap",dropdown:{caret:"default",transition:"fade"},breakpoint:0},mobileMenu:{width:"60vw",transition:"slide-left",cssTransition:"all ease 0.3s",visibleOnDesktop:!1,showCloseButton:!0,closeOnBlur:!0,closeOnRouteChange:!1},sideNav:{width:[250,300],isHeader:!1,isPrimaryMobileNav:!1,showToggleOnMobile:!0,toggleButton:"default",closeOnBlur:!0,closeOnRouteChange:!0,cssTransition:"transform ease 0.3s",breakpoint:0},content:{maxWidth:1020,maxWidthSection:1020,sidebarGap:30,breakpoint:0},sidebar:{width:300,secondWidth:200},footer:{maxWidth:1020},a11y:{skiplinks:!0},errors:{showStackTrace:!1}},l=n.createContext({}),c=n.createContext((function(){}));function u(e,t){return r(e,t,{arrayMerge:function(e,t,n){return t}})}var d=function(e){var t=e.options,r=e.children,a=n.useState(u(function(e){var t=s;return e||(t.colors={}),t}(!1!==(null==t?void 0:t.useColorDefaults)),t)),o=a[0],i=a[1];return n.useEffect((function(){i((function(e){return u(e,t)}))}),[t]),n.createElement(l.Provider,{value:o},n.createElement(c.Provider,{value:i},r))};function m(){var e=n.useContext(l);if(void 0===e)throw new Error("useOptions must be used within a Maker UI Layout component");return e}function v(){return(v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}function h(e,t){switch(t.type){case"MENU":return v({},e,{menuActive:!e.menuActive});case"SIDENAV":return v({},e,{sideNavActive:!e.sideNavActive});case"PANEL-LEFT":return v({},e,{leftPanelActive:!e.leftPanelActive});case"PANEL-RIGHT":return v({},e,{rightPanelActive:!e.rightPanelActive});default:throw new Error("Unhandled action type.")}}var b=n.createContext({}),g=n.createContext((function(){})),y=function(e){var t=e.children,r=n.useReducer(h,{menuActive:!1,sideNavActive:!1,leftPanelActive:!0,rightPanelActive:!0,toolbarActive:!0});return n.createElement(b.Provider,{value:r[0]},n.createElement(g.Provider,{value:r[1]},t))};function x(){var e=n.useContext(b).menuActive,t=n.useContext(g);if(void 0===typeof e)throw new Error("useMenu must be used within an Maker UI layout");return[e,function(){t({type:"MENU"})}]}function k(){var e=n.useContext(b).sideNavActive,t=n.useContext(g);if(void 0===typeof e)throw new Error("useSideNav must be used within an Maker UI layout");return[e,function(){t({type:"SIDENAV"})}]}var w=function(e,t){return"string"==typeof e?[e]:e<t.length?[t[e]]:[e]},N=function(e){return isNaN(e)?e:e+"px"},E=["fade","fade-up","fade-down"],j=function(e,t,n){var r=t.includes("fade")?e?1:0:1,a=e?"visible":"hidden",o=t.includes("right")?{right:0,width:n,transform:e?null:"translateX(100%)"}:{left:0,width:n,transform:e?null:"translateX(-100%)"},i=E.includes(t)?v({width:"100%",left:0},"fade"!==t?{transform:e?null:"translateY("+("fade-up"===t?"":"-")+"20px)"}:null):o;return v({opacity:r,visibility:a},i)};function M(e){return e?e.join(" ").replace(/ +(?= )/g,"").trim():void 0}var C={"*":{boxSizing:"border-box"},body:{margin:0,fontFamily:"var(--font-body)",color:"var(--color-text)",backgroundColor:"var(--color-background)"},"h1, h2, h3, h4, h5, h6":{fontFamily:"var(--font-heading)"},"code, pre":{fontFamily:"var(--font-monospace)"},"b, strong":{fontWeight:"bold"},a:{color:"var(--color-link)","&:hover":{color:"var(--color-link_hover)"}}},O=["content sidebar","content sidenav","content","sidebar content","sidebar content sidebar","sidenav content","page-transition"],_=n.createContext({state:{},setState:function(){}}),S=function(e){var t=e.styles,a=void 0===t?{}:t,i=e.children,l=m(),c=n.useState({layout_nav:l.header.navType,layout_navMobile:l.header.mobileNavType,layout_content:"content",height_header:0,height_topbar:0,height_toolbar:0,colorTheme:Object.keys(l.colors)[0]||"light"}),u=c[0],d=c[1];n.useEffect((function(){d((function(e){return v({},e,{layout_nav:l.header.navType,layout_navMobile:l.header.mobileNavType})}))}),[l]),n.useEffect((function(){var e="object"==typeof l.persistentColorMode&&null!==l.persistentColorMode;if(e||l.persistentColorMode){var t=e?l.persistentColorMode.key:"color-theme";if(localStorage.getItem(t)){var n=JSON.parse(localStorage.getItem(t)).theme;document.body.dataset.theme=n,d((function(e){return v({},e,{colorTheme:n})}))}else{var r=Object.keys(null==l?void 0:l.colors)[0];localStorage.setItem(t,JSON.stringify({theme:r})),document.body.dataset.theme=r,d((function(e){return v({},e,{colorTheme:r})}))}}}),[]);var p=r(function(e){var t=Object.keys(e),n={};return t.forEach((function(t){for(var r,a="body[data-theme='"+t+"']",o=((r={})[a]={},r),i=0,s=Object.entries(e[t]);i<s.length;i++){var l=s[i];o[a]["--color-"+l[0]]=l[1]}n=v({},n,o)})),n}(l.colors),function(e){for(var t=r(s,e,{arrayMerge:function(e,t,n){return t}}),n=t.breakpoints,a=t.fonts,o=t.topbar,i=t.header,l=t.mobileMenu,c=t.variables,u=t.content,d=t.sidebar,m=t.sideNav,v=t.footer,p=n.map((function(e){return"@media(min-width: "+N(e)+")"})),f={},h={},b=0,g=Object.entries(c);b<g.length;b++){var y=g[b];h["--"+y[0]]=y[1]}function x(e){for(var t=function(){var e=a[n],t=e[0],o=e[1];if(o)if(Array.isArray(o)){var i={};i[t]=N(o[0]),o.forEach((function(e,n){var r;0!==n&&(i[p[n]]=((r={})[t]=N(e),r))})),f=r(f,i)}else f[t]=N(o)},n=0,a=Object.entries(e);n<a.length;n++)t()}x({"--maxWidth_header":null==i?void 0:i.maxWidth,"--maxWidth_topbar":null==o?void 0:o.maxWidth,"--maxWidth_content":null==u?void 0:u.maxWidth,"--maxWidth_section":null==u?void 0:u.maxWidthSection,"--maxWidth_footer":null==v?void 0:v.maxWidth,"--width_mobileMenu":null==l?void 0:l.width,"--width_sidebar":null==d?void 0:d.width,"--width_second_sidebar":null==d?void 0:d.secondWidth,"--width_sideNav":null==m?void 0:m.width,"--gap_content":null==u?void 0:u.sidebarGap}),x(h);for(var k=0,w=Object.entries(a);k<w.length;k++){var E=w[k];f["--font-"+E[0]]=E[1]}return f["--breakpoints"]=n.join(","),{html:f}}(l));return n.createElement(_.Provider,{value:{state:u,setState:d}},n.createElement(o.Global,{styles:p}),n.createElement(o.Global,{styles:C}),n.createElement(o.Global,{styles:a}),i)};function A(e){var t=n.useContext(_),r=t.state,a=t.setState;if(void 0===r)throw new Error("useLayout must be used within a Maker UI Layout component");function o(t){a((function(n){var r;return v({},n,((r={})["layout_"+e]=t,r))}))}return"nav"===e?[r.layout_nav,o]:"mobileNav"===e?[r.layout_navMobile,o]:[r.layout_content,o]}function T(){var e=n.useContext(_),t=e.state,r=e.setState;if(void 0===t)throw new Error("useMeasurement must be used within an Maker UI Layout component");return{measurements:t,setMeasurement:function(e,t){r((function(n){var r;return v({},n,((r={})["height_"+e]=t,r))}))}}}var B=function(e){var t=m().a11y,n=A("content"),r=[];return r=e.links?e.links:[{id:"#content",label:"Skip to content"},{id:"#footer",label:"Skip to footer"}],n[0].includes("sidenav")&&r.splice(1,0,{id:"#sidenav",label:"Skip to side navigation"}),t.skiplinks?o.jsx("ul",{className:"skiplinks",css:{listStyle:"none",position:"relative",zIndex:1e3,padding:0,margin:0,a:{background:"var(--color-bg_header)",display:"block",position:"absolute",fontFamily:"var(--font-body)",left:-9999,padding:"1em","&:focus":{left:0}}}},r.map((function(e){var t=e.id;return o.jsx("li",{key:t},o.jsx("a",{href:t},e.label))}))):null};B.displayName="Skiplinks";var W=function(e){var t=e.options,o=e.styles,i=e.theme,s=void 0===i?{}:i,l=e.skiplinks,c=e.children;return n.createElement(a.ThemeProvider,{theme:t.breakpoints?r(s,{breakpoints:t.breakpoints}):s},n.createElement(d,{options:t},n.createElement(S,{styles:o},n.createElement(y,null,n.createElement(B,{links:l}),c))))};W.displayName="MakerUI_Layout";var I=function(e){return n.createElement(i.SVG,Object.assign({viewBox:"0 0 512 512"},e),n.createElement("path",{d:"M256 0C114.497 0 0 114.507 0 256c0 141.503 114.507 256 256 256 141.503 0 256-114.507 256-256C512 114.497 397.493 0 256 0zm0 472c-119.393 0-216-96.615-216-216 0-119.393 96.615-216 216-216 119.393 0 216 96.615 216 216 0 119.393-96.615 216-216 216z"}),n.createElement("path",{d:"M256 128.877c-11.046 0-20 8.954-20 20V277.67c0 11.046 8.954 20 20 20s20-8.954 20-20V148.877c0-11.046-8.954-20-20-20z"}),n.createElement("circle",{cx:"256",cy:"349.16",r:"27"}))},P=function(e){var t=e.showStackTrace,r=e.errorInfo;return n.createElement(i.Div,{className:"error-boundary"},n.createElement(I,{css:{height:30}}),n.createElement("div",null,"There was an issue loading this section of the app.",n.createElement(i.Span,{css:{marginLeft:"5px",cursor:"pointer",color:"var(--color-primary)"},onClick:function(){var e;return null===(e=window)||void 0===e?void 0:e.location.reload()}},"Try reloading the page.")),t?n.createElement(i.Div,{css:{details:{paddingLeft:"20px",whiteSpace:"pre"},summary:{cursor:"pointer"}}},n.createElement("details",{className:"error-details"},n.createElement("summary",null,"Click for error details"),r?r.componentStack.toString():null)):null)},F=["Main","SideNav","Sidebar","PageTransition"],L=function(){return n.createElement(i.Div,{css:{margin:"150px auto",maxWidth:600,fontSize:"20px",lineHeight:1.5,"li, span":{padding:"0 8px",fontFamily:"monospace",backgroundColor:"var(--color-muted)",fontSize:"18px",borderRadius:3,border:"1px solid gainsboro"}}},n.createElement(i.Flex,{inline:!0,align:"center",justify:"center",css:{width:"100%",padding:"20px",mb:"30px",background:"var(--color-muted)",strong:{marginRight:"20px"}}},n.createElement(I,{css:{height:35,marginRight:"10px"}}),n.createElement("strong",null,"Error")," Invalid layout configuration."),n.createElement(i.Div,null,n.createElement("p",null,"The ",n.createElement("span",null,"Content")," component only accepts the following direct children:"),n.createElement(i.UList,{css:{columns:2,margin:"50px 0 35px",li:{marginBottom:"10px",width:"min-content"}}},F.map((function(e,t){return n.createElement("li",{key:t},e)}))),n.createElement("p",null,"If your custom child component has fixed positioning or is a Provider, you can still use it here by assigning the component a"," ",n.createElement("strong",null,"displayName")," of 'Fixed', 'Provider', or 'Context'."),n.createElement("p",null,n.createElement("a",{href:"https://maker-ui.com/docs/content",target:"_blank",rel:"noreferrer"},"See the docs")," ","for a complete list of layout configurations.")))},H=function(e){var t,r;function a(){var t;return(t=e.apply(this,arguments)||this).state={error:"",errorInfo:"",hasError:!1},t}r=e,(t=a).prototype=Object.create(r.prototype),t.prototype.constructor=t,p(t,r),a.getDerivedStateFromError=function(e){return{error:e,hasError:!0}};var o=a.prototype;return o.componentDidCatch=function(e,t){var n=this.props.logFunction||this.context.errors.logFunction||!1;n&&n(e,t,this.props.errorKey),this.setState({errorInfo:t})},o.render=function(){return this.state.hasError?this.props.errorMessage||this.context.errors.errorMessage[""+this.props.errorKey]?this.context.errors.errorMessage[""+this.props.errorKey]:n.createElement(P,{showStackTrace:this.context.errors.errorMessage.showStackTrace,errorInfo:this.state.errorInfo}):this.props.children},a}(n.Component);H.contextType=l;var z=["id","background","maxWidth","sticky","stickyOnMobile","scrollOverflow","className","_css","css","children"],R=function(e){var r=m(),a=r.topbar,i=r.breakpoints,s=t(),l=s[0],c=s[1].height,u=T().setMeasurement;n.useEffect((function(){0!==c&&u("topbar",c)}),[c]);var d=e.id,p=e.background,h=void 0===p?"var(--color-bg_topbar)":p,b=e.maxWidth,g=void 0===b?"var(--maxWidth_topbar)":b,y=e.sticky,x=void 0===y?a.sticky:y,k=e.stickyOnMobile,N=void 0===k?a.stickyOnMobile:k,E=e.scrollOverflow,j=void 0!==E&&E,C=e.className,O=e._css,_=e.css,S=e.children,A=f(e,z),B=x?N?"sticky":["relative","sticky"]:!x&&N?["sticky","relative"]:void 0;return o.jsx("aside",{ref:l,id:M(["topbar",d]),className:C,breakpoints:w(a.breakpoint,i),css:v({background:h,top:0,zIndex:101,position:B,display:a.hideOnMobile?["none","block"]:["block"]},O)},o.jsx("div",Object.assign({className:"container",css:v({margin:"0 auto",overflowX:j?"scroll":void 0,whiteSpace:j?"nowrap":void 0,maxWidth:g},_)},A),o.jsx(H,{errorKey:"topbar"},S)))};R.displayName="Topbar";var D="undefined"!=typeof window;function U(){if(!D)return 0;var e=document.body.getBoundingClientRect();return Math.abs(e.top)}function K(e,t,r){void 0===r&&(r=!0);var a=n.useRef(U());n.useEffect((function(){if(r&&D){var n,o=function(){var t=U();e({prevPos:a.current,currPos:t}),a.current=t,n=void 0},i=function(){t?void 0===n&&(n=setTimeout(o,t)):o()};return window.addEventListener("scroll",i),function(){return window.removeEventListener("scroll",i)}}}),[e,t,r])}var G=["absolute","background","sticky","stickyOnMobile","stickyUpScroll","className","css","children"],V=function(e){var r=n.useState(""),a=r[0],i=r[1],s=n.useState(!0),l=s[0],c=s[1],u=n.useState(!0),d=u[0],p=u[1],h=T(),b=h.measurements,g=h.setMeasurement,y=m(),x=y.header,k=y.topbar,N=y.breakpoints,E=!!x.scrollClass,j=t(),C=j[0],O=j[1].height;n.useEffect((function(){0!==O&&g("header",O)}),[O]),n.useEffect((function(){c(!1)}),[]);var _=e.absolute,S=void 0===_?x.absolute:_,A=e.background,B=void 0===A?"var(--color-bg_header)":A,W=e.sticky,I=void 0===W?x.sticky:W,P=e.stickyOnMobile,F=void 0===P?x.stickyOnMobile:P,L=e.stickyUpScroll,z=void 0===L?x.stickyUpScroll:L,R=e.className,D=e.css,U=e.children,V=f(e,G);K((function(e){var t=e.currPos,n=t>e.prevPos,r=t>500;r||d||p(!0),r&&n&&d&&p(!1),!r||n||d||p(!0)}),350,z),K((function(e){if(E){var t=x.scrollClass,n=e.currPos>t.scrollTop?t.className:"";n!==a&&i(n)}}),0,E);var q=function(){return k.sticky&&!k.stickyOnMobile?[0,b.height_topbar]:k.sticky&&k.stickyOnMobile?b.height_topbar:!k.sticky&&k.stickyOnMobile?[b.height_topbar,0]:0},Y=S?"fixed":"sticky",X=S?"absolute":"relative",J=[a,z&&!d?"scroll-active":""].join(" ");return o.jsx("header",Object.assign({ref:C,className:M([J,R]),role:"banner",breakpoints:w(x.breakpoint,N),css:v({background:B,zIndex:100,width:S?"100%":void 0,visibility:l?"hidden":void 0},z?{position:Y,top:q(),transition:"transform .3s ease-in","&.scroll-active":{transform:"translateY(-100%)"}}:I?{top:q(),position:F?[Y]:[X,Y]}:!I&&F?{top:q(),position:[Y,X]}:{position:X},D)},V),o.jsx(H,{errorKey:"header"},U))};V.displayName="Header";var q=function(e){var t=e.children,r=m().linkFunction,a={id:"site-logo","aria-label":"Home page"};return r?r("/",t,a):n.createElement(i.Link,Object.assign({href:"/"},a,{css:{display:"inline-flex"}}),t)};q.displayName="Logo";var Y=["isHeaderButton","customButton","breakpoints","className","css"],X=function(e){var t,r,a,o=e.isHeaderButton,s=e.customButton,l=e.breakpoints,c=e.className,u=e.css,d=f(e,Y),p=m(),h=p.header,b=p.breakpoints,g=(t=m(),r=n.useContext(_),a=r.setState,{colorTheme:r.state.colorTheme,setColorTheme:function(e){t.persistentColorMode&&localStorage.setItem("color-theme",JSON.stringify({theme:e})),document.body.dataset.theme=e,a((function(t){return v({},t,{colorTheme:e})}))},colors:t.colors?Object.keys(t.colors):["light"]}),y=g.colorTheme,x=g.setColorTheme,k=g.colors,N=v({title:"Color Theme",className:M(["color-button",c]),"aria-label":"Toggle Color Mode",onClick:function(){var e=k.indexOf(y);x(k[(e+1)%k.length])},breakpoints:o?w(h.breakpoint,b):l},d),E=s||h.colorButton;return 1===k.length?null:o&&h.showColorButton||!o?"function"==typeof E?E(y,N):n.createElement(i.Button,Object.assign({},N,{css:v({display:o&&h.hideColorButtonOnMobile?["none","block"]:["block"]},u)}),E||y):null};X.displayName="ColorButton";var J=function(e){var t=e.show,r=e.set;return n.createElement(i.Button,{title:"Expand Section",className:"submenu-toggle","aria-expanded":t?"true":"false","aria-label":"Expand Section",onClick:function(){return r(!t)},css:{border:"none",background:"transparent"}},n.createElement(i.SVG,{viewBox:"0 0 16 16",width:"12",height:"12",css:{transition:"transform ease .2s",transformOrigin:"50% 55%",transform:t?"rotate(180deg)":void 0}},n.createElement("path",{stroke:"currentcolor",strokeWidth:"2",fill:"none",d:"M14 6 L8 12 L2 6"})))};J.displayName="ExpandButton";var Q={opacity:1,visibility:"visible"},Z={transition:"all ease .3s"},$=function(e){switch(e){case"scale":return{transform:"scale(1, 1)",li:{opacity:1,transition:"opacity ease-in-out .2s .2s"}};case"fade-down":case"fade-up":return v({},Q,{transform:"translateY(0)"});case"fade":default:return Q}},ee={display:"inline-block",background:"var(--color-bg_header)",width:"max-content",opacity:0,visibility:"hidden",margin:0,padding:0,zIndex:1,listStyle:"none",a:{width:"100%"},li:{display:"block"}},te=function(e){switch(e){case"scale":return v({},Q,{transform:"scale(1, 0)",transformOrigin:"0 0",transition:"transform ease-in-out .25s",li:{opacity:0,transition:"opacity .03s ease-in-out"}});case"fade-up":return v({},Z,{transform:"translateY(10px)"});case"fade-down":return v({},Z,{transform:"translateY(-10px)"});case"fade":return v({},Z,{transform:"translateY(0)"});default:return{}}},ne={position:"absolute",top:"99%",left:0},re={position:"fixed",height:"100%",left:"100%",top:0},ae=function(e,t,n){return e?r.all([ee,0===n?ne:re,te(t)],{arrayMerge:function(e,t,n){return t}}):{}},oe={content:'""',display:"inline-block",width:0,height:0,marginLeft:".4em",verticalAlign:".25em",borderTop:".25em solid",borderRight:".25em solid transparent",borderLeft:".25em solid transparent"},ie=n.memo((function(e){var t=e.data,r=t.label,a=t.path,s=t.newTab,l=t.submenu,c=t.openNested,u=void 0!==c&&c,d=t.classes,p=void 0===d?"":d,f=t.icon,h=e.caret,b=void 0!==h&&h,g=e.menuControls,y=e.pathname,x=e.isHeader,k=void 0!==x&&x,w=e.linkFunction,N=e.depth,E=void 0===N?0:N,j=m().header,C=n.useState(u),O=C[0],_=C[1],S="submenu depth-"+E,A=v({className:y===a?"current":void 0,target:s&&"_blank",rel:s&&"noopener noreferrer","aria-label":f&&r,"aria-haspopup":l&&"true","aria-current":y===a&&"page"},g);return o.jsx("li",{className:M(["menu-item",p]),css:k?{position:"relative",display:"inline-flex","&:focus-within > .submenu, &:hover > .submenu":v({},$(j.dropdown.transition)),"> a .menu-text:after":l&&"default"===b&&oe}:void 0},o.jsx(se,{condition:!(k||!l),wrapper:function(e){return o.jsx("div",{css:{display:"flex"}},e)}},o.jsx(n.Fragment,null,w?w(a,r,A,f):o.jsx(i.Link,Object.assign({href:a},A),f?o.jsx("span",{className:"menu-icon"},f):void 0,o.jsx("span",{className:"menu-text"},r),l&&b&&n.isValidElement(b)?b:null),!k&&l?o.jsx(J,{set:_,show:O}):null)),l&&o.jsx(n.Fragment,null,k||!k&&O?o.jsx("ul",{className:S,role:"menu","aria-label":"submenu",css:v({},ae(k,j.dropdown.transition,E))},l.map((function(e,t){return o.jsx(ie,{key:t,data:e,caret:b,menuControls:g,pathname:y,isHeader:k,depth:E+1})}))):null))}));ie.displayName="MenuItem";var se=function(e){var t=e.children;return e.condition?(0,e.wrapper)(t):t},le=["menu","menuType","pathname","className","css"],ce=n.forwardRef((function(e,t){var n=e.menu,r=void 0===n?[]:n,a=e.menuType,i=e.pathname,s=e.className,l=e.css,c=f(e,le),u=m(),d=u.mobileMenu,p=u.sideNav,h=u.linkFunction,b=x()[1],g=k()[1],y=function(){if("mobile"===a&&d.closeOnRouteChange)return{onClick:function(){return b()}};if("undefined"!=typeof window&&"sideNav"===a&&p.closeOnRouteChange){var e=document.getElementById("sidenav");if(!window||!e)return;return{onClick:"fixed"===window.getComputedStyle(e,"").position?function(){return g()}:void 0}}};return o.jsx("ul",Object.assign({ref:t,className:M(["collapse-menu",s]),role:"navigation",css:v({},l)},c),r.map((function(e,t){return o.jsx(ie,{key:t,data:e,menuControls:y(),pathname:i,linkFunction:h})})))}));ce.displayName="CollapsibleMenu";var ue=["customButton","visibleOnDesktop","isCloseButton","className","css"],de=function(e){var t=e.customButton,r=e.visibleOnDesktop,a=e.isCloseButton,o=e.className,s=e.css,l=f(e,ue),c=x(),u=c[0],d=c[1],p=k(),h=p[0],b=p[1],g=m(),y=g.header,N=g.sideNav,E=g.breakpoints,j=t||(null==y?void 0:y.menuButton),C=r?"block":["block","none"],O=null!=N&&N.isPrimaryMobileNav?{"aria-expanded":!!h,onClick:b}:{"aria-expanded":!!u,onClick:d},_=v({title:"Menu",className:M(["menu-button",o]),"aria-label":"Toggle Menu"},O,l);return"function"==typeof j?j(N.isPrimaryMobileNav?h:u,_):n.createElement(i.Button,Object.assign({},_,{breakpoints:w(null==y?void 0:y.breakpoint,E),css:v({display:C,margin:0,border:"none",background:"none",svg:{margin:"0 auto"}},s)}),j||n.createElement(i.SVG,{viewBox:"0 0 24 24",css:{display:"block",height:a?35:27}},n.createElement("path",a?{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}:{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"})))};de.displayName="MenuButton";var me=function(e){var t=e.menuItems,n=void 0===t?[]:t,r=e.pathname,a=m(),i=a.header,s=a.linkFunction;return o.jsx("nav",{className:"nav-primary",role:"navigation",breakpoints:w(i.breakpoint,a.breakpoints),css:{display:["none","flex"]}},o.jsx("ul",{className:"menu-primary"},n.map((function(e,t){var n;return o.jsx(ie,{key:t,data:e,caret:null===(n=i.dropdown)||void 0===n?void 0:n.caret,pathname:r,linkFunction:s,isHeader:!0})}))))};me.displayName="NavMenu";var ve=function(e){var t=e.content,n=m(),r=n.header;return t?o.jsx("div",{className:"widget-area",breakpoints:r?w(r.breakpoint,n.breakpoints):void 0,css:{display:null!=r&&r.hideWidgetsOnMobile?["none","flex"]:"flex"}},t):null};ve.displayName="WidgetArea";var pe={basic:{areas:'"logo menu nav"',columns:"auto 1fr auto",navArea:"flex-start",menuArea:"flex-end"},"basic-left":{areas:'"logo menu nav"',columns:"auto 1fr auto",navArea:"flex-start",menuArea:"flex-start"},"basic-center":{areas:'"logo menu nav"',columns:"auto 1fr auto",navArea:"flex-start",menuArea:"center"},center:{areas:'"logo logo" "menu nav"',columns:"1fr",navArea:"flex-start",menuArea:"center"},split:{areas:'"menu-split logo menu nav"',columns:"1fr auto 1fr",navArea:"flex-start",menuArea:!1},reverse:{areas:'"menu logo nav"',columns:"1fr auto 1fr",navArea:"flex-end",menuArea:!1},minimal:{areas:'"logo nav"',columns:"auto 1fr",navArea:"flex-end",menuArea:!1},"minimal-left":{areas:'"button logo nav"',columns:"auto auto 1fr",navArea:"flex-end",menuArea:!1},"minimal-center":{areas:'"button logo nav"',columns:"1fr auto 1fr",navArea:"flex-end",menuArea:!1}},fe={basic:{areas:'"logo nav"',columns:"auto 1fr",navArea:"flex-end"},"basic-menu-left":{areas:'"button logo nav"',columns:"auto auto 1fr",navArea:"flex-end"},"logo-center":{areas:'"button logo nav"',columns:"1fr auto 1fr",navArea:"flex-end"},"logo-center-alt":{areas:'"nav logo button"',columns:"1fr auto 1fr",navArea:"flex-start"}};function he(e,t){return{gridTemplateAreas:[fe[t].areas,pe[e].areas],gridTemplateColumns:[fe[t].columns,pe[e].columns],gridTemplateRows:["1fr","center"!==e?"1fr":"1fr 1fr"],gap:0,".nav-area":v({},be(e),{justifyContent:[fe[t].navArea,pe[e].navArea]}),".menu-area":{justifyContent:pe[e].menuArea?pe[e].menuArea:void 0},".menu-area.split":{justifyContent:"flex-end"},"&.layout-center .logo-area":{justifyContent:"center"},"&.layout-minimal, &.layout-minimal-left, &.layout-minimal-center":{".menu-area":{display:"none"}},"&.layout-minimal-center .button-area":{justifyContent:"flex-start"},"&.m-layout-logo-center-alt .button-area":{justifyContent:["flex-end","flex-start"]}}}function be(e){return["center","split"].includes(e)?{position:["relative","absolute"],top:0,right:0,height:"100%"}:void 0}var ge=["minimal-left","minimal-center"],ye=["basic-menu-left","logo-center","logo-center-alt"],xe=function(e){var t=m(),r=t.header,a=t.mobileMenu,o=t.breakpoints,s=A("nav"),l=s[0],c=s[1],u=A("mobileNav"),d=u[0],p=u[1],f=w(r.breakpoint,o),h=e.type,b=e.mobileType,g=e.logo,y=void 0===g?"Logo":g,x=e.menu,k=e.logoArea,N=e.navArea,E=e.menuArea,j=e.menuButton,C=e.colorButton,O=e.maxWidth,_=void 0===O?"var(--maxWidth_header)":O,S=e.className,T=e.id,B=e.css,W=x&&Math.ceil(x.length/2);n.useEffect((function(){void 0!==h&&h!==l&&c(h),void 0!==b&&b!==d&&p(b)}),[h,b,l,d]);var I="scroll"===r.menuOverflow?{".menu-area":{overflowX:"scroll",whiteSpace:"nowrap"}}:void 0;return n.createElement(i.Grid,{id:T,className:M(["nav-grid layout-"+l,"m-layout-"+d,S]),breakpoints:f,css:v({maxWidth:_,margin:"0 auto",position:"relative"},he(l,d),I,B)},ge.includes(l)||ye.includes(d)?n.createElement(i.Flex,{align:"center",className:"button-area",breakpoints:f,css:{gridArea:"button",display:[ye.includes(d)?"flex":"none",ge.includes(l)?"flex":"none"]}},n.createElement(de,{breakpoints:f,customButton:j,visibleOnDesktop:!0})):null,"split"===l?n.createElement(i.Flex,{align:"center",className:"menu-area split",breakpoints:f,css:{gridArea:"menu-split",display:["none","flex"]}},E?null:n.createElement(me,{menuItems:null==x?void 0:x.slice(0,W)})):null,n.createElement(i.Flex,{align:"center",className:"logo-area",css:{gridArea:"logo"}},k||n.createElement(q,null,y)),n.createElement(i.Flex,{align:"center",className:"menu-area",breakpoints:f,css:{gridArea:"menu",display:["none","flex"]}},E||n.createElement(me,{menuItems:"split"===l?null==x?void 0:x.slice(W):x})),n.createElement(i.Flex,{align:"center",className:"nav-area",css:{gridArea:"nav"}},n.createElement(ve,{content:N}),n.createElement(de,{customButton:j,breakpoints:f,css:{display:[ye.includes(d)?"none":"block","minimal"===l||a.visibleOnDesktop?"block":"none"]}}),n.createElement(X,{isHeaderButton:!0,customButton:C})))};xe.displayName="Navbar";var ke=function(e){return o.jsx("div",{className:"menu-overlay"+(e.show?" active":""),role:"button",onClick:e.toggle,css:{position:"fixed",top:0,left:0,right:0,bottom:0,background:"rgba(0, 0, 0, 0.15)",zIndex:100,willChange:"opacity",transition:"all ease .4s",visibility:"hidden",opacity:0,"&.active":{visibility:"visible",opacity:1}}})};ke.displayName="Overlay";var we=["id","background","center","closeButton","closeButtonPosition","width","transition","menu","pathname","header","footer","className","css","children"],Ne=n.forwardRef((function(e,t){var r=x(),a=r[0],i=r[1],s=m().mobileMenu,l=e.id,c=e.background,u=void 0===c?"var(--color-bg_mobileMenu)":c,d=e.center,p=e.closeButton,h=void 0===p?s.closeButton:p,b=e.closeButtonPosition,g=void 0===b?"top-right":b,y=e.width,k=void 0===y?"var(--width_mobileMenu)":y,w=e.transition,N=void 0===w?s.transition:w,C=e.menu,O=void 0===C?[]:C,_=e.pathname,S=e.header,A=e.footer,T=e.className,B=e.css,W=e.children,I=f(e,we),P=d?{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column"}:void 0,F=g.includes("right")?{right:0}:{left:0},L=g.includes("top")?{top:0}:{bottom:0};return o.jsx(n.Fragment,null,s.closeOnBlur&&!E.includes(N)?o.jsx(ke,{show:a,toggle:i}):null,o.jsx("div",Object.assign({ref:t,id:M(["mobile-menu",l]),className:M([a?"active":"",T]),css:v({position:"fixed",background:u,top:0,bottom:0,zIndex:100,willChange:"transform, opacity",transition:s.cssTransition},j(a,N,k),P,B)},I),o.jsx(H,{errorKey:"mobileMenu"},s.showCloseButton||h?o.jsx(de,{customButton:h,isCloseButton:!0,css:v({position:"absolute"},L,F)}):null,S||null,W||o.jsx(ce,{menu:O,menuType:"mobile",pathname:_}),A||null)))}));Ne.displayName="MobileMenu";var Ee=["id","children","css"],je=function(e){var t=e.id,r=e.children,a=e.css,i=f(e,Ee),s=n.useState(!0),l=s[0],c=s[1],u=m(),d=u.content,p=u.sideNav,h=u.breakpoints,b=function(e,t){var r=A("content"),a=r[0],o=r[1],i=n.useState(!1),s=i[0],l=i[1];return n.useEffect((function(){if(t){var e=function(e,t){if("string"==typeof t)return"unknown";var r=n.Children.toArray(t);return r?r.map((function(e){return e.type.displayName?e.type.displayName.toLowerCase():"unknown"})).join(" ").replace("main","content").replace(/fixed|provider|context/g,"").replace(/ {2,}/g," ").trim():"unknown"}(0,t);O.find((function(t){return t===e}))?a!==e&&o(e):l(!0)}}),[a,o,"content",t]),{layout:a,showError:s}}(0,r),g=b.layout,y=b.showError;n.useEffect((function(){c(!1)}),[]);var x=function(e){var t,n=T().measurements,r=m(),a=r.topbar,o=r.header,i=r.sideNav;if(e&&e.includes("sidebar"))return v({display:"grid",gap:"var(--gap_content)",maxWidth:"var(--maxWidth_content)",margin:"0 auto",minHeight:"80vh"},"sidebar content"===e?{".sidebar":{gridRow:[2,"auto"]}}:"sidebar content sidebar"===e?{".sidebar:first-of-type":{gridRow:[2,"auto"]}}:null,{gridTemplateColumns:["1fr",(t="var(--width_sidebar)","sidebar content"===e?t+" 1fr":"sidebar content sidebar"===e?t+" 1fr var(--width_second_sidebar)":"content sidebar"===e?"1fr "+t:null)]});if(e&&e.includes("sidenav")){var s=function(){var e=o.sticky?n.height_header:0;return a.sticky&&(e+=n.height_topbar),e};return{display:"flex","#sidenav":{position:["fixed","relative"],zIndex:[101,0],top:0,bottom:0,width:"var(--width_sideNav)",right:"content sidenav"===e&&0,left:"sidenav content"===e&&0,willChange:"transform",transform:"translateX(0)",transition:i.isHeader||0!==n.height_header?i.cssTransition:null,"&.hide":{transform:["translateX("+("sidenav content"===e?"calc(-1 * var(--width_sideNav))":"var(--width_sideNav)")+")","none"]},"> .container":{position:"sticky",top:[0,s()],height:"calc(100vh - "+s()+"px)",overflowY:"auto"}},"#content":{maxWidth:"var(--maxWidth_content)",margin:"0 auto"},"#toggle-sidenav":{right:"sidenav content"===e&&30,left:"content sidenav"===e&&30}}}return{display:"block",maxWidth:"var(--maxWidth_content)",margin:"0 auto"}}(g),k=g.includes("sidenav")?p.breakpoint:d.breakpoint;return o.jsx("div",Object.assign({id:M(["site-inner",t]),breakpoints:w(k,h),css:v({position:"relative",visibility:l?"hidden":void 0},x,a)},i),y?o.jsx(L,null):o.jsx(H,{errorKey:"content"},r))};je.displayName="Content";var Me=["id","background","css","children"],Ce=function(e){var t=e.id,n=e.background,r=e.css,a=e.children,i=f(e,Me);return o.jsx("main",Object.assign({id:M(["content",t]),role:"main",css:v({background:n,position:"relative",flex:1},r)},i),o.jsx(H,{errorKey:"main"},a))};Ce.displayName="Main";var Oe=["isHeader"],_e=["id","background","toggleButton","menu","pathname","header","footer","className","_css","css","children"],Se=function(e){var t=e.isHeader,n=f(e,Oe);return o.jsx(t?"header":"div",Object.assign({},n))},Ae=function(e){var t=e.id,n=e.background,r=void 0===n?"var(--color-bg_sideNav)":n,a=e.toggleButton,s=e.menu,l=e.pathname,c=e.header,u=e.footer,d=e.className,p=e._css,h=e.css,b=e.children,g=f(e,_e),y=k(),x=y[0],N=y[1],E=m(),j=E.sideNav,C=a||j.toggleButton,O={id:"toggle-sidenav",title:"Toggle side navigation","aria-label":"Toggle side navigation",onClick:N,breakpoints:w(j.breakpoint,E.breakpoints)};return o.jsx(H,{errorKey:"sideNav"},j.closeOnBlur?o.jsx(ke,{show:x,toggle:N}):null,o.jsx(Se,Object.assign({isHeader:j.isHeader,id:M(["sidenav",t]),className:M([x?"":"hide",d]),css:v({background:r},p)},g),o.jsx("div",{className:"container",css:h},c||null,b||null,s?o.jsx(ce,{menu:s,menuType:"sideNav",pathname:l}):null,u||null)),"function"==typeof C?C(x,O):j.showToggleOnMobile?o.jsx(i.Button,Object.assign({},O,{css:{position:"fixed",display:["inline-block","none"],bottom:30,zIndex:100}}),"default"===C?x?"close":"open":C):null)};Ae.displayName="SideNav";var Te=["background","className","css","children"],Be=function(e){var t=e.background,n=e.className,r=e.css,a=e.children,i=f(e,Te);return o.jsx("div",Object.assign({className:M(["sidebar",n]),role:"complementary",css:v({background:t},r)},i),o.jsx(H,{errorKey:"sidebar"},a))};Be.displayName="Sidebar";var We=["id","maxWidth","background","_css","css","children"],Ie=function(e){var t=e.id,n=e.maxWidth,r=void 0===n?"var(--maxWidth_footer)":n,a=e.background,i=void 0===a?"var(--color-bg_footer)":a,s=e._css,l=e.css,c=e.children,u=f(e,We);return o.jsx("footer",Object.assign({id:M(["footer",t]),role:"contentinfo",css:v({background:i},s)},u),o.jsx("div",{className:"container",css:v({display:"flex",maxWidth:r,margin:"0 auto"},l)},o.jsx(H,{errorKey:"footer"},c)))};Ie.displayName="Footer";var Pe=["maxWidth","background","color","container","id","className","_css","css","children"],Fe=n.forwardRef((function(e,t){var n=e.maxWidth,r=void 0===n?"var(--maxWidth_section)":n,a=e.background,i=e.color,s=e.container,l=void 0===s||s,c=e.id,u=e.className,d=e._css,m=e.css,p=e.children,h=f(e,Pe),b=l?d:v({},d,m);return o.jsx("section",{ref:t,id:c,className:u,css:v({background:a,color:i,width:"100%"},b)},o.jsx(H,{errorKey:"section"},l?o.jsx("div",Object.assign({className:"container",css:v({maxWidth:r,margin:"0 auto"},m)},h),p):p))}));Fe.displayName="Section";var Le=function(e){var t=e.sideNav,r=e.sidebar,a=e.sidebarTwo,o=e.menu,i=e.children;switch(e.layout){case"content sidebar":return n.createElement(je,null,n.createElement(Ce,null,i),n.createElement(Be,null,r));case"sidebar content":return n.createElement(je,null,n.createElement(Be,null,r),n.createElement(Ce,null,i));case"sidebar content sidebar":return n.createElement(je,null,n.createElement(Be,null,r),n.createElement(Ce,null,i),n.createElement(Be,null,a));case"content sidenav":return n.createElement(je,null,n.createElement(Ce,null,i),n.createElement(Ae,{menu:o,toggleButton:t[1],pathname:t[2]},t[0]));case"sidenav content":return n.createElement(je,null,n.createElement(Ae,{menu:o,toggleButton:t[1],pathname:t[2]},t[0]),n.createElement(Ce,null,i));default:return n.createElement(je,null,n.createElement(Ce,null,i))}};exports.useMeasure=t,exports.CollapsibleMenu=ce,exports.ColorButton=X,exports.Content=je,exports.ErrorBoundary=H,exports.Footer=Ie,exports.Header=V,exports.Layout=W,exports.Main=Ce,exports.MobileMenu=Ne,exports.Navbar=xe,exports.Section=Fe,exports.SideNav=Ae,exports.Sidebar=Be,exports.Template=function(e){var t=e.topbar,r=e.menuButton,a=e.colorButton,o=e.layoutType,i=e.navType,s=e.logo,l=e.menu,c=e.mobileMenu,u=void 0===c?"default":c,d=e.sideNav,m=e.sideNavToggle,v=e.sidebar,p=e.sidebarTwo,f=e.footer,h=e.pathname,b=e.children;return n.createElement(W,{options:e.options},t&&n.createElement(R,null,t),n.createElement(V,null,n.createElement(xe,{type:i,logo:s,menu:l,menuButton:r,colorButton:a,pathname:h}),"default"===u?n.createElement(Ne,{menu:l}):n.isValidElement(u)?n.createElement(Ne,null,u):null),n.createElement(Le,{layout:o,sideNav:[d,m,h],sidebar:v,sidebarTwo:p,menu:l},b),f?n.createElement(Ie,null,f):null)},exports.Topbar=R,exports.generateId=function(e){void 0===e&&(e=5);for(var t="",n="abcdefghijklmnopqrstuv1234567890",r=n.length,a=0;a<e;a++)t+=n.charAt(Math.floor(Math.random()*r));return t},exports.mergeSelectors=M,exports.useMakerUI=function(){return{options:m()}},exports.useMenu=x,exports.useScrollPosition=K,exports.useSideNav=k;
 //# sourceMappingURL=layout.cjs.production.min.js.map

dist/types.d.ts

@@ -42,6 +42,2 @@ import * as React from 'react';
         bg_footer: string;
-        /** The toolbar background color for workspace layouts. */
-        bg_toolbar: string;
-        /** The side panel background color for workspace layouts. */
-        bg_panel: string;
     } & {
@@ -108,2 +104,9 @@ [key: string]: string;
     /**
+     * An option that lets you save the user's color mode preference to the browser's local storage.
+     */
+    persistentColorMode: boolean | {
+        key: string;
+        expiration: number;
+    };
+    /**
      * A boolean that lets you turn off Maker UI's default color CSS variables.
@@ -401,10 +404,2 @@ */
         /**
-         * Use this setting to defer the DOM calculations of absolutely positioned components
-         * like Popovers or Dropdowns if your layout uses Page Transitions.
-         * @default 0
-         *
-         * @remarks This is a temporary solution in v1.0
-         */
-        deferMeasurements?: number;
-        /**
          * A specific breakpoint that controls when the grid for main content, sidebars, and the
@@ -493,76 +488,3 @@ * side nav breaks down for mobile. You may also use an index to access a specific breakpoint
     };
-    /**
-     * Configuration object for the Maker UI workspace layout.
-     */
-    workspace: {
-        /**
-         * The max-width of the workspace canvas content. Can be a responsive array.
-         * @default '100%'
-         */
-        canvasMaxWidth?: ResponsiveScale;
-        /**
-         * Configuration object for the left workspace panel.
-         */
-        panelLeft?: PanelProps;
-        /**
-         * Configuration object for the right workspace panel.
-         */
-        panelRight?: PanelProps;
-        /**
-         * Configuration object for the workspace dock component.
-         */
-        dock?: {
-            /**
-             * The width of the dock.
-             * @default 50
-             */
-            width?: ResponsiveScale;
-            /**
-             * Hides the dock on mobile.
-             * @default true
-             */
-            hideOnMobile?: boolean;
-            /** A specific breakpoint that controls when the dock breaks down for mobile. You may also
-             * use an index to access a specific breakpoint in the `options.breakpoints` array.
-             * @default 0 (breakpoints[0], or 768px)
-             */
-            breakpoint: string | number;
-        };
-        /**
-         * A specific breakpoint that controls when the workspace panels and toolbar break down on
-         * mobile. You may also use an index to access a specific breakpoint in the `options
-         * breakpoints` array.
-         * @default 0 (breakpoints[0], or 768px)
-         */
-        breakpoint: string | number;
-    };
 }
-declare type PanelProps = {
-    /**
-     * The width of the workspace panel.
-     * @default '.25fr'
-     */
-    width?: ResponsiveScale;
-    /**
-     * Determines if the panel can expand and collapse.
-     * @default false
-     */
-    collapsible?: boolean;
-    /**
-     * The width of the panel when it is collapsed.
-     * @default 0
-     */
-    collapseWidth?: ResponsiveScale;
-    /**
-     * Lets you customize the panel collapse / expand button. By default, it displays a button
-     * with `open` or `close` inner text, but you can use a custom React component or a JSX
-     * callback to animate the button's state.
-     */
-    collapseButton?: 'default' | React.ReactNode | ((isOpen?: boolean, attributes?: object) => React.ReactNode);
-    /**
-     * Lets you choose if the panel should be open or closed by default.
-     * @default true
-     */
-    defaultOpen?: boolean;
-};
 export {};

dist/utils/helper.d.ts

@@ -44,6 +44,6 @@ import { transitionTypes } from '../constants';
  *
- * @param libSelector - the MakerUI library selector (can be dynamic)
- * @param selector - the className or id supplied by component props
+ * @param selectors - an array of classNames or ids supplied by component props.
+ * Can be dynamically generated
  *
  */
-export declare function mergeSelector(libSelector: string, selector?: string): string | undefined;
+export declare function mergeSelectors(selectors: (string | undefined)[]): string | undefined;

package.json

 {
   "name": "@maker-ui/layout",
   "description": "The fastest way to build themeable, responsive layouts in React",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "license": "MIT",
@@ -23,6 +23,6 @@ "author": "Mike Darche <[e-mail]>",
     "@emotion/react": "^11.1.4",
-    "@maker-ui/css": "1.0.0-beta.10",
-    "@maker-ui/primitives": "1.0.0-beta.10",
+    "@maker-ui/css": "1.0.0-beta.11",
+    "@maker-ui/primitives": "1.0.0-beta.11",
     "deepmerge": "^4.2.2",
-    "resize-observer-polyfill": "^1.5.1",
+    "react-use-measure": "^2.0.4",
     "tslib": "^2.0.0"
@@ -29,0 +29,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

689565

decreased by-11.89%

Number of package files

51

decreased by-16.39%

Lines of code

6490

decreased by-11.72%

Dependency changes

• + Addedreact-use-measure@^2.0.4

• + Added@maker-ui/css@1.0.0-beta.11(transitive)

• + Added@maker-ui/primitives@1.0.0-beta.11(transitive)

• + Addedreact-use-measure@2.1.7(transitive)

• - Removedresize-observer-polyfill@^1.5.1

• - Removed@maker-ui/css@1.0.0-beta.10(transitive)

• - Removed@maker-ui/primitives@1.0.0-beta.10(transitive)

• - Removedresize-observer-polyfill@1.5.1(transitive)

• Updated@maker-ui/css@1.0.0-beta.11

• Updated@maker-ui/primitives@1.0.0-beta.11