Tailwind CSS Drawer for React - Material Tailwind

<!DOCTYPE html><html lang="en" class="scroll-smoot <div id="drawer" class="scroll-mt-64 overflow-hidden } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="drawer-placement" class="group relative -ml-4 } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="drawer-with-navigation" class="group relative } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="drawer-with-form" class="group relative -ml-4 } <hr class="!mb-12 !mt-16 border-transparent"/> <div id="drawer-props" class="group relative -ml-4 flex <p class="block antialiased font-sans text-base font-light leading-relaxed that we've added for the drawer component and you can use all as well.<a class="!font-medium !text-primary !transition-colors <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-placement" 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-overlay-ref" 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-overlay-props" class="group relative <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="types-dismiss" class="group relative -ml-4 <div data-rehype-pretty-code-fragment=""><pre data-language= <hr class="!mb-12 !mt-16 border-transparent"/> <div id="drawer-theme" class="group relative -ml-4 flex B. The <code class="rounded-md px-1 <div id="drawer-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="drawer-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 <head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Tailwind CSS Drawer for React - Material Tailwind</title><meta name="description" content="Customise your web projects with our easy-to-use drawer component for Tailwind CSS and React using Material Design guidelines."/><link rel="canonical" href="https://www.material-tailwind.com/docs/react/drawer"/><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/ca6b01f261ab16d0.css" as="style"/><link rel="stylesheet" href="https://docs.material-tailwind.com/_next/static/css/ca6b01f261ab16d0.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-4530abfa10c7789f.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-b264bd2bc24d7974.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-ab0de3e344fce1dc.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-419c464ef6ade4f9.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/pages/docs/%5B...slug%5D-855efe671254ef22.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/7xyavH52hdVKj4bs-JAX1/_buildManifest.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/7xyavH52hdVKj4bs-JAX1/_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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgWxM.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5vAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Me5g.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9vAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtvAA.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxIIzIXKMny.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.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-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.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/v142/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/v142/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+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTQ1NmZkMWQtN2M4Yy00YjAwLThhZTYtM2YxYjA2Y2YzMTAxIiBzdEV2dDp3aGVuPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3No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"></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</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]"><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-blue-gray-600 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 uppercase 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" 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</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]"><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-blue-gray-600 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 uppercase 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" 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">drawer</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 class="relative flex flex-col bg-clip-border rounded-xl bg-gray-900 text-white shadow-gray-900/20 shadow-md"><div class="p-6 px-4 py-2.5"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-inherit mb-1">Material Tailwind v3</h6>We've just released the new version of Material Tailwind with a lot of new features and improvements. It's currently on beta and we need your feedback to make it better.<a href="/docs/v3/react/installation"><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 py-2 px-4 rounded-lg 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 block w-full mb-1.5 mt-4 normal-case" type="button">Go to v3 Docs</button></a></div></div></div></div></aside><div class="mt-6 w-full lg:w-[60%] lg:px-6"><div id="drawer" class="group relative -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#drawer" 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 Drawer - React</h1></div> text-inherit !mb-4 !font-normal !text-gray-600">Use our Tailwind CSS drawer for side menus in your website. 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">Drawer</code> example that you can use in your Tailwind CSS and React project. rounded-xl border border-blue-gray-50 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"><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 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">Open Drawer</button><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 top-0 left-0 p-4" style="max-width:300px;max-height:100%;height:100vh;transform:translateX(-300px) translateY(0px) translateZ(0)"><div class="mb-6 flex items-center justify-between"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Material Tailwind</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.<div class="flex gap-2"><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">Documentation</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-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></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 { Drawer, Button, Typography, IconButton, from "@material-tailwind/react"; export function DrawerDefault() { const [open, setOpen] = React.useState(false); const openDrawer = () => setOpen(true); const closeDrawer = () => setOpen(false); return ( <React.Fragment> <Button onClick={openDrawer}>Open Drawer</Button> <Drawer open={open} onClose={closeDrawer} className="p-4"> <div className="mb-6 flex items-center justify-between"> <Typography variant="h5" color="blue-gray"> Material Tailwind </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawer}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <Typography color="gray" className="mb-8 pr-4 font-normal"> Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines. </Typography> <div className="flex gap-2"> <Button size="sm" variant="outlined"> Documentation </Button> <Button size="sm">Get Started</Button> </div> </Drawer> </React.Fragment> ); }</code></pre></div></div></div> flex scroll-mt-40 items-center pl-4"><a href="#drawer-placement" 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">Drawer Placement</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">You can change the position of the <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">Drawer</code> component using the <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">placement</code> prop. 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="flex flex-wrap gap-4"><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 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">Open Drawer Top</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-3 px-6 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">Open Drawer Right</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-3 px-6 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">Open Drawer Bottom</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-3 px-6 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">Open Drawer Left</button></div><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 top-0 left-0 p-4" style="max-width:100%;max-height:300px;height:100%;transform:translateX(0px) translateY(-300px) translateZ(0)"><div class="mb-6 flex items-center justify-between"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Material Tailwind</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.<div class="flex gap-2"><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">Documentation</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-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></div></div><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 top-0 right-0 p-4" style="max-width:300px;max-height:100%;height:100vh;transform:translateX(300px) translateY(0px) translateZ(0)"><div class="mb-6 flex items-center justify-between"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Material Tailwind</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.<div class="flex gap-2"><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">Documentation</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-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></div></div><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 bottom-0 left-0 p-4" style="max-width:100%;max-height:300px;height:100%;transform:translateX(0px) translateY(300px) translateZ(0)"><div class="mb-6 flex items-center justify-between"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Material Tailwind</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.<div class="flex gap-2"><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">Documentation</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-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></div></div><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 top-0 left-0 p-4" style="max-width:300px;max-height:100%;height:100vh;transform:translateX(-300px) translateY(0px) translateZ(0)"><div class="mb-6 flex items-center justify-between"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Material Tailwind</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.<div class="flex gap-2"><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">Documentation</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-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></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 { Drawer, Button, Typography, IconButton, from "@material-tailwind/react"; export function DrawerPlacement() { const [openTop, setOpenTop] = React.useState(false); const [openRight, setOpenRight] = React.useState(false); const [openBottom, setOpenBottom] = React.useState(false); const [openLeft, setOpenLeft] = React.useState(false); const openDrawerTop = () => setOpenTop(true); const closeDrawerTop = () => setOpenTop(false); const openDrawerRight = () => setOpenRight(true); const closeDrawerRight = () => setOpenRight(false); const openDrawerBottom = () => setOpenBottom(true); const closeDrawerBottom = () => setOpenBottom(false); const openDrawerLeft = () => setOpenLeft(true); const closeDrawerLeft = () => setOpenLeft(false); return ( <React.Fragment> <div className="flex flex-wrap gap-4"> <Button onClick={openDrawerTop}>Open Drawer Top</Button> <Button onClick={openDrawerRight}>Open Drawer Right</Button> <Button onClick={openDrawerBottom}>Open Drawer Bottom</Button> <Button onClick={openDrawerLeft}>Open Drawer Left</Button> </div> <Drawer placement="top" open={openTop} onClose={closeDrawerTop} className="p-4" > <div className="mb-6 flex items-center justify-between"> <Typography variant="h5" color="blue-gray"> Material Tailwind </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawerTop}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <Typography color="gray" className="mb-8 pr-4 font-normal"> Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines. </Typography> <div className="flex gap-2"> <Button size="sm" variant="outlined"> Documentation </Button> <Button size="sm">Get Started</Button> </div> </Drawer> <Drawer placement="right" open={openRight} onClose={closeDrawerRight} className="p-4" > <div className="mb-6 flex items-center justify-between"> <Typography variant="h5" color="blue-gray"> Material Tailwind </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawerRight} > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <Typography color="gray" className="mb-8 pr-4 font-normal"> Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines. </Typography> <div className="flex gap-2"> <Button size="sm" variant="outlined"> Documentation </Button> <Button size="sm">Get Started</Button> </div> </Drawer> <Drawer placement="bottom" open={openBottom} onClose={closeDrawerBottom} className="p-4" > <div className="mb-6 flex items-center justify-between"> <Typography variant="h5" color="blue-gray"> Material Tailwind </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawerBottom} > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <Typography color="gray" className="mb-8 pr-4 font-normal"> Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines. </Typography> <div className="flex gap-2"> <Button size="sm" variant="outlined"> Documentation </Button> <Button size="sm">Get Started</Button> </div> </Drawer> <Drawer placement="left" open={openLeft} onClose={closeDrawerLeft} className="p-4" > <div className="mb-6 flex items-center justify-between"> <Typography variant="h5" color="blue-gray"> Material Tailwind </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawerLeft} > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <Typography color="gray" className="mb-8 pr-4 font-normal"> Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines. </Typography> <div className="flex gap-2"> <Button size="sm" variant="outlined"> Documentation </Button> <Button size="sm">Get Started</Button> </div> </Drawer> </React.Fragment> ); }</code></pre></div></div></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#drawer-with-navigation" 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">Drawer with Navigation</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Use this beautiful and versatile example to display navigation options in a hidden panel that can be accessed by clicking a button. These components are usually used in various apps and systems. 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"><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 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">Open Drawer</button><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 top-0 left-0" style="max-width:300px;max-height:100%;height:100vh;transform:translateX(-300px) translateY(0px) translateZ(0)"><div class="mb-2 flex items-center justify-between p-4"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Material Tailwind</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><nav class="flex flex-col gap-1 min-w-[240px] p-2 font-sans text-base font-normal text-blue-gray-700"><div role="button" tabindex="0" class="flex items-center 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"><div class="grid place-items-center mr-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.04 16.5l.5-1.5h6.42l.5 1.5H8.29zm7.46-12a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0v-6zm-3 2.25a.75.75 0 00-1.5 0v3.75a.75.75 0 001.5 0V9zm-3 2.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5z" clip-rule="evenodd"></path></svg></div>Dashboard</div><div role="button" tabindex="0" class="flex items-center 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"><div class="grid place-items-center mr-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M7.5 6v.75H5.513c-.96 0-1.764.724-1.865 1.679l-1.263 12A1.875 1.875 0 004.25 22.5h15.5a1.875 1.875 0 001.865-2.071l-1.263-12a1.875 1.875 0 00-1.865-1.679H16.5V6a4.5 4.5 0 10-9 0zM12 3a3 3 0 00-3 3v.75h6V6a3 3 0 00-3-3zm-3 8.25a3 3 0 106 0v-.75a.75.75 0 011.5 0v.75a4.5 4.5 0 11-9 0v-.75a.75.75 0 011.5 0v.75z" clip-rule="evenodd"></path></svg></div>Analytics<div class="grid place-items-center ml-auto justify-self-end"><div class="relative grid items-center font-sans font-bold uppercase whitespace-nowrap select-none bg-green-500 text-white py-1 px-2 text-xs rounded-full" style="opacity:0">5</div></div></div><div role="button" tabindex="0" class="flex items-center 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"><div class="grid place-items-center mr-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M6.912 3a3 3 0 00-2.868 2.118l-2.411 7.838a3 3 0 00-.133.882V18a3 3 0 003 3h15a3 3 0 003-3v-4.162c0-.299-.045-.596-.133-.882l-2.412-7.838A3 3 0 0017.088 3H6.912zm13.823 9.75l-2.213-7.191A1.5 1.5 0 0017.088 4.5H6.912a1.5 1.5 0 00-1.434 1.059L3.265 12.75H6.11a3 3 0 012.684 1.658l.256.513a1.5 1.5 0 001.342.829h3.218a1.5 1.5 0 001.342-.83l.256-.512a3 3 0 012.684-1.658h2.844z" clip-rule="evenodd"></path></svg></div>Sales</div><div role="button" tabindex="0" class="flex items-center 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"><div class="grid place-items-center mr-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd"></path></svg></div>Profile</div><div role="button" tabindex="0" class="flex items-center 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"><div class="grid place-items-center mr-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><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 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.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 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-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 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd"></path></svg></div>Tables</div></nav><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 mt-3 ml-5" type="button">Documentation</button></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 { Drawer, Button, Typography, IconButton, List, ListItem, ListItemPrefix, ListItemSuffix, Chip, from "@material-tailwind/react"; export function DrawerWithNavigation() { const [open, setOpen] = React.useState(false); const openDrawer = () => setOpen(true); const closeDrawer = () => setOpen(false); return ( <React.Fragment> <Button onClick={openDrawer}>Open Drawer</Button> <Drawer open={open} onClose={closeDrawer}> <div className="mb-2 flex items-center justify-between p-4"> <Typography variant="h5" color="blue-gray"> Material Tailwind </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawer}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <List> <ListItem> <ListItemPrefix> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.04 16.5l.5-1.5h6.42l.5 1.5H8.29zm7.46-12a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0v-6zm-3 2.25a.75.75 0 00-1.5 0v3.75a.75.75 0 001.5 0V9zm-3 2.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5z" clipRule="evenodd" /> </svg> </ListItemPrefix> Dashboard </ListItem> <ListItem> <ListItemPrefix> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M7.5 6v.75H5.513c-.96 0-1.764.724-1.865 1.679l-1.263 12A1.875 1.875 0 004.25 22.5h15.5a1.875 1.875 0 001.865-2.071l-1.263-12a1.875 1.875 0 00-1.865-1.679H16.5V6a4.5 4.5 0 10-9 0zM12 3a3 3 0 00-3 3v.75h6V6a3 3 0 00-3-3zm-3 8.25a3 3 0 106 0v-.75a.75.75 0 011.5 0v.75a4.5 4.5 0 11-9 0v-.75a.75.75 0 011.5 0v.75z" clipRule="evenodd" /> </svg> </ListItemPrefix> Analytics <ListItemSuffix> <Chip value="5" size="sm" color="green" className="rounded-full" /> </ListItemSuffix> </ListItem> <ListItem> <ListItemPrefix> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M6.912 3a3 3 0 00-2.868 2.118l-2.411 7.838a3 3 0 00-.133.882V18a3 3 0 003 3h15a3 3 0 003-3v-4.162c0-.299-.045-.596-.133-.882l-2.412-7.838A3 3 0 0017.088 3H6.912zm13.823 9.75l-2.213-7.191A1.5 1.5 0 0017.088 4.5H6.912a1.5 1.5 0 00-1.434 1.059L3.265 12.75H6.11a3 3 0 012.684 1.658l.256.513a1.5 1.5 0 001.342.829h3.218a1.5 1.5 0 001.342-.83l.256-.512a3 3 0 012.684-1.658h2.844z" clipRule="evenodd" /> </svg> </ListItemPrefix> Sales </ListItem> <ListItem> <ListItemPrefix> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clipRule="evenodd" /> </svg> </ListItemPrefix> Profile </ListItem> <ListItem> <ListItemPrefix> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="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 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.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 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-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 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clipRule="evenodd" /> </svg> </ListItemPrefix> Tables </ListItem> </List> <Button className="mt-3 ml-5" size="sm"> Documentation </Button> </Drawer> </React.Fragment> ); }</code></pre></div></div></div> flex scroll-mt-40 items-center pl-4"><a href="#drawer-with-form" 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">Drawer with Form</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Similar to the previous example, this drawer will display a form instead of displaying navigation options. 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"><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 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">Open Drawer</button><div tabindex="-1" class="fixed z-[9999] pointer-events-auto bg-white box-border w-full shadow-2xl shadow-blue-gray-900/10 top-0 left-0" style="max-width:300px;max-height:100%;height:100vh;transform:translateX(-300px) translateY(0px) translateZ(0)"><div class="flex items-center justify-between px-4 pb-2"><h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900">Contact Us</h5><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" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="mb-5 px-4">Write the message and then click button.</div><form class="flex flex-col gap-6 p-4"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 -mb-3">Your Email</h6><div class="relative w-full min-w-[200px] h-10"><input type="email" 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" 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-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">Email </label></div><div class="relative w-full min-w-[200px] h-10"><input 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" 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-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">Subject </label></div><div class="relative w-full min-w-[200px]"><textarea rows="6" class="peer w-full h-full min-h-[100px] bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 resize-y disabled:bg-blue-gray-50 disabled:border-0 disabled:resize-none 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 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !resize-none" placeholder=" "></textarea><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal 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-blue-gray-400 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">Message </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-3 px-6 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">Send Message</button></form></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 { Drawer, Button, Typography, IconButton, Input, Textarea, from "@material-tailwind/react"; export function DrawerWithForm() { const [open, setOpen] = React.useState(false); const openDrawer = () => setOpen(true); const closeDrawer = () => setOpen(false); return ( <React.Fragment> <Button onClick={openDrawer}>Open Drawer</Button> <Drawer open={open} onClose={closeDrawer}> <div className="flex items-center justify-between px-4 pb-2"> <Typography variant="h5" color="blue-gray"> Contact Us </Typography> <IconButton variant="text" color="blue-gray" onClick={closeDrawer}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-5 w-5" > <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </IconButton> </div> <div className="mb-5 px-4"> <Typography variant="small" color="gray" className="font-normal "> Write the message and then click button. </Typography> </div> <form className="flex flex-col gap-6 p-4"> <Typography variant="h6" color="blue-gray" className="-mb-3"> Your Email </Typography> <Input type="email" label="Email" /> <Input label="Subject" /> <Textarea rows={6} label="Message" /> <Button>Send Message</Button> </form> </Drawer> </React.Fragment> ); }</code></pre></div></div></div> scroll-mt-40 items-center pl-4"><a href="#drawer-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">Drawer Props</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">The following props are available for drawer component. These are the custom props the other native props hover:!text-blue-500" href="#types-navigation">Navigation</a> !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>open</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">Sets the open and close state of drawer</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><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>size</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">number</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set's the width/height of the drawer depending on the drawer placement</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">250</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>placement</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-placement">Placement</a></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Sets the drawer placement</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">left</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>overlay</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">Sets the overlay visibility for the drawer</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>overlayRef</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-overlay-ref">Overlay Ref</a></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Add reference for the drawer overlay</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">undefined</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>overlayProps</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-overlay-props">Overlay Props</a></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Sets the rest props for the drawer overlay</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">undefined</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>dismiss</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-dismiss">dismiss</a></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Change dismiss listeners for drawer</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">undefined</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>onClose</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">function</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Sets the callback function for closing the drawer</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">undefined</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>transition</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Framer Motion</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Sets the transition for drawer</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"><code>transition: { type: "tween", duration: 0.5 }</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>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 drawer</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 drawer</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 { DrawerProps } from "@material-tailwind/react";</code></pre></div> flex scroll-mt-40 items-center pl-4"><a href="#types-placement" 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 - Placement</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">export type placement = "top" | "right" | "bottom" | "left";</code></pre></div> flex scroll-mt-40 items-center pl-4"><a href="#types-overlay-ref" 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 - Overlay Reference</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">export type overlayRef = React.Ref<HTMLDivElement>;</code></pre></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#types-overlay-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">Types - Overlay Props</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">export type overlayProps = React.ComponentProps<"div">;</code></pre></div> flex scroll-mt-40 items-center pl-4"><a href="#types-dismiss" 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 - Dismiss</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">type dismissType = { enabled?: boolean; escapeKey?: boolean; referencePress?: boolean; referencePressEvent?: "pointerdown" | "mousedown" | "click"; outsidePress?: boolean | ((event: MouseEvent) => boolean); outsidePressEvent?: "pointerdown" | "mousedown" | "click"; ancestorScroll?: boolean; bubbles?: | boolean | { escapeKey?: boolean; outsidePress?: boolean; }; };</code></pre></div> scroll-mt-40 items-center pl-4"><a href="#drawer-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">Drawer Theme</h2></div> text-inherit !mb-4 !font-normal !text-gray-600">Learn how to customize the theme and styles for drawer component, the theme object for drawer component has two 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 drawer component. 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 drawer component. text-inherit !mb-4 !font-normal !text-gray-600">You can customize the theme and styles of drawer component by adding Tailwind CSS classes as key paired values for objects. -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#drawer-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">Drawer Theme Object Type</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">interface DrawerStylesType { defaultProps: { size: number; overlay: boolean; placement: "top" | "right" | "bottom" | "left"; overlayProps: React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>; className: string; dismiss: { enabled: boolean; escapeKey: boolean; referencePress: boolean; referencePressEvent: 'pointerdown' | 'mousedown' | 'click'; outsidePress: boolean | ((event: MouseEvent) => boolean); outsidePressEvent: 'pointerdown' | 'mousedown' | 'click'; ancestorScroll: boolean; bubbles: boolean | { escapeKey: boolean; outsidePress: boolean; }; }; onClose: () => void; transition: object; }; styles: { base: { container: object; overlay: object; drawer: 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 { DrawerStylesType } from "@material-tailwind/react";</code></pre></div> -ml-4 flex scroll-mt-40 items-center pl-4"><a href="#drawer-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">Drawer Theme Customization</h2></div> "ts" data-theme="default"><code data-language="ts" data-theme="default">const theme = { drawer: { defaultProps: { size: 300, overlay: true, placement: "left", overlayProps: undefined, className: "", dismiss: undefined, onClose: undefined, transition: { type: "tween", duration: 0.3, }, }, styles: { base: { drawer: { position: "fixed", zIndex: "z-[9999]", pointerEvents: "pointer-events-auto", backgroundColor: "bg-white", boxSizing: "box-border", width: "w-full", boxShadow: "shadow-2xl shadow-blue-gray-900/10", }, overlay: { position: "absolute", inset: "inset-0", width: "w-full", height: "h-full", pointerEvents: "pointer-events-auto", zIndex: "z-[9995]", backgroundColor: "bg-black", backgroundOpacity: "bg-opacity-60", backdropBlur: "backdrop-blur-sm", }, }, }, }, };</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 drawer examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind 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="#drawer" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">drawer</a></li><li><a href="#drawer-placement" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">drawer placement</a></li><li><a href="#drawer-with-navigation" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">drawer with navigation</a></li><li><a href="#drawer-with-form" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">drawer with form</a></li><li><a href="#drawer-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">drawer props</a></li><li><a href="#types-placement" 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 placement</a></li><li><a href="#types-overlay-ref" 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 overlay ref</a></li><li><a href="#types-overlay-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">types overlay props</a></li><li><a href="#types-dismiss" 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 dismiss</a></li><li><a href="#drawer-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">drawer theme</a></li><li><a href="#drawer-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">drawer theme object type</a></li><li><a href="#drawer-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">drawer 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/drawer.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 © 2024 <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 Drawer for React - Material Tailwind","description":"Customise your web projects with our easy-to-use drawer component for Tailwind CSS and React using Material Design guidelines.","navigation":["drawer","drawer-placement","drawer-with-navigation","drawer-with-form","drawer-props","types-placement","types-overlay-ref","types-overlay-props","types-dismiss","drawer-theme","drawer-theme-object-type","drawer-theme-customization","more-examples"],"github":"drawer","prev":"dialog","next":"icon-button"},"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 a: \"a\",\n table: \"table\",\n thead: \"thead\",\n tr: \"tr\",\n th: \"th\",\n tbody: \"tbody\",\n td: \"td\",\n h3: \"h3\",\n strong: \"strong\"\n }, _provideComponents(), props.components), {DocsTitle, Code, CodePreview, DrawerExamples} = _components;\n if (!Code) _missingMdxReference(\"Code\", true);\n if (!CodePreview) _missingMdxReference(\"CodePreview\", true);\n if (!DocsTitle) _missingMdxReference(\"DocsTitle\", true);\n if (!DrawerExamples) _missingMdxReference(\"DrawerExamples\", false);\n if (!DrawerExamples.DrawerDefault) _missingMdxReference(\"DrawerExamples.DrawerDefault\", true);\n if (!DrawerExamples.DrawerPlacement) _missingMdxReference(\"DrawerExamples.DrawerPlacement\", true);\n if (!DrawerExamples.DrawerWithForm) _missingMdxReference(\"DrawerExamples.DrawerWithForm\", true);\n if (!DrawerExamples.DrawerWithNavigation) _missingMdxReference(\"DrawerExamples.DrawerWithNavigation\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(DocsTitle, {\n href: \"drawer\",\n children: _jsx(_components.h1, {\n children: \"Tailwind CSS Drawer - React\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use our Tailwind CSS drawer for side menus in your website.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"See below our simple \", _jsx(Code, {\n children: \"Drawer\"\n }), \" example that you can use in your Tailwind CSS and React project.\"]\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(CodePreview, {\n id: \"drawer\",\n component: _jsx(DrawerExamples.DrawerDefault, {}),\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: \" Drawer,\"\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: \" 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\", _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: \"DrawerDefault\"\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: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpen\"\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: \"openDrawer\"\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: \"setOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawer\"\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: \"setOpen\"\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: \"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: \"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: \"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: \"openDrawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer\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: \"Drawer\"\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: \"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: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawer\"\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: \"\\\"p-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: \"\\\"mb-6 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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"\\\"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: \"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: \"closeDrawer\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"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: \"\\\"mb-8 pr-4 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: \" Material Tailwind features multiple React and HTML components, all\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" written with Tailwind CSS classes and Material Design guidelines.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 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: \" \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: \"\\\"outlined\\\"\"\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: \" Documentation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"drawer-placement\",\n children: _jsx(_components.h2, {\n children: \"Drawer Placement\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"You can change the position of the \", _jsx(Code, {\n children: \"Drawer\"\n }), \" component using the \", _jsx(Code, {\n children: \"placement\"\n }), \" prop.\"]\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(DrawerExamples.DrawerPlacement, {}),\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: \" Drawer,\"\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: \" 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\", _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: \"DrawerPlacement\"\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: \"openTop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenTop\"\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: \"openRight\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenRight\"\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: \"openBottom\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenBottom\"\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: \"openLeft\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpenLeft\"\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: \"openDrawerTop\"\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: \"setOpenTop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawerTop\"\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: \"setOpenTop\"\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: \"#D2A8FF\"\n },\n children: \"openDrawerRight\"\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: \"setOpenRight\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawerRight\"\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: \"setOpenRight\"\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: \"#D2A8FF\"\n },\n children: \"openDrawerBottom\"\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: \"setOpenBottom\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawerBottom\"\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: \"setOpenBottom\"\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: \"#D2A8FF\"\n },\n children: \"openDrawerLeft\"\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: \"setOpenLeft\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawerLeft\"\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: \"setOpenLeft\"\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: \"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: \"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 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: \"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: \"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: \"openDrawerTop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer Top\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: \"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: \"openDrawerRight\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer Right\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: \"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: \"openDrawerBottom\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer Bottom\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: \"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: \"openDrawerLeft\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer Left\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: \"Drawer\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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: \"\\\"top\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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: \"openTop\"\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: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawerTop\"\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: \"\\\"p-4\\\"\"\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: \"\\\"mb-6 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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"\\\"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: \"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: \"closeDrawerTop\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"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: \"\\\"mb-8 pr-4 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: \" Material Tailwind features multiple React and HTML components, all\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" written with Tailwind CSS classes and Material Design guidelines.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 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: \" \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: \"\\\"outlined\\\"\"\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: \" Documentation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Drawer\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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: \"openRight\"\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: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawerRight\"\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: \"\\\"p-4\\\"\"\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: \"\\\"mb-6 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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"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: \"closeDrawerRight\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"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: \"\\\"mb-8 pr-4 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: \" Material Tailwind features multiple React and HTML components, all\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" written with Tailwind CSS classes and Material Design guidelines.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 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: \" \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: \"\\\"outlined\\\"\"\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: \" Documentation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Drawer\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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: \"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: \"openBottom\"\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: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawerBottom\"\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: \"\\\"p-4\\\"\"\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: \"\\\"mb-6 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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"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: \"closeDrawerBottom\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"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: \"\\\"mb-8 pr-4 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: \" Material Tailwind features multiple React and HTML components, all\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" written with Tailwind CSS classes and Material Design guidelines.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 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: \" \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: \"\\\"outlined\\\"\"\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: \" Documentation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Drawer\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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: \"\\\"left\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n 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: \"openLeft\"\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: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawerLeft\"\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: \"\\\"p-4\\\"\"\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: \"\\\"mb-6 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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"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: \"closeDrawerLeft\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"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: \"\\\"mb-8 pr-4 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: \" Material Tailwind features multiple React and HTML components, all\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" written with Tailwind CSS classes and Material Design guidelines.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 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: \" \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: \"\\\"outlined\\\"\"\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: \" Documentation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"drawer-with-navigation\",\n children: _jsx(_components.h2, {\n children: \"Drawer with Navigation\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this beautiful and versatile example to display navigation options in a hidden panel that can be accessed by clicking a button. These components are usually used in various apps and systems.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(DrawerExamples.DrawerWithNavigation, {}),\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: \" Drawer,\"\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: \" 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: \" 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: \" ListItemPrefix,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" ListItemSuffix,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Chip,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\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: \"DrawerWithNavigation\"\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: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpen\"\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: \"#D2A8FF\"\n },\n children: \"openDrawer\"\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: \"setOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawer\"\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: \"setOpen\"\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: \"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: \"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: \"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: \"openDrawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer\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: \"Drawer\"\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: \"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: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawer\"\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: \"\\\"mb-2 flex items-center justify-between p-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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"\\\"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: \"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: \"closeDrawer\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"List\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"ListItemPrefix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"\\\"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"fillRule\"\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: \"\\\"M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.04 16.5l.5-1.5h6.42l.5 1.5H8.29zm7.46-12a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0v-6zm-3 2.25a.75.75 0 00-1.5 0v3.75a.75.75 0 001.5 0V9zm-3 2.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.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: \"clipRule\"\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\", _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: \"ListItemPrefix\"\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: \" Dashboard\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"ListItemPrefix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"\\\"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"fillRule\"\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: \"\\\"M7.5 6v.75H5.513c-.96 0-1.764.724-1.865 1.679l-1.263 12A1.875 1.875 0 004.25 22.5h15.5a1.875 1.875 0 001.865-2.071l-1.263-12a1.875 1.875 0 00-1.865-1.679H16.5V6a4.5 4.5 0 10-9 0zM12 3a3 3 0 00-3 3v.75h6V6a3 3 0 00-3-3zm-3 8.25a3 3 0 106 0v-.75a.75.75 0 011.5 0v.75a4.5 4.5 0 11-9 0v-.75a.75.75 0 011.5 0v.75z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clipRule\"\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\", _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: \"ListItemPrefix\"\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: \" Analytics\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"ListItemSuffix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Chip\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"value\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"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: \"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: \"\\\"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: \"#79C0FF\"\n },\n children: \"className\"\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-full\\\"\"\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: \"ListItemSuffix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"ListItemPrefix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"\\\"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"fillRule\"\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: \"\\\"M6.912 3a3 3 0 00-2.868 2.118l-2.411 7.838a3 3 0 00-.133.882V18a3 3 0 003 3h15a3 3 0 003-3v-4.162c0-.299-.045-.596-.133-.882l-2.412-7.838A3 3 0 0017.088 3H6.912zm13.823 9.75l-2.213-7.191A1.5 1.5 0 0017.088 4.5H6.912a1.5 1.5 0 00-1.434 1.059L3.265 12.75H6.11a3 3 0 012.684 1.658l.256.513a1.5 1.5 0 001.342.829h3.218a1.5 1.5 0 001.342-.83l.256-.512a3 3 0 012.684-1.658h2.844z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clipRule\"\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\", _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: \"ListItemPrefix\"\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: \"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: \"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: \"ListItemPrefix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"\\\"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"fillRule\"\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: \"\\\"M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clipRule\"\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\", _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: \"ListItemPrefix\"\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: \" Profile\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"ListItemPrefix\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"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: \"\\\"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"fillRule\"\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: \"\\\"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 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.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 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-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 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.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: \"clipRule\"\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\", _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: \"ListItemPrefix\"\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: \" Tables\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"List\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"className\"\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-3 ml-5\\\"\"\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: \" Documentation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"drawer-with-form\",\n children: _jsx(_components.h2, {\n children: \"Drawer with Form\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Similar to the previous example, this drawer will display a form instead of displaying navigation options.\"\n }), \"\\n\", _jsx(CodePreview, {\n component: _jsx(DrawerExamples.DrawerWithForm, {}),\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: \" Drawer,\"\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: \" 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: \" Input,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Textarea,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\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: \"DrawerWithForm\"\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: \"open\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"setOpen\"\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: \"#D2A8FF\"\n },\n children: \"openDrawer\"\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: \"setOpen\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \"#D2A8FF\"\n },\n children: \"closeDrawer\"\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: \"setOpen\"\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: \"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: \"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: \"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: \"openDrawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"}\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eOpen Drawer\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: \"Drawer\"\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: \"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: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"onClose\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FF7B72\"\n },\n children: \"={\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"closeDrawer\"\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: \"\\\"flex items-center justify-between px-4 pb-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: \"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: \"\\\"h5\\\"\"\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: \" 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: \"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: \"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: \"\\\"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: \"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: \"closeDrawer\"\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: \"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: \"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: \"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: \"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: \"className\"\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-5 w-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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \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: \"\\\"mb-5 px-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: \"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\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Write the message and then click button.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"form\"\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-6 p-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: \"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-3\\\"\"\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: \" Your Email\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"Input\"\n }), _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: \"\\\"email\\\"\"\n }), _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: \"\\\"Email\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 }), _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: \"\\\"Subject\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Textarea\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"rows\"\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 }), _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: \"\\\"Message\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"\u003eSend Message\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: \"form\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"Drawer\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"drawer-props\",\n children: _jsx(_components.h2, {\n children: \"Drawer Props\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The following props are available for drawer component. These are the custom props\\nthat we've added for the drawer component and you can use all the other native props\\nas well.\", _jsx(_components.a, {\n href: \"#types-navigation\",\n children: \"Navigation\"\n })]\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: \"open\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"boolean\"\n })\n }), _jsx(_components.td, {\n children: \"Sets the open and close state of drawer\"\n }), _jsx(_components.td, {\n children: \"No default value it's a required prop.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"size\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"number\"\n })\n }), _jsx(_components.td, {\n children: \"Set's the width/height of the drawer depending on the drawer placement\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"250\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"placement\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"#types-placement\",\n children: \"Placement\"\n })\n }), _jsx(_components.td, {\n children: \"Sets the drawer placement\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"left\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"overlay\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"boolean\"\n })\n }), _jsx(_components.td, {\n children: \"Sets the overlay visibility for the drawer\"\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: \"overlayRef\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"#types-overlay-ref\",\n children: \"Overlay Ref\"\n })\n }), _jsx(_components.td, {\n children: \"Add reference for the drawer overlay\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"undefined\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"overlayProps\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"#types-overlay-props\",\n children: \"Overlay Props\"\n })\n }), _jsx(_components.td, {\n children: \"Sets the rest props for the drawer overlay\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"undefined\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"dismiss\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"#types-dismiss\",\n children: \"dismiss\"\n })\n }), _jsx(_components.td, {\n children: \"Change dismiss listeners for drawer\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"undefined\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"onClose\"\n })\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"function\"\n })\n }), _jsx(_components.td, {\n children: \"Sets the callback function for closing the drawer\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: \"undefined\"\n })\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"transition\"\n })\n }), _jsx(_components.td, {\n children: \"Framer Motion\"\n }), _jsx(_components.td, {\n children: \"Sets the transition for drawer\"\n }), _jsx(_components.td, {\n children: _jsx(Code, {\n children: _jsx(_components.code, {\n children: \"transition: { type: \\\"tween\\\", duration: 0.5 }\"\n })\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 drawer\"\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 drawer\"\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: \" { DrawerProps } \"\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-placement\",\n children: _jsx(_components.h2, {\n children: \"Types - Placement\"\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: \"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: \"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: \"placement\"\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: \"\\\"top\\\"\"\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: \"\\\"right\\\"\"\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: \"\\\"bottom\\\"\"\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: \"\\\"left\\\"\"\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-overlay-ref\",\n children: _jsx(_components.h2, {\n children: \"Types - Overlay Reference\"\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: \"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: \"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: \"overlayRef\"\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: \"#FFA657\"\n },\n children: \"React\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"Ref\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"HTMLDivElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e;\"\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"types-overlay-props\",\n children: _jsx(_components.h2, {\n children: \"Types - Overlay Props\"\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: \"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: \"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: \"overlayProps\"\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: \"#FFA657\"\n },\n children: \"React\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"ComponentProps\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\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: \"\u003e;\"\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(DocsTitle, {\n href: \"types-dismiss\",\n children: _jsx(_components.h2, {\n children: \"Types - Dismiss\"\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: \"dismissType\"\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: \"enabled\"\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: \"escapeKey\"\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: \"referencePress\"\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: \"referencePressEvent\"\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: \"\\\"pointerdown\\\"\"\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: \"\\\"mousedown\\\"\"\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: \"\\\"click\\\"\"\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: \"outsidePress\"\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 }), _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: \"#FFA657\"\n },\n children: \"event\"\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: \"#FFA657\"\n },\n children: \"MouseEvent\"\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: \"#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: \"outsidePressEvent\"\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: \"\\\"pointerdown\\\"\"\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: \"\\\"mousedown\\\"\"\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: \"\\\"click\\\"\"\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: \"ancestorScroll\"\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: \"bubbles\"\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: \"#79C0FF\"\n },\n children: \"boolean\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\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: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"escapeKey\"\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: \"outsidePress\"\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\", _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: \"drawer-theme\",\n children: _jsx(_components.h2, {\n children: \"Drawer Theme\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Learn how to customize the theme and styles for drawer component, the theme object for drawer component has two 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 drawer component.\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.strong, {\n children: \"B.\"\n }), \" The \", _jsx(Code, {\n children: \"styles\"\n }), \" object for customizing the theme and styles of drawer component.\", _jsx(\"br\", {})]\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can customize the theme and styles of drawer component by adding Tailwind CSS classes as key paired values for objects.\"\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(DocsTitle, {\n href: \"drawer-theme-object-type\",\n children: _jsx(_components.h2, {\n children: \"Drawer 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: \"DrawerStylesType\"\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: \"size\"\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: \"number\"\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: \"overlay\"\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: \"placement\"\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: \"\\\"top\\\"\"\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: \"\\\"right\\\"\"\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: \"\\\"bottom\\\"\"\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: \"\\\"left\\\"\"\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: \"overlayProps\"\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: \"#FFA657\"\n },\n children: \"React\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"ClassAttributes\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"HTMLDivElement\"\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: \"\u0026\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"React\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"HTMLAttributes\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFA657\"\n },\n children: \"HTMLDivElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n 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: \"#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\", _jsxs(_components.span, {\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: \"dismiss\"\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: \"enabled\"\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: \"escapeKey\"\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: \"referencePress\"\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: \"referencePressEvent\"\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: \"'pointerdown'\"\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: \"'mousedown'\"\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: \"'click'\"\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: \"outsidePress\"\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 }), _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: \"#FFA657\"\n },\n children: \"event\"\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: \"#FFA657\"\n },\n children: \"MouseEvent\"\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: \"#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: \"outsidePressEvent\"\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: \"'pointerdown'\"\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: \"'mousedown'\"\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: \"'click'\"\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: \"ancestorScroll\"\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: \"bubbles\"\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 }), _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: \"escapeKey\"\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: \"outsidePress\"\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\", _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: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D2A8FF\"\n },\n children: \"onClose\"\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: \"#79C0FF\"\n },\n children: \"void\"\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: \"transition\"\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: \"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: \"container\"\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: \"overlay\"\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: \"drawer\"\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: \" { DrawerStylesType } \"\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: \"drawer-theme-customization\",\n children: _jsx(_components.h2, {\n children: \"Drawer 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: \" drawer: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" defaultProps: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" size: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"300\"\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: \" overlay: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"true\"\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: \" placement: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"left\\\"\"\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: \" overlayProps: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"undefined\"\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: \"\\\"\\\"\"\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: \" dismiss: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"undefined\"\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: \" onClose: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"undefined\"\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: \" transition: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" type: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"tween\\\"\"\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: \" duration: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"0.3\"\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: \" 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: \" drawer: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" position: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"fixed\\\"\"\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: \" zIndex: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"z-[9999]\\\"\"\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: \" pointerEvents: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-auto\\\"\"\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: \" backgroundColor: \"\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: \" boxSizing: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"box-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: \" 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: \" boxShadow: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"shadow-2xl shadow-blue-gray-900/10\\\"\"\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: \" overlay: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" position: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"absolute\\\"\"\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: \" inset: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"inset-0\\\"\"\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: \" height: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-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: \" pointerEvents: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-auto\\\"\"\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: \" zIndex: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"z-[9995]\\\"\"\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: \" backgroundColor: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-black\\\"\"\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: \" backgroundOpacity: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"bg-opacity-60\\\"\"\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: \" backdropBlur: \"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"backdrop-blur-sm\\\"\"\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 })\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 drawer examples from \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks\",\n target: \"_blank\",\n children: \"Material Tailwind Blocks\"\n }), \".\"]\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","drawer"]},"__N_SSG":true},"page":"/docs/[...slug]","query":{"slug":["react","drawer"]},"buildId":"7xyavH52hdVKj4bs-JAX1","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 Drawer for React - Material Tailwind