function f() {
          return (0, p.jsxs)(a.WI, {
            title: 'Drawers',
            lead: 'A navigation drawer slides in from the left and contains the navigation destinations for your app.',
            module: '@rmwc/drawer',
            styles: ['@material/drawer/dist/mdc.drawer.css'],
            docsLink: 'https://material.io/develop/web/components/drawers/',
            examples: s,
            children: [
              (0, p.jsx)(a.sb, { children: 'Permanent' }),
              (0, p.jsx)(a.PJ, {
                children:
                  'These are drawers that are permanently fixed inside of a view.'
              }),
              (0, p.jsx)(a.q3, {
                children: (0, p.jsxs)(l.dy, {
                  children: [
                    (0, p.jsxs)(l.OX, {
                      children: [
                        (0, p.jsx)(l.iI, { children: 'DrawerHeader' }),
                        (0, p.jsx)(l.I1, { children: 'Subtitle' })
                      ]
                    }),
                    (0, p.jsx)(l.sc, {
                      children: (0, p.jsxs)(c.a, {
                        children: [
                          (0, p.jsx)(u.HC, { children: 'Cookies' }),
                          (0, p.jsx)(u.HC, { children: 'Pizza' }),
                          (0, p.jsx)(u.HC, { children: 'Icecream' })
                        ]
                      })
                    })
                  ]
                })
              }),
              (0, p.jsx)(a.sb, { children: 'Dismissible' }),
              (0, p.jsx)(a.PJ, {
                children:
                  'These are drawers that can be toggled to an open or closed state inside of a view, but still takes up viewable space when closed.'
              }),
              (0, p.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, p.jsxs)(p.Fragment, {
                    children: [
                      (0, p.jsxs)('div', {
                        style: { overflow: 'hidden', position: 'relative' },
                        children: [
                          (0, p.jsxs)(l.dy, {
                            dismissible: !0,
                            open: n,
                            children: [
                              (0, p.jsxs)(l.OX, {
                                children: [
                                  (0, p.jsx)(l.iI, {
                                    children: 'DrawerHeader'
                                  }),
                                  (0, p.jsx)(l.I1, { children: 'Subtitle' })
                                ]
                              }),
                              (0, p.jsx)(l.sc, {
                                children: (0, p.jsxs)(c.a, {
                                  children: [
                                    (0, p.jsx)(u.HC, { children: 'Cookies' }),
                                    (0, p.jsx)(u.HC, { children: 'Pizza' }),
                                    (0, p.jsx)(u.HC, { children: 'Icecream' })
                                  ]
                                })
                              })
                            ]
                          }),
                          (0, p.jsx)(l.px, {
                            style: { minHeight: '15rem', padding: '1rem' },
                            children:
                              'DrawerAppContent is an optional component that will resize content when the dismissible drawer is open and closed. It must be placed directly after the Drawer component.'
                          })
                        ]
                      }),
                      (0, p.jsx)('div', {
                        style: { textAlign: 'center' },
                        children: (0, p.jsx)(d.z, {
                          onClick: function () {
                            return a(!n);
                          },
                          raised: !0,
                          children: 'Toggle Dismissible'
                        })
                      })
                    ]
                  });
                }
              }),
              (0, p.jsx)(a.sb, { children: 'Modal' }),
              (0, p.jsx)(a.PJ, {
                children:
                  'These are drawers that can be temporarily displayed fixed on the side of the entire viewport.'
              }),
              (0, p.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, p.jsxs)(p.Fragment, {
                    children: [
                      (0, p.jsxs)(l.dy, {
                        modal: !0,
                        open: n,
                        onClose: function () {
                          return a(!1);
                        },
                        children: [
                          (0, p.jsxs)(l.OX, {
                            children: [
                              (0, p.jsx)(l.iI, { children: 'DrawerHeader' }),
                              (0, p.jsx)(l.I1, { children: 'Subtitle' })
                            ]
                          }),
                          (0, p.jsx)(l.sc, {
                            children: (0, p.jsxs)(c.a, {
                              children: [
                                (0, p.jsx)(u.HC, { children: 'Cookies' }),
                                (0, p.jsx)(u.HC, { children: 'Pizza' }),
                                (0, p.jsx)(u.HC, { children: 'Icecream' })
                              ]
                            })
                          })
                        ]
                      }),
                      (0, p.jsx)(d.z, {
                        onClick: function () {
                          return a(!n);
                        },
                        raised: !0,
                        children: 'Toggle Modal'
                      })
                    ]
                  });
                }
              }),
              (0, p.jsx)(a.sb, { children: 'Right Side Drawers' }),
              (0, p.jsx)(a.PJ, {
                children:
                  "`material-components-web` doesn't directly support right hand drawers, but it respects the `dir` attribute on DOM elements. This simple hack will allow you to get drawers that appear from the right hand side of your app. As an aside, the `dir` attribute can be used to invert many other behaviors where the element is anchored on the left."
              }),
              (0, p.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, p.jsxs)(p.Fragment, {
                    children: [
                      (0, p.jsxs)(l.dy, {
                        dir: 'rtl',
                        modal: !0,
                        open: n,
                        onClose: function () {
                          return a(!1);
                        },
                        children: [
                          (0, p.jsxs)(l.OX, {
                            dir: 'ltr',
                            children: [
                              (0, p.jsx)(l.iI, { children: 'Right Drawer' }),
                              (0, p.jsx)(l.I1, { children: 'Subtitle' })
                            ]
                          }),
                          (0, p.jsx)(l.sc, {
                            dir: 'ltr',
                            children: (0, p.jsxs)(c.a, {
                              children: [
                                (0, p.jsx)(u.HC, { children: 'Cookies' }),
                                (0, p.jsx)(u.HC, { children: 'Pizza' }),
                                (0, p.jsx)(u.HC, { children: 'Icecream' })
                              ]
                            })
                          })
                        ]
                      }),
                      (0, p.jsx)(d.z, {
                        onClick: function () {
                          return a(!n);
                        },
                        raised: !0,
                        children: 'Toggle Right Drawer'
                      })
                    ]
                  });
                }
              }),
              (0, p.jsx)(a.PQ, {
                src: o,
                components: [
                  { displayName: 'Drawer', component: l.dy },
                  { displayName: 'DrawerHeader', component: l.OX },
                  { displayName: 'DrawerTitle', component: l.iI },
                  { displayName: 'DrawerSubtitle', component: l.I1 },
                  { displayName: 'DrawerContent', component: l.sc },
                  { displayName: 'DrawerAppContent', component: l.px }
                ]
              })
            ]
          });
        }
Set the content back to left-to-right