function g() {
          return (0, h.jsxs)(a.WI, {
            title: 'Menus',
            lead: 'Menus display a list of choices on a transient sheet of material.',
            module: '@rmwc/menu',
            styles: [
              '@material/menu/dist/mdc.menu.css',
              '@material/menu-surface/dist/mdc.menu-surface.css',
              '@material/ripple/dist/mdc.ripple.css',
              '@material/list/dist/mdc.list.css',
              '@rmwc/icon/icon.css'
            ],
            docsLink: 'https://material.io/develop/web/components/menus/',
            examples: s,
            children: [
              (0, h.jsx)(a.sb, { children: 'Basic Usage' }),
              (0, h.jsx)(a.PJ, {
                children:
                  'You can compose a menu with the given components, and manually manage the open state. `Menu` expects MenuItems as children while `MenuSurface` is a generic container which can have anything as a child.'
              }),
              (0, h.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, h.jsxs)(l.W, {
                    children: [
                      (0, h.jsxs)(c.v2, {
                        open: n,
                        onSelect: function (e) {
                          return console.log(e.detail.index);
                        },
                        onClose: function (e) {
                          return a(!1);
                        },
                        children: [
                          (0, h.jsx)(c.sN, { children: 'Cookies' }),
                          (0, h.jsx)(c.sN, { children: 'Pizza' }),
                          (0, h.jsx)(u.Rx, {}),
                          (0, h.jsx)(c.sN, { children: 'Icecream' })
                        ]
                      }),
                      (0, h.jsx)(d.z, {
                        raised: !0,
                        onClick: function (e) {
                          return a(!n);
                        },
                        children: 'Menu'
                      })
                    ]
                  });
                }
              }),
              (0, h.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, h.jsxs)(l.W, {
                    children: [
                      (0, h.jsx)(l.g, {
                        open: n,
                        onClose: function (e) {
                          return a(!1);
                        },
                        children: (0, h.jsx)('div', {
                          style: { padding: '1rem', width: '8rem' },
                          children: 'Make the content whatever you want.'
                        })
                      }),
                      (0, h.jsx)(d.z, {
                        raised: !0,
                        onClick: function (e) {
                          return a(!n);
                        },
                        children: 'Menu Surface'
                      })
                    ]
                  });
                }
              }),
              (0, h.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, h.jsxs)(l.W, {
                    children: [
                      (0, h.jsx)(l.g, {
                        open: n,
                        onClose: function (e) {
                          return a(!1);
                        },
                        children: (0, h.jsx)('div', {
                          style: { padding: '1rem', width: '8rem' },
                          children: 'Menu'
                        })
                      }),
                      (0, h.jsx)(f.h, {
                        icon: 'menu',
                        onClick: function (e) {
                          return a(!n);
                        }
                      })
                    ]
                  });
                }
              }),
              (0, h.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!1),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, h.jsxs)(l.W, {
                    children: [
                      (0, h.jsxs)(c.v2, {
                        open: n,
                        onSelect: function (e) {
                          return console.log(e.detail.index);
                        },
                        onClose: function (e) {
                          return a(!1);
                        },
                        children: [
                          (0, h.jsx)(c.sN, { children: 'Item One' }),
                          (0, h.jsx)(c.sN, {
                            disabled: !0,
                            children: 'Item Two (disabled)'
                          }),
                          (0, h.jsx)(c.sN, { children: 'Item Three' })
                        ]
                      }),
                      (0, h.jsx)(d.z, {
                        raised: !0,
                        onClick: function () {
                          return a(!n);
                        },
                        children: 'Menu'
                      })
                    ]
                  });
                }
              }),
              (0, h.jsx)(a.sb, { children: 'Simplified usage' }),
              (0, h.jsx)(a.PJ, {
                children:
                  'RMWC provides a convenience `SimpleMenu` component that takes a handle as a prop, and manages the open state for you.'
              }),
              (0, h.jsx)(a.q3, {
                children: (0, h.jsxs)(c.O2, {
                  handle: (0, h.jsx)(d.z, { children: 'Simple Menu' }),
                  children: [
                    (0, h.jsx)(c.sN, { children: 'Cookies' }),
                    (0, h.jsx)(c.sN, { children: 'Pizza' }),
                    (0, h.jsx)(c.sN, { children: 'Icecream' })
                  ]
                })
              }),
              (0, h.jsx)(a.q3, {
                children: (0, h.jsx)(c.jf, {
                  handle: (0, h.jsx)(d.z, { children: 'Simple Menu Surface' }),
                  children: (0, h.jsx)('div', {
                    style: { padding: '1rem', width: '8rem' },
                    children: 'Make the content whatever you want.'
                  })
                })
              }),
              (0, h.jsx)(a.sb, { children: 'Anchoring' }),
              (0, h.jsx)(a.PJ, {
                children:
                  'By default, Menus will attempt to automatically position themselves, but this behavior can be overridden by setting the `anchorCorner` prop.'
              }),
              (0, h.jsx)(a.q3, {
                children: function () {
                  var e = i.useState('topLeft'),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, h.jsxs)(h.Fragment, {
                    children: [
                      (0, h.jsxs)(l.W, {
                        children: [
                          (0, h.jsx)(l.g, {
                            anchorCorner: n,
                            open: !0,
                            children: (0, h.jsxs)('div', {
                              style: { padding: '1rem', width: '8rem' },
                              children: ['anchorCorner: ', n]
                            })
                          }),
                          (0, h.jsx)(d.z, {
                            raised: !0,
                            label: 'Anchored Menu'
                          })
                        ]
                      }),
                      (0, h.jsx)(p.P, {
                        value: n,
                        label: 'anchorCorner',
                        onChange: function (e) {
                          return a(e.currentTarget.value);
                        },
                        options: [
                          'topLeft',
                          'topRight',
                          'bottomLeft',
                          'bottomRight',
                          'topStart',
                          'topEnd',
                          'bottomStart',
                          'bottomEnd'
                        ]
                      })
                    ]
                  });
                }
              }),
              (0, h.jsx)(a.sb, { children: 'Rendering through Portals' }),
              (0, h.jsx)(a.PJ, {
                children:
                  "Occasionally, you may find your menu being cut off from being inside a container that is styled to be `overflow:hidden`. RMWC provides a `renderToPortal` prop that lets you use React's portal functionality to render the menu dropdown in a different container."
              }),
              (0, h.jsx)(a.PJ, {
                children:
                  "You can specify any element or selector you want, but the simplest method is to pass `true` and use RMWC's built in `Portal` component."
              }),
              (0, h.jsx)(a.q3, {
                codeOnly: !0,
                children:
                  "\n          // Somewhere at the top level of your app\n          // Render the RMWC Portal\n          // You only have to do this once\n          import React from 'react';\n          import { Portal } from '@rmwc/base';\n\n          export default function App() {\n            return (\n              <div>\n                ...\n                <Portal />\n              </div>\n            )\n          }\n        "
              }),
              (0, h.jsx)(a.PJ, {
                children:
                  'Now you can use the `renderToPortal` prop. Below is a contrived example of a menu being cut off due to `overflow: hidden`.'
              }),
              (0, h.jsx)(a.q3, {
                children: function () {
                  var e = i.useState(!0),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1],
                    o = i.useState(!1),
                    s = (0, r.Z)(o, 2),
                    u = s[0],
                    p = s[1];
                  return (0, h.jsxs)(h.Fragment, {
                    children: [
                      (0, h.jsx)('div', {
                        style: {
                          marginBottom: '10rem',
                          height: '3.5rem',
                          overflow: 'hidden'
                        },
                        children: (0, h.jsxs)(l.W, {
                          children: [
                            (0, h.jsx)(d.z, {
                              raised: !0,
                              onClick: function () {
                                return p(!u);
                              },
                              children: 'Open Menu'
                            }),
                            (0, h.jsx)(c.v2, {
                              open: u,
                              onClose: function () {
                                return p(!1);
                              },
                              renderToPortal: n,
                              children: ['Cookies', 'Pizza', 'Icecream'].map(
                                function (e) {
                                  return (0, h.jsx)(c.sN, { children: e }, e);
                                }
                              )
                            })
                          ]
                        })
                      }),
                      (0, h.jsx)(m.X, {
                        checked: n,
                        onChange: function (e) {
                          return a(e.currentTarget.checked);
                        },
                        label: 'renderToPortal'
                      })
                    ]
                  });
                }
              }),
              (0, h.jsx)(a.PQ, {
                src: o,
                components: [
                  { displayName: 'Menu', component: c.v2 },
                  { displayName: 'MenuItem', component: c.sN },
                  { displayName: 'MenuSurface', component: l.g },
                  { displayName: 'MenuSurfaceAnchor', component: l.W },
                  { displayName: 'SimpleMenu', component: c.O2 },
                  { displayName: 'SimpleMenuSurface', component: c.jf }
                ]
              })
            ]
          });
        }
The handle can be any component you want