a49aff4d-b281517b37984892523d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{HhZy:function(a,s,e){"use strict";e.r(s),e.d(s,"_frontmatter",(function(){return N})),e.d(s,"default",(function(){return o}));var n=e("35sm"),t=e("PgR7"),c=e("blud"),b=e("eWxN"),p=e("m0RF"),m=e("50CG"),O=e("jUgV"),j=e("Th6I"),N={},r=function(a){return function(s){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),Object(c.b)("div",s)}},i=r("Link"),g=r("Example"),l={_frontmatter:N},k=j.a;function o(a){var s=a.components,e=Object(n.a)(a,["components"]);return Object(c.b)(k,Object.assign({},l,e,{components:s,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"custom-hooks"},"Custom Hooks",Object(c.b)("a",Object.assign({parentName:"h2"},{href:"#custom-hooks","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"shorthand for a series of built-in hook calls"),Object(c.b)("li",{parentName:"ul"},"follow the ",Object(c.b)(i,Object.assign({parentName:"li"},{to:"/hooks#rules"},{mdxType:"Link"}),"rules")),Object(c.b)("li",{parentName:"ul"},Object(c.b)("strong",{parentName:"li"},"ALWAYS")," test by implementing in a component"),Object(c.b)("li",{parentName:"ul"},"when using effects ",Object(c.b)("strong",{parentName:"li"},"ALWAYS")," test unmounting"),Object(c.b)("li",{parentName:"ul"},"when returning functions ",Object(c.b)("strong",{parentName:"li"},"ALWAYS")," use ",Object(c.b)(i,Object.assign({parentName:"li"},{to:"/advanced-hooks#usecallback"},{mdxType:"Link"}),Object(c.b)("inlineCode",{parentName:"Link"},"useCallback")))),Object(c.b)("h3",{id:"build-your-own-formik"},"Build-Your-Own Formik",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#build-your-own-formik","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"still use ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://formik.org/",target:"_blank",rel:"noreferrer"}),"formik"),", this just shows that it’s not ",Object(c.b)("em",{parentName:"li"},"✨magic✨")),Object(c.b)("li",{parentName:"ul"},"cf. ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://formik.org/docs/examples/basic",target:"_blank",rel:"noreferrer"}),"basic formik"))),Object(c.b)(g,{link:"https://codesandbox.io/s/nnw3b?file=/src/example.tsx",testLink:"https://codesandbox.io/s/mbqpo?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"0"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ChangeEventHandler,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  createContext,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  FC,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  InputHTMLAttributes,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  SelectHTMLAttributes,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useCallback,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useContext,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useState,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region context"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FormContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  state"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Record"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"newState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Record"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," FormContext "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"createContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"FormContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"!"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"DebugForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," form "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(FormContext)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"pre"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">{"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"JSON"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"stringify"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(form.state, "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"pre"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region form"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FormProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  initialValues"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Record"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Form"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"FormProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"initialValues"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [state, setState] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(initialValues)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," context"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FormContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    state,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    setState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"partial"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"current"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"current, "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"partial })),"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      [],"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    ),"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FormContext.Provider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{context}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"form"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">{children}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"form"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FormContext.Provider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region custom hook"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UseForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Element"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  onChange"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ChangeEventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Element"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Element"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }>("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UseForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Element"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," form "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(FormContext)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," value "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," form.state[name]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," onChange"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ChangeEventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Element"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      form."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"({ [name]"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," event.target.value })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    [form, name],"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { value, onChange }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region form items using custom hook"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InputProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InputHTMLAttributes"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLInputElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"InputProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"props"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(name)} {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"props} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"SelectProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"SelectHTMLAttributes"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLSelectElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"SelectProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"props"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(name)} {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"props}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {children}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Form"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"initialValues"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"mr"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", first"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Steve"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", last"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Buscemi"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      title"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"mr"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Mr</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"mrs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Mrs</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"ms"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Ms</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"dr"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Dr</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"lord"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Lord</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"prof"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Prof</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"esq"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Esq</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"dame"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">Dame</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"na"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">N/A</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"option"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"br"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      first name"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"first"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"br"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      last name"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"last"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"DebugForm"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Form"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,O.a)),mdxType:"Example"}),Object(c.b)("h3",{id:"on-click-out-event"},"On Click Out Event",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#on-click-out-event","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"a custom hook can return props in an object that can be spread"),Object(c.b)("li",{parentName:"ul"},"short, expressive & reusable"),Object(c.b)("li",{parentName:"ul"},Object(c.b)("code",Object.assign({parentName:"li"},{className:"inline dracula","data-language":"tsx","data-index":"0"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"{"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk9"}),"useClickOut"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk9"}),"setOpen"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk5"}),"false"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"}"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),">"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"…"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"</"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),">"))),Object(c.b)("li",{parentName:"ul"},"can cause issues, ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/jsx-in-depth.html#spread-attributes",target:"_blank",rel:"noreferrer"}),"use")," ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md",target:"_blank",rel:"noreferrer"}),"sparingly"))),Object(c.b)(g,{link:"https://codesandbox.io/s/rnund?file=/src/example.tsx",testLink:"https://codesandbox.io/s/pwv8p?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"1"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  FC,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  MutableRefObject,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  Ref,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useCallback,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useEffect,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useRef,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useState,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," classes "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./example.module.css"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region custom hook"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UseClickOut"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ref"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Ref"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useClickOut"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"eventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"MouseEvent"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UseClickOut"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," elementRef "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useRef"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"MutableRefObject"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// as ref to avoid spamming `useEffect`"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," handlerRef "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useRef"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"typeof"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"eventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">(eventHandler)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  handlerRef.current "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," eventHandler"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useEffect"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"filteredHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"MouseEvent"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," clickTarget "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," event.target "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Node"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," isTargetInsideElement "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," elementRef.current."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"contains"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(clickTarget)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"!"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"isTargetInsideElement) handlerRef."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"current"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(event)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    document."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"addEventListener"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"click"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", filteredHandler)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      document."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"removeEventListener"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"click"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", filteredHandler)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { ref"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," elementRef }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region using custom hook"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"DropdownProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Dropdown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"DropdownProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [open, setOpen] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," toggle "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setOpen"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"o"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"!"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"o), [])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.container} {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useClickOut"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setOpen"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"))}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.toggle} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{toggle}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {title} {open "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"🔽"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"🔼"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {open "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.content}>{children}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    before dropdown"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Dropdown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"toggle dropdown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">try clicking outside</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">in dropdown</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Dropdown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    after dropdown"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,m.a)),mdxType:"Example"}),Object(c.b)("h3",{id:"keyboard-navigation"},"Keyboard Navigation",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#keyboard-navigation","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"keyboard navigation is a common requirement for ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction",target:"_blank",rel:"noreferrer"}),"accessible")," ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19",target:"_blank",rel:"noreferrer"}),"components")),Object(c.b)("li",{parentName:"ul"},"using ",Object(c.b)(i,Object.assign({parentName:"li"},{to:"/context"},{mdxType:"Link"}),"context")," and custom hooks makes it possible to reuse this logic")),Object(c.b)(g,{link:"https://codesandbox.io/s/57fen?file=/src/navigation.tsx",testLink:"https://codesandbox.io/s/4q6vd?file=/src/navigation.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"2"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  createContext,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  FC,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  KeyboardEventHandler,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  MutableRefObject,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  Ref,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useCallback,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useContext,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useLayoutEffect,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useRef,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region context"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"RefsType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"[]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  refs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"MutableRefObject"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"RefsType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"register"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"el"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," NavigationContext "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"createContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"NavigationContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"!"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"NavigationContextProvider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," refs "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useRef"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"RefsType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">([])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," next "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useRef"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"RefsType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">([])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// collect focusable elements"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," register "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"el"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    next.current."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"push"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(el)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// once all elements are collected, publish on context"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useLayoutEffect"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    refs.current "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," next.current"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    next.current "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," []"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContext.Provider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ refs, register }}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {children}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContext.Provider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region custom hook"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UseNavigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ref"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Ref"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  onKeyDown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"KeyboardEventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useNavigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">()"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UseNavigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { refs, register } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(NavigationContext)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ref "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useRef"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"MutableRefObject"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ON EVERY RENDER, register element as focusable"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useLayoutEffect"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"register"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(ref.current)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," onKeyDown "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"KeyboardEventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">>("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { length } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," refs.current"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," currentIndex "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," refs.current."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"indexOf"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(event.target "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"HTMLElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," navigationMap "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ArrowLeft"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," currentIndex "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"-"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ArrowUp"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," currentIndex "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"-"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ArrowRight"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," currentIndex "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"+"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ArrowDown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," currentIndex "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"+"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        Home"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        PageUp"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        End"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," length "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"-"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        PageDown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," length "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"-"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Record"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"number"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," nextIndexCandidate "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," navigationMap[event.key]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (nextIndexCandidate "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      event."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"preventDefault"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," nextIndex "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (length "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"+"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," nextIndexCandidate) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"%"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," length"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," el "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," refs.current[nextIndex]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      el."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"focus"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    [refs],"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { ref, onKeyDown }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion")))))),mdxType:"Example"}),Object(c.b)("h4",{id:"tabs-with-keyboard-navigation"},"Tabs With Keyboard Navigation",Object(c.b)("a",Object.assign({parentName:"h4"},{href:"#tabs-with-keyboard-navigation","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)(g,{link:"https://codesandbox.io/s/57fen?file=/src/example.tsx",testLink:"https://codesandbox.io/s/4q6vd?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"3"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, ReactNode, useCallback, useState } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," classes "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./example.module.css"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { NavigationContextProvider, useNavigation } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./navigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InternalTabButtonProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  activeTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setActiveTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Tab"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"InternalTabButton"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"InternalTabButtonProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  activeTabId,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  setActiveTabId,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { id, title },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," isActive "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," activeTabId "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"==="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," id"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.button}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setActiveTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(id), [setActiveTabId, id])}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useNavigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    >"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {isActive "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"''"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {title}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"TabsProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  defaultTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"[]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"TabsProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"defaultTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [{ id: firstTabId }] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," tabs"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [activeTabId, setActiveTabId] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(defaultTabId "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"??"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," firstTabId)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  const tabButtons "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," tabs."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"map"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InternalTabButton"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"key"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{tab.id}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"activeTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{activeTabId}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"setActiveTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setActiveTabId}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{tab}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ))"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  const [activeTab] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," tabs."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," id "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"==="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," activeTabId)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContextProvider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">{tabButtons}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContextProvider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">{activeTab.content}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"const tabs "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ["))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"hello"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Hello"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">hello</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"world"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"World"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">world</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">tabs</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">example</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"export "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      focus a tab, then use arrow keys to navigate between them"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"br"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"placeholder"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"focus this, press tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"defaultTabId"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"tabs"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{tabs} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  </>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,p.a)),mdxType:"Example"}),Object(c.b)("h4",{id:"accordion-with-keyboard-navigation"},"Accordion With Keyboard Navigation",Object(c.b)("a",Object.assign({parentName:"h4"},{href:"#accordion-with-keyboard-navigation","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)(g,{link:"https://codesandbox.io/s/57fen?file=/src/accordion-example.tsx",testLink:"https://codesandbox.io/s/4q6vd?file=/src/accordion-example.tsx",style:{height:"20em"},code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"4"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, ReactNode, useCallback, useState } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," classes "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./example.module.css"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { NavigationContextProvider, useNavigation } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./navigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"AccordionItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InternalAccordionItemProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  activeItemIds"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Set"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toggle"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  item"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"AccordionItem"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"InternalAccordionItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"InternalAccordionItemProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  activeItemIds,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  toggle,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  item"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { id, title, content },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," isActive "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," activeItemIds."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"has"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(id)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.button}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toggle"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(id), [toggle, id])}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useNavigation"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      >"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {isActive "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"🔽"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"🔼"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} {title}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {isActive "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">{content}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"AccordionProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  items"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"AccordionItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"[]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Accordion"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"AccordionProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"items"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [activeItemIds, setActiveItemIds] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6 mtkb"}),"new"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Set"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">())"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," toggle "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setActiveItemIds"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"current"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," nextItemIds "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6 mtkb"}),"new"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Set"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(current)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (nextItemIds."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"has"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(id)) {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        nextItemIds."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"delete"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(id)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"else"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        nextItemIds."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"add"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(id)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," nextItemIds"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContextProvider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {items."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"map"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"item"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InternalAccordionItem"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"key"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{item.id}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"activeItemIds"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{activeItemIds}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"toggle"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{toggle}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"item"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{item}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ))}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NavigationContextProvider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," items "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ["))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"hello"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Hello"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">hello</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"world"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"World"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">world</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"accordion"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Accordion"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">accordion</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  { id"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", title"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", content"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">example</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      use arrow keys to navigate between items"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"br"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"placeholder"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"focus this, press tab"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Accordion"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"items"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{items} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  </>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,b.a)),mdxType:"Example"}),Object(c.b)("style",{className:"grvsc-styles"},"\n  \n  .dracula {\n    color: #F8F8F2;\n    background-color: #282A36;\n  }\n  .dracula .mtkb { font-weight: bold; }\n  .dracula .mtki { font-style: italic; }\n  .dracula .mtk6 { color: #FF79C6; }\n  .dracula .mtk1 { color: #F8F8F2; }\n  .dracula .mtk11 { color: #E9F284; }\n  .dracula .mtk7 { color: #F1FA8C; }\n  .dracula .mtk4 { color: #6272A4; }\n  .dracula .mtk3 { color: #8BE9FD; }\n  .dracula .mtk9 { color: #50FA7B; }\n  .dracula .mtk8 { color: #FFB86C; }\n  .dracula .mtk5 { color: #BD93F9; }\n  .dracula .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n"))}o.isMDXComponent=!0}}]);
//# sourceMappingURL=a49aff4d-b281517b37984892523d.js.map