Tailwind CSS Navbar for React - Material Tailwind

<!DOCTYPE html><html lang="en" class="scroll-smoot <pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="sticky-navbar" class="group relative -ml-4 } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="complex-user-navbar" class="group relative } } // // // <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-with-search" class="group relative -ml-4 } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="dark-navbar" class="group relative -ml-4 flex } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="simple-navbar" class="group relative -ml-4 } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-with-mega-menu" class="group relative } } } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-with-solid-background" class="group } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-with-submenu" class="group relative } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-with-languages-dropdown" class="group } } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-with-multi-level-dropdown" class="group } } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-props" class="group relative -ml-4 flex <div class="!overflow-scroll"><table class="!w-full <h3 class="block antialiased tracking-normal font-sans text-xl <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="types-variant" class="group relative -ml-4 <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="types-color" class="group relative -ml-4 flex <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="types-animate" class="group relative -ml-4 <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-theme" class="group relative -ml-4 flex B. The <code class="rounded-md px-1 C. The <code class="rounded-md px-1 <div id="navbar-theme-object-type" class="group relative <div data-rehype-pretty-code-fragment=""><pre data-language= <h3 class="block antialiased tracking-normal font-sans text-xl <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="navbar-theme-customization" class="group relative <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="more-examples" class="group relative -ml-4 <p class="block antialiased font-sans text-base font-light leading-relaxed <head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Tailwind CSS Navbar for React - Material Tailwind</title><meta name="description" content="Customise your web projects with our easy-to-use navbar component for Tailwind CSS and React using Material Design guidelines."/><link rel="canonical" href="https://www.material-tailwind.com/docs/react/navbar"/><meta name="next-head-count" content="5"/><meta name="ahrefs-site-verification" content="7b6973de8e282762b663bca399042c685eb9ef3217a725e88c8cf68f599b967b"/><link rel="shortcut icon" href="https://docs.material-tailwind.com/favicon.png" type="image/png"/><link rel="apple-touch-icon" sizes="180x180" href="https://docs.material-tailwind.com/favicon.png"/><link rel="icon" type="image/png" sizes="32x32" href="https://docs.material-tailwind.com/favicon.png"/><link rel="icon" type="image/png" sizes="16x16" href="https://docs.material-tailwind.com/favicon.png"/><link rel="manifest" href="https://docs.material-tailwind.com/img/site.webmanifest"/><link rel="mask-icon" href="https://docs.material-tailwind.com/img/safari-pinned-tab.svg" color="#020617"/><meta name="msapplication-TileColor" content="#020617"/><meta name="theme-color" content="#ffffff"/><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1"/></noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous"/><script defer="" data-domain="material-tailwind.com" src="https://plausible.io/js/script.js"></script><script defer="" src="https://cdn.jsdelivr.net/npm/apexcharts"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"/><script defer="" src="https://cdn.jsdelivr.net/npm/flatpickr"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/><script defer="" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script><script async="" defer="" src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script><script async="" defer="" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="https://docs.material-tailwind.com/_next/static/css/25ff971631605ab7.css" as="style"/><link rel="stylesheet" href="https://docs.material-tailwind.com/_next/static/css/25ff971631605ab7.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="https://docs.material-tailwind.com/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="https://docs.material-tailwind.com/_next/static/chunks/webpack-1fa054fec924a10f.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/framework-5ac2b14b431a77fa.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/main-3092d4aad05c774c.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/pages/_app-3bf1602173db52f8.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/2d7f6f8c-97884eec69e990bf.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/fc83e031-4ed7d3826705e2f4.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/ff39441c-accb95dc5730898c.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/9f96d65d-c1f4b49dbc767bef.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/d848df63-b45c47b3fb9784b2.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/38-b9e5e51fade074b1.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/pages/docs/%5B...slug%5D-8e1a8e3043e2059b.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/Hmxk9y-rTbot2nv4Ta3ZE/_buildManifest.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/Hmxk9y-rTbot2nv4Ta3ZE/_ssgManifest.js" defer=""></script><style data-href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap">@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sFVQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammQ.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojIWWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoDISWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjovoSWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoUoOWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoDIOWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoJYOWaw.woff) format('woff')}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJV37MOzlojwUKaJO.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVT7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVz7MOzlojwUKaJO.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVP7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJV77MOzlojwUKaJO.woff) format('woff');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVD7MOzlojwUKQ.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style><style data-href="https://fonts.googleapis.com/icon?family=Material+Icons">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga'}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}</style></head><body class="root"> <script async="" defer="" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><noscript><iframe title="google-tag-manage" src="https://www.googletagmanager.com/ns.html?id=GTM-KB2WKJS" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div id="__next"><div class="relative mb-8 h-full w-full bg-white"><div class="sticky top-0 z-[999] flex w-full items-center"><nav class="block px-8 backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 text-white w-full max-w-full rounded-none border-b-[1.5px] !border-blue-gray-50 bg-white py-1.5 !pl-2 !pr-3 lg:!px-4 lg:!py-0.5"><div class="container mx-auto"><div class="flex w-full items-center !justify-between"><a class="py-2.375 mr-4 flex items-center gap-2 text-inherit lg:ml-0" href="/"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><rect width="32" height="32" rx="5" fill="black"></rect><rect x="7.43408" y="10.8491" width="16.74" height="10.3629" fill="url(#pattern0)"></rect><defs><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_5_15367" transform="matrix(0.000437181 0 0 0.000706215 -0.000571691 0)"></use></pattern><image id="image0_5_15367" width="2290" height="1416" xlink:href="data:image/png;base64,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Yz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIyMjkwIiBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTQxNiIgZXhpZjpVc2VyQ29tbWVudD0iU2NyZWVuc2hvdCIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDYtMjZUMTU6Mzg6MTcrMDM6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRpc3BsYXkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTBlM2VmZDMtYmFkNi00N2ZjLWFjOTItZTRmNmQ0ZDY5NDgwIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZGZmOWIxOTktMmViZC1mMDQyLWJmZmUtOWViYTM3Y2IwZmRhIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6OTQ1NmZkMWQtN2M4Yy00YjAwLThhZTYtM2YxYjA2Y2YzMTAxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTQ1NmZkMWQtN2M4Yy00YjAwLThhZTYtM2YxYjA2Y2YzMTAxIiBzdEV2dDp3aGVuPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjkwZTNlZmQzLWJhZDYtNDdmYy1hYzkyLWU0ZjZkNGQ2OTQ4MCIgc3RFdnQ6d2hlbj0iMjAyMy0wNi0yOFQxMToxNjowOSswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqnNPxUAALjYSURBVHic7N1fiF3nmSb6J6EERxcKjC4UiC7UEF0okLqogKuhGlIN1RA1qCFuUMAecCAejgP2cBywm3EgbiaGeGgbWs3E0GpODCMYG0YwCkxBK9AFU4bUhQLRRQVSFwqk4KjBglZDdKEBFfhcfHt3lWT9+erP3t9aa/9+sNm7SrL9pILlvdZ+vvf9wmeffRYAAAAAAAAAAKCtL7YOAAAAAAAAAAAAKPIAAAAAAAAAAEAnKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHKPIAAAAAAAAAAEAHzLUO0CM/S/Igyc7oOXte7+z5fQ8e8/29vz+P+bX/k/L/xU6ST5PcGz3ffeTvDQAwS04kOZnkS3te76S8bzo2eh6/nz32yOs88vse/X6SHH/k+w+S3B+9ftrzTh5+T3h/z9eP/v697wsfPPL7vM8DAIDhG1+XHH/k6/Hzo9/L6Pc+7tf2Xgc97deTh69BHr2e2fv9J12v7P39468fvRcOAABMwBc+++yz1hn64tMkp6b8z7zzmO/9YfT9u094PPpr96aSFACgmEsp3pxMKd/sLeGceOTX9n7v+CN/j3FhZ35awafs5mO+94eU92//mt1S9708/P5uXPq+/5i/HgAAmIy5lOuXkynXLif3PB49gHDiMX/989OJOXHXKn/f+PDDk+5h730oBgEAwCMUeerMJbmd6Rd5DutOyimJY3u+dz/lf8unSf75Ma9vp1xAAQAk5f3PySRfHr0+tef1yT3Pew21fNMVj5aAHuTzBSAlbwAA+LxHDxg8eshgXMj5dyn3VB/seR5KGadL9haDxpN/Hi36/Oue1+NDrgAAMGiKPPVaTORp4fYjX4+LP3eyW/R59GsfCAFAf5xK8kdJTme3hHM6u6WcU9mdhjOmmDMMewtAf0gpct9KeT+3neT38d4OAID+Gl/bnE7ylZQDCOPXeynk9NfVx3zvXnYnl+49wODQKgAAvaXIU2cu5WLg0dPmPDz1Z3wafGv0+G2S36R8QGT9AwBMx6kkZ0ePMymlnXN5eLy7Yg5PsrfsczcPF3x+N3r+fYy/BwBguk5kt6Sz9/GVPDyN/ML0o9FhV7O7unlc7vl9dqfT/z4OMgAA0EGKPHX6ulqrK25nt+izt+Qzfv3oFCAA4MlOp5R0vppS0hm/PpbdKTqKOkzS3rLP+JTr3sk+2/H+DgCAesdTDiF8OaWYs7eoM5fdoo6SDkdtPOFnLg9PoN8eff37KPoAANCAIk+9WVmtNW3jD3mOZfdDoK0km3tem+YDwKyZT5miM34+k3Jze++vQ1fdzO7ExmT3vd3NlDL3dqNcAAC0czzlEMK5Pc8noqRDt+1d5TWeWPppdg8vWE0MAMBEKPLUU+RpY2/R55cpHwD9KsmvU05FAEBfHU8p5Hx99Dyfh99rKOswRDf2vP5ddqc0bo6eAQDot72rfselnfGhBGUdhmbv6q69E33GB1YdYgAA4EAUeeop8nTLuOBzL6Xc8+uUgs+NmOADQLecym5RZ1zcGd/IVtaBYm/B505KqefX2V3F6v0dAEC3nE2ZHLq3sDOmsAMPT/O5NXr8ZvR8t0kiAAB6Q5GnniJPP4wLPndSCj43Ro/NlJMRADApZ/PwhJ1ze35NYQcOblzyuZfd6T3jCT5ugAMATM5cynXO15J8dfT6dHbXqCrswP6NCz7383C557dx/xoAgBFFnnqKPP02Lvhsp3wYNC75WOEAwH6dSPKNJAtJFlOKO8dSbmYr7MD03Ez59y4pN7/HBZ+bUfABANiP4ykHEcaTdb6Wct2TKOvAtIzXdP1zSqnnd9md5AMAwIxR5KmnyDM843LPTpL1JGujZ7uLARg7m93CzkJ23wso7EB3jSf43Emykd0Ct3IPAEApCnwju5NEz8R0Heiqveu5tlMKPlsp5Z47TRIBADAVijz1FHlmw+09z59kt9xzv1kiAKbheB4u7CyMvn8sD6/IAvppb7lnPJ1xI8o9AMCwHU8p6yxkt7STKO1A3z26nmsruwUf97EBAAZAkaeeIs/sGpd7bmZ3cs/NdnEAOKQz2V2N9VyS01HYgVk0LvfcTfKr0dc34mQrANBP48MJ81HagVk1LvjcTrl/fTNl/TAAAD2jyFNPkYexvSu5xhN7rOQC6K7FJCtJvpnkj0bfU9oBHudGSrHv05Sb3uOCz+2n/UUAAFN2Ig9P2jk9+r7SDrDXuNizk+TXKdc3v05yr1kiAACqKPLUU+Thafau5PpFkmsxtQegheNJlrNb3Dke03aAwxlP7rk3eq3cAwBM04mUiaJfj9IOcHhXU4o9v0+5ttlMWckFAECHKPLUU+RhP7aTzKXsJr6W5OfxYQ/AJJzJbnFnMcmDlJvbAJO0dy3XL1KmNBpZDwAchTNJllKuc5R2gEkbT+25m911XL9OKfsAANCIIk+duZQShiIPB3U75eJnI6XYs5rkftNEAP20kN3iztko7gDdcCPlvd6n2S32ONUKANQ4nTJNdDHlGidR3AHa+jjlM5G9xZ47TRMBAMwYRZ56JvJwlMbFnnGpZ61tHIBOmstuaWc5ycnR963JArruRspav60k/5RS7jGdEQBIyv3FP0nyXMpBhZ0o7gDdNp7aczu75R4TSQEAJkiRp54iD5MyXsN1O7ulno2miQDaWUy5iX0h5c9G03aAIdjI7onW9ZT3e060AsBsOJmyKmsxpbiTKO4A/Tae2HM/5RrnRkqx517LUAAAQ6LIU0+Rh2kZT+v5bcrp7dVYzQAM15mUm9jnR68T5R1g+G6MnjeSfJLkl1HsAYChOJFS2llMKfAkijvA8I2n9mymXOOsN8wCANB7ijz1FHloZTvJg5RCz8/jIgjot+MpN7HH67ISq7IAxsWetewWe5xmBYB+OJ5S2nlu9Dy+5gGYVeNSz92UwwvrKfe4AQCopMhTT5GHLrg9ev4kybWUcs/9dnEAqiylFHdWknw5ijsAz3Ij5T3eJ6PX61HsAYAuGU/bWUhZnaW4A/Bkj07r+WXKRHoAAJ5AkaeeIg9dtJ2ydms15YLo9tN/O8BUnElZlbWc5OtJjkV5B+AwNpL8IWVizy9SboADANNzOsk3U65xTo++p7wDcDBXU6b1rCf5Vcr9bQAA9lDkqfcvKSdsoKtup1wAjVdw3Xjq7wY4WueTfCtl6k6SzDfMAjBk4/d4Gymlnn+K06wAMAkLKdc3Synrss63jQMwSI9O6xlPJwUAmGmKPPVM5KFPxjuH17K7ggvgKJ1OKe5cSPK10fdM3QGYvhtJfpdS6FnL7vtAAGB/TqRM3BmvzNqJqTsA03Y1Za3wesrhBdN6AICZpMhTT5GHvhqv27qZciH0UZzaBg5mMaW8cz5lSp3iDkC3jE+vro0eG23jAEDnnUsp7iyn3PczdQegO66l3MfeTFnBdSNlIj0AwOAp8tRT5GEotlM+1LmS5HrjLEC3zSX5i5TyzvLoe8o7AP0wLvHcTCn1/FPKyVYAmHXj4s5SyjWP8g5AP+yd1nMzpeADADBIijz1FHkYmu2UG1ZXk3yccqIB4EzKjewLSc5GcQdgKG6kTGocT+vZahsHAKbmZJKVlOLO+PpGeQeg366m3Nv+Tcq1zkZM6wEABkSRp54iD0O2neQPKYWej0ZfA7NjKaW4cz7JiZQCDwDDtZFy0/sXKaWe9bZxAODIzSf5ZsrknRNR3AEYuqsp97TXRw/TSAGAXlPkqTOXcnpVkYdZsJ3k99kt9bjogeE5nuTbKTezF0ffM3kHYDaNpzL+JmX91icp1z4A0CdzKaWd5STPjb6nvAMwm66lTCD9JKXUc79tHACA/VPkqWciD7NoO+XDnY9TLoCA/hqXd55PKe3MN00DQFeNR9Kvjh5KPQB01fGUlVnnk3w1ijsAfN7VlFLPeFLPTts4AAB1FHnqKfIwy8artq4nuZLyAQ/QDxdTyjvPxcosAPbnRkqRZ1zqudM2DgBkLqWws5JyQEF5B4Ba11Imka4l+WWUegCADlPkqafIA8V2kj8kuTx6uOCB7rmQUuCxNguAo7KR8j7wesoNcOtXAZimldFjIco7ABzetSQ3s7t+CwCgUxR56sylnERV5IGHbaeczr6cZLNxFph151PKO0ujr5V3AJiUGynj6ceTeu63jQPAQC2nlHeeG32twAPAUbuWclB1M0o9AECHKPLUM5EHnmw7yW+T/EPKxQ8wHSspa7NWRl8r7wAwbRspN73HpR4AOIzFJN/K7gEF5R0ApmVc6rmZUujZaBsHAJhlijx15lKKPCdbB4GO2x49j9du3W2YBYZqKWXyzviGtvIOAF1wI7s3vVdTVnABQI3xuqxvjr5W3gGgtfFh1Y09DwCAqVHkqWO1Fuzf7SRrST5I+WAHOLjFlPLOhZT/Jp1tGwcAnmoj5b9XG0l+HuPpAfi8+ZTJot8afa28A0BX7S31rKUcXgAAmChFnnpWa8HBbKeUen6W5MPGWaBPTid5IclLSY7F5B0A+mlc6F5LmdTjJCvA7DqXUt45n1L4VN4BoG/GpZ5PUq5xNhtmAQAGTJGnniIPHM547dZHKYWeWw2zQJddSPK9JF+L8g4AwzIu8ayl3AB3khVg+M5kt7xzIso7AAzHtST/mnJg4Z+S3GsbBwAYEkWeeoo8cHS2U05nX4pT2ZCUsfIvpZR4EgUeAIbvRpKdJFdHj9tt4wBwhOaSPD96/Lso7wAwfOODCqtxYAEAOAKKPPUUeeDobSf5bZK/S3K9cRaYtuMp5Z0Xknw5yjsAzK4bSX6TUujxnhCgv84luZhkKco7AMymaymTea6nlHpM6QEADkSRp54iD0zOdsop7EspH+DAkK0keTHJN5OcbZwFALpkI2WKw8cxpQegL0zfAYDHG0/p+UXK4QUAgGqKPPUUeWDytpP8IaXQ82HbKHCkTmd3+s6xmL4DAM+ykWQrpvQAdNV8km/H9B0AeJarKWuF/1dKqedu2zgAQB8o8tRT5IHpuZ1ycXNp9IC+uphS4Dkb5R0AOIiN0fO1lBvg2w2zAMy6uZRrnL+I6TsAcBCrKVN6rmf3WgcA4HMUeeop8sD0jT+ouZLkvdgpTD8spJR3xje1FXgA4GhsJLmVsnrLlB6A6ZlPKfA8F+UdADgK15L8n5TrmutJ7rSNAwB0jSJPPUUeaGs75QLnUpzEppsuJvleyvSds42zAMCQmdIDMHnHU1ZnPZ/kRBR4AGBSrqWsFV6NKT0AwIgiTz1FHuiG7SRrKYWezbZRICeTvJIygScxfQcApm08pedqyo1vAA5nIaW8Y/oOAEzXtSQ7KRN6VmNKDwDMNEWeeoo80C3bSdaTvB2nsJm+xZQCz1KUdwCgC8YnV1dTSj23GmYB6JsTKeWdCzF9BwC6YDW7U3rWG2cBABpQ5Kkzl+R2FHmgi7aTfJTk3ST3Gmdh+F5IKfB8OQo8ANBVG9l9j2hKD8CTLaasz1qI8g4AdNG10fMvUq5tbjfMAgBMkSJPPRN5oNu2k1xOKfTAUTqdUt65mFLsPNs2DgBQae+Unitx0xtg7IWU65vjUeABgL4YT+m5muRG4ywAwIQp8tRT5IHuG6/Yejel1AOHsZzkeymnVE3fAYB+20i52X0lyc3GWQBaOJXkxSTfGn2twAMA/XQtyb+Onk0gBYCBUuSpp8gD/XE7yZ2UQs/Vxlnon5dSJvCciuk7ADA047VbV5Jcb5wFYBrmU6bvPBflHQAYknGJ52pKqedewywAwBFT5KmnyAP9s53k90n+Osl62yh03JkkL8f6LACYFRtJ7qcUeq40zgIwCSspE3i+EgUeABi6a0k+GT1vP+P3AgA9oMhTT5EH+ms7ya9TCj2bjbPQLYtJXk+yEOuzAGAWbaSUeH+e5GcpUx0B+uyFlALPXBR4AGDWXE/yq5RpPTcaZwEADkGRp54iD/TfdsrFzLtxMmHWLSf5f5J8LQo8AECxkXKz+8MofwP9ciqlvPOt0dcKPAAw21aT3E45sGClMAD0kCJPvX9JcrJ1COBIbCf5KMnbSXYaZ2G6LiR5NWV1lvVZAMDjbKS8X7wSN72BbptPmcCzEOUdAODzVpM8SCn0XEtyr2kaAKCaIk89E3lgeLZTyjxXWgdh4l5I8lpKIdMEHgCgxkaS+ynvFb1fBLpkJcnFJGeiwAMA1FlNspZS6DGtHgA6TpGnniIPDNN2kt8n+WHKhzUMyyspE3iOxwQeAOBgxu8Rr6UUeu40zALMthdSCjzHo8ADABzMasoq4Z+nrBYGADpIkaeeIg8M23bK6oQfJrnbOAuHM5cyfeeV0WsFHgDgqGyMHldSbn4DTNqplPLOhdHXCjwAwFFYTXI7ydWUST0AQIco8tRT5IHZsJ3k0uhBv5xI8nqSl6K8AwBM1kaSWymFHje9gUmYTynwPBflHQBgclaTPEgp9Pw8Zb0wANCYIk89RR6YHdspU3neTrmQodtOp6zPuhgFHgBgujaS/CGl0PNx4yzAMCynXNucS7LSOAsAMFuup9wP/3nKtB4AoBFFnjpzKW9aFHlgtmwn+XXKuq2txln4vHMpK7S+FQUeAKCtjdHz5ZRSD8B+LSf5XspBBQUeAKCl1SQ3k1wbPQMAU6bIU89EHphd20k+SpnQs9M4C2XE/BtJlqLAAwB0y0bKWPrLMaEHqLOU5OUkX4kVWgBAt4wLPR/FQVcAmCpFnnqKPMB2SpnHKes25pO8nuSbUeABALptffSs0AM8ybjAcyYm8AAA3abQAwBTpshTT5EHSEqZ57dJ/mOSW42zzIpzSd6MAg8A0D/rKRMdLye52jgL0A1LSV5KKfCYwAMA9MlqkhsphxXcGweACVLkqTOX5HYUeYBd20neS/JB6yADdjbJW1HgAQD6byPJ/Sj0wCxbTPK9lGsbE3gAgD67nnKNcyXlPjkAcMQUeeqZyAM8ajvJZpLvp5T9OBpnUibwrKRM4wEAGIqNJH9I8g9JrjXOAkzHYsoEnq/GBB4AYFhWU65xPopCDwAcKUWeOnMpRZ6TrYMAnbSd5MdJPmwdpOfGBZ5vxQQeAGDYFHpg+BaSvJxyOMEEHgBgyFZT1gp/HAdeAeBIKPLUsVoLeJZbSW6mTOe52zhL35xO8kaSC1HgAQBmy0bKe8fLKTe/gf4bF3hM4AEAZs240HMlyZ3GWQCg1xR56lmtBdTYTvJ2ysUKT3cqyVtR4AEAWE9yLwo90GcLKSu05mMCDwAw264n+UXKyi2FHgA4AEWeeoo8QK3tlA9jXkv5QIaHnUpZofXtKPAAAOy1njKh58Mo9EBfzCf5XsoKLRN4AAB2raaUej6OKfYAsC+KPPUUeYD92k4prFxtHaQjTqas0LoYBR4AgKcZF3r+IeXGN9A9CjwAAHWuJ/l5yoQeB18BoIIiTz1FHuAgbiX5JMkrSXYaZ2npRylj5hV4AADqbSS5nbJya61xFqA4l+TlJF+PAg8AwH6MCz1XktxvGwUAuk2Rp54iD3AY2ymrtmZtRcL3krw1eq3EAwBwMBsp7ycvJbnRNgrMrNMpBzSWkqw0zgIA0GfXU6bYfxyFHgB4LEWeeoo8wGHdSrlA+WHrIFNwPmUKz6ko8AAAHJWN0eNSyqQeYDpeTfJ8FHgAAI7S9ZQyz5XWQQCgaxR56inyAEdhO+VDl++mFHuGZj6lwLMQBR4AgEnZSCmIX2qcA4buhZQ1WokSDwDAJFxPspNyfaPQAwAjijz1FHmAo7Sd5MdJPmwd5IicTCnwXIgCDwDANKwnOZZS5rnaNgoMznLKFJ4TKdNGAQCYrOtJ7iW5nGStcRYAaE6Rp54iD3DUtlM+gHk55dRBX72R5JUo8AAAtLCRMvHx0ug1cHDnkrw2ejaBBwBg+q4n+V2SnybZapwFAJpR5KmnyANMyq0k/yGl1NMnLyR5O8lclHgAAFpbT3IzpdCz3TYK9M6JlALPN2MCDwBAF1xPmcxzOWVSDwDMFEWeeoo8wCRtJ/lZkndaB6mwlLIW7GySM42zAADwsPUkqymFnj5PfYRp+V6SF2MCDwBAF11PciXJx62DAMA0KfLUmUsZVa7IA0zSdpLfpkznud04y+OcTfKjlCKPCTwAAN22nnJ61Q1veLwLKSuCj0eJBwCgy64n+deU65u+TbUHgANR5KlnIg8wLdtJ3kp3PnQ5njKB59tR4AEA6JONlGvZv4sb3jC2kLJG60wUeAAA+uR6kt+kFHpuNc4CABOlyFNPkQeYpltJfpFyg7mlV5O8HgUeAIA+W0+54X0pbngzu06nXN8sRoEHAKDPrqfcO7+c5H7jLAAwEYo89RR5gGnbTnI3yXeTbE75n72c5Ccpf+4p8QAADMNGktUk7yXZaZwFpmUuZYXW81HgAQAYkutJPkxytXUQADhqijz1FHmAVm4leTvTWbV1MqXAsxIFHgCAoVpPueF9pXUQmLCLKSUeBR4AgGG6nuSfk/ws5eACAAyCIk89RR6gpe0kHyX54QT/Ga8meTPJmQn+MwAA6Ib1JPdS1m2ttY0CR2455frmRJLzjbMAADB511PWCf805V46APSaIk89RR6gtVtJtpJ8J0e7+3cp5cTCXEzhAQCYNesp7zEvjZ6hz86mFHjmYwoPAMAsup6yTvhyrBMGoMcUeer9S8rKGYDWtpO8mMOPCj2ZckLhuSjwAADMuvWUG97vtw4CB/R6kgtR4AEAoBR6/iHJtdZBAOAgFHnqmcgDdMmtlA9ZLh/wr3895aSqAg8AAGPro+f/knLjG/rgfJL/J8mxKPEAALDrepJ/TrmHfqNxFgDYF0Weeoo8QNdsp5yafm0ff81Kkr8fvVbiAQDgccbrtt5Nec8JXXQm5YCCNVoAADzN9SS/Sin03G6cBQCqKPLUU+QBuuhWysXHnz7j951I8j9SyjsKPAAA1FhPcjXJB62DwCNeSXIxCjwAANS7nnJ982HrIADwLIo89RR5gK7aTvIgyZ/l8Semf5Jyk1uBBwCA/VpPcj9lreta4yywnOSNJMejxAMAwP6tJflDkr/L7mphAOgcRZ56ijxA191K8ldJro2+vphS4kmUeAAAOJz1JDdTCj3G0TNtp5K8mWQhCjwAABze2ujx0yT3GmcBgM9R5Kkzl3KjUpEH6LpbKeNBV5J8OcmZtnEAABiY9SQfJ7ncOggz43tJXowCDwAAR28tyaUkq41zAMBDFHnqmcgDAAAApcxzL8m7STYaZ2G4lpK8nuRklHgAAJic60l+k1LoMX0UgE5Q5KmnyAMAAAC71pP8KqXQc7dxFobjZJI3kixGgQcAgOlZS/KzlAmkANCUIk89RR4AAAD4vPUkV5J82DoIvffS6KHAAwBAC9eT/C7JT5NsNc4CwAxT5KkzlzJOT5EHAAAAPm89yZ0k7ye50TgL/bOYMoXHGi0AALpgLcnVJJdbBwFgNiny1DORBwAAAJ5uPcknSd5Lcq9xFrrveEqBZzkKPAAAdMtayiH/D+KwAgBTpshTZy6lyHOydRAAAADogfWU06sftw5CZ72Q5OUo8AAA0G1rKSu3LiXZaRsFgFmhyFPHai0AAADYn/Uk/5zk3SSbjbPQHfMpU3hOR4kHAID+WE0p86w1zgHADFDkqWe1FgAAAOzfepKfp9z0Zra9muT5KPAAANBPa0k2Uq5t7raNAsCQKfLUU+QBAACAg1lPcifJ20m2Gmdh+s6l/H9/Kko8AAD031rKKuGrrYMAMExzrQMAAAAAg7c8ej6V5OOUm97MhleSXIwCDwAAwzF+b7uUMp1nu10UAIbIRJ56JvIAAADA4a0n+V3KhJbbjbMwOWeTvJXkTJR4AAAYrrUkV0YPADgSijz1FHkAAADg6Kwn+SDG0Q/RS6OHAg8AALNgLWUqz6Ukm22jADAEVmsBAAAALYzXbS2lTOe51zALR+N0kh/FFB4AAGbL+L3vmSTXUg4sAMCBmchTz0QeAAAAmIz1JP8lyfXWQTiwi0leiQIPAACzbS3J3STvJ7nROAsAPWUiDwAAANDa3uk8P06y0zAL+3MyZQrPfJR4AABg/J74ZMoa4csNswDQUyby1DORBwAAACZvPclfj57ptgtJXo8CDwAAPM5aku2UwwrbjbMA0COKPPUUeQAAAGA61pOspoyjp3uOp0zhWYwSDwAAPMtakg+SXGsdBIB+sFoLAAAA6JrlPc8/TLLZMAsPO5/kjSjwAABArZWUz2QXkryX5F7bOAB0nYk8deaS3I6JPAAAADBt60muppxgpZ25JG8nWYoSDwAAHNR48qhVwgA8kYk8dXZaBwAAAIAZNZ7O8ycpRZJbDbPMquWUVVoKPAAAcDgXUlbVLiS51DYKAF2lyAMAAAB03bjM85Ukl5N83DDLrHkrpcCjxAMAAEdj/N56PmXV1lbDLAB0kNVa9T6N1VoAAADQ2nrKje63k9xpnGXIFpL8OOW0sBIPAABMxnocVgDgEYo89RR5AAAAoDvWk7yfZLV1kAF6PWXkvwIPAABM3lqSm0neTXK3cRYAOkCRp54iDwAAAHTLespN73daBxmI0ylTeM5EiQcAAKZtLaXMs9Y6CABtzbUOAAAAAHBAy6Pn+SQ/THKrYZa+u5Dk1STnWwcBAIAZNS7Tzye51DAHAI2ZyFPvX5KcbB0CAAAAeKz1JH+X5FrrID30o5RSlCk8AADQ3lqSOynTeTYbZwGgARN56u20DgAAAAA80Xg6z9dj1Vatc0l+kuRLUeIBAICuGL83P5XkyugBwAxR5AEAAACGYlzmWUjyV7Fq62leSPJyFHgAAKCrVlI+y11Imc5zp20cAKbFaq16n6Y0XwEAAIDus2rr8Y4n+XHKhwFKPAAA0A9rKWWetdZBAJg8E3kAAACAIVpOWZO9kOTtxlm6YimlxKPAAwAA/TJ+D7+YUugBYMBM5KlnIg8AAAD0z3qSu7Fq65UkF6PEAwAAfbaWsmLrUpIbbaMAMCmKPHXmktyOIg8AAAD01UbKze6rjXNM26mUE7tfTZlSBAAA9N96kg+TXGkdBICjZ7VWnZ3WAQAAAIBDWUryIMl8ZmfV1kqSt2IKDwAADM14lfDZzM71DcDMMJGnntVaAAAA0H8bKau23kyy1TjLJI0LPEo8AAAwXONVW29ntlcJAwyKiTwAAADALFkaPZ9I8kGGt2rrbJIfpxxGUuIBAIBhG7/nP5Xk/STXG2YB4Igo8tTxcwIAAIBhGY+iX0jyw8ZZjsrFJK+m/G8DAABmx7jQ89WUAwsA9JjVWvWs1gIAAIDhWU9yL/1ftfWTJIsxhQcAAGbZWpLNlFVb9xpnAeCAFHnqzKUUeU62DgIAAABMxHqSy0k+bh1knxZSSjzHosQDAAAU11Mmj95sHQSA/bMyqt5O6wAAAADAxIzXUX0t5fRqH7w0eijwAAAAe51PKftfTnK1cRYA9slEnnpWawEAAMDwrSe5k+QHSW43zvI07yV5LrsFJAAAgEetp6zbeqd1EADqmcgDAAAAsGtcjDmV5K+S3GiY5XFOJ/nblPXfSjwAAMDTLKdsHTmbsmqry4cVABgxkaeeiTwAAAAwW9ZTRtF/3DrIyFKSn0SBBwAA2L/1lMk8a62DAPB0JvIAAAAAPN64MHM6yfstgyR5afRQ4gEAAA5ifC1xNuXAAgAdpcgDAAAA8GR7b3Z/v1GGHyVZiRIPAABwOONVW+dSVm3dbxsHgMexWque1VoAAAAwu9aT3EvygyS3pvTPPJnkvSRnUoo8AAAAR+Vakr9Ostk6CAAPM5EHAAAA4NnG03BOpNzsXp/wP28xyU+iwAMAAEzG80m+lLJm62rjLADsYSJPPRN5AAAAgKSUeK4k+XBCf/+LSV6JEg8AADB560l+keTd1kEAKEzkAQAAANif8XSeP0ry9hH/vd9IcmHPPwMAAGCSxtceZ1Oub243zAJATOTZDxN5AAAAgL3WUm5y/yDJ3UP+vY6nrNKaj0k8AABAG+uZziphAJ5CkaeeIg8AAADwOOspZZ6bB/zr51NKPBeOLBEAAMDBTHqVMADP8MXWAXrCCjIAAADgSZaTvJeDFXHOJ/nbA/61AAAAR205yYtJftw6CMCsUlCps9M6AAAAANBpKyn3Wc4muVT517yS5IWUG+UAAABdsZKy/vd0kteT3GuaBmDGKPIAAAAAHI1xIed0kjef8Xt/kmQpSjwAAEA3LY0ep1Kub7baxgGYHVZrAQAAAByd5STPJfmfKdN5HnUmyUdR4gEAAPrhQpK/T5nSA8AUmMgDAAAAcLTGBZ0vJXknyfqe7//nKPAAAAD9Mr6GOZXk45ZBAGaBIg8AAADAZKyk3Hv5cPT196LEAwAA9NPeVcLvtwwCMHRf+Oyzz1pn6ItPU1qmAAAAAAAAALNoPcmvkrzZOgjAUH2xdYAeMb0IAAAAAAAAmGXLSZ5L8lGS442zAAySckq9ndYBAAAAAAAAABobr9k6leQHSTYbZgEYHBN5AAAAAAAAANivlST/NcnzrYMADImJPAAAAAAAAAAcxHg6z79L8mHLIABDocgDAAAAAAAAwEGNyzynk7zTMgjAECjyAAAAAAAAAHAYe8s8328ZBKDvvtg6QE8oPAEAAAAAAAA82XKSc0n+Z+sgAH2myFNnp3UAAAAAAAAAgI5bTnIyyf9OcqptFIB+UuQBAAAAAAAA4Kgsjx7/I8li4ywAvaPIAwAAAAAAAMBRW07yN0leaB0EoE/mWgfoCT8nAAAAAAAAgP1ZHj3/UZJ3G+YA6A0FlTo7rQMAAAAAAAAA9NC4zHMmyfdbBgHoA6u16sxF6QkAAAAAAADgIJaTzCf5x9ZBALpOkaeeqTwAAAAAAAAAB7OU5HiS/904B0CnKfLUUeIBAAAAAAAAOJzlJMeS/LJ1EICuUuQBAAAAAAAAYFqWkjxImcwz1zYKQPd84bPPPmudoS8+TXKqdQgAAAAAAACAgdhIcj7JvdZBALrCRB4AAAAAAAAAWlhKcj3JmdZBALpCkQcAAAAAAACAVpaSfJRkvnUQgC5Q5AEAAAAAAACgpaUk/3X0DDDTFHkAAAAAAAAAaG05yXtJzrcOAtCSIg8AAAAAAAAAXbCU5EdJLrYOAtDKXOsAAAAAAAAAADAyXq91IsmHLYMAtKDIAwAAAAAAAECXjMs8J5O83zIIwLQp8gAAAAAAAADQNeMyz/Ek77QMAjBNijx1/JwAAAAAAAAApmtc5vlSkjdbBgGYli+2DtATO60DAAAAAAAAAMygpdHjZ62DAEyDIg8AAAAAAAAAXbaU5FySj1oHAZg0RR4AAAAAAAAAum4pyZkk/9g6CMAkKfIAAAAAAAAA0AdLSb6U5H83zgEwMYo8AAAAAAAAAPTFUpJjSX7ZOgjAJCjyAAAAAAAAANAnS6NnZR5gcBR56s21DgAAAAAAAABAkofLPD7LBQbjC5999lnrDH3xaZJTrUMAAAAAAAAA8JCNJH+R5G7rIACHZSIPAAAAAAAAAH22lOR/JTneOgjAYSnyAAAAAAAAANB3S0n+qXUIgMNS5AEAAAAAAABgKH7ZOgDAYSjyAAAAAAAAADAES6NnZR6gtxR56sy1DgAAAAAAAADAMynzAL2myFNnp3UAAAAAAAAAAKqMyzz/u2UIgINQ5KljIg8AAAAAAABAfywlOZbkH1sHAdgPRZ46JvIAAAAAAAAA9Mu4zPPfWgcBqKXIU8dEHgAAAAAAAID+WUlyKslPWwcBqKHIU8dEHgAAAAAAAIB+Op/kq0l+0joIwLMo8tSZi6k8AAAAAAAAAH11PslCkh+3DgLwNIo89U62DgAAAAAAAADAgZ1P8lySN1oHAXgSU2bq3UnZnQgAAAAAAABAP51PcizJ/SQfNM4C8DmKPHV2WgcAAAAAAAAA4EisJHmQ5F6SK42zADxEkaeOnxMAAAAAAADAcOydzHO1cRaAf6OgUsdEHgAAAAAAAIBhGU/muZ9ktXEWgCSKPAAAAAAAAADMrvOj5/tJ1loGAUgUeQAAAAAAAACYbeMyz70kN1oGAVDkqePnBAAAAAAAADBc55McS/KDJJuNswAz7IutA/TETusAAAAAAAAAAEzUSpK/SXKmdRBgdiny1DGRBwAAAAAAAGD4zif5+ySnWgcBZpMiTx0TeQAAAAAAAABmw/kk/y3J8dZBgNmjyFPHRB4AAAAAAACA2XE+yf9sHQKYPYo89YxOAwAAAAAAAJgt/9g6ADBbFHnq3WkdAAAAAAAAAICpOZ/kWJK/bx0EmB2KPHV2WgcAAAAAAAAAYOpWkpxJ8kbrIMBsmGsdoCf8nAAAAAAAAABm03gyz++SXGucBRg4BZU6JvIAAAAAAAAAzK6V0fOtJJstgwDDZrVWHYUnAAAAAAAAgNm2kuRvk5xsHQQYLkWeOibyAAAAAAAAALCS5L+3DgEMlyJPnbmYygMAAAAAAABA8U+tAwDDpMhTZyem8gAAAAAAAACQnE/yIMnftw4CDI8iTx3TeAAAAAAAAAAYO5/kbJK3WgcBhkVBpY5pPAAAAAAAAADstZIymedWkquNswADochTx88JAAAAAAAAgEedT3IsyZ0k642zAAOgoFLHRB4AAAAAAAAAHmdl9Pxpkq2WQYD++2LrAD2h8AQAAAAAAADAk6wk+fskZ1oHAfpNkaeOiTwAAAAAAAAAPM1yko+SnGgdBOgvRZ46JvIAAAAAAAAA8CxLSX7WOgTQX4o8dUzkAQAAAAAAAKDG6STvtQ4B9JMiTx0TeQAAAAAAAACosZTkm0neah0E6B8FlTom8gAAAAAAAABQa3H0/GmSD1sGAfpFkafOXPysAAAAAAAAAKi3mDI04l+TXGucBeiJL3z22WetM/TBXJIHrUMAAAAAAAAA0Ds3kvwgyUbrIED3fbF1gB650zoAAAAAAAAAAL2zmORvk5xtHQToPkWeOjutAwAAAAAAAADQW4tJ/qZ1CKD7FHnqzLUOAAAAAAAAAECvnU7yXusQQLcp8tQxkQcAAAAAAACAw1hM8s0k32sdBOguk2YAAAAAAAAAYDoWR8/bSdZaBgG6yUQeAAAAAAAAAJiexSQ/TnKmdRCgexR56phcBAAAAAAAAMBRWUrybusQQPco8tTZaR0AAAAAAAAAgEH5aspkHoB/Y9JMHT8nAAAAAAAAAI7S4uj5VpIrLYMA3aGgUsdEHgAAAAAAAACO2t4yz0bLIEA3WK1VR+EJAAAAAAAAgElYTPJeklOtgwDtKfLU84cmAAAAAAAAAJOwlFLmAWacIk+9O60DAAAAAAAAADBY55L8qHUIoC0ro+rstA4AAAAAAAAAwKAtjp63klxtGQRox0SeOgpPAAAAAAAAAEzaYpI3slvqAWaMIk8dE3kAAAAAAAAAmIbFJD9JcrJ1EGD6FHnqmMgDAAAAAAAAwLSsJHmvdQhg+hR56pjIAwAAAAAAAMA0fT3JW61DANNl0kydufhZAQAAAAAAADA9i6PnrSTXWgYBpsdEnjo7MZUHAAAAAAAAgOlaTPKfkiy0DgJMhyJPHdN4AAAAAAAAAGhhMclPkhxvHQSYPEWeOqbxAAAAAAAAANDK+ZQyDzBwijx1TOQBAAAAAAAAoKWlJK+3DgFMloJKHRN5AAAAAAAAAGhpMcmxJFtJrjfOAkyIiTx1FJ4AAAAAAAAAaG0hyX9OcrZ1EGAyFHnqmMgDAAAAAAAAQBcsJvlx6xDAZCjy1DGRBwAAAAAAAICuOJPk1dYhgKOnoFLHRB4AAAAAAAAAumIpyYMkv0pyo3EW4AiZyFNH4QkAAAAAAACALllO8qP4PBsGRZGnjok8AAAAAAAAAHTNhSRvtw4BHB1Fnjpz0WIEAAAAAAAAoHuWkjzfOgRwNJRT6p1sHQAAAAAAAAAAHrEyet5McqtlEODwTOSpd6d1AAAAAAAAAAB4jJUkb7UOARyeIk+dndYBAAAAAAAAAOApziR5tXUI4HCs1qrj5wQAAAAAAABAl41XbN1MstEyCHBwCip1TOQBAAAAAAAAoOtWkjxI8pdJ7jfOAhyA1VoAAAAAAAAAMBznk/y4dQjgYBR5AAAAAAAAAGBYFpJcbB0C2D+rter4OQEAAAAAAADQFyuj580kWy2DAPtjIk+dndYBAAAAAAAAAGAfVpK81ToEsD+KPHVM5AEAAAAAAACgb04neb11CKCegkodE3kAAAAAAAAA6Jvxiq0bSTZaBgHqKPLU8XMCAAAAAAAAoI/GZZ7nk9xrGQR4Nqu16p1qHQAAAAAAAAAADmAlydutQwDPpshT707rAAAAAAAAAABwQM8leaF1CODprIyqs9M6AAAAAAAAAAAcwnLKZ983k2w1zgI8gYk8dRSeAAAAAAAAAOi7lSRvtQ4BPJkiTx0TeQAAAAAAAAAYgjNJ3mgdAng8k2bq+DkBAAAAAAAAMATLo+ebSdZaBgE+T0Gljok8AAAAAAAAAAzFcsrn4BtJ7jfOAuxhtVaduSg9AQAAAAAAADAcK7FiCzpHkafOTkzlAQAAAAAAAGBYlrO7agvoAFNm6vg5AQAAAAAAADA0KymrtdZbBwEKE3nqmMYDAAAAAAAAwBAdT/J66xBAYdJMHT8nAAAAAAAAAIZoZfS8nuRmyyCAiTy1TOQBAAAAAAAAYKhWYioPdIIiTx0TeQAAAAAAAAAYsjNJXmkdAmadgkodE3kAAAAAAAAAGLLl0fNaklstg8AsM5GnjsITAAAAAAAAAEO3HCu2oClFnjom8gAAAAAAAAAwC84leaF1CJhVJs3U8XMCAAAAAAAAYBasJDmZZCPJduMsMHNM5KljIg8AAAAAAAAAs2IhyZutQ8AsUuSpMxdTeQAAAAAAAACYHc8leb51CJg1X/jss89aZ+iDuSQPWocAAAAAAAAAgCnaSHI+yb3WQWBWmMhT707rAAAAAAAAAAAwRUtJ3modAmaJIk+dnVitBQAAAAAAAMDsWRk9gClQ5Kkzl1LmAQAAAAAAAIBZspgylcfwC5gCRZ46O0ketA4BAAAAAAAAAA2sJHm9dQiYBYo89Y61DgAAAAAAAAAAjbyYMp0HmCBFHgAAAAAAAADgWRaSvNE6BAydIk8du/4AAAAAAAAAmHVnk7zaOgQMmSJPnZ3WAQAAAAAAAACgsYUkLyc51zoIDJUiTx0TeQAAAAAAAACglHnebB0ChkqRp46JPAAAAAAAAABQLCR5oXUIGCJFnjom8gAAAAAAAABAsZDk9SSnG+eAwVHkqXeqdQAAAAAAAAAA6IjFlDIPcIQUeerdaR0AAAAAAAAAADpkJclS6xAwJIo8dXZaBwAAAAAAAACAjllI8lrrEDAkijx15loHAAAAAAAAAIAOOpfkhdYhYCgUeeqYyAMAAAAAAAAAnzeeymNABhwBRZ46/sABAAAAAAAAgMdbSvJ66xAwBIo8dXaizAMAAAAAAAAAT/JikrOtQ0DfKfLUUeIBAAAAAAAAgCdbSPJq6xDQd4o8dXZGDwAAAAAAAADg8ZZGD+CAFHnqmMgDAAAAAAAAAE+3mOSV1iGgzxR56pjGAwAAAAAAAADPdibJxdYhoK9Mmqnj5wQAAAAAAAAAz7acMizjWgzNgH0zkaeOP1wAAAAAAAAAoM5KrNiCA1HkqWMiDwAAAAAAAADUu5iyZgvYB0WeOibyAAAAAAAAAEC95ZjKA/umyFPHRB4AAAAAAAAA2J+l0QOopMhTx0QeAAAAAAAAANif5SSvtQ4BfaLIU8dEHgAAAAAAAADYv68keaF1COgLBZU6JvIAAAAAAAAAwP4tj55/nuR+wxzQCyby1JmL0hMAAAAAAAAAHMRykldah4A+UOSpd7J1AAAAAAAAAADoqW8nOds6BHSdIk+9O60DAAAAAAAAAEBPLSd5tXUI6DpFnjo7sVoLAAAAAAAAAA5jIaXQAzyBIk+duZQyDwAAAAAAAABwMKbywDMo8tTZSfKgdQgAAAAAAAAA6LlTSV5qHQK6yrqoesdaBwAAAAAAAACAnltO+fx9Ncndxlmgc0zkAQAAAAAAAACmaSnJK61DQBcp8tQxuQgAAAAAAAAAjs63kpxtHQK6RpGnzk7rAAAAAAAAAAAwIMtJXmodArpGkaeOiTwAAAAAAAAAcLS+meRc6xDQJYo8dUzkAQAAAAAAAICjtZzk5dYhoEsUeeqYyAMAAAAAAAAAR28pyULrENAVijz1TrUOAAAAAAAAAAADs5TkpdYhoCsUeerdaR0AAAAAAAAAAAZoMaXQAzNPkafOTusAAAAAAAAAADBQS0lebh0CukCRp85c6wAAAAAAAAAAMGDnkqy0DgGtKfLUMZEHAAAAAAAAACbHVB6IIk8tE3kAAAAAAAAAYLK+kuRC6xDQkoJKnZ34WQEAAAAAAADAJC0nuZtktXUQaMVEnjpKPAAAAAAAAAAweV9O8nzrENCKIk+dndEDAAAAAAAAAJicpST/d+sQ0IoiTx0TeQAAAAAAAABgOr6U5KXWIaAFBZU6pvEAAAAAAAAAwHQsJXmQ5KP4vJ4ZYyJPHYUnAAAAAAAAAJie5SQvtw4B06bIU0fDDwAAAAAAAACm64UkJ1uHgGlS5KljIg8AAAAAAAAATNdykldah4BpUuSpYyIPAAAAAAAAAEzfxSSnW4eAaVHkqWMiDwAAAAAAAABM30JM5WGGKPLUMZEHAAAAAAAAANq4kORs6xAwDYo8dUzkAQAAAAAAAIA2TOVhZijy1DGRBwAAAAAAAADaWUky3zoETJoiT525mMoDAAAAAAAAAK2YysNMUOSpd7J1AAAAAAAAAACYYUtJFluHgElS5Kl3p3UAAAAAAAAAAJhhC0lebR0CJkmRp85OrNYCAAAAAAAAgNbmUybzwCAp8tSZSynzAAAAAAAAAADtLCR5sXUImBRFnjo7SR60DgEAAAAAAAAAZCnJ2dYhYBIUeeodax0AAAAAAAAAAMhCkhdah4BJUOQBAAAAAAAAAPrm+SQnW4eAo6bIU2eudQAAAAAAAAAA4N8sJHmpdQg4aoo8dXZaBwAAAAAAAAAAHmK9FoOjyFPHRB4AAAAAAAAA6JZjMZWHgVHkqWMiDwAAAAAAAAB0y0JM5WFgFHnqmMgDAAAAAAAAAN1zOsn51iHgqCjy1DvVOgAAAAAAAAAA8JD5WK/FgCjy1LvTOgAAAAAAAAAA8DlfT7LYOgQcBUWeOjutAwAAAAAAAAAAj2UqD4OhyFNnrnUAAAAAAAAAAOCJvpnkXOsQcFiKPHVM5AEAAAAAAACA7ppP8mLrEHBYijx1TOQBAAAAAAAAgG77dpJTrUPAYSjy1NmJMg8AAAAAAAAAdNl8koutQ8BhKPLUUeIBAAAAAAAAgO57KT7jp8cUeersjB4AAAAAAAAAQHctJnmxdQg4KEWeOtp6AAAAAAAAANAPL7QOAAelyFPHNB4AAAAAAAAA6IfTSS60DgEHochTx0QeAAAAAAAAAOiH+VivRU8p8tQxkQcAAAAAAAAA+uNcksXWIWC/FHnqmMgDAAAAAAAAAP2xkOSl1iFgvxR56pjIAwAAAAAAAAD98s2UyTzQG4o8dUzkAQAAAAAAAIB+mU/yYusQsB+KPHVM5AEAAAAAAACA/vl2klOtQ0AtRZ46JvIAAAAAAAAAQP/MJ3mpdQiopchTT0MPAAAAAAAAAPrn+dYBoJYiDwAAAAAAAAAwZCeSnG8dAmoo8gAAAAAAAAAAQzaf5NutQ0ANRR4AAAAAAAAAYOiWkpxuHQKeRZEHAAAAAAAAABg6U3noBUWeendaBwAAAAAAAAAADuxi6wDwLIo8dXaSPGgdAgAAAAAAAAA4sJNJlluHgKdR5Kl3rHUAAAAAAAAAAODArNei8xR56sy1DgAAAAAAAAAAHNpKymQe6CRFHgAAAAAAAABgVpjKQ6cp8tTZaR0AAAAAAAAAADgSF1sHgCdR5KljtRYAAAAAAAAADMPpJIutQ8DjKPLUMZEHAAAAAAAAAIbBei06S5Gnjok8AAAAAAAAADAcF5Icbx0CHqXIU+9U6wAAAAAAAAAAwJEwlYdOUuQBAAAAAAAAAGbRxdYB4FGKPAAAAAAAAADALDqbMpkHOkORp96d1gEAAAAAAAAAgCNjvRado8hTZ6d1AAAAAAAAAADgyD3fOgDspchTZ651AAAAAAAAAADgyM0ludg6BIwp8tTZiTIPAAAAAAAAAAzNfJILrUPAmCJPHSUeAAAAAAAAABimhSTnWoeARJGn1s7oAQAAAAAAAAAMi6k8dIYiTx0TeQAAAAAAAABguC62DgCJIk8t03gAAAAAAAAAYLiOJznfOgQo8tQxkQcAAAAAAAAAhms+pvLQAYo8dUzkAQAAAAAAAIBhey7J6dYhmG2KPHVM5AEAAAAAAACAYTOVh+YUeeqYyAMAAAAAAAAAw3ehdQBmmyJPHRN5AAAAAAAAAGD4TiVZbB2C2aXIU8dEHgAAAAAAAAAYvvkk32odgtmlyFPHRB4AAAAAAAAAmA3nWwdgdiny1DvVOgAAAAAAAAAAMHEnkiy1DsFsUuQBAAAAAAAAANg1n2SldQhmkyIPAAAAAAAAAMDDrNeiCUUeAAAAAAAAAICHnUiy3DoEs0eRBwAAAAAAAADgYdZr0YQiT707rQMAAAAAAAAAAFNzoXUAZo8iT52dJA9ahwAAAAAAAAAApmYu1msxZYo89Y61DgAAAAAAAAAATM18km+1DsFsUeSpM9c6AAAAAAAAAAAwdedbB2C2KPIAAAAAAAAAADzeXJR5mCJFnjo7rQMAAAAAAAAAAFM3n2SldQhmhyJPHau1AAAAAAAAAGA2fat1AGaHIk8dE3kAAAAAAAAAYHZZr8VUKPLUMZEHAAAAAAAAAGbTfEzlYUoUeeqdah0AAAAAAAAAAGhiJYaAMAWKPAAAAAAAAAAATzcf67WYAkUeAAAAAAAAAIBnU+Rh4hR56t1pHQAAAAAAAAAAaOabSY63DsGwKfLU2WkdAAAAAAAAAABoaj7JSusQDJsiT5251gEAAAAAAAAAgOYutA7AsCny1NmJMg8AAAAAAAAAzLqlJCdah2C4FHnqKPEAAAAAAAAAAPNJzrcOwXAp8tTZGT0AAAAAAAAAgNm20joAw6XIU8dEHgAAAAAAAAAgsV6LCVLkqWMaDwAAAAAAAACQWK/FBCny1DGRBwAAAAAAAAAYU+RhIhR56pjIAwAAAAAAAACMPRfrtZgAk2bq+DkBAPTPZkohe+4Jz0+y99cXJhkQAADgEK6NnsfXOXnM18eSPHjK3+P5CeQCAJgV80mWk6y2DsKwKKjUMZEHAKAbbu55fXf0uJPk0z2vx1/fGX3voE4k+VKSk3tenxh9fXzP6/H3x7/n+J6/hyIQAADwJOMizr0kt1OuYR6Mvr7/yOPenl97sOf7h7l3fSLJD1KuY07teR5f64wfew9FKP4AADxsKYo8HLEvfPbZZ60z9MFcyoXUqdZBAAAGbnPP63tJbiXZSvL7JL9L8tvR9/vgTJKzSc4l+aPR8+k9v67kAwAAw7aa3Wk495Jsp1zbbO953adDpGdSrmnOpFzjnE7ylSj5AACz7UaSP24dgmFR5Kn3aRR5AACOys3snuq8lVLg+c3o+VbDXNNyMqXk89UkX9vz+tjo15V8AACgH65ld33VnXy+rHO7WbLpOpFyXTN+nEuZVqrgAwAM3WaSf5+HD6nCoSjy1DGRBwDg4DZTCju/T/Kr0debKTe1+bzj2b3xfT67pR7lHgAAaG+8Duufk/wyyUZc2zzN+PpmfHhhcfR9BR8AYEheS/JB6xAMhyJPnbnsjkAFAODpxsWdrZQb22uj1xzcqSQrSf4sij0AADBN44k7t1LWJvwqszFFdNIWU65pFlOm+STJxXZxAAAO5VqSv2wdguFQ5KmjyAMA8GTjkaEbex5ubE/W6STfjGIPAAActdWUe8FbKSuBb8b1zTQsjB7fSPKVmNYDAPTLZpI/TXK3cQ4GQpGnjiIPAMCucXFnK2XaznpM3Gltb7Hn6yknhhV7AADg2cYTd24k+U2SX8eqrNbmsjux50+S/F9R7AEAuu87Sa62DsEwKPLUUeQBAGbdZpJ7KcWdcXmH7jqbUuxZTjI/+p5iDwAAFNdSyjqfpBR4breNwzOczu4arq+nrHK2hgsA6JoPkrzWOgTDoMhTR5EHAJhFmykj5H+e5HqSO03TcBgXUm50z0ehBwCA2XQtye9SDiWsJbnfNg6HMJ/dgwtzMa0HAOiGmylrQuHQFHnqzKWcyjjVOggAwIRtppxMXU0ZA2qn77CcSLnJ/e0kfxSlHgAAhm01uyuBf5kyZZRhWUiykmQpJvUAAG1tJXk5yUbrIPSfIk+9/y9lhCcAwNBspkzbuZYyfcdY+dlwKrulni9HqQcAgGG4luQ3KZN31lPKHcyGxZRSz/jaRqkHAJi2N5O83zoE/afIU+/TmMgDAAzHZsoo+aujx3bbODR2LqXUcyHJ8Sj1AADQH6uj582UyTvKOyRl7da3snutAwAwDdeT/HnrEPSfIk8dq7UAgKHYTBnt+XHKDW541GJKoefC6GulHgAAumg1yc3slnfgcU6mFHrOpxxaMKUHAJikzSR/EQdnOSRFnjqKPABAn22mvJe5mlLgud82Dj2yklLoWY5CDwAA7V1Lcmz0fDXJvbZx6Jn5lFLPYso9f5N6AIBJ+G6SK61D0G+KPPWs1gIA+mRz9PzzlBvcm0/+rfBMx5O8kuSFlA9OlHoAAJim1SR3U65tVp/xe6HG+ZRSz+mY0gMAHK0Pk7zcOgT9pshTx0QeAKAvNlMm7nyY5HLjLAzTCykXoiej0AMAwGStpqwluBrrs5iMhZQppPNR6AEAjsZmkm8k2WkdhP5S5KlnIg8A0GWbSW6lFHicUGUazid5Kcm5KPQAAHC0riX5TUwXZXpOpazaWolCDwBweH+WZK11CPpLkaeOiTwAQFdtJtlImb5zs3EWZtNCyoSe55IsNs4CAEC/raZ84HE15X4sTNtcSqHnQsqKYaUeAOAg3k7yTusQ9JciT525JA9ahwAA2GMzyc+T/DTJnbZRIElyOskrSb4VhR4AAOqNJ4peHT3uN8wCey2lHFo4EYUeAGB/1lKm8sCBKPLUUeQBALpiM+Ui4FKS7bZR4LGOJ/leyg3vxNotAAAebzXJ3ZTyjvXAdNl4rfBcFHoAgDpbKVP+tloHoZ8Ueeoo8gAArW2mrM56N9780x8XU0o9J2NKDwAAxWrK1J3LKYcUoC+eT/JClHkAgDrfT3nPC/umyFNnLmUn86nWQQCAmbOZ5FaS95NsNM4CB3UxyRuj1wo9AACzazVlAs+V1kHggMZTeS6mFHsAAJ7k4yQvtg5BPyny1Ps0ijwAwPRsJrmTUuC53jgLHJU3Um54K/MAAMyW1STrKSeS7zXOAkfhRMoHcysxoQcAeLytJN9ImUYJ+6LIU8dEHgBgWjZHz+/HKVWG6WySt5IsjB4AAAzXasqE0cuxIphhOpPkpSTzUegBAD7vL1LeE8O+KPLU+5ckJ1uHAAAGbTNl3Oa7rYPAFJxP8p+SHI8JPQAAQ7OaMnnnp7EimNmwkOTllMPACj0AwNj7Sd5sHYL+UeSpM5eyWkuRBwCYhK0kaykFntuNs8C0vZ5ygtV0HgCAYVhNmS56tXUQaOB8ku+NXiv0AAA3kvxx6xD0jyJPvU9jtRYAcLS2kvw2yTtJbjbOAi2dSlm3tRTTeQAA+upakk9S1mjdb5wFWnsppdTzQusgAEBTm0m+G/f/2SdFnjpzKafjFXkAgKOymTKB5+PWQaBDlpL8KGUSpkIPAEA/rKZc31xOst04C3TJqSSvJTkX03kAYJb9IMml1iHoF0WeeibyAABHYTPllOpbSe41zgJd9VKSV6PMAwDQZasp1zSXUlYGAI83XrelzAMAs+lqku+0DkG/KPLUMZEHADiszdHzXyW53jII9MSJlMLb+SQLjbMAAPCw1SRrcbIYapnOAwCzayvJ11qHoF8UeeqZyAMAHNRmkl8kebN1EOihpSQ/SXI8JvQAALS2muRBkv8SU3jgIC6kTCBV5gGA2bGZ5LtJbrYOQn/MtQ7QE35OAMBBbCa5m+Svk6w3zgJ9tZHkT1PKPIkyDwBAK6sp783ebR0Eemw1pQS3FdN5AGBWzKfc01TkodoXWwfoiZ3WAQCA3tlMuUH3p1HigaPwwzj5DQDQymqS96PEA0fhTpK3k1xJcrVxFgBgOhZaB6BfrNaqM5fkdqzWAgDqbKWs0VptHQQG6FSS91JOsrgABgCYrNWUk8PvJrnfOAsM0Zkkryc5HdN5AGDIbiT549Yh6A9FnjpzKbufAQCeZjOlxPP9lJVawOS8Mnoo8wAATMZqkg+SXG8dBGbAS0kuRJkHAIZqK8n5JNutg9APijx1FHkAgGfZTPJhkkuNc8AsmU/yN0lOpuyZBgDg8FZTPmh4L2UFEDAdC0leS3IiCj0AMETfibWaVPpi6wAAAD23mTIW8z9EiQembTPJn6d82HSjcRYAgCFYTXIlZVWwEg9M180kLydZjw/5AGCITBan2lzrAAAAPbaVZCNllRbQzjtJfpXkP8dkHgCAg7ie5HcpU3iM+4e2Pkjym9Frk3kAYDgUeahmtVYdq7UAgEeNR81/2DoI8G9OpPx7uRCFHgCAWtdSJvG4toFuOZXkrSSno9ADAEOwmeSPk9xvHYTuU+Spo8gDAOx1M2UKj1U+0E0vJHk9yjwAAM+ymrIieK1xDuDJXkmyEmUeABiCP01ZowlPZbUWAEC9zZT1Pa8k2WmcBXiyj1P+Xf1/kyw3zgIA0FXXkvxVklutgwBPdTm7/54q8wBAvz0XRR4qKPIAANTZSrl59kHrIECVW0n+PMl/TxlFbzoPAECxmuR2ktfigAL0xVrKNc6dlJVbCj0A0E/uUVLli60D9Mjt1gEAgGY2k7wcJR7om/tJ/jJlOo9VeAAApcSznrIqWIkH+mU7pYC3nuRq4ywAwMGcax2AfjCRp85OkmOtQwAAU7eV5NOUIsDdxlmAg3styU9Gr516AQBm1WrKlNHV1kGAQ/kg5R7FTpIXGmcBAPZvPuXwMDyRIk8dPycAmD2bKUWe77QOAhyJHyZ5dfRamQcAmDWrKe+HfGAAw/Bxkv+T8tmFNVsA0B/zSZ6L9+U8g4IKAMDnbSX5JGWKBzAc45Orr0eZBwCYDasp94BfTHKvcRbgaF1L8ofRa2UeAOiPbyT5sHUIuk2Rp4590QAwOzZTds2/0zoIMBEfJ/nnJH8TZR4AYNiuJTmW5M9bBwEmZi3JndFrZR4A6IeF1gHovi989tlnrTP0wVyS20lOtQ4CAEzUVpJLSS43zgFM3qkk/2v0WqEHABia60l+k+TN1kGAqTiRci/Dqi0A6L6tJH+SMjkcHuuLrQP0hIk8ADB8m0nejhIPzIo7Sf44ZcXEjcZZAACO0mqSn0eJB2bJvZQVekmZMgwAdNe5OFjIMyjy1LGCDACGbSvJD+JmF8yiP0vyuyjzAADDsJrk/TigALPqO0nux/0NAOi6pdYB6DZFnnrWagHAMG0meTllrzwwm15M+TNAmQcA6LPVJO8kWW8dBGjquymrOpR5AKC7FloHoNsUeQCAWbaZ5N8n2WgdBGjuh0k+iDIPANBPq0nejfcyQPH9lHXCyjwA0E1nWweg2xR5AIBZtZnkL0fPAElyJeUUuw/AAIA+WU3ydhxQAB72WpLtKPMAQBc9iKk8PIUiDwAwi7aS/FmSW62DAJ2zmuT9KPMAAP2wmjJZ8GbrIEAnvZlyD+Tj1kEAgIfMJ1lqHYLuUuQBAGbNZpLFlBHTAI9zNcnlKPMAAN22mvIhvSmjwNO8nfLnhMk8ANAti60D0F1zrQP0yJ0kp1qHAAAOZSvJN5LstA4CdN6HSY4nORZjbgGA7rme5AcxZRSo826SN0avL7YMAgD8G0UenshEnjo7UXoCgL7bTPInUeIB6n2Q5KMkG62DAADssZrk+1HiAfbn/ZR7I9ZsAUB3GCTCYyny1FHiAYB+20ry50nutg4C9M77KSfeb7YOAgCQ3RLPdusgQC+9k+T3sWYLALrgXJLl1iHoJkWeeidbBwAADmQzyV8kud06CNBb7yRZS3KjdRAAYKatJvluXNsAh/PDlD9HTOYBgPYWWgegmxR56t1pHQAA2LetlBvdRs4Dh/Vmkl9FmQcAaGNc4jFlFDgKP0jyh5jMAwCtLbYOQDcp8tTZaR0AANi3rSQvxzoc4Oi8lvJnizIPADBNq0m+EyUe4Gh9P8n9mMwDAC2dah2AblLkqTPXOgAAsC+bKafLNloHAQbnu0m2o8wDAEzHapLnUz5sBzhq3035/MNkHgBo41iS061D0D2KPHVM5AGA/thMcjnJ9dZBgMH6TqzeBQAmbzXJO3FvEpis74yeTeYBgOk7l2ShdQi6R5Gnjok8ANAPW0k+SfJB6yDA4H0nyXrrEADAYK0mWYspgMB0fCc+BwGAVuZbB6B7FHnqOPUCAN23mXKT+7XWQYCZcD/lZrcP1wCAo3Y9ZfrfpcY5gNny3VixBQAtKPLwOYo8dTTRAaDbtpLcSrnpBDAtd5L8xyjzAABHayfJy61DADPnfpI3o8wDANP29dYB6B5FnnqnWgcAAJ7o90n+snUIYCbdSFnnp8wDAByF60m+3zoEMLO2k7wfZR4AmKZjSY63DkG3KPIAAH13I2W9DUArV5J8EmUeAOBwVpP8Q5LbrYMAM+1GyjWOMg8ATMe5WK/FIxR5AIA+20qZxHOvdRBg5r2ZsmoLAOAgVpOsJbnWOghAyp9J16PMAwDTYr0WD1HkAQD6aivJD+K0KtAdr8VUHgBg/66nrLO51DgHwF4fpvzZBABM3jdaB6BbFHkAgD7aShnzfL11EIA9tpP8MMo8AMD+3EspBAN0zXsxlQcApsFEHh6iyAMA9NFmkndbhwB4jLUkH0eZBwCos5rk7dYhAJ7gTsq0MGUeAJisL7cOQLco8gAAfbOV5PutQwA8xaUkN1uHAAA6bzXJBynXOABdtZHy55UyDwBMzoMkZ1uHoDsUeQCAPtlKGTl/t3UQgGd4LeWGNwDA46yOHtYFA31wJcmt1iEAYMDmRw9IosizH7dbBwCAGbeZ5HLK2hqArttJmR5mxRYA8Djj6xuAvng3pvIAwCR9vXUAukORp85OkmOtQwDAjLuZsq4GoC82U/7cUuYBAPZaTfJ26xAA+3QvyjwAMEkLrQPQHXOtA/SEnxMAtLWV5AetQwAcwMfZ3W+92DIIANAJqykfhO+0DgJwADezuxLwYssgADBAX2sdgO4wkQcA6LqtJD9Mcrd1EIADeifJdusQAEBzq0nWk2y0DgJwCB8mudM6BAAM1MnWAegGRZ46TsgAQBtbKTe7r7UOAnBIr8WKLQCYdfeTvN86BMARuJQyfRQAODrnRg9Q5KlktRYAtHE/yZutQwAcgTspN7uVeQBgNq1GiQcYjltJro4eAMDRWWgdgG5Q5KljIg8ATN9mygQLgKH4OMnN1iEAgKlbTXI9Cr3AsFxLmaQMAByd+dYB6AZFnjom8gDAdG2lfOC90ToIwBF7Oz7EA4BZczfJB61DAEzApZjKAwBHSZGHJIo8+3GqdQAAmCG/T/Ju6xAAE2DFFgDMltW4tgGG626Sy1HmAYCjcqJ1ALpBkQcA6JqtJP+xdQiACfo4yW9ahwAAJu56rJ4Bhm8tDioAwFE5luRc6xC0p8gDAHTJVpKfJrnVOgjAhFmxBQDDt53kw9YhAKbgg5jKAwBH4Vys1yKKPABAt9xKufkDMHS3U/68U+YBgGG6Hiu1gNlxP8o8AHBUFloHoD1FHgCgK7aSvNk6BMAUXYlVGwAwRKspk3i2WwcBmKL1OKgAAEfBRB4UefbhTusAADBgW0kuxwfawOyxYgsAhudWTKUAZtPl+PMPAA7rbOsAtKfIU2cnyVzrEAAwYL9Ncql1CIAGtmPFFgAMyWqs1AJm171YsQUAR+FU6wC0pchTR4kHACZnK8kPW4cAaOhKkt+1DgEAHNr1lP+um+wNzDIrtgDgcM7Feq2Zp8hT72TrAAAwQFtJfhortQDeSrLROgQAcCh3YgoFQGIqDwAclvVaM06Rp56TNABw9P6QcnMHYNZtp5zgv9k6CABwIKtJPmwdAqAj7qdc3yjzAMDBKPLMOEWeOjutAwDAAG0lead1CIAOuRwTygCgr7ZT1skAUKzGAWkAOKgzrQPQliJPnbnWAQBggH6bclMHgF3vJrnROgQAsC/XUwq5ADzMVB4AOBhFnhmnyFPvVOsAADAgmzGNB+BxNpN80joEALAvn6T8NxyAh92IPx8B4CC+1DoAbSny1DMCEgCOzidJbrYOAdBRP42pPADQF6tJftY6BECHfRxTeQBgvx4kOdE6BO0o8tTZaR0AAAZkM8mPW4cA6LDtWD0IAH1wPeW/2Q4AAjzZrSTrrUMAQM/MJ/mj1iFoR5GnzlzrAPz/7N0xiF7pmSf6/15UgS544HaggesBG64HauD6wjrYAU/gBjdMG2xYG8YwXu4YtgfWgQe2YXthOrBhGrYvuAMNWIGW6w4UWIECNawCNVhw1TAKymAFMnQFZbCCMrgCLUhBDVTB3OCox7Jcap2qOt95znnf3w+K1iwb/BN/3/ee83+fB4BG7GW4ieVBN8CnuxJTeQBgDa5WBwBYgWsxlQcATutz1QGoo8gz3qXqAADQgOMk71aHAFiBRxmKjwDAMt1K8t+rQwCsxJMMRR5lHgAYT5GnY4o8AMBcHiT5UXUIgBX5cZJ71SEAgBM9SnKzOgTAitxIclgdAgBW5AvVAaijyAMAzOUwyfvVIQBW5DjJT2LFFgAsza1YqQVwFqbyAMB4JvJ0TJEHAJjDbpL3qkMArND7GQo9AMBy7MXUPICzuJVhohkA8HKfrw5AHUUeAGAOv44bVwBndTmm8gDAUpjGA3A+pvIAwDgXqwNQR5EHANi03ST/WB0CYMVuxK1VAFiKuxnOOACczZ0k+9UhAGAlXqkOQA1FHgBg0x4kuV0dAmDl/jGm8gBAtVsZ1l4CcD7XYyoPALzMdpIvVIeghiIPALBJu0neqw4B0IDbSR5WhwCAzu3ElDyAKewk2asOAQAr8NnqANRQ5BnPqEcAOL2dmCABMJXL8ZkKAFVuxfQIgCmZygMAL/e56gDUUOQZ5zjJVnUIAFiZB0muVIcAaMi9JL+sDgEAnXqYYeIoANN4EFNHAeBlFHk6pcgzzoXqAACwQvsxOQJgapfjsxUA5nY7pkYAbMLN+HwFgE/zheoA1FDkGe9SdQAAWJHdJO9XhwBokFurADC/wyR3q0MANOhekifVIQBgwUzk6ZQiDwCwCUdxowpgU27EVB4AmJOzDcDm3KoOAAALtlUdgBqKPOMdVAcAgBUxjQdgc7xMBID5WKsFsFn/Iz5nAeBFjmJzUJcUecY5rg4AACuym+RqdQiAxn1YHQAAOvFhPBsE2KTjDKVJAOAPfTHJ56tDMD9FnnEuVAcAgBW5leSwOgRA46zXAoDNM40HYB4fxuctALzI56oDMD9FnvGMrAKAl3sQ03gA5vAgyX51CABo3P34vgWYw35cVACAF1Hk6ZAiDwAwpd0ke9UhADrhxioAbM7tJB9UhwDoiKk8AHCyz1cHYH6KPADAVHaTXK8OAdAR67UAYHMO4nsWYE4PkjypDgEAC2QiT4cUeQCAqRwluVkdAqAjx0k+qg4BAA26HVMhACr8rDoAACzQF6oDMD9FHgBgKreqAwB06KdJ7lWHAIDGHMf5BqCC9VoAAFHkOY2D6gAAsGDWagHUuJ/kcXUIAGiMEg9AjUcZnjEBAL9zlOSz1SGYlyLPOMdJLlSHAIAF28+wyxyA+SlSAsB0bsU0CIBKd+JzGACe9cUkn6sOwbwUecZR4gGAT+cBC0Cdm0l2qkMAQCP2M0yEAKDG3eoAALBAijydUeQZ75XqAACwULtJrlWHAOjYkyT3qkMAQCPuVAcAwGcxADxHV6EzijzjHVQHAICFupfksDoEQOduxFQeADiv2/HyGGAJ7mSYPAoADP64OgDzUuQZ57g6AAAs1G6s1QJYgnsZJvMAAGf3m1irBbAEe3G5GgCe9ZnqAMxLkWecC9UBAGDBblcHACBJcqs6AACs3M+qAwDwr6wPBoDfMZGnM4o8412qDgAAC2TsPMBy3I71WgBwVreSfFQdAoB/dSemQAPAJ3QVOqPIM54xjgDw+3ZjXznAkuxWBwCAFXuSZL86BAD/aj/WHQLAJ6zW6owizzjH1QEAYKFM5AFYFp/LAHA2VgYDLI/zDQAM/qg6APNS5BnnQnUAAFigW9UBAPgDd5Lcqw4BACtzO8nd6hAA/IF7sV4LAOiQIs949s4BwO9YqwWwTHfiIgIAnNaTJA+rQwDwB/bj8xkAkuQo1mt1RZEHADgrEx8AlumX1QEAYGWsbgFYLs+fACD5YpI/rg7BfBR5AICzMI0HYLluVwcAgBW5FUUegCX7WazXAoAkeaU6APNR5AEATms3HnQDLNntJDvVIQBgJY6S7FWHAOCFniR5VB0CABZAkacjijwAwGkdRZEHYMmeJDmoDgEAK+FsA7B8LioAQPK/VQdgPoo8AMBpPawOAMBLeSkJAC93K8lH1SEAeKn7sV4LAP64OgDzUeQBAE7rdnUAAF7qZtxaBYAxHlQHAOCl7ie5UB0CAIpZrdURRR4A4DR2Y8oDwBqYngYAL3e3OgAAo+1WBwCAYpeqAzAfRZ7x9qsDAMBCeHACsA4fVgcAgIW7Xx0AgNF+Xh0AAIqZyNMRRZ5xjpNsVYcAgAVwYxVgPazXAoAXux1rtQDWZCfJjeoQAFBIkacjijzj2L0KAAPTHQDWw5QBAHix4yQH1SEAGG0/yWF1CAAopMjTEUWe8eycA6B3u0l+Vh0CgFNR5gGAk5nGA7A+zjcA9Owz1QGYjyIPADDWoyRPqkMAcCofVAcAgIXyMhhgfXx2A9Cz4+oAzEeRZzyjdgHo3b3qAACc2s7TPwDgd27HRB6ANfo4yY3qEABQ5CjWa3VDkWcc7TYASO5WBwDg1B7FeQYATrJbHQCAUzuI8w0A/fpiFHm6ocgzzoXqAABQbDeKPABr9dvqAACwMCZvA6yXiWoA9EyRpxOKPONdqg4AAMWeVAcA4EzuVwcAgIXx3QiwXoo8APRMZ6ETijwAwBh3qgMAcGZeVgLA79upDgDAmd1PcqM6BAAUMZGnE4o8AMAY1moBrNe9eGEJAJ+4FSVXgDXbrw4AAIUUeTqhyAMAvMxuTOQBWLNH1QEAYEEuJDmsDgHAuexWBwCAIlZrdUKRBwAYw0tggHXzOQ4AA9N4ANbPxFEAemUiTycUecY7qA4AAEX2qgMAcG4/rw4AAAvhOxFg/UzkAaBXijydUOQZ5zjD2F0A6NGD6gAAnJvpAwCQ3I7zDUALfp3kZnUIAChgtVYnFHnGUeIBoGcedAOs3z/F+HkAOI6JowAtOH76BwC9+aPqAMxDkWc8Y6oA6NFukl9WhwDg3A7iQTcAPKkOAMBk9qsDAEABA0g6ocgz3kF1AAAoYiIPQBseVwcAgGK/qA4AwGQeVgcAgAJb1QGYhyLPOG6uAgAAa/fz6gAAUMxLX4B2WJUIADRLkWccI6oA6JUxxQDtuF8dAACKOd8AtMNnOgDQLEWe8S5VBwCAAtZqAbRjJ8m96hAAUORWTOQBaMmDJDerQwDAzI6qAzAPRZ7xDqoDAEABRR6AduzHtFEA+nUhpjcAtOT46R8A9GSrOgDzUOQZx49BAHr1y+oAAEzqsDoAABTxfA+gPU+qAwBAARf1OqDIM47/MQDQo90ke9UhAJjUb6oDAEARI+gB2mPSGgC92Y6pPF1Q5BnvUnUAACjwqDoAAJP6dXUAACiizArQnl9XBwCAAoaQdECRBwAAoB9urALQK9+BAO15WB0AAApcrA7A5inyAAAv4kE3QHtMIwCgV7+uDgDA5BR5AOiR1VodUOQBAF7EwxCA9ihpAtArZVaA9uwnuVYdAgBmZrVWBxR5AIAX+bg6AACT20+yUx0CAAr8ujoAAJM7THJcHQIAZma1VgcUeQCAF9mtDgDA5EzkAaBHt+I7EKBVphIA0BurtTqgyAMAvMhedQAANsKNVQB6cyG+/wBaZTU8AL0xkacDijwAwEl2o8gD0Co3VgEAgFb8tjoAAMzMs70OKPKMZ/wuAL1xYxWgTW6sAtAb330A7XpUHQAAZma1VgcUecY5jv9BANAXjW6AdrmkAEBvfPcBtOufqwMAwMy8v+mAIs84/scAQG9M4wFol5eZAPTGRB6AdlmtBUBvDCDpgCLPeJeqAwDAjB5XBwBgYxR5AOiN7z6Adj2pDgAAM7tYHYDNU+QBAE5yUB0AgI0xlQCA3pg4CtCuR9UBAGBmtgl1QJFnPC80AeiJ7z2AdplKAAAAtOJxkverQwDAjEzk6YAizzhu7QDQG/vFAdq1n2SnOgQAAMAEnsRkAgCgMYo84/gRCEBvTOQBaJeLCgD0xrM9AACgFSbydECRZ7xL1QEAYEb2iwMAAK1QYgVom895AHriokIHFHkAgJOYyAPQNg+6AeiJB90AAEArtqoDsHmKPADASY6qAwCwUV5oAtATBVaAtnmOBUBPrNbqgCIPAHCSw+oAAGyUF5oA9ESBFaBtzjcA9MT5pgOKPADASRR5AACAVnjBC9A2z7EA6InVWh1Q5BnvoDoAAMzIg26Atrm5A0BPfO8BAACtcL7pgCLPOMfxPwgA+uImEwAA0AoXFQDa5jkWAD25WB2AzVPkGUeJB4DeHFUHAGCjvNAEoCee7QG0zXMsAHpitVYHFHnGe6U6AADM6El1AAA2ygtNAHqiwArQNhN5AOiJ53odUOQZ76A6AAAAAAAAAADQLRN5OqDIM45bOwD0xk0mAAAAANbAOxwAeuL9TQcUecYxngqA3tgtDgAAtMKzPQAAoBXONx1Q5BnvUnUAAACAibixCkBPfO8BtM2FNACgKYo84x1UBwCAGdmxCtA2N3cA6InvPQAAAFZDkWcct3YA6I2bTAAAQCs82wMAAGA1FHnGcWsHAAAAANbJsz0AAABWQ5FnvEvVAQAAAACAUzORBwAAgNVQ5AEAnrdXHQAAAGBCJvIAAACwGoo8AMDzjuPGKgAA0A7nGwAAAFZDkQcAOIkbqwAAQCucbwAAAFgNRR4A4CRurAK0zec8AD3xvQcAAMBqKPIAACdxYxUAAAAAAABmpsgDAJzEjVUAAAAAAACYmSIPAHASE3kA2uZzHoCe+N4DAABgNRR5xtuvDgAAM9muDgAAADAhE0cBAABYDUWecY6TbFWHAIAZ+d4DaJsXmgD0xEQeAAAAVkORZxyHfQB6c1QdAICNcsYBoCcKrAAAAKyGIs94l6oDAAAATMQLTQB6osAKAADAaijyAAAAAAAtU2AFAABgNRR5xjuoDgAAM9qqDgDARplMAAAAAACwQIo847i1A0BvjqoDAAAAAAAAQG8UecZxWxUAAAAA1smzPQAAAFZDkWe8S9UBAAAAAIBTM20bAACA1VDkAQAA6I8XmgD0xEQeAAAAVkORBwAAoD9eaALQEwVWAAAAVkORBwB43m6SreoQAGyUF5oA9ESBFaBtnmMBAE1R5AEATnJYHQAAAGAiCqwAbVPYBACaosgz3kF1AACYkQcgAG3zOQ9AT3zvAbTNRB4AoCmKPOMcx4EfgH5sVwcAAACYkIk8AG07qg4AADAlRZ5xlHgA6MludQAANs4LTQB64tkeQNtM5AEAmqLIM94r1QEAYCZH8YIXoHVeaALQE+cbgLaZyAMANEWRZ7yD6gAAMJOtJBerQwAAAADACCbyANAT33sdUOQZx60dAHqyHTeZAAAAAFgHz7EA6InvvQ4o8oxj7DwAAAAArJNnewBtM5kAAGiKIs94l6oDAAAAAACnZto2QNtMJgAAmqLIM95BdQAAmJGbTAAAQCtM5AFom+dYAEBTFHnGcWsHgN64yQQAALTCsz2AtnmOBQA0RZFnHLd2AAAAAGCdPNsDAABgNRR5xrtUHQAAAAAAODUTeQAAAFgNRR4A4Hl71QEAAAAmZCIPQNu2qgMAAExJkQcAeN5x3FgFaJ3PeQB64nsPoG1H1QEAAKakyAMAnMSNVYC2+ZwHoCe+9wAAAFgNRR4A4CRurAIAAK1wvgEAAGA1FHkAgJO4sQrQNi80AQCAVmxVBwAAmJIiDwBwEi94AQAAAAAAYGaKPADASUzkAWibz3kAeuJ7DwAAgNVQ5BnvoDoAAMxkuzoAAADAhEwcBWjbUXUAAIApKfKM47APQG/sFgdomzMOAD0xkQcAAIDVUOQZx2EfgN64yQQAALRCgRUAAIDVUOQZ71J1AAAAAADg1FzSAwAAYDUUeQAAAPrjhSYAPTGRBwAAgNVQ5BnvoDoAAMxoqzoAAAAAAIzgORYA0BRFnnHc2gGgN0fVAQAAAAAAAKA3ijzjGDsPAAAAAOvk2R4AAACrocgz3qXqAAAAAADAqZm2DdA2k6UBgKYo8gAAAPTHC00AemIiD0DbtqoDAABMSZEHAAAAAGiZAitA20zkAQCaosgDADxvN24yAQAA7TCRB6BtnmMBAE1R5AEATnJYHQCAjfJCE4CemMgD0DYTeQCApijyjHdQHQAAZuQFLwAA0ArnG4C2mcgDADRFkWcct3YA6Ml2dQAAAIAJebYH0DYTeQCApijyjHMhbu4A0I/d6gAAbJwXmgD0xHM9gLaZyAMANEWRZ7xXqgMAwEyO4gUvQOu80ASgJ843AG0zkQcAaIoiz3gH1QEAYCZbSS5WhwAAAACAEUzkAaAnvvc6oMgzjls7APRkO24yAbTOGQcAAGiF51gA9OSwOgCbp8gzjrHzAABAS5xxAOiJ7z2AtplMAEBPnG86oMgz3qXqAAAAAADAqZlEB9A2E3kA6IkCawcUecY7qA4AADPyQxAAAGiFG6sAbfMcC4CeKLB2QJFnHLd2AOiNH4IAAEArPNsDaJvnWABAUxR5xnFrBwAAAADWybM9AAAAVkORZ7xL1QEAAAAAgFMzkQcAAIDVUOQBAJ63Vx0AAABgQibyALRtqzoAAMCUFHkAgOcdx41VgNb5nAegJ773ANp2VB0AAGBKijwAwEncWAVom895AAAAAIAFUuQBAE7ixioAAAAAAADMTJEHADiJSQ0AbVPYBAAAWrFVHQAAYEqKPADASbzgBQAAAAAAgJkp8gAAJzGRB6BtPucB6InvPQAAAFZDkWe8g+oAADCT7eoAAAAAEzJxFKBtR9UBAACmpMgzjsM+AL2xWxygbc44APTERB4AAABWQ5FnHId9AHrjJhMAANAKBVYAAABWQ5FnvEvVAQAAAAAAAAAAaJciDwAAQH9MHQUAAAAAWCBFnvEOqgMAwIy2qgMAAAAAwAieYwEATVHkGccebQB6c1QdAAAAAAAAAHqjyDOOsfMAAAAAsE6e7QEAALAaijzjXaoOAAAAAACcmmnbAG0zWRoAaIoiDwAAQH+80ASgJybyALRtqzoAAMCUFHkAAAAAgJYpsAK0zUQeAKApijwAwPN24yYTAADQDhN5ANrmORYA0BRFHgDgJIfVAQDYKC80AeiJiTwAbTORBwBoiiLPeAfVAQBgRl7wAgAArXC+AWibiTwAQFMUecZxaweAnmxXBwAAAJiQZ3sAbTORBwBoiiLPOBfi5g4A/ditDgDAxnmhCUBPPNcDaJuJPABAUxR5xnulOgAAzOQoXvACtM4LTQB64nwD0DYTeQCApijyjHdQHQAAZrKV5GJ1CAAAAAAYwUQeAHrie68DijzjuLUDQE+24yYTQOuccQAAgFZ4jgVATw6rA7B5ijzjGDsPAAC0xBkHgJ743gNom8kEAPTE+aYDijzjXaoOAAAAAACcmkl0AG0zkQeAniiwdkCRZ7yD6gAAMCM/BAEAAABYA8+xAOiJAmsHFHnGcWsHgN74IQgAALTisDoAABvlORYA0BRFnnHsmQMAAAAAAAAAYKMUeca7VB0AAAAAAAAAAIB2KfIAAM/bqw4AAAAAACNtVQcAAJiSIg8A8Lzjp38AtMvnPAAA0Iqj6gAAAFNS5AEATnKhOgAAG+VzHgAAAABggRR5AICTmNQAAAAAAAAAM1PkAQBOYlIDQNsUNgEAgFZsVQcAAJiSIg8AcBIveAEAAAAAAGBmijwAwElM5AFom895AAAAAIAFUuQZ76A6AADMZLs6AAAAwISOqgMAsFE+5wGApijyjGO9CAC9sVscoG3OOAD05GJ1AAAAABhLkWccY+cB6I2bTAAAQCsUWAEAAFgNRZ7xLlUHAAAAAAAAAACgXYo8AAAA/TF1FAAAAABggRR5xjuoDgAAM9qqDgAAAAAAI3iOBQA0RZFnHHu0AejNUXUAAAAAAAAA6I0izzjGzgMAAAAAAAAAsFGKPONdqg4AAAAAAJyaiaMAbfM5DwA0RZEHAACgP9YHA9CTreoAAGyUz3kAoCmKPAAAAAAAAKyViTwAQFMUeQCA5+3GTSYAAAAA1sFzLACgKYo8AMBJDqsDALBRF6oDAAAATMREHgCgKYo84x1UBwCAGXnBCwAAAMAamMgDADRFkWec4+oAADCj7eoAAAAAEzKpAaBtPucBgKYo8oxzISYTANCP3eoAAGycywoA9ORidQAANspEHgCgKYo8471SHQAAZnIUL3gBWueiAgA9cb4BaJuJPABAUxR5xjuoDgAAM9mKG6sAAAAArIOJPAD0xPdeBxR5xnFrB4CebMdNJoDWOeMAAACt8BwLgJ4cVgdg8xR5xjF2HgAAaIkzDgAA0AqTCQDoied6HVDkGe9SdQAAAAAA4NRMagBom895AHqiwNoBRZ7xDqoDAMCM/BAEAABacbE6AAAb5TkWAD1RYO2AIs84x9UBAGBmfggCAACt8GwPoG2eYwEATVHkGceeOQAAAAAAAAAANkqRZ7xL1QEAAAAAAAAAAGiXIg8A8Ly96gAAAAAAMNJWdQAAgCkp8gAAzzt++gdAu3zOAwAArTiqDgAAMCVFHgDgJBeqAwCwUT7nAQAAAAAWSJEHADiJSQ0AAAAAAAAwM0UeAOAkJjUAtE1hEwAAaMVWdQAAgCkp8gAAJ/GCFwAAAAAAAGamyAMAnMREHoC2+ZwHAAAAAFggRZ7xDqoDAMBMtqsDAAAATOioOgAAG+VzHgBoiiLPONaLANAbu8UB2uaMA0BPLlYHAAAAgLEUecYxdh6A3rjJBAAAtEKBFQAAgNVQ5BnvUnUAAAAAAAAAAADapcgDAADQH1NHAQAAAAAWSJFnvIPqAAAwo63qAAAAAAAwgudYAEBTFHnGsUcbgN4cVQcAAAAAAACA3ijyjGPsPAAAAAAAAAAAG6XIM96l6gAAAAAAwKmZOArQNp/zAEBTFHkAAAD6Y30wAD3Zqg4AwEb5nAcAmqLIAwAAAAAAwFqZyAMANEWRBwB43m7cZAIAAABgHTzHAgCaosgDAJzksDoAABt1oToAAADAREzkAQCaosgz3kF1AACYkRe8AAAAAKyBiTwAQFMUecY5rg4AADParg4AAAAwIZMaANrmcx4AaIoizzgXYjIBAP3YrQ4AwMa5rABATy5WBwBgo0zkAQCaosgz3ivVAQBgJkfxghegdS4qANAT5xuAtpnIAwA0RZFnvIPqAAAwk624sQoAAADAOpjIA0BPfO91QJFnHLd2AOjJdtxkAmidMw4AANAKz7EA6InvvQ4o8oxj7DwAANASZxwAAKAVJhMAAE1R5BnvUnUAAAAAAODU3FgFaJvPeQB6osDaAUWe8Q6qAwDAjPwQBAAAWnGxOgAAG+U5FgA9UWDtgCLPOMfVAQBgZn4IAgAArfBsD6BtnmMBAE1R5BnnQnUAAAAAAAAAAADapsgz3qXqAAAAAAAAAAAAtEuRBwB43l51AAAAAAAYaas6AADAlBR5AIDnHT/9A6BdPucBAIBWHFUHAACYkiIPAHCSC9UBANgon/MAAAAAAAukyAMAnMSkBgAAAAAAAJiZIg8AcBKTGgDaprAJAAC0Yqs6AADAlBR5AICTeMELAAAAAAAAM1PkAQBOYiIPQNt8zgMAAAAALJAiz3gH1QEAYCbb1QEAAAAmdFQdAICN8jkPADRFkWcc60UA6I3d4gBtc8YBoCcXqwMAAADAWIo84xg7D0Bv3GQCAABaocAKAADAaijyjHepOgAAAAAAAAAAAO1S5AEAAOiPqaMAAAAAAAukyDPeQXUAAJjRVnUAAAAAABjBcywAoCmKPOPYow1Ab46qAwAAAAAAAEBvFHnGMXYeAAAAAAAAAICNUuQZ71J1AAAAAADg1EwcBWibz3kAoCmKPAAAAP2xPhiAnmxVBwBgo3zOAwBNUeQBAAAAAABgrUzkAQCaosgDADxvN24yAQAAALAOnmMBAE1R5AEATnJYHQCAjbpQHQAAAGAiJvIAAE1R5BnvoDoAAMzIC14AAAAA1sBEHgCgKYo84xxXBwCAGW1XBwAAAJiQSQ0AbfM5DwA0RZFnnAsxmQCAfuxWBwBg41xWAKAnF6sDALBRJvIAAE1R5BnvleoAADCTo3jBC9A6FxUA6InzDUDbTOQBAJqiyDPeQXUAAJjJVtxYBQAAAGAdTOQBoCe+9zqgyDOOWzsA9GQ7bjIBtM4ZBwAAaIXnWAD0xPdeBxR5xjF2HgAAaIkzDgAA0AqTCQCApijyjHepOgAAAAAAcGpurAK0zec8AD1RYO2AIs94B9UBAGBGfggCAACtuFgdAICN8hwLgJ4osHZAkWec4+oAADAzPwQBAIBWeLYH0DbPsQCApijyjHOhOgAAAAAAAAAAAG1T5BnvUnUAAAAAAAAAAADapcgDADxvrzoAAAAAAIy0VR0AAGBKijzj+BEIQE+On/4B0C6f8wAAQCsuVAcAAJiSIs84r1QHAICZeQAC0Daf8wAAQCsuVgcAAJiSIs84ijwA9MakBgAAAADWQJEHAGiKIs84n6kOAAAzM6kBoG0KmwAAQCv+qDoAAMCUFHnG8SMQgN54wQsAAADAGriMDQA0RZFnHFMJAOiN7z6Adl2Iz3kAAAAAgEVS5BnHVAIAerJdHQCAjXK+AaA3R9UBANgoZxwAoCmKPOMcVgcAgJltVQcAYKM86AagJxerAwCwUQqbAEBTFHkAgJN4AAIAALRCgRWgbT7nAYCmKPKM42UmAAAAAADA8niHAwA0RZFnHKu1AACAllyoDgAAAAAAwB9S5BnHWEYAerNVHQAAAAAARvAOBwBoiiLPOCbyANAbI4kBAAAAWAPPsQCApijyAAAAAAAAsFYm8gAATVHkGUebGwAAAADWybM9gLb5nAcAmqLIM47VWgAAQEvcWAWgJ1vVAQAAAGAsRZ5xPOQGAAAAAABYHu9wAICmKPKMYywjAD3ZjRurAAAAAAAAMDtFnnGOkxxUhwCAGVkrCdC2C9UBAAAAJuI5FgDQFEWecfwIBKA3XvACtM3oeQAAoBW2KgAATVHkAQCet10dAICNe1QdAABm5AUvQNueVAcAAJiSIs94JhMA0Ivd6gAAbJwH3QD05GJ1AAA26nF1AACAKSnyjGf0PAC9OIrvPYDWedANQE+cbwDa5qICANAURR4A4HlbcWMVoHUedAMAAK04rA4AADPaqg7A5inyjOfGKgC92M4wlQeAdj2qDgAAADARFxUA6In3Nx1Q5BnPg24AAKAVLioAAACtMJEHAGiKIs94ijwAAEAr3FgFoCdurAK0zUUFAHpitVYHFHnG+5/VAQBgRn4IArRNkQeAnlysDgDARjnfANATFxU6oMgznok8APTED0GAtjnfANCT4+oAAGzU4yQ3qkMAAExFkWc8D7oBAIBWGD0PAAC0QmETAGiKIs94ijwAAEArjJ4HAABacqE6AADAVBR5xlPkAaAXe9UBANg45xsAAKAlpvIAAM1Q5BnPjVUAenEcDz8AWvc4yb3qEAAAAAAA/D5FnvHcWAWgJ8YRA7TtOD7rAQCAdhxWBwAAmIoiz3i/rQ4AADMykQegfT7rAQCAVtiqAAA0Q5FnPD8CAeiJKQ0AAAAArMXj6gAAAFNR5BnvcZKD6hAAMBNTGgAAAABYC5exAYBmKPKM9ySmEwDQD995AO07rA4AAAAwEecbAKAZijynYzoBAD3Yrg4AwCyMngegF0fVAQDYOOcbAKAZijynYzoBAL3Yqg4AwMb9c3UAAJjJxeoAAGyc1VoAQDMUeU7HRB4AeuHGKkD7flsdAABm4pkeQPsUeQCAZijynI4dqwAAQCs86AYAAFrh/Q0A0AxFntPZrw4AAAAwkUfVAQAAACbifAMANEOR53QUeQDoxVZ1AAA2zoNuAACgFY+rAwAATEWR53QeVgcAgJkcVQcAYOMOqgMAAABM5FGSG9UhAACmoMhzOr+tDgAAADARE3kAAIBWPElyoToEAMAUFHlOx0QeAACgFYo8APTCxFGAPhxXBwAAmIIiz+nsVwcAAACYyG+T7FSHAIAZ/FF1AAAAABhLked09pMcVIcAAACYwJPqAAAAABMykQcAaIIiz+lYrQVAD3aTbFWHAAAAmMiF6gAAzML6YACgCYo8AMBJDqsDADALN1YB6IHvO4A+PK4OAAAwBUWe03ODB4Ae+L4DAABa4XwD0AfrgwGAJijynJ7RjAC0brs6AACz+W11AACYgYk8AH1wvgEAmqDIc3r71QEAYMN2qwMAMBs3VgHogYk8AH1wvgEAmqDIc3q/qQ4AABt2FDdWAXpxUB0AAGbgfAPQBxsVAIAmKPKc3sfVAQBgw7aSXKwOAcAsTBwFAABaocgDQA+2qgOweYo8p2fdCACt284wlQeA9j2sDgAAADCR/SQ3qkMAwIZ5f9MBRZ7TU+QBAABaYSIPAD24UB0AgFlYHQwANEGR5/T24scgAADQhl8nuVcdAgA27Lg6AAAAwESs1uqAIs/pHVYHAIAZ+CEI0IeDmFIAQPt81wH0wzscAFpntVYHFHkAgJP4IQjQD1MKAGid7zqAftioAACsniLP2XxcHQAAAAAAGMVEHoB+7FcHAAA4L0Wes9mtDgAAADCRveoAALBhJvIA9OO31QEAAM5LkedsFHkAaJkXugB9eVgdAAA2zEQegH78pjoAAMB5KfKcjSIPAC07jhurAD0xeh6A1jnfAPTDRB4AYPUUec7m4yQH1SEAYIPcWAXohyIPAK1zvgHox36SG9UhAADOQ5HnbIyeB6B1bqwC9MP5BoDWOd8A9ONJdQAAgPNS5AEATuLGKkA/fp3kXnUIAACAiXiuBQCsmiLP2T2qDgAAG+TGKkA/3FgFAABaclAdAADgPBR5zm6vOgAAbJCbSwAAQCucbwD6osgDAKyaIs/ZPagOAAAbsl0dAIDZmTgKQMtMHAXoy351AACA81DkObvd6gAAsEFb1QEAmJXzDQAtM5EHoC8PqwMAAJyHIs/ZmcgDQMuOqgMAMKuPqwMAwAaZyAPQl73qAAAA56HIc3a7MX4eAABow6+qAwDABpnIA9CXXye5WR0CAOCsFHnO7vDpHwAAwNp9nORedQgA2BATeQD64nMfAFg1RR4A4CRb1QEAmNVBdQAAAIAJ/aY6AADAWSnynM9udQAA2JCj6gAAAAAAcEa/rg4AAHBWijzn86A6AAAAwET2qgMAwIZcqA4AwOweVgcAADgrRZ7zMZEHAABohfMNAK06rg4AwOwUeQCA1VLkOR8TeQAAgFYo8gDQKhN5APqzl+RmdQgAgLNQ5Dmf3SQH1SEAAAAm8HGSe9UhAGADTOQB6M+j+PwHAFZKked8HlUHAIAN2E2yVR0CgNntxsQCANrk+w0AAIDVUOQBAE5yWB0AgBJurALQIt9vAH3aqw4AAHAWijzn54cgAC1yYxWgT6aOAtAi5xuAPj2sDgAAcBaKPOf3oDoAAExsuzoAAGV2qwMAwAaYyAPQJ0UeAGCVFHnOz0QeAFrjJS5Avz6uDgAAG2AiD0Cf9pLcrA4BAHBaijznd786AABM7ChurAL0SpkTgBY53wD0aS++AwCAFVLkOb97SQ6qQwDAhLaSXKwOAUCJ3SQ71SEAAAAmYiobAK3Zqg7A5inynN9hdQAAmNh2hqk8APTnUdxYBQAA2vGwOgAATMz7mw4o8kzj19UBAAAAJvK4OgAATMw0BoB+7VUHAAA4LUWeadyrDgAAADCRX1YHAICJmTYH0K9fVQcAgIlZrdUBRZ5p7FQHAICJ+SEI0K+PqwMAwMRM5AHo18dJblaHAIAJWa3VAUWeadxLsl8dAgAm5IcgQL/uVwcAgImZyAPQr4fxPQAArIwizzQexuQCAACgDbsxdRSAtpjIA9A33wMAwKoo8kznsDoAAADABA7jxioAbfG9BtC3X1UHAAA4DUWe6dyrDgAAE9mrDgBAud9WBwCACZnEANA3z7oAgFVR5JnOP1UHAICJHMeNVYDe7VYHAIAJOd8A9M35BgBYFUWe6fw8yUF1CACYiBurAH17UB0AACbkfAPQt70kN6tDAACMpcgznZ3qAAAwITdWAfp2P9YHA9AO5xuAvu3HdwEAsCKKPADASdxYBejbbnwXAAAAAADMTpFnWsbPA9AKt5QA8F0AAAC0Yrc6AADAWIo80zJ6HoBWmMIAwH51AACYiPMNAHvVAQAAxlLkmdZOdQAAmMB2dQAAFsHEUQBaYcocAIo8AMBqKPJM616Sg+oQADCBreoAAJQzeh6AVpjIA8BukhvVIQAAxlDkmdaj6gAAMJGj6gAAlNuJ9cEAtMFEHgC8vwEAVkORZ3ofVwcAAACYwMOYYABAG3yfAZAo8wAAK6HIM7071QEAAAAm4kE3AC0wkQeAJHlQHQAAYAxFnul9lOSgOgQAnNNWdQAAFuF+dQAAAICJ/LI6AADAGIo807tbHQAAJnBUHQCARfh5dQAAAICJPEhyozoEAMDLKPJshr3bAABAC3ae/gHAmnlWB0AyrA72nQAALJ4iz2bcqQ4AAAAwgf0kx9UhAOCcfJcB8InfVAcAAHgZRZ7NUOQBAABa8bg6AACck+kLAHziQXUAAICXUeTZjDtJDqpDAAAATODn1QEA4JxM5AHgE4o8AMDiKfJsxl7c9AFgvXaTbFWHAGAxdqoDAMA5eU4HwCd2k9ysDgEA8GkUeTZnvzoAAJzDYXUAABZjJ8m96hAAcA4m8gDwiUfVAQAAXkaRZ3PuVAcAgHNwYxWAT1gbDMDaOd8A8KyH1QEAAD6NIs/mKPIAsFbb1QEAWBy3VgFYMxN5AHjWbnUAAIBPo8izOXfj5ioA6+RhBgDPu18dAADOwUQeAJ71oDoAAMCnUeTZnCfVAQDgjI7ixioAv+9edQAAOAfnGwCe9SDJzeoQAAAvosizWb+oDgAAZ7CV5GJ1CAAW5RdR5gEAANrgIjYAa7ZVHYDNU+TZrDvVAQDgDLYzTOUBgE9YGwzAmjnfAPC8X1UHAIAzcr7pgCLPZn0UD7wBAIA2/LY6AACckdVaADzv4+oAAAAvosizWTvVAQAAACZitRYAa+XGKgDP+2WSG9UhAOAMrNbqgCLP5j2qDgAAZ+CHIADP+yguKwCwTherAwCwODtJLlSHAIAzcFGhA4o8m3erOgAAnIEfggA8bydWkwCwTr6/ADjJQXUAAICTKPJs3q0k+9UhAAAAJvC4OgAAAMBETBwFABZJkWfz7sZ6EgAAoA0fVQcAAACYyL0kN6tDAAA8T5FnHo+qAwDAKexVBwBgse7ErVUAAKANu7F+EQBYIEWeeWh0A7Amx/EQA4CT7cR3BAAA0I6H1QEAAJ6nyDOPD5McVIcAgFO4UB0AgMV6XB0AAABgIr+oDgAA8DxFnnncrQ4AAKdk2gIAL/JRdQAAAICJ3IutCgDAwijyzOdRdQAAOAUTeQB4kTsZHnYDAACsndVaAMDiKPLMR6MbgDUxkQeAF9mpDgAAADChX1YHAAB4liLPfO4kOagOAQAjmcgDwKd5XB0AAABgIi4rAACLosgznzvVAQBgpO3qAAAsnvMNAGtyVB0AgEW7H1sVAIAFUeSZ16PqAAAw0lZ1AAAW7efVAQDgFC5WBwBg0farAwAAPEuRZ14a3QCshRurAHyanRg/D8B6HFcHAGDxXFYAABZDkWdeH1UHAAAAmMBhkoPqEAAAABO5Xx0AAOATijzz+lk87AYAANpwrzoAAADARH4RWxUAgIVQ5JnXcZJH1SEAYISt6gAALJ4iDwAA0IqDJP9cHQIAIFHkqXC7OgAAjHBUHQCAxduJMg8AANCOX1QHAABIFHkqfFQdAAAAYAKHSR5XhwAAAJjI/eoAAACJIk+F/5FhRCMAAMDa3akOAAAjmDgKwBg7SW5WhwAAUOSZ33GSj6tDAAAATOBOrNcCYPkuVgcAYBWeJPlNdQgAAEWeGh9UBwAAAJiA0fMArMFWdQAAVuOfqgMAACjy1Lgd67UAWK7deNANwHh3qwMAwEtcqA4AwGr8PMmN6hAAQN8UeWrsVgcAgJc4rA4AwGp8VB0AAF7iuDoAAKuxVx0AAECRp87N6gAA8CncWAVgrJ8l2akOAQCfwvkGgNNwvgEASiny1Pkw1msBsEzb1QEAWJXjmDoKwLKZyAPAafy8OgAA0DdFnjom8gCwVF7GAnBad6oDAMCnMJEHgNPYiXc4AEAhRZ5aD6oDAMAJjuLGKgCncyfJveoQAPACzjcAnMZhkofVIQCAfiny1LpVHQAATrCV5GJ1CABWZT/J4+oQAAAAE9mpDgAAL7BVHYDNU+SpdSvJQXUIAHjOdoapPABwGh9WBwAAAJjIz2O9FgDL5P1NBxR5au3F/9AAAIA23I31WgAs04XqAACszl51AACgX4o89T6oDgAAADCB+9UBAOAFjqsDALBKLioAsERWa3VAkafe7VivBcDy+CEIwFl40A3AEpnIA8BZ/Lw6AACcwMafDijy1LtVHQAATuCHIABncac6AACcwEQeAM5iJ8nN6hAAQH8UeZbhF9UBAAAAJvCzmMoDwPKYyAPAWRwmeVgdAgDojyLPMpjKAwAAtOA4yV51CAB4jok8AJyViwoAwOwUeZbhVpKD6hAA8JQXsACch/VaACyNiTwAnJX1WgDA7BR5luFhhhGNALAEx3FjFYCzux23VgFYFucbAM7qYZJ/rg4BAPRFkWc5NLoBWBI3VgE4q4Mkj6pDAMAznG8AOI+d6gAAQF8UeZbjeqzXAmA53FgF4DxuVwcAgGc43wBwHnfjMjYAMCNFnuXYifVaACyHG6sAnMetuLUKAAC04X6UQgGAGSnyLMtPqwMAwFMeTgBwHg9j4igAANAOFxUAgNko8iyL9VoALIWJPACcl/VaACyF8w0A53Un1msBADNR5FmWB0keVYcAoHvb1QEAaMKtJPeqQwBATBwF4PzuVwcAAPqhyLM81msBsARb1QEAWL2HSR5XhwCAmMgDwDQ+qg4AAPRBkWd5rNcCYAmOqgMA0IRb1QEAICbyADCNu7FeCwCYgSLP8uwl2a8OAQAAMAHrtQBYAhN5AJiC9VoAwCwUeZbJei0AAKAFD5M8qg4BQPdM5AFgKtZrAQAbp8izTNZrAVBtqzoAAM24XR0AAABgItZrAQAbp8izTPsZVmwBQJWj6gAANMN6LQAAoBXWawEAG6fIs1zWawEAAC2wXguAaheqAwDQFBcVAICNUuRZLuu1AACAVlivBUCl4+oAADTlTqzXAgA2SJFnuR4leVAdAgAAYALWawFQyUQeAKZkvRYAsFGKPMt2rToAAADABKzXAqCSiTwATO2j6gAAQLsUeZbtp7FeC4D57SbZqg4BQHNuVQcAoFsm8gAwtbuxXgsA2BBFnmU7TvJP1SEA6NJhdQAAmnM71msBUMNEHgCmZr0WALAxijzLdz2m8gAwPzdWAZia9VoAVHG+AWATrNcCADZCkWf5biQ5qg4BQFe2qwMA0Kzb1QEA6JKJPABsgvVaAMBGKPKsg1Y3AHParQ4AQLM+jPVaAMzPRB4ANsF6LQBgIxR51uEnsV4LgPkcxY1VADZjL8l+dQgAuuN8A8CmfFgdAABojyLPOtxJ8rg6BADd2EpysToEAM26UR0AAABgIrdjvRYA89qqDsDmKfKsx/vVAQDoxnaGqTwAsAk3Y70WAADQhodJflMdAoCueH/TAUWe9bga67UAAID1O05ytzoEAF25UB0AgKbdqQ4AALRFkWc9HsXDbgAAoA0fxFQeAOZzXB0AgKb9j1ivBcB8rNbqgCLPurwfU3kAmIcfggBs0k6Sx9UhAOiGiTwAbNJxXFQAYD5Wa3VAkWddbic5rA4BQBf8EARg0z6oDgBAN0zkAWDT7sRUHgBgIoo863O1OgAAAMAEbsStVQDmYSIPAJt2P8mT6hAAQBsUedbnJ7FeCwAAWL9HSR5UhwCgCybyADCH29UBAIA2KPKsz0GSneoQADRtrzoAAN0wlQeAOZjIA8AcrNcCACahyLNOV2IqDwCbcxw3VgGYx53qAAB0wfkGgDkcJPlldQgAYP0UedbpdpLD6hAANM2NVQDm4sYqAJvmfAPAXEzlAQDOTZFnvX5SHQCAprmxCsBcrNcCYNOcbwCYy93qAADA+inyrNf7sV4LgM1xYxWAuTx8+gcAANCCD6sDAADrpsizXvtJ/qk6BADNcmMVgDndSLJTHQIAAGACt2O9FgBwDoo86/Z+hkIPAADAmt2MEikAm2PiKABzMnUUADgXRZ51u1UdAIBmedANwNzuVgcAoFnKogDM7U51AABgvRR51u/96gAANGc7yVZ1CAC6Y70WAJviogIAc7NeCwA4M0We9bsa67UAmN5RdQAAunM/yaPqEAA0yUQeAOZ2nORedQgAYJ0UedZvP8MDbwAAgLW7UR0AgCaZyANAhQ9jKg8AcAaKPG14P8lBdQgAAIBzuhG3VgGYnok8AFR4kOR/VocAANZHkacNN5M8rg4BAABwTk+S3K0OAQAAMJGbSW5VhwAA1kWRpx2XM6zZAgAAWLNrMZUHAABow60kh9UhAIB1UeRpx5UkW9UhAAAAzmk3yV51CACacqE6AABdM5EHADgVRZ62XKsOAEATdqsDANA9U3kAmNJxdQAAunbz6R8AwCiKPG25nOSgOgQATfCgG4BKd2L8PADTMZEHgEpPMpxxAABGUeRpy36Su9UhAGiCB90AVDOVB4CpuKgAQLUPYsUWADCSIk97Lmco9AAAAKyZ1cEATMVFBQCq7SfZqQ4BAKyDIk977iV5WB0CgNVzYxWAJbhZHQCAJjjfALAEH8QZBwAYQZGnTT9OclAdAoBVc2MVgCW4Huu1ADg/5xsAluBBkt9UhwAAlk+Rp03XkxxVhwBgtbarAwDAU/tR5AHg/EzkAWApbsRUHgDgJRR52nW5OgAAq7VbHQAAnvHTJDvVIQBYNRN5AFiKu0meVIcAAJZNkaddVzLcXgWA0zqKG6sALMf9JL+qDgHAqjnfALAkH8RUHgDgUyjytOsww49BADitrSQXq0MAwDN+Giu2AACANtzM8PwNAM7Cd0gHFHnadjnJQXUIAFZnO8NUHgBYilvx3QQAALTDRB4Azsozsg4o8rRtL8lOdQgAAIAJXKsOAMBqXagOAADP+SDDhQUAgD+gyNO+y0n2q0MAAACc07VYrwXA2RxXBwCA5zxKcqc6BACrZLVWBxR52ncn1msBcHp+CAKwNMdJbleHAGCVTOQBYIluxlQeAE7Paq0OKPL04cdR5gHgdPwQBGCJrsdUHgBOz0QeAJboYZL71SEAgOVR5OnD+9UBAAAAJrAXD7oBOD0TeQBYqptP/wAA/pUiTz9+XB0AAABgAj+NqTwAnI6JPAAs1f0kv6kOAQAsiyJPP67Eei0AAGD97iXZrw4BwKqYyAPAkt1Mcqs6BACwHIo8/XiU5CfVIQAAACZwNabyADCeiTwALNmduKwAADxDkacv78RUHgAAYP3uJHlYHQKA1TCRB4CluxFTeQCApxR5+nKY4eYqAADA2l1NslMdAoBVMJEHgKUzlQcA+FeKPP15N6byAAAA63c3ya+qQwAAAEzkRpKb1SEAgHqKPP05TPLjKPMAAADr9+MMhR4AAIC1uxPvbgCAKPL06p3qAAAAABO4l+RhdQgAFu9CdQAAGOlGklvVIQCAWoo8/boc+1YBAID1u5Kh0AMAL3JcHQAARroT724AoHuKPP16N8lWdQgAFst3BABrsZPkQXUIABbNRB4A1sRUHgDonCJP396NfasAnOyoOgAAnIKpPAB8GhN5AFgTU3kAoHOKPH27XB0AAABgAg+S3K8OAcBimcgDwNp8EFN5AKBbijz8QzS7AQCA9ftxTOUB4GQm8gCwNrdjowIAdEuRhyvxMAOAP7RVHQAATmk3yU51CAAAgIn8NKbyAECXFHlIknej2Q3A7zuqDgAAZ3AlpvIAAABtuBPvbgCgS4o8JMnVJI+rQwAAAJzTXpK71SEAWJwL1QEA4IxuxFQeAOiOIg+feCfJfnUIABbDai0A1upqTOUB4PdZKw/AWt2OqTwA0B1FHj5xLcmT6hAALIbVWgCs1cOYygPA7zORB4A1+2lM5QGArijy8Kx/iKk8AADA+l2JqTwA/I6JPACs2Z2YygMAXVHk4VnXkzyqDgHAIlitBcCa7Wd42A0AiYk8AKyfqTwA0BFFHp73TkzlAcBqLQDW78cxlQeAgYk8AKydqTwA0BFFHp53I34MAgAA63cQN1YBGJjIA0ALTOUBgE4o8nCSH8RUHgAAYP2uxlQeAEzkAaANd+LdDQB0QZGHk9xKcr86BAAAwDk9SnItyjwAvTORB4BWvB9TeQCgeYo8vMib0ewGAADW72qSx9UhAChlIg8Ardh5+gcANEyRhxfZy3Bz9aA6CAAltqoDAMCE3oupPAAAQBuuxlQegJ55f9MBRR4+zdtJjqpDAFDC5z8ALbkT64MBAIA2HCT5aZKb1UEAKOH9TQcUeXiZt2IqDwAAsH4/iqk8AL26UB0AACZ2PcmT6hAAwGYo8vAy15P8ojoEAADAOT3McGtVmQegP8fVAQBgA96PqTwAPbJaqwOKPIzxdkzlAeiNH4IAtOhKjB8G6JGJPAC06G6SX1aHAGB2nm11QJGHMe5nuLkKQD/8EASgVe/FVB6A3pjIA0CrfpLkVnUIAGBaijyMZSoPAADQgltJdqtDADArE3kAaNXDDOu1lHkAoCGKPIx1mOQHSfargwAAAJzTj2IqD0BPTOQBoGXvZ3iHAwA0QpGH07iaod0NAACwZrsZbqwq8wAAAC24GlN5AKAZijyc1lsxlQcAAFi/d6sDAAAATOROrBAGgGYo8nBa95J8WB0CAABgApdjKg9ADy5UBwCAGVyLqTwA0ARFHs7irSQH1SEAAADO6UasDwbowXF1AACYwYMMk3kAgJVT5OEsHmUYQ2/FFgAAsHY/iqk8AABAG67GVB4AWD1FHs7qckzlAQAA1u9+ktvVIQAAACZwGGUeAFg9RR7O4+2YygMAAKzfezGVB6BlF6oDAMCMbsUKYQBYNUUezuN2ko+qQwAAAJzTJ7dWlXkA2nRcHQAAZmYqDwCsmCIP5/X3MZUHoEVb1QEAYGbXkjyqDgHARpjIA0BvHiS5Wx0CADgbRR7O62GGZvdBdRAAJnVUHQAACrwbU3kAWmQiDwA9upbkZnUIAOD0FHmYwjtxcxUAAFi/e3FrFaBFJvIA0KODJNdjxRYArI4iD1P5XkzlAQAA1s9UHoD2mMgDQK9uJNmrDgEAnI4iD1O5m2FMozIPQBu2qgMAQJEnSS5HmQcAAGjD+zGVBwBWRZGHKb2V5HF1CAAmcVQdAAAK3UjyoDoEAADABB4kuRllHgBYDUUepmbFFgAA0AIrtgDacaE6AAAUez/D9FEAYAUUeZjanSQ/TbJfHQSAc7FaC4DePcywPliZB2D9jqsDAMACXI6pPACwCoo8bMKb8YAEYO2s1gKA5GqS31aHAODcTOQBgGQnyd3qEADAyynysCnfj6k8AADA+r0TU3kA1s6FMwAYXE1yszoEAPDpFHnYlFtJPkhyUJwDgLOxWgsABvcznG+UeQDWy0QeABg8SfLfk9yuDgIAvJgiD5v0/VjNArBWPr8B4Hfeje9GgDUzkQcAfud2hgsLAMBCKfKwaX8XK7YAAID1s2ILYL1M5AGA33clw+RRAGCBFHnYtJtJbkSZBwAAWLc7Gc43yjwA62MiDwD8vv0kV6PMAwCLpMjDHN7MsHcVAABgzd5L8tvqEACcmok8APCHbiW5m2HVFgCwIIo8zOW7MZUHAABYvzdjKg/A2pjIAwAney/JQXUIAOD3KfIwl50MYxqVeQDWYas6AAAs1MMkP44yDwAA0IbLMZUHYE28v+mAIg9zeifJXnUIAEY5qg4AAAt2PYo8AABAG+4nuZZh1RYAy+f9TQcUeZjb38ZUHgAAYP3+Psnd6hAAjHKhOgAALNz1JA+qQwAAA0Ue5raXYTKPnasAAMCaHSf5r1HmAViD4+oAALAC78VUHoA1sFqrA4o8VLgaD7sBls4PQQB4uZ0kN2LNFsDSmcgDAC/3KMm7UeYBWDqrtTqgyEOVN2LFFsCS+SEIAONcyTB5FIDlMpEHAMa5l+R2lHkAoJQiD1WeJPm7KPMAAADr91ZMHQVYMhN5AGC8K/HuBgBKKfJQ6WaS6/GDEAAAWLeDJO/Fii2ApTKRBwBO572YygMAZRR5qPZWkofVIQAAAM7pVpI7UeYBWCITeQDgdPaSXI0yDwCUUORhCb4bU3kAAID1+0GSx9UhAPgDJvIAwOndyrBCWJkHAGamyMMS7CV5O8o8AEuxWx0AAFbshzGVB2BpTOQBgLN5L8mj6hAA0BtFHpbiWpIPo8wDsBRurALA2ewkuRFlHoAlcb4BgLN7L6byAMCsFHlYkjeSPKkOAUASN1YB4DwuJ3lYHQIAAGACDzJcxlbmAYCZKPKwNN9NclAdAqBz29UBAKABf5/kbnUIAACACdxIcr86BAD0QpGHpdlJ8m6s2AIAANbtYZKrsWILYAlMHAWA8/tRkpvVIQCgB4o8LNHleNgNAACs3/U42wAswXF1AABowJMk/0+S29VBAKB1ijws1XdjKg9Apa3qAADQiB9EmQegmok8ADCNnQxrtpR5AGCDFHlYqsMk34oyD0CVo+oAANCIwyTfjzIPQCUTeQBgOu8nuV8dAgBapsjDku0keSfKPAAAwLrdT/JelHkAqpjIAwDTeifDKmEAYAMcYlm6q0m2k/xVks8WZwEAADirm0k+9/TfX64MAtAhE3kAYFqHSf4hyWeSfL04CwA0x0Qe1uDNJHvVIQA6s1UdAAAadDnD5FGTeQAAgLXbzXAZ+3Z1EABojSIPa/HtWLEFMKej6gAA0Kg3kzyqDgEAADCBW8/8AQATUeRhLQ6SfDfKPAAAwPp9P6byAMzpQnUAAGjYlQzTeQCAiSjysCZ3krwbZR4AAGDdHiZ5O8o8AHM5rg4AAI37hyQ3qkMAQCsUeVibKxlGNCrzAAAAa3Y3ydWn/wVgs0zkAYDNepLknSS3q4MAQAsUeVij72W4wQoAALBm15J8FJN5ADbNRB4A2LwHGS5jK/MAwDkp8rBW34ypPACbsptkqzoEAHTiBxm+ewHYHBN5AGAet5J8GGUeADgXRR7W6iDJt6PMA7Aph9UBAKAj309ypzoEQMNM5AGA+VxOcr86BACsmSIPa3YvyVtR5gHYBDdWAWA+hxnKPFZsAWyG8w0AzOudJDeqQwDAWinysHbXM+xcPagOAtCQ7eoAANCh3STvJrlbHQSgQSbyAMC8DpO8nWHVFgBwSm6j0IJ3k3whyV8m+WxxFoAW7FYHAIBO3UryuSRbSb5cnAWgJZ6BAsD89jKs2bqQ5PXaKACwLg6xtOKNJD97+m9lHoDzOYobqwBQ5UqSz2f4Pv5KbRSAZjjfAECNOxne2Rwn+XpxFgBYDau1aMlrGcY17lcHAVi5rSQXq0MAQMfeSvIoyb3qIAAAAOd0LcPZ5nZ1EIBGbFUHYPMUeWjNn1YHAGjAdoYpAABAnW9VBwAAAJjIu0keZlgnDMD5eH/TAUUeWvSlmMoDAACs32sxlQdgCheqAwAA+V6G72STeQDgJRR5aNFBhturyjwAAMCaHSZ5I8o8AOd1XB0AAEiSfK06AEADrNbqgCIPrdpJ8maUeQDOyg9BAFiG3STvRJkH4DxM5AGA5fgPMZUH4Dys1uqAIg8tu5HkvSjzAJyFH4IAsBy3k1yNMg/AWZnIAwDL8SjJ30WZBwBeyG0UWnc5yaUkf5Pks7VRAAAAzuxahrPNUZKvFGcBWBvPQAFgWfaS/PDpv1+vDAIAS+QQSw/eTvLHSf4yyjwAAMB6vZfklaf/VuYBGM9EHgBYnp0k//j038o8APAMq7XoxRtJHsSaLYAx9qoDAAAv9HaSXyW5Wx0EYEVcZgSAZbqdYfqoNVsA8AxFHnrytSQHUeYBeJnjuLEKAEv2RpInSe5VBwFYCecbAFiu60luPf0DAKLIQ3++9PS/yjwAn86NVQBYtm88/a8yD8DLOd8AwLJdSXI/JvMAQBJFHvr0JxluYinzALyYG6sAsHx/keQo1mwBvIzzDQAs3w+S7EaZBwAUeejW55/+V5kH4GRurALAOryaZCsm8wAAAOv3ZpL/GWu2AOicIg89+5PqAAAL5sYqAKzHJ5N5AAAA1u47GS4ZmswDQLcUeejdnyY5qA4BsEAm8gDAunwtpvIAvIjzDQCsy9ee/leZB4AuKfLQu8MkfxYrtgCetV0dAAA4tcMk30hytzoIwAKZOAoA66PMA0C3FHkgeZTkS1HmAXjWVnUAAODUHiX5dkzmAXieiTwAsE5fy/Cc8lZ1EACYkyIPDA6S/EWUeQA+cVQdAAA4k4Mk34nJPADPMpEHANbrtQylXJN5AOiGIg/8zsMMPwiVeQAAgDV7mORvYzIPwCdM5AGAdbNmC4CuKPLA79tN8o0o8wAAAOu2l+R7MZkHIDGRBwBaoMwDQDcUeeAP3U/y7Qy3WAF6tVUdAAA4twdJ3ozJPAAAQBu+9vL/LwCwfoo8cLJ7Sb4bk3mAfh1VBwAAJnE/yVsxmQcAAGjDN2IqDwCNU+SBF7ub5G+jzAMAAKzbvSQ/jMk8QL8uVAcAACZznGGrgjIPAM1S5IFPdzvJ96LMAwAArNvdJG/HZB6gT8fVAQCAST3J78o8Cj0ANEeRB17uVoYfhMo8AADAmt1N8ndR5gH6YyIPALTnSZKvPf23Mg8ATVHkgXHuZfhBqMwDAACs2YMMFxWUeYCemMgDAO1S5gGgOYo8MN6DJH8eZR6gfbtJtqpDAAAbc5DktQwXFhR6gB6YyAMAbftaksMo8wDQCEUeOJ39JH/69L8KPUDLDqsDAAAbdZzkL57+W5kHaJ2JPADQvm8l+U2UeQBogCIPnN5hkj95+m9lHqBVbqwCQB9ezTCJT5kHaJnzDQD04Y0kv4wyDwArp8gDZ/cnGW50KfMArdmuDgAAzOovMpxtlHmAVpnIAwD9eCvJR1HmAWDFFHngfD7/9L/KPEBLdqsDAACzey3DGHplHqBFJvIAQF/eTfJBlHkAWClFHjg/a7aA1hzFjVUA6NF3ktyPMg/QHucbAOjP1STvR5kHgBVyGwWm8SdJfvH035+tDAIwga0kF5McVgcBAGb3ZpL/8vTfX6kMAgAAcE43khw8/ffrlUEAJrRVHYDNU+SB6XwpyU+S/GWUeYB1284wlQcA6NN7+d2qTWUeAABgze4m2Uvy/z79vxV6gLXz/qYDVmvBtN7I8NDbmi0AAGDNbiX521izBbTBZUYA6Nt+kq9lmGJxpzgLALyUIg9M73KS/xBlHgAAYN32MjzsvhuFHmDdjqsDAACL8FqGVVvKPAAsmiIPbMbdJK9GmQdYLztWAYAkOcxwtjlOcq82CsCZmcgDAHziOxnONso8ACyWIg9szl6SP8tQ5lHoAdbGjlUA4FmvJbkfk3mAdTKRBwB41g+SXEtyuzoIAJzEbRTYrCdJ/iTJ//f0//5sXRQAAIBz+X6S/5xhct+Xa6MAnIpnoADA865leIeTJK9XBgGA5znEwjxeTfKTJH8ZZR4AAGC9Lid5/PTfyjzAWpjIAwCc5GaSR0//rcwDwGJYrQXzeSPJ9VizBSzfXnUAAGDR3k/yXqzZAtbDZUYA4EXuJvlhkjvVQQDgE4o8MK+3MjzwVuYBluw4bqwCAJ/uZpK3o8wDrIPzDQDwaXYyXMa+FoUeABZAkQfmdznJd6PMAyybG6sAwMvcS/IfktyIQg+wbM43AMDLPMzw7uZulHkAKKbIAzXuJPnS0/8q9ABL5MYqADDGfpJvJ/l5lHmA5XK+AQDGeicm8wBQTJEH6hwkeS3D7VVlHmBp3FgFAE7jrSTXo8wDAACs37UkP4gyDwBFFHmg3psZfhAq8wBL4sYqAHBaVzPcXlXmAQAA1u5ehlVbV6PQA8DMFHlgGd5P8q0MO1gBlsBEHgDgLO4k+dskt6LQAyyH8w0AcBb7Sb6X4ZyjzAPAbBR5YDl2kvxZhgfepvMAlbarAwAAq7aX5BtJ7sfDbmAZTBwFAM7j3SQ/SXK7OggAfVDkgWU5zPDA+1qUeYBaW9UBAIDVezPDRYV71UGA7pnIAwCc1/UkP8xwxgGAjVLkgWV6O8NDb2UeoMpRdQAAoAmXM9xetWYLqGQiDwAwhZ0k381wzjF9FICNUeSB5bqR5NUMPwwVegAAgLW6leFh940o9AA1TOQBAKbyKMNF7JtR5gFgQxR5YNn2kvx5hgfeD4uzAAAAnNXDJN/OUOpR5gHmZiIPADC1K0neiTIPABvgNgqsw5sZJvP8KMlni7MAfdiKh90AwPTeS/LLp//+SmUQAACAc7qb5OMkP0iyneSrtXEAaIWJPLAe1zOs2roXq7aAzTuqDgAANOt2km8luRrTeQAAgHU7SPL9DJsVTOcBYBKKPLAue0n+IsMPQmUeAABgrR4l+V6GCwvKPMCmmUoOAGza1Vi1BcBEFHlgnd5M8laUeQAAgHW7muS/xsNuYLOsDQYA5nA3yXeSXI4zDgDnoMgD6/XJqq2dKPQAAADrtZPkG0nei+k8wGaYyAMAzOUgw2Xsm1HmAeCMFHlg3faS/HmGVVsPi7MAAACc1WGGqaPvR5kHmJ6JPADA3K7Eqi0AzkiRB9rw5tM/k3mAKewm2aoOAQB06VqS72WYQKrQA0zFRB4AoMLdJN+OQg8Ap6TIA+24meRPMzz4Np0HOK/D6gAAQLd2k3wnw+RRZR5gCibyAABVHiX5QYYJPbeLswCwEoo80JbDJN9N8vdR5gHOx41VAKDalSR/l+HSgkIPcB7ONwBAtZtJ/jbJ5ZjOA8BLKPJAm64n+VKGG6wKPcBpbVcHAAB46kGSbyX5IMo8wNmZyAMALMF+kjeTXI3zDQCfQpEH2vUow+7Vf8jw4xBgrN3qAAAAz7mc5O0Mo+g98AZOy0QeAGBJbmTYrnAlzjcAnECRB9r3fpI/T3IrpvMA4xzFjVUAYHnuJflakg/jYTdwOs43AMDSPEzy/QzvcKzaAuD3KPJAH/aTfCPJj2I6D/ByW0kuVocAAHiBd5P8MB52AwAA63ctw7othR5grK3qAGyeIg/05UqSVzP8GDSdB3iR7QxTeQAAlupukteTvBPTeQAAgHV7kOSNDCu3lHmAl/H+pgOKPNCfvSSvxXQeAABg3Y6T/CDDdJ7bUegBXuxCdQAAgBGuZli3dTXONwBdU+SBfl1J8qUk12M6DwAAsF53k3wtyQfxsBs42XF1AACAkXaTfC9Dmcd0HoBOKfJA3w6SfCfJWxnKPCb0AJ+wYxUAWJvLGR54X48H3sDvM5EHAFib6xne37wb5xuA7ijyAMmwd/XzT/9rOg+Q2LEKAKzTboaH3dfiYTfwOybyAABrdJDk7QxlntvFWQCYkSIP8Kw3k3w3yf2YzgMAAKzXtQxnm8tJ7tVGARbARB4AYM3uJPlWhlKPdcIAHVDkAZ53N8mXklyJ6TwAAMB67We4rPBuPOyG3pnIAwCs3WGGs81/jQmkAM1T5AFe5N0kr2cY16jQA33Zqw4AADChW0leS/KDKPRAr0zkAQBasZNh+uhPo8wD0CxFHuDT7Cb5WpJ/iFVb0JPjuLEKALTlOMk7GW6v3ogH3tAb5xsAoDXvJ/lehu0KzjcAjVHkAcZ4P8mfJrkc03mgF26sAgAt2kny7Qyj6E3ngX443wAALdpL8v0k72WYROqMA9AIRR5grMMkbyb5Rqzbgh64sQoAtOxahrONdVvQB+cbAKBltzOcb0wfBWiEIg9wWg8yrNv6+wxlHoUeaJMbqwBA655kWLf1dzGhBwAAWL8rSd5I8m6cbwBWTZEHOKvrST6f4YG3Mg+0x41VAKAXD5J8N8k/xsNuAABg3R4meTvJDzO8x3HGAVghRR7gvH6Q5LUMIxsVeqAdJvIAAL25meFs82Y87IbWON8AAL25m+Q7Sd6PdVsAq/Nv/uVf/qU6A9CO15P8tySvJPlccRbgfLZiKg8A0K8vJPnPSbaTfLU2CjCBV6OgBwD061KS/5TkK3G+gRZcTfK96hBsltsowJRuP/37L0m+H2UeWDNFHgCgZ3sZzjRfTXKU5GKGh97AOnkGCgD07CDJOxkm8zzM8O5GoQdgwRxigU14L8m1JG8l+aso9MAaHVUHAABYgDtP//7mmf83hR5YH5cUAACSe0//vp7kUYZJPc43AAtktRawaZeS/H2Sb0ahB9bERB4AgD/0HzOUeo7jBiusyWsZSnkAAPzON5P830leiUIPrInVWh34X6oDAM07SPJmkr9IciXD2EYAAIA1ej/Jq0luJLlbGwU4BZcUAAD+0M0k38rw7uZWnHEAFkORB5jLfpLvZ7gFdzUKPbB0W9UBAAAW7GqGs8334mE3AACwbjeSfCPDOed2nHEAyinyAHPby/Cw+7UMt1kVemCZjqoDAAAs3HGGB91fyzCF1MNuAABgza5nON98UugBoIgiD1BlL8kbSV5Pci0KPQAAwDodJrmc4QarQg8s04XqAAAAK3I9w/nmjSR3irMAdEmRB6i2m+S7GX4UXo9CDwAAsE5PotADS3VcHQAAYGWOM2xVeD1Docf5BmBG/+Zf/uVfqjMAPOuLSf5Lkq8k+VxxFujZVjzsBgA4j89keOD97zOcb4A6r8VtcgCA87iY5K+TfCfDtENnHKhzNcn3qkOwWYo8wFJtJ3kryVej0AMVFHkAAKZxMcnfZHjofZzhjAPM69W4RQ4AMJVPCj0X43wDFRR5OmA/NLBUuxlur24n+c8Zxjcq9MA8dqPIAwAwlcMMD9muJvmPT//f3GCFeXkGCgAwnetP//4qyeMkf5zky6WJABpjIg+wFl/IUOj5ehR6YNN2k/xZdQgAgIb9dYYpPVtxgxXm8GpM5AEA2JSvZ5jQ87/HhQWYg4k8HXAbBViLvSTfT/KjDIWeb0ahBzbpQkzkAQDYlGdvsB7GSHrYNM9AAQA259bTv68meZjh3Y1CD8A5mMgDrNWlJG9lePCt0APTs1oLAGA+X88woeeVKPTAJrwaE3kAAObylQxTSLej0AObYCJPBxR5gLV7ttCTKPXAFHaTfDGKPAAAc/tqkjdiJD1M7bUkd6pDAAB05ssZVm79n3G+gSkp8nRAkQdoyd8k+U9JPhuFHjiPB0n+r+oQAAAd287wwPvLMaEHpvBqTOQBAKjyhST/PsMkUoUeOD9Fng4o8gAt+ncZCj1fjUIPnMVuki8lOawOAgDQuc9kmD76V0kuxkNvOKtXo8gDAFDtQpJvZjjffDbDxQXg9N7PMM2XhinyAC27mKHQ8x+T/FGUeuA0tmK1FgDAknwlwwNvY+nh9F6NIg8AwJJ8OcOEni/H+QZO60qS71eHYLMUeYBevJ6h0PNvM4xxBD6dIg8AwDJ9LkOh5+sZfq9ZvQUv91qSO9UhAAD4A5/NsHbrmxkuZ5vSAy9ntVYHFHmA3nwuw7i5v0lyFKUeeBFFHgCA5ftmkr9O8koUeuDTvBoTeQAAlu7rGc44/0dM6YFPo8jTAUUeoGd/naHQ82exdgue978mOawOAQDAKP8uw5SefxuFHjiJiTwAAOvxxQznm6/GhB44iSJPBxR5AIapPJ+Uerai1AOJiTwAAGt0McNY+m8kuRSlHvjEqzGRBwBgbS5kONv8ZYZyj1IPDBR5OqDIA/D7Xs9Q6PlyFHromyIPAMC6bWcYTf/1DL/rlHromYk8AADr9oUMhZ7Xk3wmVm/RN0WeDijyAJzsMxkKPX+T5I+j1EN/FHkAANrxlQyFHqu36NWrMZEHAKAVX85Q6LF6i14p8nRAkQfg5f5thkLP12P1Fn3YS/JnUeQBAGjNZzKca76Z5JUo9dAPE3kAANpzMcP55vUME0mVeuiFIk8HFHkATuevMpR6vhiFHtq1m6HIAwBAuz5ZvfX60/9bqYeWvRoTeQAAWvbJ6q2vJ/mjKPXQNkWeDijyAJzN55L/v707do0jveM4/E1Ywe2BBFYhQ1TswbmQ4RzwwamwwVqQwS7cpji3afPvpM1fkfbaFGmvcXFNijRXpLlChQ1O8c7LjGXZ0snanXd2ngeG9Y7WMODCet/9zG/yOsmPKb8UinrYJW9SYjUTeQAA5uE8/aO3zka+FtgEE3kAAObjLCXqOYugh90k5JkBIQ/Al3ucMqnndZK3KeU3TJmJPAAA87RMH/U8iCk97I51TOQBAJibRUrQ/SLJaUQ97A4hzwwIeQDu1nlK1FPH05vUwxSZyAMAwFHKuuZVksOIepi2dYQ8AABzdpgS9LxMuWlB1MOUCXlmQMgDsDl/6Y7TCHqYFhN5AAAYWqUEPa+S7EXUw/SsI+QBAKBYpQQ950mOI+pheoQ8MyDkAdi8ZZIfU6KehxH10D4TeQAA+JTH6Te9F0nOxr0cuJHnSX4a+yIAAGjOo5RJPedJDiLqYRqEPDMg5AHYrqMkr1OinqOUEY7Qor0IeQAA+LwnKVN6Trv3JvXQqnVM5AEA4POepKxpXg7eQ4uEPDMg5AEYz3H6Z7LWjW/TemjF10kuxr4IAAAm4zT9xvcyoh7aYiIPAAC/R13fPEtyP6Ie2iLkmQEhD0A7aun9KmVEvWk9jMlEHgAAbus4ZcP7aZKT7pywhzGtYyIPAAC3s0oJeZ6mPGpY1MPYhDwzIOQBaNODlKDnRZKHMamH7RPyAABwV85Swp6z7r2oh20zkQcAgLuwSAl6nqUEPQcR9rB9Qp4ZEPIAtG+RflLPeUpgIexh04Q8AABswoP0Uc9xRD1sxzom8gAAcPfq+qZOIxX1sA1CnhkQ8gBMz+OUsOdFysa3sIdN+DrJxdgXAQDATtvPh3ezvouwh81YR8gDAMBm1fXNk+7YT3I66hWxq4Q8MyDkAZi+85S7Wc+THKUU4PClTOQBAGDbjlM2vE9TbmBIhD3cjXWEPAAAbNcqZW1zmuSHJMsIe7gbQp4ZEPIA7JZFkucpm93nKcW3sIfbEPIAADC2B+nDnu9SJka+HPWKmKrnSX4a+yIAAJi1Vcr65vvudRFhD7cj5JkBIQ/AblukbHTXsGcZYQ83I+QBAKA1D1Iew3Wafl1jYg83sY6JPAAAtGU4kVTYw+8h5JkBIQ/AvNSw52WSF4Pz4h4uE/IAANC6GvY8Tbm7NRH2cDUTeQAAaF0Ne+qRCHu4mpBnBoQ8AJymbH6fJXmU5G2EPQh5AACYnqOU9c3j7nWR8nutuId1TOQBAGBa9tOvb75P8m13XtyDkGcGhDwAXLafEvWcpQQ+h915cc98vElZGFyMfSEAAPCFTtKHPfXGhZejXhFjMJEHAIBdsErZu/8hZZ1zvzv/eLQrYgxCnhkQ8gBwE8OR9c8unWf3vEnycOyLAACADVimbHLXuOc44p45WMdEHgAAdtNwfVODHlN7dpuQZwaEPADcVn0k15OUAvxtd17cM31vUu5W9mgtAADmYPhIrkfpp5J6JNfuMJEHAIC5uOqRXHsxtWeXCHlmQMgDwF06TQl76qu4Z7r2IuQBAGC+jlKinhr3HHXnTe6ZpnVM5AEAYL4O069tHqc8gjgxuWeqhDwzIOQBYNPqSMca+Cy68+KedpnIAwAAHztM2fCuG+B1TWNyT/tM5AEAgA/tp0zs+W7wanLPNAh5ZkDIA8AYHqSEPfVYpkQjJ5/7S2zNz0n+PPZFAADABCxSop7Ld7Ympve0ZB0TeQAA4DqLfBz3LCPwaY2QZwaEPAC04jhl0/vR4PVo8HMTfLbnTcov6RdjXwgAAEzUKmUNU49Vyh2vezHBZwzrCHkAAOC2HuXDNc5J+vWNwGf7/pHkr2NfBJsl5AFgClb5MPA5SRlrX4l87t5ePFoLAADu2iLJNylrmG/Tb4TXRxCb4rMZ6wh5AADgru2nrG9O8uFNDPX7G5HPZvw9yd/Gvgg2a3H9RwBgdP/pjn9e8bNh3PMw/ajHdyn/z4l8AACAVrxL8kt3XLZMv/ldI59V97O9JG8j9Lkte6AAAHD3fkvyc3dcdpR+TTOcVrrsfi7yuT3rmxnwjwzA1L3pjqvUGnyV8uiuVff+T0nud59ZpGymn2zyIgEAAK5xkU9vgiflrtbjlA3x4+79KmVtc2/wOY/v+phpowAAsF2/dse/rvjZImVNcz/9dzd1vTP8/iYR/DBTQh4AdtnnavCh4/S/LA6jn7o5PjSXCT8erQUAAG35X3dcp8Y+99Nvgq+6c8tLn53LhB97oAAA0I536Z/E8Dn76b+/qTc03B+8Pxp89tHdXyaMxyIWAJL/dse/r/lcLcJrFT58XzfKh6Y85eft2BcAAADcSl3fXOewO+pa5l73Wtc59y59fsrRj5sUAABgen7L55/KUC3T35hdA5/DlPXN8P3wxgbhD00T8gDAzdU7YK+b8JOUXwhrIT6MfQ6THCT5KmXqzX732YP0/y+/S//Ir/qaTDsMAgAA2lLXN7/c4LPLfBz91BBo+YljkbLmGd4kMHy/zTDIHigAAOyui9xsXVPVdc0w/Knvlynf2yzSf29z0J2/am0jCGIjLGIBYDMucrPRkDdVf3msm+IH+XiTfPi6d4P3NSa66jMAAADVRW4+6ecmhuuYg0t/rgHQ5TVO/Xt7g88sP/Hn+lrXPCbyAAAA1a/d8aXq9zZ7V/y5Hl/l6rXLcI1zeQ101XpoeI4Z+MP79+/HvgYAAAAAAAAAAJi9P459AQAAAAAAAAAAgJAHAAAAAAAAAACaIOQBAAAAAAAAAIAGCHkAAAAAAAAAAKABQh4AAAAAAAAAAGiAkAcAAAAAAAAAABog5AEAAAAAAAAAgAYIeQAAAAAAAAAAoAFCHgAAAAAAAAAAaICQBwAAAAAAAAAAGiDkAQAAAAAAAACABgh5AAAAAAAAAACgAUIeAAAAAAAAAABogJAHAAAAAAAAAAAaIOQBAAAAAAAAAIAGCHkAAAAAAAAAAKABQh4AAAAAAAAAAGiAkAcAAAAAAAAAABog5AEAAAAAAAAAgAYIeQAAAAAAAAAAoAFCHgAAAAAAAAAAaICQBwAAAAAAAAAAGiDkAQAAAAAAAACABgh5AAAAAAAAAACgAUIeAAAAAAAAAABogJAHAAAAAAAAAAAaIOQBAAAAAAAAAIAGCHkAAAAAAAAAAKABQh4AAAAAAAAAAGiAkAcAAAAAAAAAABog5AEAAAAAAAAAgAYIeQAAAAAAAAAAoAFCHgAAAAAAAAAAaICQBwAAAAAAAAAAGiDkAQAAAAAAAACABgh5AAAAAAAAAACgAUIeAAAAAAAAAABogJAHAAAAAAAAAAAaIOQBAAAAAAAAAIAGCHkAAAAAAAAAAKABQh4AAAAAAAAAAGiAkAcAAAAAAAAAABog5AEAAAAAAAAAgAYIeQAAAAAAAAAAoAFCHgAAAAAAAAAAaICQBwAAAAAAAAAAGiDkAQAAAAAAAACABgh5AAAAAAAAAACgAUIeAAAAAAAAAABogJAHAAAAAAAAAAAaIOQBAAAAAAAAAIAGCHkAAAAAAAAAAKABQh4AAAAAAAAAAGiAkAcAAAAAAAAAABog5AEAAAAAAAAAgAYIeQAAAAAAAAAAoAH/B6nei639z57bAAAAAElFTkSuQmCC"></image></defs></svg>Material Tailwind<div class="relative grid items-center font-sans font-bold uppercase whitespace-nowrap select-none py-1.5 px-3 text-xs rounded-lg ml-2 border-[1.5px] border-blue-gray-50 pb-1 pt-1.5 text-primary" style="opacity:0">v2.1.9</div><hr class="mx-2 h-8 border-r border-primary/10"/>Documentation</a><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none max-w-[40px] max-h-[40px] rounded-lg text-xs ml-auto h-6 w-6 text-primary hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-primary text-primary" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button><div class="lg:base-auto hidden flex-grow basis-full items-center lg:flex lg-max:max-h-0"><div class="flex w-full flex-col justify-end lg:!ml-auto lg:flex-row"><nav class="flex flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700 min-w-max px-0 lg:!flex-row"><a class="flex items-center gap-1 cursor-pointer rounded-lg py-2.5 px-4 text-sm text-blue-gray-800 hover:text-primary hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-primary focus:text-primary active:text-primary transition-all leading-none" aria-expanded="false" aria-haspopup="menu" id=":R5qlkmH2:" href="/docs/react/installation">Docs <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></a><a href="/pro"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Pro</div></a><a href="/blocks"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Blocks</div></a><a href="/roots-of-ui-ux-design"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Book</div></a><div class="flex cursor-pointer items-center gap-1 rounded-lg px-4 py-2.5 text-sm leading-none text-blue-gray-800 transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-primary focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-primary active:bg-blue-gray-50 active:bg-opacity-80 active:text-primary" aria-expanded="false" aria-haspopup="menu" id=":RlqlkmH2:">Resources <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></nav><div class="ml-2 flex items-center gap-2"><div class="group relative mt-1"><div class="relative w-full min-w-[200px] h-10 min-w-[100px] !max-w-[180px]"><input type="email" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !h-9 w-full border-[1.5px] !border-blue-gray-100 bg-white text-blue-gray-800 ring-4 ring-transparent placeholder:text-gray-500 focus:!border-primary focus:!border-t-primary group-hover:!border-primary"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 hidden"> </label></div><div class="absolute right-3.5 top-1.5 "><kbd class="rounded border border-blue-gray-100 bg-white px-1 pb-0 pt-px text-xs font-medium text-gray-900 shadow shadow-black/5">⌘K</kbd></div><div class="absolute inset-0 w-full opacity-0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button>ab</div></div><a target="_blank" rel="noreferrer" class="flex items-center gap-2 p-1.5 text-primary" href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"><div class="relative grid font-sans font-bold uppercase whitespace-nowrap select-none px-3 rounded-lg items-center gap-2 border !border-blue-gray-100 bg-white py-1 !pr-2 text-xs text-blue-gray-900" style="opacity:0"><div class="absolute top-2/4 -translate-y-2/4 w-5 h-5 left-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="text-blue-gray-900" class="!ml-0 mt-[2.5px] h-3.5 w-3.5"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path></svg></div>0</div></a><a target="_blank" rel="noreferrer" class="p-1.5 leading-none text-primary opacity-80" href="https://discord.com/invite/FhCJCaHdQa"></a><a href="/blocks#pricing"><button class="align-middle select-none font-sans font-bold text-center transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs px-4 rounded-lg text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none flex items-center justify-between bg-gray-900 py-2.5 normal-case" type="button">Pricing & FAQ</button></a></div></div></div></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><div class="overflow-hidden pb-1 lg:overflow-visible"><div class="flex w-full flex-col justify-end lg:!ml-auto lg:flex-row"><nav class="flex flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700 min-w-max px-0 lg:!flex-row"><a class="flex items-center gap-1 cursor-pointer rounded-lg py-2.5 px-4 text-sm text-blue-gray-800 hover:text-primary hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-primary focus:text-primary active:text-primary transition-all leading-none" aria-expanded="false" aria-haspopup="menu" id=":RbclkmH2:" href="/docs/react/installation">Docs <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></a><a href="/pro"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Pro</div></a><a href="/blocks"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Blocks</div></a><a href="/roots-of-ui-ux-design"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Book</div></a><div class="flex cursor-pointer items-center gap-1 rounded-lg px-4 py-2.5 text-sm leading-none text-blue-gray-800 transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-primary focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-primary active:bg-blue-gray-50 active:bg-opacity-80 active:text-primary" aria-expanded="false" aria-haspopup="menu" id=":R1bclkmH2:">Resources <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></nav><div class="ml-2 flex items-center gap-2"><div class="group relative mt-1"><div class="relative w-full min-w-[200px] h-10 min-w-[100px] !max-w-[180px]"><input type="email" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !h-9 w-full border-[1.5px] !border-blue-gray-100 bg-white text-blue-gray-800 ring-4 ring-transparent placeholder:text-gray-500 focus:!border-primary focus:!border-t-primary group-hover:!border-primary"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 hidden"> </label></div><div class="absolute right-3.5 top-1.5 "><kbd class="rounded border border-blue-gray-100 bg-white px-1 pb-0 pt-px text-xs font-medium text-gray-900 shadow shadow-black/5">⌘K</kbd></div><div class="absolute inset-0 w-full opacity-0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button>ab</div></div><a target="_blank" rel="noreferrer" class="flex items-center gap-2 p-1.5 text-primary" href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"><div class="relative grid font-sans font-bold uppercase whitespace-nowrap select-none px-3 rounded-lg items-center gap-2 border !border-blue-gray-100 bg-white py-1 !pr-2 text-xs text-blue-gray-900" style="opacity:0"><div class="absolute top-2/4 -translate-y-2/4 w-5 h-5 left-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="text-blue-gray-900" class="!ml-0 mt-[2.5px] h-3.5 w-3.5"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path></svg></div>0</div></a><a target="_blank" rel="noreferrer" class="p-1.5 leading-none text-primary opacity-80" href="https://discord.com/invite/FhCJCaHdQa"></a><a href="/blocks#pricing"><button class="align-middle select-none font-sans font-bold text-center transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs px-4 rounded-lg text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none flex items-center justify-between bg-gray-900 py-2.5 normal-case" type="button">Pricing & FAQ</button></a></div></div></div></div></div><div class="mt-2 flex items-center border-t border-blue-gray-50 pb-2 pt-4 lg:hidden"><button type="button" class="text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"></path></svg></button><ol class="ml-4 flex min-w-0 whitespace-nowrap text-sm leading-6 text-blue-gray-700"><li class="flex items-center capitalize">react<svg width="3" height="6" class="mx-3 overflow-visible text-blue-gray-300"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></li><li class="flex items-center capitalize">navbar</li></ol></div></nav></div><div class="px-6"><div class="container mx-auto flex"><aside class="fixed top-0 z-[999] h-screen w-80 overflow-y-scroll pb-4 pr-4 transition-all duration-300 lg:sticky lg:left-0 lg:top-16 lg:z-10 lg:w-56 -left-96"><div class="fixed left-0 top-0 h-screen w-screen bg-gray-900/20 backdrop-blur-sm transition-opacity duration-300 lg:hidden pointer-events-none opacity-0"></div><div class="fixed top-0 z-[9999] h-screen w-80 overflow-y-scroll !bg-white pb-6 pl-6 lg:relative lg:w-56 lg:bg-transparent lg:pl-0 lg:pt-0"><div class="mb-24 mt-6"><div>Getting Started<ul class="py-2"><li class=""><a href="/docs/react/installation">Installation</a></li><li class=""><a href="/docs/react/installation-with-cli">Installation with CLI</a></li><li class=""><a href="/docs/react/license">License</a></li><li class=""><a href="/docs/react/what-is-tailwind-css">What is Tailwind CSS</a></li><li class="!mb-4"><a href="/docs/react/release-notes">Release Notes</a></li></ul></div><div>Upgrade Guide<ul class="py-2"><li class="!mb-4"><a href="/docs/react/2.x-migration-guide">v2 Migration Guide</a></li></ul></div><div>Integration Guide<ul class="py-2"><li class=""><a href="/docs/react/guide/next">Next.js</a></li><li class=""><a href="/docs/react/guide/cra">Create React App</a></li><li class=""><a href="/docs/react/guide/remix">Remix</a></li><li class=""><a href="/docs/react/guide/vite">Vite</a></li><li class=""><a href="/docs/react/guide/astro">Astro</a></li><li class=""><a href="/docs/react/guide/gatsby">Gatsby</a></li><li class="!mb-4"><a href="/docs/react/guide/genezio">Genezio</a></li></ul></div><div>Customization<ul class="py-2"><li class=""><a href="/docs/react/theming">Theming</a></li><li class=""><a href="/docs/react/colors">Colors</a></li><li class=""><a href="/docs/react/fonts">Fonts</a></li><li class=""><a href="/docs/react/shadows">Shadows</a></li><li class="!mb-4"><a href="/docs/react/screens">Screens</a></li></ul></div><div>Components<ul class="py-2"><li class=""><a href="/docs/react/accordion">Accordion</a></li><li class=""><a href="/docs/react/alert">Alert</a></li><li class=""><a href="/docs/react/avatar">Avatar</a></li><li class=""><a href="/docs/react/badge">Badge</a></li><li class=""><a href="/docs/react/breadcrumbs">Breadcrumbs</a></li><li class=""><a href="/docs/react/button">Button</a></li><li class=""><a href="/docs/react/button-group">Button Group</a></li><li class=""><a href="/docs/react/card">Card</a></li><li class=""><a href="/docs/react/chip">Chip</a></li><li class=""><a href="/docs/react/collapse">Collapse</a></li><li class=""><a href="/docs/react/carousel">Carousel</a></li><li class=""><a href="/docs/react/dialog">Dialog</a></li><li class=""><a href="/docs/react/drawer">Drawer</a></li><li class=""><a href="/docs/react/footer">Footer</a></li><li class=""><a href="/docs/react/form">Form</a></li><li class=""><a href="/docs/react/gallery">Gallery</a></li><li class=""><a href="/docs/react/icon-button">Icon Button</a></li><li class=""><a href="/docs/react/img">Image</a></li><li class=""><a href="/docs/react/list">List</a></li><li class=""><a href="/docs/react/menu">Menu</a></li><li class=""><a href="/docs/react/mega-menu">Mega Menu</a></li><li class=""><a href="/docs/react/modal">Modal</a></li><li class=""><a href="/docs/react/navbar">Navbar</a></li><li class=""><a href="/docs/react/popover">Popover</a></li><li class=""><a href="/docs/react/progress-bar">Progress Bar</a></li><li class=""><a href="/docs/react/pagination">Pagination</a></li><li class=""><a href="/docs/react/rating-bar">Rating Bar</a></li><li class=""><a href="/docs/react/sidebar">Sidebar</a></li><li class=""><a href="/docs/react/skeleton">Skeleton</a></li><li class=""><a href="/docs/react/slider">Slider</a></li><li class=""><a href="/docs/react/speed-dial">Speed Dial</a></li><li class=""><a href="/docs/react/spinner">Spinner</a></li><li class=""><a href="/docs/react/stepper">Stepper</a></li><li class=""><a href="/docs/react/tabs">Tabs</a></li><li class=""><a href="/docs/react/table">Table</a></li><li class=""><a href="/docs/react/timeline">Timeline</a></li><li class=""><a href="/docs/react/tooltip">Tooltip</a></li><li class=""><a href="/docs/react/typography">Typography</a></li><li class="!mb-4"><a href="/docs/react/video">Video</a></li></ul></div><div>Forms<ul class="py-2"><li class=""><a href="/docs/react/checkbox">Checkbox</a></li><li class=""><a href="/docs/react/input">Input</a></li><li class=""><a href="/docs/react/input-number">Input Number</a></li><li class=""><a href="/docs/react/input-phone">Input Phone</a></li><li class=""><a href="/docs/react/radio-button">Radio Button</a></li><li class=""><a href="/docs/react/select">Select</a></li><li class=""><a href="/docs/react/switch">Switch</a></li><li class="!mb-4"><a href="/docs/react/textarea">Textarea</a></li></ul></div><div>Web 3.0 Components<ul class="py-2"><li class=""><a href="/docs/react/crypto/crypto-login">Crypto Login</a></li><li class=""><a href="/docs/react/crypto/crypto-card">Crypto Card</a></li><li class=""><a href="/docs/react/crypto/crypto-chart">Crypto Chart</a></li><li class=""><a href="/docs/react/crypto/crypto-modal">Crypto Modal</a></li><li class="!mb-4"><a href="/docs/react/crypto/crypto-table">Crypto Table</a></li></ul></div><div>Plugins<ul class="py-2"><li class=""><a href="/docs/react/plugins/algolia-search">Algolia Search</a></li><li class=""><a href="/docs/react/plugins/charts">Charts</a></li><li class=""><a href="/docs/react/plugins/clipboard">Clipboard</a></li><li class=""><a href="/docs/react/plugins/date-picker">Date Picker</a></li><li class="!mb-4"><a href="/docs/react/plugins/text-editor">WSSIWYG Editor</a></li></ul></div></div></div></aside><div class="mt-6 w-full lg:w-[60%] lg:px-6"><div id="navbar" class="group relative -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h1 class="block antialiased tracking-normal font-sans text-3xl font-semibold leading-snug !mb-4 text-primary lg:!text-3xl">Tailwind CSS Navbar - React</h1></div> text-inherit !mb-4 !font-normal !text-gray-600">Use our responsive Tailwind CSS navigation for your website. You can add links, icons, links with icons, search bars, and brand text. text-inherit !mb-4 !font-normal !text-gray-600">See below our simple <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">Navbar</code> example that you can use in your Tailwind CSS and React project. text-inherit !mb-4 !font-normal !text-gray-600">Examples on this page are using <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm"><a href="https://heroicons.com/" target="_blank">@heroicons/react</a></code> make sure you have installed it. "bash" data-theme="default"><code data-language="bash" data-theme="default">npm i @heroicons/react</code></pre></div> font-semibold leading-snug !mb-2 text-primary">Simple Navbar with Icons</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this minimalistic navbar which includes the brand name on the left, followed by a horizontal list of navigation links - each accompanied by an icon. The navbar also includes call-to-action buttons, with the "SIGN IN" button highlighted in black to draw attention. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"><div class="container mx-auto flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="hidden lg:block"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Pages</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Account</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Blocks</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Docs</a></li></ul></div><div class="flex items-center gap-x-1"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 hidden lg:inline-block" type="button">Log In</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] hidden lg:inline-block" type="button">Sign in</button></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none max-w-[40px] max-h-[40px] rounded-lg text-xs ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px;opacity:0"><div class="container mx-auto"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Pages</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Account</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Blocks</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Docs</a></li></ul><div class="flex items-center gap-x-1"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 block w-full" type="button">Log In</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] block w-full" type="button">Sign in</button></div></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, MobileNav, Typography, Button, IconButton, from "@material-tailwind/react"; export function NavbarDefault() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); const navList = ( <ul className="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Pages </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Account </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Blocks </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Docs </a> </Typography> </ul> ); return ( <Navbar className="mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"> <div className="container mx-auto flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="hidden lg:block">{navList}</div> <div className="flex items-center gap-x-1"> <Button variant="text" size="sm" className="hidden lg:inline-block"> <span>Log In</span> </Button> <Button variant="gradient" size="sm" className="hidden lg:inline-block" > <span>Sign in</span> </Button> </div> <IconButton variant="text" className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" ripple={false} onClick={() => setOpenNav(!openNav)} > {openNav ? ( <svg xmlns="http://www.w3.org/2000/svg" fill="none" className="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> ) : ( <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" /> </svg> )} </IconButton> </div> <MobileNav open={openNav}> <div className="container mx-auto"> {navList} <div className="flex items-center gap-x-1"> <Button fullWidth variant="text" size="sm" className=""> <span>Log In</span> </Button> <Button fullWidth variant="gradient" size="sm" className=""> <span>Sign in</span> </Button> </div> </div> </MobileNav> </Navbar> ); }</code></pre></div></div></div> flex scroll-mt-40 items-center pl-4"><a href="#sticky-navbar" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Sticky Navbar</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Use this example if you want your navbar to remain in a fixed position when scrolling. From the navbar, give access to the users to different sections/ web pages. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><div class="-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll"><nav class="block w-full shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2 lg:px-8 lg:py-4"><div class="flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="flex items-center gap-4"><div class="mr-4 hidden lg:block"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Docs</a></li></ul></div><div class="flex items-center gap-x-1"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 hidden lg:inline-block" type="button">Log In</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] hidden lg:inline-block" type="button">Sign in</button></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none max-w-[40px] max-h-[40px] rounded-lg text-xs ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div></div><div class="block w-full basis-full overflow-hidden" style="height:0px;opacity:0"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-normal"><a href="#" class="flex items-center">Docs</a></li></ul><div class="flex items-center gap-x-1"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 block w-full" type="button">Log In</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] block w-full" type="button">Sign in</button></div></div></nav><div class="mx-auto max-w-screen-md py-12"><div class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md mb-12 overflow-hidden"><img alt="nature" class="h-[32rem] w-full object-cover object-center" src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"/></div><h2 class="block antialiased tracking-normal font-sans text-4xl font-semibold leading-[1.3] text-blue-gray-900 mb-2">What is Material Tailwind</h2>Can you help me out? you will get a lot of free exposure doing this can my website be in english?. There is too much white space do less with more, so that will be a conversation piece can you rework to make the pizza look more delicious other agencies charge much lesser can you make the blue bluer?. I think we need to start from scratch can my website be in english?, yet make it sexy i'll pay you in a week we don't need to pay upfront i hope you understand can you make it stand out more?. Make the font bigger can you help me out? you will get a lot of free exposure doing this that's going to be a chunk of change other agencies charge much lesser. Are you busy this weekend? I have a new project with a tight deadline that's going to be a chunk of change. There are more projects lined up charge extra the next time.</div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, MobileNav, Typography, Button, IconButton, Card, from "@material-tailwind/react"; export function StickyNavbar() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); const navList = ( <ul className="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Pages </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Account </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Blocks </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Docs </a> </Typography> </ul> ); return ( <div className="-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll"> <Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2 lg:px-8 lg:py-4"> <div className="flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="flex items-center gap-4"> <div className="mr-4 hidden lg:block">{navList}</div> <div className="flex items-center gap-x-1"> <Button variant="text" size="sm" className="hidden lg:inline-block" > <span>Log In</span> </Button> <Button variant="gradient" size="sm" className="hidden lg:inline-block" > <span>Sign in</span> </Button> </div> <IconButton variant="text" className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" ripple={false} onClick={() => setOpenNav(!openNav)} > {openNav ? ( <svg xmlns="http://www.w3.org/2000/svg" fill="none" className="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> ) : ( <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" /> </svg> )} </IconButton> </div> </div> <MobileNav open={openNav}> {navList} <div className="flex items-center gap-x-1"> <Button fullWidth variant="text" size="sm" className=""> <span>Log In</span> </Button> <Button fullWidth variant="gradient" size="sm" className=""> <span>Sign in</span> </Button> </div> </MobileNav> </Navbar> <div className="mx-auto max-w-screen-md py-12"> <Card className="mb-12 overflow-hidden"> <img alt="nature" className="h-[32rem] w-full object-cover object-center" src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80" /> </Card> <Typography variant="h2" color="blue-gray" className="mb-2"> What is Material Tailwind </Typography> <Typography color="gray" className="font-normal"> Can you help me out? you will get a lot of free exposure doing this can my website be in english?. There is too much white space do less with more, so that will be a conversation piece can you rework to make the pizza look more delicious other agencies charge much lesser can you make the blue bluer?. I think we need to start from scratch can my website be in english?, yet make it sexy i&apos;ll pay you in a week we don&apos;t need to pay upfront i hope you understand can you make it stand out more?. Make the font bigger can you help me out? you will get a lot of free exposure doing this that&apos;s going to be a chunk of change other agencies charge much lesser. Are you busy this weekend? I have a new project with a tight deadline that&apos;s going to be a chunk of change. There are more projects lined up charge extra the next time. </Typography> </div> </div> ); }</code></pre></div></div></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#complex-user-navbar" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Complex User Navbar</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">If you want a more sophisticated navbar, use this example with icons and dropdown. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl p-2 lg:rounded-full lg:pl-6"><div class="relative mx-auto flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 ml-2 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="hidden lg:block"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center"><a href="#" aria-expanded="false" aria-haspopup="menu" id=":Raj2f9kmH2:" class="block antialiased font-sans text-sm leading-normal text-inherit font-normal"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none hidden items-center gap-2 font-medium text-blue-gray-900 lg:flex lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px] text-blue-gray-500"><path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"></path><path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"></path><path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"></path></svg> Pages <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-3 w-3 transition-transform "><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></a><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 font-medium text-blue-gray-900 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px] text-blue-gray-500"><path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"></path><path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"></path><path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"></path></svg> Pages </button><ul class="ml-6 flex w-full flex-col gap-1 lg:hidden"><a href="#"><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 mb-1">@material-tailwind/html</h6>Learn how to use @material-tailwind/html, packed with rich components and widgets.</button></a><a href="#"><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 mb-1">@material-tailwind/react</h6>Learn how to use @material-tailwind/react, packed with rich components for React.</button></a><a href="#"><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 mb-1">Material Tailwind PRO</h6>A complete set of UI Elements for building faster websites in less time.</button></a></ul><a href="#" class="block antialiased font-sans text-sm leading-normal font-medium text-blue-gray-500"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px]"><path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd"></path></svg> Account</button></a><a href="#" class="block antialiased font-sans text-sm leading-normal font-medium text-blue-gray-500"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px]"><path fill-rule="evenodd" d="M11.622 1.602a.75.75 0 0 1 .756 0l2.25 1.313a.75.75 0 0 1-.756 1.295L12 3.118 10.128 4.21a.75.75 0 1 1-.756-1.295l2.25-1.313ZM5.898 5.81a.75.75 0 0 1-.27 1.025l-1.14.665 1.14.665a.75.75 0 1 1-.756 1.295L3.75 8.806v.944a.75.75 0 0 1-1.5 0V7.5a.75.75 0 0 1 .372-.648l2.25-1.312a.75.75 0 0 1 1.026.27Zm12.204 0a.75.75 0 0 1 1.026-.27l2.25 1.312a.75.75 0 0 1 .372.648v2.25a.75.75 0 0 1-1.5 0v-.944l-1.122.654a.75.75 0 1 1-.756-1.295l1.14-.665-1.14-.665a.75.75 0 0 1-.27-1.025Zm-9 5.25a.75.75 0 0 1 1.026-.27L12 11.882l1.872-1.092a.75.75 0 1 1 .756 1.295l-1.878 1.096V15a.75.75 0 0 1-1.5 0v-1.82l-1.878-1.095a.75.75 0 0 1-.27-1.025ZM3 13.5a.75.75 0 0 1 .75.75v1.82l1.878 1.095a.75.75 0 1 1-.756 1.295l-2.25-1.312a.75.75 0 0 1-.372-.648v-2.25A.75.75 0 0 1 3 13.5Zm18 0a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.372.648l-2.25 1.312a.75.75 0 1 1-.756-1.295l1.878-1.096V14.25a.75.75 0 0 1 .75-.75Zm-9 5.25a.75.75 0 0 1 .75.75v.944l1.122-.654a.75.75 0 1 1 .756 1.295l-2.25 1.313a.75.75 0 0 1-.756 0l-2.25-1.313a.75.75 0 1 1 .756-1.295l1.122.654V19.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd"></path></svg> Blocks</button></a><a href="#" class="block antialiased font-sans text-sm leading-normal font-medium text-blue-gray-500"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px]"><path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z" clip-rule="evenodd"></path></svg> Docs</button></a></ul></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 ml-auto mr-2 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path fill-rule="evenodd" d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg></button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20" type="button">Log In</button><button aria-expanded="false" aria-haspopup="menu" id=":R1b2f9kmH2:" class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs px-6 text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto" type="button"><img alt="tania andrew" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="inline-block relative object-cover object-center !rounded-full w-9 h-9 rounded-md border border-gray-900 p-0.5"/><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2.5" class="h-3 w-3 transition-transform "><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></div><div class="block w-full basis-full overflow-scroll" style="height:0px;opacity:0"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center"><a href="#" aria-expanded="false" aria-haspopup="menu" id=":Rbd2f9kmH2:" class="block antialiased font-sans text-sm leading-normal text-inherit font-normal"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none hidden items-center gap-2 font-medium text-blue-gray-900 lg:flex lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px] text-blue-gray-500"><path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"></path><path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"></path><path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"></path></svg> Pages <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-3 w-3 transition-transform "><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></a><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 font-medium text-blue-gray-900 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px] text-blue-gray-500"><path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"></path><path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"></path><path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"></path></svg> Pages </button><ul class="ml-6 flex w-full flex-col gap-1 lg:hidden"><a href="#"><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 mb-1">@material-tailwind/html</h6>Learn how to use @material-tailwind/html, packed with rich components and widgets.</button></a><a href="#"><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 mb-1">@material-tailwind/react</h6>Learn how to use @material-tailwind/react, packed with rich components for React.</button></a><a href="#"><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 mb-1">Material Tailwind PRO</h6>A complete set of UI Elements for building faster websites in less time.</button></a></ul><a href="#" class="block antialiased font-sans text-sm leading-normal font-medium text-blue-gray-500"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px]"><path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd"></path></svg> Account</button></a><a href="#" class="block antialiased font-sans text-sm leading-normal font-medium text-blue-gray-500"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px]"><path fill-rule="evenodd" d="M11.622 1.602a.75.75 0 0 1 .756 0l2.25 1.313a.75.75 0 0 1-.756 1.295L12 3.118 10.128 4.21a.75.75 0 1 1-.756-1.295l2.25-1.313ZM5.898 5.81a.75.75 0 0 1-.27 1.025l-1.14.665 1.14.665a.75.75 0 1 1-.756 1.295L3.75 8.806v.944a.75.75 0 0 1-1.5 0V7.5a.75.75 0 0 1 .372-.648l2.25-1.312a.75.75 0 0 1 1.026.27Zm12.204 0a.75.75 0 0 1 1.026-.27l2.25 1.312a.75.75 0 0 1 .372.648v2.25a.75.75 0 0 1-1.5 0v-.944l-1.122.654a.75.75 0 1 1-.756-1.295l1.14-.665-1.14-.665a.75.75 0 0 1-.27-1.025Zm-9 5.25a.75.75 0 0 1 1.026-.27L12 11.882l1.872-1.092a.75.75 0 1 1 .756 1.295l-1.878 1.096V15a.75.75 0 0 1-1.5 0v-1.82l-1.878-1.095a.75.75 0 0 1-.27-1.025ZM3 13.5a.75.75 0 0 1 .75.75v1.82l1.878 1.095a.75.75 0 1 1-.756 1.295l-2.25-1.312a.75.75 0 0 1-.372-.648v-2.25A.75.75 0 0 1 3 13.5Zm18 0a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.372.648l-2.25 1.312a.75.75 0 1 1-.756-1.295l1.878-1.096V14.25a.75.75 0 0 1 .75-.75Zm-9 5.25a.75.75 0 0 1 .75.75v.944l1.122-.654a.75.75 0 1 1 .756 1.295l-2.25 1.313a.75.75 0 0 1-.756 0l-2.25-1.313a.75.75 0 1 1 .756-1.295l1.122.654V19.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd"></path></svg> Blocks</button></a><a href="#" class="block antialiased font-sans text-sm leading-normal font-medium text-blue-gray-500"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 lg:rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[18px] w-[18px]"><path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z" clip-rule="evenodd"></path></svg> Docs</button></a></ul></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, MobileNav, Typography, Button, Menu, MenuHandler, MenuList, MenuItem, Avatar, Card, IconButton, from "@material-tailwind/react"; import { CubeTransparentIcon, UserCircleIcon, CodeBracketSquareIcon, Square3Stack3DIcon, ChevronDownIcon, Cog6ToothIcon, InboxArrowDownIcon, LifebuoyIcon, PowerIcon, RocketLaunchIcon, Bars2Icon, from "@heroicons/react/24/solid"; profile menu component const profileMenuItems = [ { label: "My Profile", icon: UserCircleIcon, }, { label: "Edit Profile", icon: Cog6ToothIcon, }, { label: "Inbox", icon: InboxArrowDownIcon, }, { label: "Help", icon: LifebuoyIcon, }, { label: "Sign Out", icon: PowerIcon, }, ]; function ProfileMenu() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const closeMenu = () => setIsMenuOpen(false); return ( <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end"> <MenuHandler> <Button variant="text" color="blue-gray" className="flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto" > <Avatar variant="circular" size="sm" alt="tania andrew" className="border border-gray-900 p-0.5" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" /> <ChevronDownIcon strokeWidth={2.5} className={`h-3 w-3 transition-transform ${ isMenuOpen ? "rotate-180" : "" }`} /> </Button> </MenuHandler> <MenuList className="p-1"> {profileMenuItems.map(({ label, icon }, key) => { const isLastItem = key === profileMenuItems.length - 1; return ( <MenuItem key={label} onClick={closeMenu} className={`flex items-center gap-2 rounded ${ isLastItem ? "hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10" : "" }`} > {React.createElement(icon, { className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`, strokeWidth: 2, })} <Typography as="span" variant="small" className="font-normal" color={isLastItem ? "red" : "inherit"} > {label} </Typography> </MenuItem> ); })} </MenuList> </Menu> ); } nav list menu const navListMenuItems = [ { title: "@material-tailwind/html", description: "Learn how to use @material-tailwind/html, packed with rich components and widgets.", }, { title: "@material-tailwind/react", description: "Learn how to use @material-tailwind/react, packed with rich components for React.", }, { title: "Material Tailwind PRO", description: "A complete set of UI Elements for building faster websites in less time.", }, ]; function NavListMenu() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const renderItems = navListMenuItems.map(({ title, description }) => ( <a href="#" key={title}> <MenuItem> <Typography variant="h6" color="blue-gray" className="mb-1"> {title} </Typography> <Typography variant="small" color="gray" className="font-normal"> {description} </Typography> </MenuItem> </a> )); return ( <React.Fragment> <Menu allowHover open={isMenuOpen} handler={setIsMenuOpen}> <MenuHandler> <Typography as="a" href="#" variant="small" className="font-normal"> <MenuItem className="hidden items-center gap-2 font-medium text-blue-gray-900 lg:flex lg:rounded-full"> <Square3Stack3DIcon className="h-[18px] w-[18px] text-blue-gray-500" />{" "} Pages{" "} <ChevronDownIcon strokeWidth={2} className={`h-3 w-3 transition-transform ${ isMenuOpen ? "rotate-180" : "" }`} /> </MenuItem> </Typography> </MenuHandler> <MenuList className="hidden w-[36rem] grid-cols-7 gap-3 overflow-visible lg:grid"> <Card color="blue" shadow={false} variant="gradient" className="col-span-3 grid h-full w-full place-items-center rounded-md" > <RocketLaunchIcon strokeWidth={1} className="h-28 w-28" /> </Card> <ul className="col-span-4 flex w-full flex-col gap-1"> {renderItems} </ul> </MenuList> </Menu> <MenuItem className="flex items-center gap-2 font-medium text-blue-gray-900 lg:hidden"> <Square3Stack3DIcon className="h-[18px] w-[18px] text-blue-gray-500" />{" "} Pages{" "} </MenuItem> <ul className="ml-6 flex w-full flex-col gap-1 lg:hidden"> {renderItems} </ul> </React.Fragment> ); } nav list component const navListItems = [ { label: "Account", icon: UserCircleIcon, }, { label: "Blocks", icon: CubeTransparentIcon, }, { label: "Docs", icon: CodeBracketSquareIcon, }, ]; function NavList() { return ( <ul className="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center"> <NavListMenu /> {navListItems.map(({ label, icon }, key) => ( <Typography key={label} as="a" href="#" variant="small" color="gray" className="font-medium text-blue-gray-500" > <MenuItem className="flex items-center gap-2 lg:rounded-full"> {React.createElement(icon, { className: "h-[18px] w-[18px]" })}{" "} <span className="text-gray-900"> {label}</span> </MenuItem> </Typography> ))} </ul> ); } export function ComplexNavbar() { const [isNavOpen, setIsNavOpen] = React.useState(false); const toggleIsNavOpen = () => setIsNavOpen((cur) => !cur); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setIsNavOpen(false), ); }, []); return ( <Navbar className="mx-auto max-w-screen-xl p-2 lg:rounded-full lg:pl-6"> <div className="relative mx-auto flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 ml-2 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="hidden lg:block"> <NavList /> </div> <IconButton size="sm" color="blue-gray" variant="text" onClick={toggleIsNavOpen} className="ml-auto mr-2 lg:hidden" > <Bars2Icon className="h-6 w-6" /> </IconButton> <Button size="sm" variant="text"> <span>Log In</span> </Button> <ProfileMenu /> </div> <MobileNav open={isNavOpen} className="overflow-scroll"> <NavList /> </MobileNav> </Navbar> ); }</code></pre></div></div></div> flex scroll-mt-40 items-center pl-4"><a href="#navbar-with-search" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar With Search</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Use this navbar with a search component that combines navigation with a search functionality. It features the brand name "Material Tailwind" on the left, followed by a prominent search bar with a search icon inside. A black "SEARCH" button is positioned next to the search bar, making it easy for users to execute a search query. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"><div class="container mx-auto flex flex-wrap items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="hidden lg:block"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Pages</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Account</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Blocks</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Docs</a></li></ul></div><div class="hidden items-center gap-x-2 lg:flex"><div class="relative flex w-full gap-2 md:w-max"><div class="relative w-full min-w-[200px] h-10 min-w-[288px]"><input type="search" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 before:content-none after:content-none"> </label></div><div class="!absolute left-3 top-[13px]"><svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC"></path><path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded-lg" type="button">Search</button></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none max-w-[40px] max-h-[40px] rounded-lg text-xs ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px;opacity:0"><div class="container mx-auto"><ul class="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Pages</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Account</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Blocks</a></li><li class="antialiased font-sans text-sm leading-normal text-blue-gray-900 flex items-center gap-x-2 p-1 font-medium"><svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z" fill="#90A4AE"></path></svg><a href="#" class="flex items-center">Docs</a></li></ul><div class="flex flex-col gap-x-2 sm:flex-row sm:items-center"><div class="relative w-full gap-2 md:w-max"><div class="relative w-full min-w-[200px] h-10 min-w-[288px]"><input type="search" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 before:content-none after:content-none"> </label></div><div class="!absolute left-3 top-[13px]"><svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC"></path><path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none mt-1 rounded-lg sm:mt-0" type="button">Search</button></div></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, MobileNav, Typography, Button, IconButton, Input, from "@material-tailwind/react"; export function NavbarWithSearch() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); const navList = ( <ul className="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Pages </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Account </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Blocks </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="flex items-center gap-x-2 p-1 font-medium" > <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z" fill="#90A4AE" /> </svg> <a href="#" className="flex items-center"> Docs </a> </Typography> </ul> ); return ( <Navbar className="mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"> <div className="container mx-auto flex flex-wrap items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="hidden lg:block">{navList}</div> <div className="hidden items-center gap-x-2 lg:flex"> <div className="relative flex w-full gap-2 md:w-max"> <Input type="search" placeholder="Search" containerProps={{ className: "min-w-[288px]", }} className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300" labelProps={{ className: "before:content-none after:content-none", }} /> <div className="!absolute left-3 top-[13px]"> <svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC" /> <path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> </div> <Button size="md" className="rounded-lg "> Search </Button> </div> <IconButton variant="text" className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" ripple={false} onClick={() => setOpenNav(!openNav)} > {openNav ? ( <svg xmlns="http://www.w3.org/2000/svg" fill="none" className="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> ) : ( <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" /> </svg> )} </IconButton> </div> <MobileNav open={openNav}> <div className="container mx-auto"> {navList} <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center"> <div className="relative w-full gap-2 md:w-max"> <Input type="search" placeholder="Search" containerProps={{ className: "min-w-[288px]", }} className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300" labelProps={{ className: "before:content-none after:content-none", }} /> <div className="!absolute left-3 top-[13px]"> <svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC" /> <path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> </div> <Button size="md" className="mt-1 rounded-lg sm:mt-0"> Search </Button> </div> </div> </MobileNav> </Navbar> ); }</code></pre></div></div></div> scroll-mt-40 items-center pl-4"><a href="#dark-navbar" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Dark Navbar</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Use this sleek navbar with a search component that uses a dark background to improve the contrast and visibility of the elements. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md bg-gradient-to-tr text-white mx-auto max-w-screen-xl from-blue-gray-900 to-blue-gray-800 px-4 py-3"><div class="flex flex-wrap items-center justify-between gap-y-4 text-white"><a href="#" class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-inherit mr-4 ml-2 cursor-pointer py-1.5">Material Tailwind</a><div class="ml-auto flex gap-1 md:mr-4"><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-white hover:bg-white/10 active:bg-white/30" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4"><path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" clip-rule="evenodd"></path></svg></button><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-white hover:bg-white/10 active:bg-white/30" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z" clip-rule="evenodd"></path></svg></button></div><div class="relative flex w-full gap-2 md:w-max"><div class="relative w-full min-w-[200px] h-10 min-w-[288px]"><input type="search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] !text-white border-white focus:border-white pr-20" placeholder=" "/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] !text-white peer-focus:text-white before:border-white peer-focus:before:!border-white after:border-white peer-focus:after:!border-white">Type here... </label></div><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 bg-white text-blue-gray-900 shadow-md shadow-blue-gray-500/10 hover:shadow-lg hover:shadow-blue-gray-500/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none !absolute right-1 top-1 rounded" type="button">Search</button></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import { Navbar, Typography, IconButton, Button, Input, from "@material-tailwind/react"; import { BellIcon, Cog6ToothIcon } from "@heroicons/react/24/solid"; export function NavbarDark() { return ( <Navbar variant="gradient" color="blue-gray" className="mx-auto max-w-screen-xl from-blue-gray-900 to-blue-gray-800 px-4 py-3" > <div className="flex flex-wrap items-center justify-between gap-y-4 text-white"> <Typography as="a" href="#" variant="h6" className="mr-4 ml-2 cursor-pointer py-1.5" > Material Tailwind </Typography> <div className="ml-auto flex gap-1 md:mr-4"> <IconButton variant="text" color="white"> <Cog6ToothIcon className="h-4 w-4" /> </IconButton> <IconButton variant="text" color="white"> <BellIcon className="h-4 w-4" /> </IconButton> </div> <div className="relative flex w-full gap-2 md:w-max"> <Input type="search" color="white" label="Type here..." className="pr-20" containerProps={{ className: "min-w-[288px]", }} /> <Button size="sm" color="white" className="!absolute right-1 top-1 rounded" > Search </Button> </div> </div> </Navbar> ); }</code></pre></div></div></div> flex scroll-mt-40 items-center pl-4"><a href="#simple-navbar" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Simple Navbar</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Try this versatile Tailwind CSS navbar with no icons or buttons to focus on basic navigation. The rounded corners of the navbar add a subtle touch of modernity to the overall design. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-6 py-3"><div class="flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-inherit mr-4 cursor-pointer py-1.5">Material Tailwind</a><div class="hidden lg:block"><ul class="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Docs</a></li></ul></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none max-w-[40px] max-h-[40px] rounded-lg text-xs ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><ul class="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center hover:text-blue-500 transition-colors">Docs</a></li></ul></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, Collapse, Typography, IconButton, from "@material-tailwind/react"; import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; function NavList() { return ( <ul className="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center hover:text-blue-500 transition-colors"> Pages </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center hover:text-blue-500 transition-colors"> Account </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center hover:text-blue-500 transition-colors"> Blocks </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center hover:text-blue-500 transition-colors"> Docs </a> </Typography> </ul> ); } export function NavbarSimple() { const [openNav, setOpenNav] = React.useState(false); const handleWindowResize = () => window.innerWidth >= 960 && setOpenNav(false); React.useEffect(() => { window.addEventListener("resize", handleWindowResize); return () => { window.removeEventListener("resize", handleWindowResize); }; }, []); return ( <Navbar className="mx-auto max-w-screen-xl px-6 py-3"> <div className="flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" variant="h6" className="mr-4 cursor-pointer py-1.5" > Material Tailwind </Typography> <div className="hidden lg:block"> <NavList /> </div> <IconButton variant="text" className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" ripple={false} onClick={() => setOpenNav(!openNav)} > {openNav ? ( <XMarkIcon className="h-6 w-6" strokeWidth={2} /> ) : ( <Bars3Icon className="h-6 w-6" strokeWidth={2} /> )} </IconButton> </div> <Collapse open={openNav}> <NavList /> </Collapse> </Navbar> ); }</code></pre></div></div></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-with-mega-menu" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar With Mega Menu</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">This example features a dropdown mega menu that expands to display multiple categories with icons and descriptions. It allows users to quickly access a wide range of resources directly from the navbar. The Tailwind CSS mega menu is ideal for websites with a large amount of content to organize. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-4 py-2"><div class="flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 lg:ml-2">Material Tailwind</a><div class="hidden lg:block"><nav class="flex flex-col gap-1 min-w-[240px] font-sans text-base font-normal text-blue-gray-700 mt-4 mb-6 p-0 lg:mt-0 lg:mb-0 lg:flex-row lg:p-1"><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Home</div></a><div aria-expanded="false" aria-haspopup="menu" id=":Rcj4f9kmH2:" class="block antialiased font-sans text-sm leading-normal text-inherit font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4 font-medium text-gray-900">Resources<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="hidden h-3 w-3 transition-transform lg:block "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="block h-3 w-3 transition-transform lg:hidden "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></div><div class="block lg:hidden"><div class="block w-full basis-full overflow-hidden" style="height:0px"><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path d="M6 3a3 3 0 0 0-3 3v2.25a3 3 0 0 0 3 3h2.25a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM15.75 3a3 3 0 0 0-3 3v2.25a3 3 0 0 0 3 3H18a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2.25ZM6 12.75a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h2.25a3 3 0 0 0 3-3v-2.25a3 3 0 0 0-3-3H6ZM17.625 13.5a.75.75 0 0 0-1.5 0v2.625H13.5a.75.75 0 0 0 0 1.5h2.625v2.625a.75.75 0 0 0 1.5 0v-2.625h2.625a.75.75 0 0 0 0-1.5h-2.625V13.5Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Products</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM15.75 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM2.25 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM6.31 15.117A6.745 6.745 0 0 1 12 12a6.745 6.745 0 0 1 6.709 7.498.75.75 0 0 1-.372.568A12.696 12.696 0 0 1 12 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 0 1-.372-.568 6.787 6.787 0 0 1 1.019-4.38Z" clip-rule="evenodd"></path><path d="M5.082 14.254a8.287 8.287 0 0 0-1.308 5.135 9.687 9.687 0 0 1-1.764-.44l-.115-.04a.563.563 0 0 1-.373-.487l-.01-.121a3.75 3.75 0 0 1 3.57-4.047ZM20.226 19.389a8.287 8.287 0 0 0-1.308-5.135 3.75 3.75 0 0 1 3.57 4.047l-.01.121a.563.563 0 0 1-.373.486l-.115.04c-.567.2-1.156.349-1.764.441Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">About Us</h6>Meet and learn about our dedication</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M3 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 5.25Zm0 4.5A.75.75 0 0 1 3.75 9h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9.75Zm0 4.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Zm0 4.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Blog</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Services</h6>Learn how we can help you achieve your goals.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM6.262 6.072a8.25 8.25 0 1 0 10.562-.766 4.5 4.5 0 0 1-1.318 1.357L14.25 7.5l.165.33a.809.809 0 0 1-1.086 1.085l-.604-.302a1.125 1.125 0 0 0-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 0 1-2.288 4.04l-.723.724a1.125 1.125 0 0 1-1.298.21l-.153-.076a1.125 1.125 0 0 1-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 0 1-.21-1.298L9.75 12l-1.64-1.64a6 6 0 0 1-1.676-3.257l-.172-1.03Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Support</h6>Reach out to us for assistance or inquiries</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Contact</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3H4.125ZM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H12Zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5H6Zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75H6Z" clip-rule="evenodd"></path><path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0V6.75Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">News</h6>Read insightful articles, tips, and expert opinions.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M1.5 7.125c0-1.036.84-1.875 1.875-1.875h6c1.036 0 1.875.84 1.875 1.875v3.75c0 1.036-.84 1.875-1.875 1.875h-6A1.875 1.875 0 0 1 1.5 10.875v-3.75Zm12 1.5c0-1.036.84-1.875 1.875-1.875h5.25c1.035 0 1.875.84 1.875 1.875v8.25c0 1.035-.84 1.875-1.875 1.875h-5.25a1.875 1.875 0 0 1-1.875-1.875v-8.25ZM3 16.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875v2.25c0 1.035-.84 1.875-1.875 1.875h-5.25A1.875 1.875 0 0 1 3 18.375v-2.25Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Products</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Special Offers</h6>Explore limited-time deals and bundles</div></button></a></div></div><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Contact Us</div></a></nav></div><div class="hidden gap-2 lg:flex"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30" type="button">Log In</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85]" type="button">Sign In</button></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><nav class="flex flex-col gap-1 min-w-[240px] font-sans text-base font-normal text-blue-gray-700 mt-4 mb-6 p-0 lg:mt-0 lg:mb-0 lg:flex-row lg:p-1"><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Home</div></a><div aria-expanded="false" aria-haspopup="menu" id=":R1jd4f9kmH2:" class="block antialiased font-sans text-sm leading-normal text-inherit font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4 font-medium text-gray-900">Resources<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="hidden h-3 w-3 transition-transform lg:block "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="block h-3 w-3 transition-transform lg:hidden "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></div><div class="block lg:hidden"><div class="block w-full basis-full overflow-hidden" style="height:0px"><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path d="M6 3a3 3 0 0 0-3 3v2.25a3 3 0 0 0 3 3h2.25a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM15.75 3a3 3 0 0 0-3 3v2.25a3 3 0 0 0 3 3H18a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2.25ZM6 12.75a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h2.25a3 3 0 0 0 3-3v-2.25a3 3 0 0 0-3-3H6ZM17.625 13.5a.75.75 0 0 0-1.5 0v2.625H13.5a.75.75 0 0 0 0 1.5h2.625v2.625a.75.75 0 0 0 1.5 0v-2.625h2.625a.75.75 0 0 0 0-1.5h-2.625V13.5Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Products</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM15.75 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM2.25 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM6.31 15.117A6.745 6.745 0 0 1 12 12a6.745 6.745 0 0 1 6.709 7.498.75.75 0 0 1-.372.568A12.696 12.696 0 0 1 12 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 0 1-.372-.568 6.787 6.787 0 0 1 1.019-4.38Z" clip-rule="evenodd"></path><path d="M5.082 14.254a8.287 8.287 0 0 0-1.308 5.135 9.687 9.687 0 0 1-1.764-.44l-.115-.04a.563.563 0 0 1-.373-.487l-.01-.121a3.75 3.75 0 0 1 3.57-4.047ZM20.226 19.389a8.287 8.287 0 0 0-1.308-5.135 3.75 3.75 0 0 1 3.57 4.047l-.01.121a.563.563 0 0 1-.373.486l-.115.04c-.567.2-1.156.349-1.764.441Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">About Us</h6>Meet and learn about our dedication</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M3 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 5.25Zm0 4.5A.75.75 0 0 1 3.75 9h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9.75Zm0 4.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Zm0 4.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Blog</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Services</h6>Learn how we can help you achieve your goals.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM6.262 6.072a8.25 8.25 0 1 0 10.562-.766 4.5 4.5 0 0 1-1.318 1.357L14.25 7.5l.165.33a.809.809 0 0 1-1.086 1.085l-.604-.302a1.125 1.125 0 0 0-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 0 1-2.288 4.04l-.723.724a1.125 1.125 0 0 1-1.298.21l-.153-.076a1.125 1.125 0 0 1-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 0 1-.21-1.298L9.75 12l-1.64-1.64a6 6 0 0 1-1.676-3.257l-.172-1.03Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Support</h6>Reach out to us for assistance or inquiries</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Contact</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3H4.125ZM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H12Zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5H6Zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75H6Z" clip-rule="evenodd"></path><path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0V6.75Z"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">News</h6>Read insightful articles, tips, and expert opinions.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M1.5 7.125c0-1.036.84-1.875 1.875-1.875h6c1.036 0 1.875.84 1.875 1.875v3.75c0 1.036-.84 1.875-1.875 1.875h-6A1.875 1.875 0 0 1 1.5 10.875v-3.75Zm12 1.5c0-1.036.84-1.875 1.875-1.875h5.25c1.035 0 1.875.84 1.875 1.875v8.25c0 1.035-.84 1.875-1.875 1.875h-5.25a1.875 1.875 0 0 1-1.875-1.875v-8.25ZM3 16.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875v2.25c0 1.035-.84 1.875-1.875 1.875h-5.25A1.875 1.875 0 0 1 3 18.375v-2.25Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Products</h6>Find the perfect solution for your needs.</div></button></a><a href="#"><button role="menuitem" class="w-full pt-[9px] pb-2 px-3 text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-3 rounded-lg"><div class="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="2" class="h-6 text-gray-900 w-6"><path fill-rule="evenodd" d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd"></path></svg></div><div><h6 class="antialiased tracking-normal font-sans text-blue-gray-900 flex items-center text-sm font-bold">Special Offers</h6>Explore limited-time deals and bundles</div></button></a></div></div><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Contact Us</div></a></nav><div class="flex w-full flex-nowrap items-center gap-2 lg:hidden"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-blue-gray-500 text-blue-gray-500 hover:opacity-75 focus:ring focus:ring-blue-gray-200 active:opacity-[0.85] block w-full" type="button">Log In</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] block w-full" type="button">Sign In</button></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, Collapse, Typography, Button, IconButton, List, ListItem, Menu, MenuHandler, MenuList, MenuItem, from "@material-tailwind/react"; import { ChevronDownIcon, Bars3Icon, XMarkIcon, from "@heroicons/react/24/outline"; import { Bars4Icon, GlobeAmericasIcon, NewspaperIcon, PhoneIcon, RectangleGroupIcon, SquaresPlusIcon, SunIcon, TagIcon, UserGroupIcon, from "@heroicons/react/24/solid"; const navListMenuItems = [ { title: "Products", description: "Find the perfect solution for your needs.", icon: SquaresPlusIcon, }, { title: "About Us", description: "Meet and learn about our dedication", icon: UserGroupIcon, }, { title: "Blog", description: "Find the perfect solution for your needs.", icon: Bars4Icon, }, { title: "Services", description: "Learn how we can help you achieve your goals.", icon: SunIcon, }, { title: "Support", description: "Reach out to us for assistance or inquiries", icon: GlobeAmericasIcon, }, { title: "Contact", description: "Find the perfect solution for your needs.", icon: PhoneIcon, }, { title: "News", description: "Read insightful articles, tips, and expert opinions.", icon: NewspaperIcon, }, { title: "Products", description: "Find the perfect solution for your needs.", icon: RectangleGroupIcon, }, { title: "Special Offers", description: "Explore limited-time deals and bundles", icon: TagIcon, }, ]; function NavListMenu() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const renderItems = navListMenuItems.map( ({ icon, title, description }, key) => ( <a href="#" key={key}> <MenuItem className="flex items-center gap-3 rounded-lg"> <div className="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 "> {" "} {React.createElement(icon, { strokeWidth: 2, className: "h-6 text-gray-900 w-6", })} </div> <div> <Typography variant="h6" color="blue-gray" className="flex items-center text-sm font-bold" > {title} </Typography> <Typography variant="paragraph" className="text-xs !font-medium text-blue-gray-500" > {description} </Typography> </div> </MenuItem> </a> ), ); return ( <React.Fragment> <Menu open={isMenuOpen} handler={setIsMenuOpen} offset={{ mainAxis: 20 }} placement="bottom" allowHover={true} > <MenuHandler> <Typography as="div" variant="small" className="font-medium"> <ListItem className="flex items-center gap-2 py-2 pr-4 font-medium text-gray-900" selected={isMenuOpen || isMobileMenuOpen} onClick={() => setIsMobileMenuOpen((cur) => !cur)} > Resources <ChevronDownIcon strokeWidth={2.5} className={`hidden h-3 w-3 transition-transform lg:block ${ isMenuOpen ? "rotate-180" : "" }`} /> <ChevronDownIcon strokeWidth={2.5} className={`block h-3 w-3 transition-transform lg:hidden ${ isMobileMenuOpen ? "rotate-180" : "" }`} /> </ListItem> </Typography> </MenuHandler> <MenuList className="hidden max-w-screen-xl rounded-xl lg:block"> <ul className="grid grid-cols-3 gap-y-2 outline-none outline-0"> {renderItems} </ul> </MenuList> </Menu> <div className="block lg:hidden"> <Collapse open={isMobileMenuOpen}>{renderItems}</Collapse> </div> </React.Fragment> ); } function NavList() { return ( <List className="mt-4 mb-6 p-0 lg:mt-0 lg:mb-0 lg:flex-row lg:p-1"> <Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium" > <ListItem className="flex items-center gap-2 py-2 pr-4">Home</ListItem> </Typography> <NavListMenu /> <Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium" > <ListItem className="flex items-center gap-2 py-2 pr-4"> Contact Us </ListItem> </Typography> </List> ); } export function NavbarWithMegaMenu() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); return ( <Navbar className="mx-auto max-w-screen-xl px-4 py-2"> <div className="flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" variant="h6" className="mr-4 cursor-pointer py-1.5 lg:ml-2" > Material Tailwind </Typography> <div className="hidden lg:block"> <NavList /> </div> <div className="hidden gap-2 lg:flex"> <Button variant="text" size="sm" color="blue-gray"> Log In </Button> <Button variant="gradient" size="sm"> Sign In </Button> </div> <IconButton variant="text" color="blue-gray" className="lg:hidden" onClick={() => setOpenNav(!openNav)} > {openNav ? ( <XMarkIcon className="h-6 w-6" strokeWidth={2} /> ) : ( <Bars3Icon className="h-6 w-6" strokeWidth={2} /> )} </IconButton> </div> <Collapse open={openNav}> <NavList /> <div className="flex w-full flex-nowrap items-center gap-2 lg:hidden"> <Button variant="outlined" size="sm" color="blue-gray" fullWidth> Log In </Button> <Button variant="gradient" size="sm" fullWidth> Sign In </Button> </div> </Collapse> </Navbar> ); }</code></pre></div></div></div> relative -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-with-solid-background" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar With Solid Background</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Use this example to show a solid background for the navbar component instead of being transparent. The solid background ensures that the navigation elements are easily visible against any content. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><div class="-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll"><nav class="block w-full shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 text-white sticky top-0 z-10 h-max max-w-full rounded-none bg-gray-100 px-4 py-2 lg:px-8 lg:py-4"><div class="flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="mr-4 hidden lg:block"><ul class="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Docs</a></li></ul></div><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] hidden lg:inline-block" type="button">Get started</button><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><ul class="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Docs</a></li></ul><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] block w-full" type="button">Get started</button></div></nav></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, Collapse, Typography, Button, IconButton, from "@material-tailwind/react"; import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; export function NavbarWithSolidBackground() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); const navList = ( <ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Pages </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Account </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Blocks </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-normal" > <a href="#" className="flex items-center"> Docs </a> </Typography> </ul> ); return ( <div className="-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll"> <Navbar className="sticky top-0 z-10 h-max max-w-full bg-gray-100 rounded-none px-4 py-2 lg:px-8 lg:py-4"> <div className="flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="mr-4 hidden lg:block">{navList}</div> <Button variant="gradient" size="sm" className="hidden lg:inline-block" > <span>Get started</span> </Button> <IconButton variant="text" className="lg:hidden" onClick={() => setOpenNav(!openNav)} > {openNav ? ( <XMarkIcon className="h-6 w-6" strokeWidth={2} /> ) : ( <Bars3Icon className="h-6 w-6" strokeWidth={2} /> )} </IconButton> </div> <Collapse open={openNav}> {navList} <Button fullWidth variant="gradient" size="sm" className=""> <span>Get started</span> </Button> </Collapse> </Navbar> </div> ); }</code></pre></div></div></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-with-submenu" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar With Submenu</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Use this example to show another sub nav below the main nav bar element. This design allows for additional navigation options, such as "Sales" and "New In," providing users with quick access to specific sections or categories within the site. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"><div class="container mx-auto flex flex-wrap items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="hidden items-center gap-x-2 lg:flex"><div class="relative flex w-full gap-2 md:w-max"><div class="relative w-full min-w-[200px] h-10 min-w-[288px]"><input type="search" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 before:content-none after:content-none"> </label></div><div class="!absolute left-3 top-[13px]"><svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC"></path><path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded-lg" type="button">Search</button></div><hr class="mb-3 mt-6 hidden w-full lg:block"/><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button><div class="hidden lg:block"><ul class="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">Sales</a></li><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">New In</a></li><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">Docs</a></li></ul></div></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><div class="container mx-auto"><ul class="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">Sales</a></li><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">New In</a></li><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal p-1 font-medium text-gray-600"><a href="#" class="flex items-center">Docs</a></li></ul><div class="flex flex-col gap-x-2 sm:flex-row sm:items-center"><div class="relative w-full gap-2 md:w-max"><div class="relative w-full min-w-[200px] h-10 min-w-[288px]"><input type="search" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 before:content-none after:content-none"> </label></div><div class="!absolute left-3 top-[13px]"><svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC"></path><path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none mt-1 rounded-lg sm:mt-0" type="button">Search</button></div></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, Collapse, Typography, Button, IconButton, Input, from "@material-tailwind/react"; import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; export function NavbarWithSubmenu() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); const navList = ( <ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" className="p-1 font-medium text-gray-600" > <a href="#" className="flex items-center"> Sales </a> </Typography> <Typography as="li" variant="small" className="p-1 font-medium text-gray-600" > <a href="#" className="flex items-center"> New In </a> </Typography> <Typography as="li" variant="small" className="p-1 font-medium text-gray-600" > <a href="#" className="flex items-center"> Blocks </a> </Typography> <Typography as="li" variant="small" className="p-1 font-medium text-gray-600" > <a href="#" className="flex items-center"> Docs </a> </Typography> </ul> ); return ( <Navbar className="mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"> <div className="container mx-auto flex flex-wrap items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="hidden items-center gap-x-2 lg:flex"> <div className="relative flex w-full gap-2 md:w-max"> <Input type="search" placeholder="Search" containerProps={{ className: "min-w-[288px]", }} className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300" labelProps={{ className: "before:content-none after:content-none", }} /> <div className="!absolute left-3 top-[13px]"> <svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC" /> <path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> </div> <Button size="md" className="rounded-lg "> Search </Button> </div> <hr className="mb-3 mt-6 hidden w-full lg:block" /> <IconButton variant="text" className="lg:hidden" onClick={() => setOpenNav(!openNav)} > {openNav ? ( <XMarkIcon className="h-6 w-6" strokeWidth={2} /> ) : ( <Bars3Icon className="h-6 w-6" strokeWidth={2} /> )} </IconButton> <div className="hidden lg:block">{navList}</div> </div> <Collapse open={openNav}> <div className="container mx-auto"> {navList} <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center"> <div className="relative w-full gap-2 md:w-max"> <Input type="search" placeholder="Search" containerProps={{ className: "min-w-[288px]", }} className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300" labelProps={{ className: "before:content-none after:content-none", }} /> <div className="!absolute left-3 top-[13px]"> <svg width="13" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z" fill="#CFD8DC" /> <path d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> </div> <Button size="md" className="mt-1 rounded-lg sm:mt-0"> Search </Button> </div> </div> </Collapse> </Navbar> ); }</code></pre></div></div></div> relative -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-with-languages-dropdown" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar with Dropdown for Multiple Languages</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Get started with this tailwind navbar example to show a language dropdown selector in the navbar component. Users can select from multiple languages, improving the accessibility and usability of the site for a global audience. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"><div class="flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased font-sans text-base leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 font-medium">Material Tailwind</a><div class="mr-4 hidden lg:block"><ul class="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Docs</a></li></ul></div><div class="hidden flex-wrap items-center gap-2 lg:flex"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85]" type="button">join</button><button aria-expanded="false" aria-haspopup="menu" id=":R4r5v9kmH2:" class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-gray-900 text-gray-900 hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] hidden items-center gap-2 lg:flex" type="button">🇺🇸English<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5 transition-transform "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></button></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><ul class="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Pages</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Account</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Blocks</a></li><li class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 p-1 font-medium"><a href="#" class="flex items-center">Docs</a></li></ul><div class="flex w-full flex-nowrap items-center gap-x-4 lg:hidden"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] block w-full" type="button">join</button><button aria-expanded="false" aria-haspopup="menu" id=":Rld5v9kmH2:" class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-gray-900 text-gray-900 hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] w-full flex items-center justify-center gap-2 lg:hidden" type="button">🇺🇸 English <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-3.h-3.5 h-3.5 transition-transform "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></button></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, Collapse, Typography, Button, IconButton, Menu, MenuHandler, MenuList, MenuItem, from "@material-tailwind/react"; import { Bars3Icon, ChevronDownIcon, XMarkIcon, from "@heroicons/react/24/outline"; export function NavbarForDropdownWithMultipleLanguages() { const [openMenu, setOpenMenu] = React.useState(false); const [openNav, setOpenNav] = React.useState(false); const [lang, setLang] = React.useState("English"); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); const navList = ( <ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6"> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center"> Pages </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center"> Account </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center"> Blocks </a> </Typography> <Typography as="li" variant="small" color="blue-gray" className="p-1 font-medium" > <a href="#" className="flex items-center"> Docs </a> </Typography> </ul> ); const countries = [ { flag: "🇺🇸", name: "English", }, { flag: "🇪🇸", name: "Spain", }, { flag: "🇫🇷", name: "France", }, { flag: "🇩🇪", name: "Germany", }, ]; return ( <Navbar className="mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4"> <div className="flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" className="mr-4 cursor-pointer py-1.5 font-medium" > Material Tailwind </Typography> <div className="mr-4 hidden lg:block">{navList}</div> <div className="hidden flex-wrap items-center gap-2 lg:flex"> <Button variant="gradient" size="sm"> join </Button> <Menu open={openMenu} handler={setOpenMenu}> <MenuHandler> <Button size="sm" variant="outlined" className="hidden items-center gap-2 lg:flex" > <span className="h-min text-base leading-none"> {countries.find(({ name }) => name === lang)?.flag} </span> {countries.find(({ name }) => name === lang)?.name} <ChevronDownIcon strokeWidth={2.5} className={`h-3.5 w-3.5 transition-transform ${ openMenu ? "rotate-180" : "" }`} /> </Button> </MenuHandler> <MenuList className="hidden max-h-72 w-20 lg:block"> {countries.map(({ name, flag }) => ( <MenuItem key={name} className="flex items-center gap-2" onClick={() => setLang(name)} > {flag} {name} </MenuItem> ))} </MenuList> </Menu> </div> <IconButton variant="text" className="lg:hidden" onClick={() => setOpenNav(!openNav)} > {openNav ? ( <XMarkIcon className="h-6 w-6" strokeWidth={2} /> ) : ( <Bars3Icon className="h-6 w-6" strokeWidth={2} /> )} </IconButton> </div> <Collapse open={openNav}> {navList} <div className="flex w-full flex-nowrap items-center gap-x-4 lg:hidden"> <Button variant="gradient" size="sm" fullWidth> join </Button> <Menu open={openMenu} handler={setOpenMenu}> <MenuHandler> <Button fullWidth size="sm" variant="outlined" className="flex items-center justify-center gap-2 lg:hidden" > 🇺🇸 English{" "} <ChevronDownIcon strokeWidth={2.5} className={`w-3.h-3.5 h-3.5 transition-transform ${ openMenu ? "rotate-180" : "" }`} /> </Button> </MenuHandler> <MenuList className="block max-h-72 w-20 lg:hidden"> {countries.map(({ name, flag }) => ( <MenuItem key={name} className="flex items-center gap-2"> {flag} {name} </MenuItem> ))} </MenuList> </Menu> </div> </Collapse> </Navbar> ); }</code></pre></div></div></div> relative -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-with-multi-level-dropdown" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navigation bar with a Dropdown Multi-Level Menu</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">You can also use the dropdown element inside a navigation bar to add a second level of navigation hierarchy. This example includes a "Blocks" menu with nested options like "Figma," "React," and "TailwindCSS," each with their own sub-options, such as "Hero," "Features," "Testimonials," and "Ecommerce." This structure allows for comprehensive navigation without overwhelming the user. bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><nav class="block w-full rounded-xl shadow-md backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 bg-white text-white mx-auto max-w-screen-xl px-4 py-2"><div class="flex items-center justify-between text-blue-gray-900"><a href="#" class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-inherit mr-4 cursor-pointer py-1.5 lg:ml-2">Material Tailwind</a><div class="hidden lg:block"><nav class="flex flex-col gap-1 min-w-[240px] font-sans text-base font-normal text-blue-gray-700 mb-6 mt-4 p-0 lg:mb-0 lg:mt-0 lg:flex-row lg:p-1"><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Pages</div></a><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Account</div></a><div aria-expanded="false" aria-haspopup="menu" id=":Rmj6f9kmH2:" class="block antialiased font-sans text-sm leading-normal text-inherit font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4 font-medium text-gray-900">Blocks<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="hidden h-3 w-3 transition-transform lg:block "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="block h-3 w-3 transition-transform lg:hidden "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></div><div class="block lg:hidden"><div class="block w-full basis-full overflow-hidden" style="height:0px"><button aria-expanded="false" aria-haspopup="menu" id=":Rr6j6f9kmH2:" role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center justify-between">Figma<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5 transition-transform "><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"></path></svg></button><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none">React</button><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none">TailwindCSS</button></div></div><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Docs</div></a></nav></div><div class="hidden gap-2 lg:flex"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none" type="button">Get Started</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-gray-900 text-gray-900 hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85]" type="button">Log In</button></div><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><nav class="flex flex-col gap-1 min-w-[240px] font-sans text-base font-normal text-blue-gray-700 mb-6 mt-4 p-0 lg:mb-0 lg:mt-0 lg:flex-row lg:p-1"><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Pages</div></a><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Account</div></a><div aria-expanded="false" aria-haspopup="menu" id=":R2rd6f9kmH2:" class="block antialiased font-sans text-sm leading-normal text-inherit font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4 font-medium text-gray-900">Blocks<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="hidden h-3 w-3 transition-transform lg:block "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="block h-3 w-3 transition-transform lg:hidden "><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></div><div class="block lg:hidden"><div class="block w-full basis-full overflow-hidden" style="height:0px"><button aria-expanded="false" aria-haspopup="menu" id=":R3crd6f9kmH2:" role="menuitem" class="w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center justify-between">Figma<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5 transition-transform "><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"></path></svg></button><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none">React</button><button role="menuitem" class="block w-full pt-[9px] pb-2 px-3 rounded-md text-start leading-tight cursor-pointer select-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none">TailwindCSS</button></div></div><a href="#" class="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium"><div role="button" tabindex="0" class="w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none flex items-center gap-2 py-2 pr-4">Docs</div></a></nav><div class="flex w-full flex-nowrap items-center gap-2 lg:hidden"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none block w-full" type="button">Get Started</button><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-gray-900 text-gray-900 hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] block w-full" type="button">Log In</button></div></div></nav></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="jsx" data-theme="default"><code data-language="jsx" data-theme="default">import React from "react"; import { Navbar, Collapse, Typography, Button, IconButton, List, ListItem, Menu, MenuHandler, MenuList, MenuItem, from "@material-tailwind/react"; import { ChevronDownIcon, Bars3Icon, XMarkIcon, ChevronUpIcon, from "@heroicons/react/24/outline"; const nestedMenuItems = [ { title: "Hero", }, { title: "Features", }, { title: "Testimonials", }, { title: "Ecommerce", }, ]; function NavListMenu() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [openNestedMenu, setopenNestedMenu] = React.useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const renderItems = nestedMenuItems.map(({ title }, key) => ( <a href="#" key={key}> <MenuItem>{title}</MenuItem> </a> )); return ( <React.Fragment> <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom" allowHover={true} > <MenuHandler> <Typography as="div" variant="small" className="font-medium"> <ListItem className="flex items-center gap-2 py-2 pr-4 font-medium text-gray-900" selected={isMenuOpen || isMobileMenuOpen} onClick={() => setIsMobileMenuOpen((cur) => !cur)} > Blocks <ChevronDownIcon strokeWidth={2.5} className={`hidden h-3 w-3 transition-transform lg:block ${ isMenuOpen ? "rotate-180" : "" }`} /> <ChevronDownIcon strokeWidth={2.5} className={`block h-3 w-3 transition-transform lg:hidden ${ isMobileMenuOpen ? "rotate-180" : "" }`} /> </ListItem> </Typography> </MenuHandler> <MenuList className="hidden rounded-xl lg:block"> <Menu placement="right-start" allowHover offset={15} open={openNestedMenu} handler={setopenNestedMenu} > <MenuHandler className="flex items-center justify-between"> <MenuItem> Figma <ChevronUpIcon strokeWidth={2.5} className={`h-3.5 w-3.5 transition-transform ${ isMenuOpen ? "rotate-90" : "" }`} /> </MenuItem> </MenuHandler> <MenuList className="rounded-xl">{renderItems}</MenuList> </Menu> <MenuItem>React</MenuItem> <MenuItem>TailwindCSS</MenuItem> </MenuList> </Menu> <div className="block lg:hidden"> <Collapse open={isMobileMenuOpen}> <Menu placement="bottom" allowHover offset={6} open={openNestedMenu} handler={setopenNestedMenu} > <MenuHandler className="flex items-center justify-between"> <MenuItem> Figma <ChevronUpIcon strokeWidth={2.5} className={`h-3.5 w-3.5 transition-transform ${ isMenuOpen ? "rotate-90" : "" }`} /> </MenuItem> </MenuHandler> <MenuList className="block rounded-xl lg:hidden"> {renderItems} </MenuList> </Menu> <MenuItem>React</MenuItem> <MenuItem>TailwindCSS</MenuItem> </Collapse> </div> </React.Fragment> ); } function NavList() { return ( <List className="mb-6 mt-4 p-0 lg:mb-0 lg:mt-0 lg:flex-row lg:p-1"> <Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium" > <ListItem className="flex items-center gap-2 py-2 pr-4">Pages</ListItem> </Typography> <Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium" > <ListItem className="flex items-center gap-2 py-2 pr-4"> Account </ListItem> </Typography> <NavListMenu /> <Typography as="a" href="#" variant="small" color="blue-gray" className="font-medium" > <ListItem className="flex items-center gap-2 py-2 pr-4">Docs</ListItem> </Typography> </List> ); } export function NavigationbarWithDropdownMultilevelMenu() { const [openNav, setOpenNav] = React.useState(false); React.useEffect(() => { window.addEventListener( "resize", () => window.innerWidth >= 960 && setOpenNav(false), ); }, []); return ( <Navbar className="mx-auto max-w-screen-xl px-4 py-2"> <div className="flex items-center justify-between text-blue-gray-900"> <Typography as="a" href="#" variant="h6" className="mr-4 cursor-pointer py-1.5 lg:ml-2" > Material Tailwind </Typography> <div className="hidden lg:block"> <NavList /> </div> <div className="hidden gap-2 lg:flex"> <Button size="sm">Get Started</Button> <Button variant="outlined" size="sm"> Log In </Button> </div> <IconButton variant="text" className="lg:hidden" onClick={() => setOpenNav(!openNav)} > {openNav ? ( <XMarkIcon className="h-6 w-6" strokeWidth={2} /> ) : ( <Bars3Icon className="h-6 w-6" strokeWidth={2} /> )} </IconButton> </div> <Collapse open={openNav}> <NavList /> <div className="flex w-full flex-nowrap items-center gap-2 lg:hidden"> <Button size="sm" fullWidth> Get Started </Button> <Button variant="outlined" size="sm" fullWidth> Log In </Button> </div> </Collapse> </Navbar> ); }</code></pre></div></div></div> scroll-mt-40 items-center pl-4"><a href="#navbar-props" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar Props</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">The following props are available for navbar component. These are the custom props the other !min-w-[700px] lg:!min-w-full"><thead><tr><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Attribute</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Type</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Description</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Default</th></tr></thead><tbody><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>variant</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><a class="!font-medium !text-primary !transition-colors hover:!text-blue-500" href="#types-variant">Variant</a></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Change navbar variant</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">filled</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>color</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><a class="!font-medium !text-primary !transition-colors hover:!text-blue-500" href="#types-color">Color</a></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Change navbar color</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">white</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>shadow</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">boolean</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Add box-shadow for navbar</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">true</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>blurred</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">boolean</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Add blur backdrop effect for navbar and makes it's background color white</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">true</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>fullWidth</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">boolean</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Change navbar to a block level element and remove its border radius</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">false</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>className</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">string</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Add custom className for navbar</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>''</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>children</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">node</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Add content for navbar</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">No default value it's a required prop.</td></tr></tbody></table></div> font-semibold leading-snug !mb-2 text-primary">For TypeScript Only</h3> "tsx" data-theme="default"><code data-language="tsx" data-theme="default">import type { NavbarProps } from "@material-tailwind/react";</code></pre></div> flex scroll-mt-40 items-center pl-4"><a href="#types-variant" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Types - Variant</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">type variant = "filled" | "gradient";</code></pre></div> scroll-mt-40 items-center pl-4"><a href="#types-color" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Types - Color</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">type color = | "transparent" | "white" | "blue-gray" | "gray" | "brown" | "deep-orange" | "orange" | "amber" | "yellow" | "lime" | "light-green" | "green" | "teal" | "cyan" | "light-blue" | "blue" | "indigo" | "deep-purple" | "purple" | "pink" | "red";</code></pre></div> flex scroll-mt-40 items-center pl-4"><a href="#types-animate" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Types - Animate</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">type animate = { mount?: object; unmount?: object; };</code></pre></div> scroll-mt-40 items-center pl-4"><a href="#navbar-theme" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar Theme</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Learn how to customize the theme and styles for navbar component, the theme object for navbar component has three main objects: text-inherit !mb-4 !font-normal !text-gray-600">A. The <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">defaultProps</code> object for setting up the default value for props of navbar component. font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">valid</code> object for customizing the valid values for navbar component props. font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">styles</code> object for customizing the theme and styles of navbar component. text-inherit !mb-4 !font-normal !text-gray-600">You can customize the theme and styles of navbar component by adding Tailwind CSS classes as key paired values for objects. -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-theme-object-type" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar Theme Object Type</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">interface NavbarStylesType { defaultProps: { variant: string; color: string; shadow: boolean; blurred: boolean; fullWidth: boolean; className: string; }; valid: { variants: string[]; colors: string[]; }; styles: { base: { navbar: { initial: object; shadow: object; blurred: object; fullWidth: object; }; mobileNav: object; }; variants: { filled: object; gradient: object; }; }; }</code></pre></div> font-semibold leading-snug !mb-2 text-primary">For TypeScript Only</h3> "tsx" data-theme="default"><code data-language="tsx" data-theme="default">import type { NavbarStylesType } from "@material-tailwind/react";</code></pre></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#navbar-theme-customization" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Navbar Theme Customization</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">const theme = { navbar: { styles: { base: { navbar: { initial: { display: "block", width: "w-full", maxWidth: "max-w-screen-2xl", borderRadius: "rounded-xl", py: "py-4", px: "px-8", }, shadow: { boxShadow: "shadow-md", }, blurred: { backdropFilter: "backdrop-saturate-200 backdrop-blur-2xl", bgOpacity: "bg-opacity-80", borderWidth: "border", borderColor: "border-white/80", }, fullWidth: { width: "w-full", maxWidth: "max-w-full", rounded: "rounded-none", px: "px-4", }, }, mobileNav: { display: "block", width: "w-full", basis: "basis-full", overflow: "overflow-hidden", }, }, variants: { filled: { transparent: { backgroud: "bg-transparent", color: "text-white", boxShadow: "shadow-none", }, white: { backgroud: "bg-white", color: "text-white", }, "blue-gray": { backgroud: "bg-blue-gray-500", color: "text-white", }, gray: { backgroud: "bg-gray-500", color: "text-white", }, brown: { backgroud: "bg-brown-500", color: "text-white", }, "deep-orange": { backgroud: "bg-deep-orange-500", color: "text-white", }, orange: { backgroud: "bg-orange-500", color: "text-white", }, amber: { backgroud: "bg-amber-500", color: "text-black", }, yellow: { backgroud: "bg-yellow-500", color: "text-black", }, lime: { backgroud: "bg-lime-500", color: "text-black", }, "light-green": { backgroud: "bg-light-green-500", color: "text-white", }, green: { backgroud: "bg-green-500", color: "text-white", }, teal: { backgroud: "bg-teal-500", color: "text-white", }, cyan: { backgroud: "bg-cyan-500", color: "text-white", }, "light-blue": { backgroud: "bg-light-blue-500", color: "text-white", }, blue: { backgroud: "bg-blue-500", color: "text-white", }, indigo: { backgroud: "bg-indigo-500", color: "text-white", }, "deep-purple": { backgroud: "bg-deep-purple-500", color: "text-white", }, purple: { backgroud: "bg-purple-500", color: "text-white", }, pink: { backgroud: "bg-pink-500", color: "text-white", }, red: { backgroud: "bg-red-500", color: "text-white", }, }, gradient: { transparent: { backgroud: "bg-transparent", color: "text-blue-gray-900", boxShadow: "shadow-none", }, white: { backgroud: "bg-white", color: "text-blue-gray-900", }, "blue-gray": { backgroud: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400", color: "text-white", }, gray: { backgroud: "bg-gradient-to-tr from-gray-600 to-gray-400", color: "text-white", }, brown: { backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400", color: "text-white", }, "deep-orange": { backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400", color: "text-white", }, orange: { backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400", color: "text-white", }, amber: { backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400", color: "text-black", }, yellow: { backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400", color: "text-black", }, lime: { backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400", color: "text-black", }, "light-green": { backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400", color: "text-white", }, green: { backgroud: "bg-gradient-to-tr from-green-600 to-green-400", color: "text-white", }, teal: { backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400", color: "text-white", }, cyan: { backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400", color: "text-white", }, "light-blue": { backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400", color: "text-white", }, blue: { backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400", color: "text-white", }, indigo: { backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400", color: "text-white", }, "deep-purple": { backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400", color: "text-white", }, purple: { backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400", color: "text-white", }, pink: { backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400", color: "text-white", }, red: { backgroud: "bg-gradient-to-tr from-red-600 to-red-400", color: "text-white", }, }, }, }, }, };</code></pre></div> flex scroll-mt-40 items-center pl-4"><a href="#more-examples" class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="pointer-events-none h-3.5 w-3.5 rounded-lg"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"></path></svg></a><h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Explore More Tailwind CSS Examples</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Check out more navigation bar examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>: text-inherit !mb-4 !font-normal !text-gray-600">• <a href="https://www.material-tailwind.com/blocks/hero-sections" target="_blank">Hero Blocks</a> target="_blank">Navbar Blocks</a> </div><aside class="sticky top-14 ml-auto hidden h-screen w-64 pb-4 pt-6 lg:block"><div class="h-screen w-64 overflow-y-scroll pb-40">On This Page<ul class="mb-8 list-none pt-2"><li><a href="#navbar" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar</a></li><li><a href="#sticky-navbar" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">sticky navbar</a></li><li><a href="#complex-user-navbar" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">complex user navbar</a></li><li><a href="#navbar-with-search" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar with search</a></li><li><a href="#dark-navbar" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">dark navbar</a></li><li><a href="#simple-navbar" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">simple navbar</a></li><li><a href="#navbar-with-mega-menu" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar with mega menu</a></li><li><a href="#navbar-with-solid-background" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar with solid background</a></li><li><a href="#navbar-with-submenu" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar with submenu</a></li><li><a href="#navbar-with-languages-dropdown" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar with languages dropdown</a></li><li><a href="#navbar-with-multi-level-dropdown" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar with multi level dropdown</a></li><li><a href="#navbar-props" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar props</a></li><li><a href="#types-variant" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">types variant</a></li><li><a href="#types-color" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">types color</a></li><li><a href="#types-animate" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">types animate</a></li><li><a href="#navbar-theme" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar theme</a></li><li><a href="#navbar-theme-object-type" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar theme object type</a></li><li><a href="#navbar-theme-customization" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">navbar theme customization</a></li><li><a href="#more-examples" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">more examples</a></li></ul>Contribute<ul class="mb-8 list-none pt-2"><li><a target="_blank" href="https://github.com/creativetimofficial/material-tailwind/blob/main/CONTRIBUTING.md?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Contributor guides</a></li><li><a target="_blank" href="https://www.github.com/creativetimofficial/material-tailwind/blob/main/documentation/react/navbar.mdx?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Edit this page</a></li></ul>Community<ul class="mb-8 list-none pt-2"><li><a target="_blank" href="https://discord.com/invite/FhCJCaHdQa?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Join us on Discord</a></li><li><a target="_blank" href="https://www.creative-tim.com/blog?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Read blog posts</a></li><li><a target="_blank" rel="noreferrer" href="https://opencollective.com/material-tailwind?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary">Open Collective</a></li></ul>Frameworks<ul class="mb-8 list-none pt-2"><li class="mb-3"><a class="pointer-events-none flex items-center gap-2" href="/docs/react/installation"><img alt="react" src="https://docs.material-tailwind.com/svg/react.svg" width="48" height="48" decoding="async" data-nimg="1" class="h-5 w-5" loading="lazy" style="color:transparent"/>React</a></li><li><a class="pointer-events-auto opacity-70 transition-opacity duration-300 hover:opacity-100 flex items-center gap-2" href="/docs/html/installation"><img alt="html" src="https://docs.material-tailwind.com/svg/html.svg" width="48" height="48" decoding="async" data-nimg="1" class="h-5 w-5" loading="lazy" style="color:transparent"/>HTML</a></li><li class="mt-8"><a target="_blank" href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"><button class="align-middle select-none font-sans text-center transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none py-2 px-4 rounded-lg hover:opacity-75 focus:ring active:opacity-[0.85] relative inline-flex items-center gap-3 border-[1.5px] border-blue-gray-50 bg-white text-sm font-medium capitalize text-primary focus:ring-transparent" type="button">Give us Star</button></a></li></ul><a target="_blank" href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=material-tailwind"><div class="relative flex flex-col bg-clip-border rounded-xl bg-transparent text-gray-700 shadow-none border border-blue-gray-50"><div class="relative bg-clip-border rounded-xl overflow-hidden bg-transparent text-gray-700 shadow-none mx-4 mb-0 mt-4"><img alt="book" srcSet="/_next/image?url=https%3A%2F%2Fdocs.material-tailwind.com%2Fimage%2Fui-ux-book.jpg&w=828&q=75 1x, /_next/image?url=https%3A%2F%2Fdocs.material-tailwind.com%2Fimage%2Fui-ux-book.jpg&w=1920&q=75 2x" src="/_next/image?url=https%3A%2F%2Fdocs.material-tailwind.com%2Fimage%2Fui-ux-book.jpg&w=1920&q=75" width="768" height="768" decoding="async" data-nimg="1" class="h-full w-full object-cover" loading="lazy" style="color:transparent"/></div><div class="p-4"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900">Roots of UI/UX Design</h6>By Creative TimLearn to Develop Intuitive Web Experiences</div></div></a></div></aside></div></div></div><footer class="relative z-50 bg-white px-8 pb-6 pt-12"><div class="container mx-auto"><div class="flex flex-wrap"><div class="w-full md:w-4/12"><h4 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-inherit mb-2 !font-semibold !text-primary">Material Tailwind</h4>Easy to use React components for Tailwind CSS and Material Design.<div class="mt-6"><a href="https://www.twitter.com/creativetim?ref=material-tailwind" target="_blank" rel="noreferrer"></a><a href="https://www.facebook.com/creativetim?ref=material-tailwind" target="_blank" rel="noreferrer"><i class="fab fa-facebook-square font-xl align-center mr-2 inline-block items-center justify-center rounded-full border-[1.5px] border-blue-gray-50 p-3 text-center text-primary outline-none focus:outline-none"></a><a href="https://www.dribbble.com/creativetim?ref=material-tailwind" target="_blank" rel="noreferrer"></a><a href="https://www.github.com/creativetimofficial?ref=material-tailwind" target="_blank" rel="noreferrer"></a><a href="https://discord.com/invite/FhCJCaHdQa?ref=material-tailwind" target="_blank" rel="noreferrer"></a></div></div><div class="ml-auto w-full px-4 md:w-7/12"><div class="items-top mb-6 flex flex-wrap"><div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12">Company<ul class="list-unstyled"><li><a href="https://www.creative-tim.com/presentation?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">About Us</a></li><li><a href="https://www.creative-tim.com/blog?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">Blog</a></li><li><a href="https://github.com/creativetimofficial?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">Github</a></li><li><a href="https://www.creative-tim.com/templates/free?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">Free Products</a></li></ul></div><div class="ml-auto w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12">Help and Support<ul class="list-unstyled"><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/knowledge-center?ref=material-tailwind">Knowledge Center</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/contact-us?ref=material-tailwind">Contact Us</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/support-terms?ref=material-tailwind">Premium Support</a></li><li><a rel="noreferrer" target="_self" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/blocks#pricing">Pricing</a></li></ul></div><div class="ml-auto w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12">Resources<ul class="list-unstyled"><li><a rel="noreferrer" target="_self" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/docs/react/installation">Documentation</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/services/updivision?ref=material-tailwind">Custom Development</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://discord.com/invite/FhCJCaHdQa?ref=material-tailwind">Discord</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://tailwindcomponents.com/?ref=material-tailwind">Tailwind Components</a></li></ul></div><div class="ml-auto w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12">Technologies<ul class="list-unstyled"><li><a class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/docs/react/installation">React</a></li><li><a class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/docs/html/installation">HTML</a></li></ul></div></div></div></div><hr class="my-6 border-blue-gray-50"/><div class="flex flex-wrap items-center justify-center gap-2 text-center md:justify-between"><a href="https://vercel.com/?utm_source=ct-tailwind-team&utm_campaign=oss" target="_blank" rel="noopener noreferrer" class="inline-flex items-center font-semibold text-primary no-underline">Powered by<svg height="22" viewBox="0 0 283 64" fill="none"><path fill="currentColor" d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"></path></svg></a><div class="text-md mt-2 py-1 font-normal text-gray-600">Copyright © 2025 <a class="text-inherit transition-all" href="/">Material Tailwind</a> by <a href="https://www.creative-tim.com?ref=material-tailwind" target="_blank" rel="noreferrer" class="text-inherit transition-all">Creative Tim. Made with ❤️ for a better web.</a></div></div></div></footer><div class="fixed right-4 top-2/4 hidden -translate-y-2/4 lg:block"><div class="relative bg-clip-border rounded-xl bg-white text-gray-700 shadow-md group flex flex-col gap-1 border border-blue-gray-50 p-1.5"><a href="/docs/react/installation"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-sm rounded-lg border border-white hover:opacity-75 focus:ring focus:ring-white/50 active:opacity-[0.85] flex w-full items-center gap-2 px-2 py-2 text-gray-600 hover:border hover:border-blue-gray-50 hover:text-primary" type="button"><img src="https://docs.material-tailwind.com/img/logos/icon-react.svg" alt="react-icon" class="h-6 w-6"/>React</button></a><a href="/docs/html/installation"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-sm rounded-lg border border-white hover:opacity-75 focus:ring focus:ring-white/50 active:opacity-[0.85] flex w-full items-center gap-2 px-2 py-2 text-gray-600 hover:border hover:border-blue-gray-50 hover:text-primary" type="button"><img src="https://docs.material-tailwind.com/svg/tailwind.svg" alt="react-icon" class="h-6 w-6"/>Tailwind CSS</button></a><a href="/figma"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-sm rounded-lg border border-white hover:opacity-75 focus:ring focus:ring-white/50 active:opacity-[0.85] flex w-full items-center gap-2 px-2 py-2 text-gray-600 hover:border hover:border-blue-gray-50 hover:text-primary" type="button"><img src="https://docs.material-tailwind.com/img/icon-figma.svg" alt="react-icon" class="h-6 w-6"/>Figma</button></a></div></div><script defer="" src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script><script defer="" chat-hash="j2rbsnzetxp03odoe7qxbwl" src="https://widget.galichat.com/gali-embeded.min.js"></script></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"frontMatter":{"title":"Tailwind CSS Navbar for React - Material Tailwind","description":"Customise your web projects with our easy-to-use navbar component for Tailwind CSS and React using Material Design guidelines.","navigation":["navbar","sticky-navbar","complex-user-navbar","navbar-with-search","dark-navbar","simple-navbar","navbar-with-mega-menu","navbar-with-solid-background","navbar-with-submenu","navbar-with-languages-dropdown","navbar-with-multi-level-dropdown","navbar-props","types-variant","types-color","types-animate","navbar-theme","navbar-theme-object-type","navbar-theme-customization","more-examples"],"github":"navbar","prev":"menu","next":"popover"},"mdxSource":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n h1: \"h1\",\n p: \"p\",\n div: \"div\",\n pre: \"pre\",\n code: \"code\",\n span: \"span\",\n hr: \"hr\",\n h2: \"h2\",\n table: \"table\",\n thead: \"thead\",\n tr: \"tr\",\n th: \"th\",\n tbody: \"tbody\",\n td: \"td\",\n a: \"a\",\n h3: \"h3\",\n strong: \"strong\"\n }, _provideComponents(), props.components), {DocsTitle, Code, CodePreview, NavbarExamples} = _components;\n if (!Code) _missingMdxReference(\"Code\", true);\n if (!CodePreview) _missingMdxReference(\"CodePreview\", true);\n if (!DocsTitle) _missingMdxReference(\"DocsTitle\", true);\n if (!NavbarExamples) _missingMdxReference(\"NavbarExamples\", false);\n if (!NavbarExamples.ComplexNavbar) _missingMdxReference(\"NavbarExamples.ComplexNavbar\", true);\n if (!NavbarExamples.NavbarDark) _missingMdxReference(\"NavbarExamples.NavbarDark\", true);\n if (!NavbarExamples.NavbarDefault) _missingMdxReference(\"NavbarExamples.NavbarDefault\", true);\n if (!NavbarExamples.NavbarForDropdownWithMultipleLanguages) _missingMdxReference(\"NavbarExamples.NavbarForDropdownWithMultipleLanguages\", true);\n if (!NavbarExamples.NavbarSimple) _missingMdxReference(\"NavbarExamples.NavbarSimple\", true);\n if (!NavbarExamples.NavbarWithMegaMenu) _missingMdxReference(\"NavbarExamples.NavbarWithMegaMenu\", true);\n if (!NavbarExamples.NavbarWithSearch) _missingMdxReference(\"NavbarExamples.NavbarWithSearch\", true);\n if (!NavbarExamples.NavbarWithSolidBackground) _missingMdxReference(\"NavbarExamples.NavbarWithSolidBackground\", true);\n if (!NavbarExamples.NavbarWithSubmenu) _missingMdxReference(\"NavbarExamples.NavbarWithSubmenu\", true);\n if (!NavbarExamples.NavigationbarWithDropdownMultilevelMenu) _missingMdxReference(\"NavbarExamples.NavigationbarWithDropdownMultilevelMenu\", true);\n if (!NavbarExamples.StickyNavbar) _missingMdxReference(\"NavbarExamples.StickyNavbar\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(DocsTitle, {\n href: \"navbar\",\n children: _jsx(_components.h1, {\n children: \"Tailwind CSS Navbar - React\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use our responsive Tailwind CSS navigation for your website. You can add links, icons, links with icons, search bars, and brand text.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"See below our simple \", _jsx(Code, {\n children: \"Navbar\"\n }), \" example that you can use in your Tailwind CSS and React project.\"]\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsxs(_components.p, {\n children: [\"Examples on this page are using \", _jsx(Code, {\n children: _jsx(\"a\", {\n href: \"https://heroicons.com/\",\n target: \"_blank\",\n children: \"@heroicons/react\"\n })\n }), \" make sure you have installed it.\"]\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"bash\",\n \"data-theme\": \"default\",\n children: _jsx(_components.code, {\n \"data-language\": \"bash\",\n \"data-theme\": \"default\",\n children: _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"npm i @heroicons/react\"\n })\n })\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Simple Navbar with Icons\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this minimalistic navbar which includes the brand name on the left, followed by a horizontal list of navigation links - each accompanied by an icon. The navbar also includes call-to-action buttons, with the \\\"SIGN IN\\\" button highlighted in black to draw attention.\"\n }), \"\\n\", _jsx(CodePreview, {\n link: \"navbar#navbar\",\n component: _jsx(NavbarExamples.NavbarDefault, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MobileNav,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarDefault\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"16\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 16 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"16\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"17\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 16 17\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clip-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"14\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 14 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"16\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 16 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clip-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"container mx-auto flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:inline-block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eLog In\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:inline-block\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eSign in\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"ripple\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 24 24\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M6 18L18 6M6 6l12 12\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M4 6h16M4 12h16M4 18h16\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"container mx-auto\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eLog In\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eSign in\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"sticky-navbar\",\n children: _jsx(_components.h2, {\n children: \"Sticky Navbar\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this example if you want your navbar to remain in a fixed position when scrolling. From the navbar, give access to the users to different sections/ web pages.\"\n }), \"\\n\", _jsx(CodePreview, {\n link: \"navbar#sticky-navbar\",\n component: _jsx(NavbarExamples.StickyNavbar, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MobileNav,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Card,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"StickyNavbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2 lg:px-8 lg:py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:inline-block\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eLog In\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:inline-block\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eSign in\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"ripple\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 24 24\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M6 18L18 6M6 6l12 12\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M4 6h16M4 12h16M4 18h16\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eLog In\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eSign in\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-md py-12\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Card\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-12 overflow-hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"nature\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-[32rem] w-full object-cover object-center\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"auto=format\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"fit=crop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"w=2717\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"q=80\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Card\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" What is Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-normal\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Can you help me out? you will get a lot of free exposure doing this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" can my website be in english?. There is too much white space do less\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" with more, so that will be a conversation piece can you rework to make\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" the pizza look more delicious other agencies charge much lesser can\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" you make the blue bluer?. I think we need to start from scratch can my\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" website be in english?, yet make it sexy i\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"ll pay you in a week\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" we don\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"t need to pay upfront i hope you understand can you make\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" it stand out more?. Make the font bigger can you help me out? you will\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" get a lot of free exposure doing this that\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"s going to be a chunk\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" of change other agencies charge much lesser. Are you busy this\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" weekend? I have a new project with a tight deadline that\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"s going\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" to be a chunk of change. There are more projects lined up charge extra\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" the next time.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"complex-user-navbar\",\n children: _jsx(_components.h2, {\n children: \"Complex User Navbar\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you want a more sophisticated navbar, use this example with icons and dropdown.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.ComplexNavbar, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MobileNav,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Menu,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuHandler,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuList,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuItem,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Avatar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Card,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" CubeTransparentIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" UserCircleIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" CodeBracketSquareIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Square3Stack3DIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ChevronDownIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cog6ToothIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" InboxArrowDownIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" LifebuoyIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" PowerIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" RocketLaunchIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Bars2Icon,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/solid\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#8B949E\"\n },\n children: \"// profile menu component\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"profileMenuItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"My Profile\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: UserCircleIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Edit Profile\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: Cog6ToothIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Inbox\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: InboxArrowDownIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Help\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: LifebuoyIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Sign Out\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: PowerIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"];\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"ProfileMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"closeMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bottom-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Avatar\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"circular\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"tania andrew\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"border border-gray-900 p-0.5\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"auto=format\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"fit=crop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"w=1480\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA198\"\n },\n children: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"q=80\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`h-3 w-3 transition-transform ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"profileMenuItems.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isLastItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" key \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"===\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" profileMenuItems.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"length\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"-\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"1\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`flex items-center gap-2 rounded ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isLastItem\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"createElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(icon, {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`h-4 w-4 ${\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isLastItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-red-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" strokeWidth: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" })\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"span\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-normal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isLastItem \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"red\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"inherit\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" })\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#8B949E\"\n },\n children: \"// nav list menu\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"navListMenuItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/html\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description:\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Learn how to use @material-tailwind/html, packed with rich components and widgets.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description:\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Learn how to use @material-tailwind/react, packed with rich components for React.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Material Tailwind PRO\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description:\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"A complete set of UI Elements for building faster websites in less time.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"];\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavListMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" navListMenuItems.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"description\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-normal\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"description\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ));\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"React.Fragment\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"allowHover\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-normal\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden items-center gap-2 font-medium text-blue-gray-900 lg:flex lg:rounded-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Square3Stack3DIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-[18px] w-[18px] text-blue-gray-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`h-3 w-3 transition-transform ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden w-[36rem] grid-cols-7 gap-3 overflow-visible lg:grid\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Card\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"shadow\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"col-span-3 grid h-full w-full place-items-center rounded-md\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"RocketLaunchIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"1\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-28 w-28\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Card\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"col-span-4 flex w-full flex-col gap-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 font-medium text-blue-gray-900 lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Square3Stack3DIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-[18px] w-[18px] text-blue-gray-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-6 flex w-full flex-col gap-1 lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"React.Fragment\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#8B949E\"\n },\n children: \"// nav list component\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"navListItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Account\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: UserCircleIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Blocks\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: CubeTransparentIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" label: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Docs\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: CodeBracketSquareIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"];\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavListMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navListItems.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium text-blue-gray-500\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 lg:rounded-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"createElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(icon, { className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-[18px] w-[18px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" })\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ))\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"ComplexNavbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"toggleIsNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setIsNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"((\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"cur\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"cur);\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setIsNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl p-2 lg:rounded-full lg:pl-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative mx-auto flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 ml-2 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"toggleIsNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-auto mr-2 lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars2Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eLog In\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ProfileMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isNavOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"overflow-scroll\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-with-search\",\n children: _jsx(_components.h2, {\n children: \"Navbar With Search\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this navbar with a search component that combines navigation with a search functionality. It features the brand name \\\"Material Tailwind\\\" on the left, followed by a prominent search bar with a search icon inside. A black \\\"SEARCH\\\" button is positioned next to the search bar, making it easy for users to execute a search query.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarWithSearch, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MobileNav,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Input,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarWithSearch\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"16\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 16 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"16\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"17\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 16 17\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clip-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"14\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 14 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-x-2 p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"16\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 16 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clip-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#90A4AE\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"container mx-auto flex flex-wrap items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden items-center gap-x-2 lg:flex\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative flex w-full gap-2 md:w-max\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Input\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placeholder\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"containerProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"min-w-[288px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"labelProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"before:content-none after:content-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"!absolute left-3 top-[13px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"13\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"14\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 14 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"2\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"md\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-lg \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Search\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"ripple\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 24 24\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M6 18L18 6M6 6l12 12\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeLinejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M4 6h16M4 12h16M4 18h16\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"container mx-auto\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex flex-col gap-x-2 sm:flex-row sm:items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative w-full gap-2 md:w-max\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Input\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placeholder\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"containerProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"min-w-[288px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"labelProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"before:content-none after:content-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"!absolute left-3 top-[13px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"13\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"14\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 14 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"2\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"md\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-1 rounded-lg sm:mt-0\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Search\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"dark-navbar\",\n children: _jsx(_components.h2, {\n children: \"Dark Navbar\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this sleek navbar with a search component that uses a dark background to improve the contrast and visibility of the elements.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarDark, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Input,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" { BellIcon, Cog6ToothIcon } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/solid\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarDark\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl from-blue-gray-900 to-blue-gray-800 px-4 py-3\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex flex-wrap items-center justify-between gap-y-4 text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 ml-2 cursor-pointer py-1.5\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-auto flex gap-1 md:mr-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Cog6ToothIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-4 w-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"BellIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-4 w-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative flex w-full gap-2 md:w-max\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Input\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"white\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Type here...\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pr-20\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"containerProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"min-w-[288px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"white\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"!absolute right-1 top-1 rounded\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Search\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"simple-navbar\",\n children: _jsx(_components.h2, {\n children: \"Simple Navbar\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Try this versatile Tailwind CSS navbar with no icons or buttons to focus on basic navigation. The rounded corners of the navbar add a subtle touch of modernity to the overall design.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarSimple, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Collapse,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" { Bars3Icon, XMarkIcon } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/outline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center hover:text-blue-500 transition-colors\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center hover:text-blue-500 transition-colors\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center hover:text-blue-500 transition-colors\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center hover:text-blue-500 transition-colors\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarSimple\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"handleWindowResize\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", handleWindowResize);\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"removeEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", handleWindowResize);\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-6 py-3\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"ripple\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"XMarkIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars3Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-with-mega-menu\",\n children: _jsx(_components.h2, {\n children: \"Navbar With Mega Menu\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"This example features a dropdown mega menu that expands to display multiple categories with icons and descriptions. It allows users to quickly access a wide range of resources directly from the navbar. The Tailwind CSS mega menu is ideal for websites with a large amount of content to organize.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarWithMegaMenu, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Collapse,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" List,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ListItem,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Menu,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuHandler,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuList,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuItem,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ChevronDownIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Bars3Icon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" XMarkIcon,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/outline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Bars4Icon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" GlobeAmericasIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" NewspaperIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" PhoneIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" RectangleGroupIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" SquaresPlusIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" SunIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" TagIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" UserGroupIcon,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/solid\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"navListMenuItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Products\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Find the perfect solution for your needs.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: SquaresPlusIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"About Us\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Meet and learn about our dedication\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: UserGroupIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Blog\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Find the perfect solution for your needs.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: Bars4Icon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Services\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Learn how we can help you achieve your goals.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: SunIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Support\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Reach out to us for assistance or inquiries\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: GlobeAmericasIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Contact\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Find the perfect solution for your needs.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: PhoneIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"News\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Read insightful articles, tips, and expert opinions.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: NewspaperIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Products\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Find the perfect solution for your needs.\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: RectangleGroupIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Special Offers\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" description: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Explore limited-time deals and bundles\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" icon: TagIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"];\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavListMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" navListMenuItems.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"description\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-3 rounded-lg\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"createElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(icon, {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" strokeWidth: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 text-gray-900 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" })\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center text-sm font-bold\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"paragraph\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-xs !font-medium text-blue-gray-500\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"description\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ),\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"React.Fragment\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"offset\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{ mainAxis: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"20\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bottom\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"allowHover\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"div\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4 font-medium text-gray-900\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"selected\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"||\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setIsMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"((\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"cur\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"cur)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Resources\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`hidden h-3 w-3 transition-transform lg:block ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`block h-3 w-3 transition-transform lg:hidden ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden max-w-screen-xl rounded-xl lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"grid grid-cols-3 gap-y-2 outline-none outline-0\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"React.Fragment\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"List\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-4 mb-6 p-0 lg:mt-0 lg:mb-0 lg:flex-row lg:p-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eHome\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavListMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Contact Us\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"List\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarWithMegaMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-4 py-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 lg:ml-2\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden gap-2 lg:flex\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Log In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Sign In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"XMarkIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars3Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex w-full flex-nowrap items-center gap-2 lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"outlined\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Log In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Sign In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-with-solid-background\",\n children: _jsx(_components.h2, {\n children: \"Navbar With Solid Background\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this example to show a solid background for the navbar component instead of being transparent. The solid background ensures that the navigation elements are easily visible against any content.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarWithSolidBackground, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Collapse,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" { Bars3Icon, XMarkIcon } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/outline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarWithSolidBackground\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-normal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sticky top-0 z-10 h-max max-w-full bg-gray-100 rounded-none px-4 py-2 lg:px-8 lg:py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:inline-block\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eGet started\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"XMarkIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars3Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eGet started\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-with-submenu\",\n children: _jsx(_components.h2, {\n children: \"Navbar With Submenu\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this example to show another sub nav below the main nav bar element. This design allows for additional navigation options, such as \\\"Sales\\\" and \\\"New In,\\\" providing users with quick access to specific sections or categories within the site.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarWithSubmenu, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Collapse,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Input,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" { Bars3Icon, XMarkIcon } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/outline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarWithSubmenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium text-gray-600\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Sales\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium text-gray-600\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" New In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium text-gray-600\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium text-gray-600\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"container mx-auto flex flex-wrap items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden items-center gap-x-2 lg:flex\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative flex w-full gap-2 md:w-max\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Input\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placeholder\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"containerProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"min-w-[288px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"labelProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"before:content-none after:content-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"!absolute left-3 top-[13px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"13\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"14\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 14 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"2\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"md\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-lg \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Search\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"hr\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-3 mt-6 hidden w-full lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"XMarkIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars3Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"container mx-auto\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex flex-col gap-x-2 sm:flex-row sm:items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative w-full gap-2 md:w-max\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Input\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placeholder\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Search\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"containerProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"min-w-[288px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"labelProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"{\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" className: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"before:content-none after:content-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"!absolute left-3 top-[13px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"13\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"14\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 14 15\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#CFD8DC\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"2\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"md\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-1 rounded-lg sm:mt-0\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Search\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-with-languages-dropdown\",\n children: _jsx(_components.h2, {\n children: \"Navbar with Dropdown for Multiple Languages\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Get started with this tailwind navbar example to show a language dropdown selector in the navbar component. Users can select from multiple languages, improving the accessibility and usability of the site for a global audience.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavbarForDropdownWithMultipleLanguages, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Collapse,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Menu,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuHandler,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuList,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuItem,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Bars3Icon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ChevronDownIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" XMarkIcon,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/outline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavbarForDropdownWithMultipleLanguages\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"lang\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setLang\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"English\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"li\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-1 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Docs\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ul\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"countries\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" flag: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"🇺🇸\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" name: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"English\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" flag: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"🇪🇸\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" name: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Spain\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" flag: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"🇫🇷\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" name: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"France\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" flag: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"🇩🇪\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" name: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Germany\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ];\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden flex-wrap items-center gap-2 lg:flex\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" join\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setOpenMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"outlined\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden items-center gap-2 lg:flex\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-min text-base leading-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"countries.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"find\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" name \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"===\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" lang)?.flag\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"countries.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"find\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" name \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"===\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" lang)?.name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`h-3.5 w-3.5 transition-transform ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden max-h-72 w-20 lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"countries.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"flag\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setLang\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(name)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"flag\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ))\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"XMarkIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars3Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"navList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex w-full flex-nowrap items-center gap-x-4 lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" join\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setOpenMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"outlined\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-center gap-2 lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" 🇺🇸 English\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\" \\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`w-3.h-3.5 h-3.5 transition-transform ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block max-h-72 w-20 lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"countries.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"flag\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"flag\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ))\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-with-multi-level-dropdown\",\n children: _jsx(_components.h2, {\n children: \"Navigation bar with a Dropdown Multi-Level Menu\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can also use the dropdown element inside a navigation bar to add a second level of navigation hierarchy. This example includes a \\\"Blocks\\\" menu with nested options like \\\"Figma,\\\" \\\"React,\\\" and \\\"TailwindCSS,\\\" each with their own sub-options, such as \\\"Hero,\\\" \\\"Features,\\\" \\\"Testimonials,\\\" and \\\"Ecommerce.\\\" This structure allows for comprehensive navigation without overwhelming the user.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(NavbarExamples.NavigationbarWithDropdownMultilevelMenu, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"jsx\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Navbar,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Collapse,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Typography,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Button,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" IconButton,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" List,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ListItem,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Menu,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuHandler,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuList,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" MenuItem,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ChevronDownIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Bars3Icon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" XMarkIcon,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ChevronUpIcon,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@heroicons/react/24/outline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"nestedMenuItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Hero\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Features\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Testimonials\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" title: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Ecommerce\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"];\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavListMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNestedMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setopenNestedMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setIsMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" nestedMenuItems.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"map\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(({ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"key\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ));\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"React.Fragment\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setIsMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bottom\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"allowHover\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"div\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4 font-medium text-gray-900\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"selected\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"||\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setIsMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"((\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"cur\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \") \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"cur)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Blocks\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`hidden h-3 w-3 transition-transform lg:block ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronDownIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`block h-3 w-3 transition-transform lg:hidden ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-180\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden rounded-xl lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"right-start\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"allowHover\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"offset\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"15\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNestedMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setopenNestedMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Figma\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronUpIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`h-3.5 w-3.5 transition-transform ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-90\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eReact\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eTailwindCSS\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMobileMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bottom\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"allowHover\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"offset\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"6\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNestedMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"handler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"setopenNestedMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Figma\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ChevronUpIcon\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2.5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"`h-3.5 w-3.5 transition-transform ${\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"isMenuOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rotate-90\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"}`\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuHandler\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block rounded-xl lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"renderItems\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Menu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eReact\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eTailwindCSS\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"MenuItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"React.Fragment\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"List\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-6 mt-4 p-0 lg:mb-0 lg:mt-0 lg:flex-row lg:p-1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003ePages\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Account\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavListMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"small\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"font-medium\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2 py-2 pr-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eDocs\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItem\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"List\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"export\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"NavigationbarWithDropdownMultilevelMenu\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" [\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"] \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useState\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" React.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"useEffect\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"resize\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" window.innerWidth \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u003e=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"960\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"\u0026\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"false\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"),\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" }, []);\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"return\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mx-auto max-w-screen-xl px-4 py-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"a\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h6\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mr-4 cursor-pointer py-1.5 lg:ml-2\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Material Tailwind\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Typography\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden lg:block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"hidden gap-2 lg:flex\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eGet Started\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"outlined\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Log In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"lg:hidden\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClick\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"() \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\u003e\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"setOpenNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav)\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"{\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"XMarkIcon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ) \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" (\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Bars3Icon\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-6 w-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"strokeWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"2\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" )\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"IconButton\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"openNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"NavList\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex w-full flex-nowrap items-center gap-2 lg:hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Get Started\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"outlined\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"size\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Log In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Collapse\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" );\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-props\",\n children: _jsx(_components.h2, {\n children: \"Navbar Props\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"The following props are available for navbar component. These are the custom props\\nthat we've added for the navbar component and you can use all the other\\nnative props as well.\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"Attribute\"\n }), _jsx(_components.th, {\n children: \"Type\"\n }), _jsx(_components.th, {\n children: \"Description\"\n }), _jsx(_components.th, {\n children: \"Default\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"variant\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"#types-variant\",\n children: \"Variant\"\n })\n }), _jsx(_components.td, {\n children: \"Change navbar variant\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"filled\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"color\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"#types-color\",\n children: \"Color\"\n })\n }), _jsx(_components.td, {\n children: \"Change navbar color\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"white\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"shadow\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"boolean\"\n })\n }), _jsx(_components.td, {\n children: \"Add box-shadow for navbar\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"true\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"blurred\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"boolean\"\n })\n }), _jsx(_components.td, {\n children: \"Add blur backdrop effect for navbar and makes it's background color white\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"true\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"fullWidth\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"boolean\"\n })\n }), _jsx(_components.td, {\n children: \"Change navbar to a block level element and remove its border radius\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"false\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"className\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"string\"\n })\n }), _jsx(_components.td, {\n children: \"Add custom className for navbar\"\n }), _jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"''\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"children\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"node\"\n })\n }), _jsx(_components.td, {\n children: \"Add content for navbar\"\n }), _jsx(_components.td, {\n children: \"No default value it's a required prop.\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.h3, {\n children: \"For TypeScript Only\"\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"default\",\n children: _jsx(_components.code, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" { NavbarProps } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"types-variant\",\n children: _jsx(_components.h2, {\n children: \"Types - Variant\"\n })\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: _jsx(_components.code, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"filled\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gradient\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"types-color\",\n children: _jsx(_components.h2, {\n children: \"Types - Color\"\n })\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"transparent\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"white\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"gray\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"brown\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"deep-orange\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"orange\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"amber\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"yellow\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"lime\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"light-green\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"green\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"teal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"cyan\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"light-blue\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"indigo\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"deep-purple\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"purple\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pink\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"|\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"red\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"types-animate\",\n children: _jsx(_components.h2, {\n children: \"Types - Animate\"\n })\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"animate\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"mount\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"unmount\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"?:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"};\"\n })\n })]\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-theme\",\n children: _jsx(_components.h2, {\n children: \"Navbar Theme\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Learn how to customize the theme and styles for navbar component, the theme object for navbar component has three main objects:\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"A.\"\n }), \" The \", _jsx(Code, {\n children: \"defaultProps\"\n }), \" object for setting up the default value for props of navbar component.\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.strong, {\n children: \"B.\"\n }), \" The \", _jsx(Code, {\n children: \"valid\"\n }), \" object for customizing the valid values for navbar component props.\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.strong, {\n children: \"C.\"\n }), \" The \", _jsx(Code, {\n children: \"styles\"\n }), \" object for customizing the theme and styles of navbar component.\", _jsx(\"br\", {})]\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can customize the theme and styles of navbar component by adding Tailwind CSS classes as key paired values for objects.\"\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-theme-object-type\",\n children: _jsx(_components.h2, {\n children: \"Navbar Theme Object Type\"\n })\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"interface\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"NavbarStylesType\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"defaultProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"variant\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"string\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"string\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"shadow\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"boolean\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"blurred\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"boolean\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"boolean\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"className\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"string\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"valid\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"variants\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"string\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"[];\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"colors\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"string\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"[];\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"styles\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"base\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"navbar\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"initial\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"shadow\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"blurred\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"fullWidth\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"mobileNav\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"variants\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"filled\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"gradient\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"object\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"}\"\n })\n })]\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.h3, {\n children: \"For TypeScript Only\"\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"default\",\n children: _jsx(_components.code, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" { NavbarStylesType } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"@material-tailwind/react\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \";\"\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"navbar-theme-customization\",\n children: _jsx(_components.h2, {\n children: \"Navbar Theme Customization\"\n })\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"ts\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"theme\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" navbar: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" styles: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" base: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" navbar: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" initial: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" display: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" width: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" maxWidth: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"max-w-screen-2xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" borderRadius: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" py: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"py-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" px: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"px-8\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" shadow: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" boxShadow: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"shadow-md\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" blurred: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backdropFilter: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"backdrop-saturate-200 backdrop-blur-2xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" bgOpacity: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-opacity-80\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" borderWidth: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"border\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" borderColor: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"border-white/80\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" fullWidth: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" width: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" maxWidth: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"max-w-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" rounded: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" px: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"px-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" mobileNav: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" display: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" width: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" basis: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"basis-full\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" overflow: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"overflow-hidden\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" variants: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" filled: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" transparent: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-transparent\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" boxShadow: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" white: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-blue-gray-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" gray: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gray-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" brown: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-brown-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"deep-orange\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-deep-orange-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" orange: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-orange-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" amber: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-amber-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-black\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" yellow: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-yellow-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-black\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" lime: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-lime-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-black\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"light-green\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-light-green-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" green: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-green-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" teal: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-teal-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" cyan: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-cyan-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"light-blue\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-light-blue-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" blue: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-blue-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" indigo: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-indigo-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"deep-purple\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-deep-purple-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" purple: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-purple-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" pink: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-pink-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" red: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-red-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" gradient: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" transparent: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-transparent\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" boxShadow: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" white: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-blue-gray-900\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"blue-gray\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" gray: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-gray-600 to-gray-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" brown: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-brown-600 to-brown-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"deep-orange\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" orange: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-orange-600 to-orange-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" amber: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-amber-600 to-amber-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-black\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" yellow: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-yellow-600 to-yellow-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-black\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" lime: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-lime-600 to-lime-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-black\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"light-green\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-light-green-600 to-light-green-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" green: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-green-600 to-green-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" teal: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-teal-600 to-teal-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" cyan: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-cyan-600 to-cyan-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"light-blue\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-light-blue-600 to-light-blue-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" blue: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-blue-600 to-blue-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" indigo: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-indigo-600 to-indigo-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"deep-purple\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" purple: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-purple-600 to-purple-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" pink: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-pink-600 to-pink-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" red: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" backgroud: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-gradient-to-tr from-red-600 to-red-400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" color: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"};\"\n })\n })]\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"more-examples\",\n children: _jsx(_components.h2, {\n children: \"Explore More Tailwind CSS Examples\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Check out more navigation bar examples from \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks\",\n target: \"_blank\",\n children: \"Material Tailwind Blocks\"\n }), \":\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/hero-sections\",\n target: \"_blank\",\n children: \"Hero Blocks\"\n }), _jsx(\"br\", {}), \"\\n• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/navbars\",\n target: \"_blank\",\n children: \"Navbar Blocks\"\n }), _jsx(\"br\", {})]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{},"scope":{}},"slug":["react","navbar"]},"__N_SSG":true},"page":"/docs/[...slug]","query":{"slug":["react","navbar"]},"buildId":"Hmxk9y-rTbot2nv4Ta3ZE","assetPrefix":"https://docs.material-tailwind.com","isFallback":false,"gsp":true,"scriptLoader":[]}</script><script async="" defer="" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script></body></html>

CINXE.COM

Tailwind CSS Navbar for React - Material Tailwind