function l() {
          return (0, s.jsxs)(r.WI, {
            title: 'Top App Bar',
            lead: 'Top App Bar acts as a container for items such as application title, navigation icon, and action items.',
            module: '@rmwc/top-app-bar',
            styles: [
              '@material/top-app-bar/dist/mdc.top-app-bar.css',
              '@material/icon-button/dist/mdc.icon-button.css',
              '@material/ripple/dist/mdc.ripple.css',
              '@rmwc/icon/icon.css'
            ],
            docsLink: 'https://material.io/develop/web/components/top-app-bar/',
            examples: a,
            children: [
              (0, s.jsx)(r.PJ, {
                children:
                  'Whats the difference between the TopAppBar and Toolbar? Toolbar is technically deprecated (although it still works just fine). TopAppBar functionality continues to be worked on by the `material-components-web` team.'
              }),
              (0, s.jsx)(r.sb, { children: 'Basic Usage' }),
              (0, s.jsx)(r.q3, {
                label: 'Default',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsx)(o.PY, {
                      children: (0, s.jsx)(o.Xv, {
                        children: (0, s.jsx)(o.rO, {
                          children: (0, s.jsx)(o.Lw, { children: 'Default' })
                        })
                      })
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.q3, {
                label: 'Fully Featured',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsxs)(o.PY, {
                      children: [
                        (0, s.jsxs)(o.Xv, {
                          children: [
                            (0, s.jsxs)(o.rO, {
                              alignStart: !0,
                              children: [
                                (0, s.jsx)(o.Uj, { icon: 'menu' }),
                                (0, s.jsx)(o.Lw, { children: 'All Features' })
                              ]
                            }),
                            (0, s.jsxs)(o.rO, {
                              alignEnd: !0,
                              children: [
                                (0, s.jsx)(o.xc, { icon: 'favorite' }),
                                (0, s.jsx)(o.xc, { icon: 'star' }),
                                (0, s.jsx)(o.xc, { icon: 'mood' })
                              ]
                            })
                          ]
                        }),
                        (0, s.jsx)(o.Xv, {
                          children: (0, s.jsx)(o.rO, {
                            alignStart: !0,
                            children: (0, s.jsx)(o.Lw, {
                              children: 'Another Row'
                            })
                          })
                        })
                      ]
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.sb, { children: 'Simplified Usage' }),
              (0, s.jsx)(r.PJ, {
                children:
                  'You can use the `SimpleTopAppBar` component which contains a default template already laid out for you. Specify any actions you want as an array of props'
              }),
              (0, s.jsx)(r.q3, {
                label: 'Simple',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsx)(o.p9, {
                      title: 'test',
                      navigationIcon: !0,
                      onNav: function () {
                        return console.log('Navigate');
                      },
                      actionItems: [
                        {
                          icon: 'file_download',
                          onClick: function () {
                            return console.log('Do Something');
                          }
                        },
                        {
                          icon: 'print',
                          onClick: function () {
                            return console.log('Do Something');
                          }
                        },
                        {
                          icon: 'bookmark',
                          onClick: function () {
                            return console.log('Do Something');
                          }
                        }
                      ]
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.sb, { children: 'Variants' }),
              (0, s.jsx)(r.q3, {
                label: 'Fixed',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsx)(o.PY, {
                      fixed: !0,
                      children: (0, s.jsx)(o.Xv, {
                        children: (0, s.jsx)(o.rO, {
                          children: (0, s.jsx)(o.Lw, { children: 'Fixed' })
                        })
                      })
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.q3, {
                label: 'Dense',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsx)(o.PY, {
                      dense: !0,
                      children: (0, s.jsx)(o.Xv, {
                        children: (0, s.jsx)(o.rO, {
                          children: (0, s.jsx)(o.Lw, { children: 'Dense' })
                        })
                      })
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.q3, {
                label: 'Short',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsx)(o.PY, {
                      short: !0,
                      children: (0, s.jsxs)(o.Xv, {
                        children: [
                          (0, s.jsxs)(o.rO, {
                            children: [
                              (0, s.jsx)(o.Uj, { icon: 'menu' }),
                              (0, s.jsx)(o.Lw, { children: 'Short' })
                            ]
                          }),
                          (0, s.jsx)(o.rO, {
                            alignEnd: !0,
                            children: (0, s.jsx)(o.xc, { icon: 'favorite' })
                          })
                        ]
                      })
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.q3, {
                label: 'Prominent',
                iframe: !0,
                children: (0, s.jsxs)(s.Fragment, {
                  children: [
                    (0, s.jsx)(o.PY, {
                      prominent: !0,
                      children: (0, s.jsx)(o.Xv, {
                        children: (0, s.jsx)(o.rO, {
                          children: (0, s.jsx)(o.Lw, { children: 'Prominent' })
                        })
                      })
                    }),
                    (0, s.jsx)(o.Jl, {}),
                    (0, s.jsx)('div', {
                      style: { height: '100rem', padding: '1rem' },
                      children: 'Scroll Me'
                    })
                  ]
                })
              }),
              (0, s.jsx)(r.PQ, {
                src: i,
                components: [
                  { displayName: 'TopAppBar', component: o.PY },
                  { displayName: 'TopAppBarRow', component: o.Xv },
                  { displayName: 'TopAppBarSection', component: o.rO },
                  { displayName: 'TopAppBarTitle', component: o.Lw },
                  { displayName: 'TopAppBarNavigationIcon', component: o.Uj },
                  { displayName: 'TopAppBarActionItem', component: o.xc },
                  { displayName: 'TopAppBarFixedAdjust', component: o.Jl },
                  { displayName: 'SimpleTopAppBar', component: o.p9 }
                ]
              })
            ]
          });
        }
Additionally you can specify shortCollapsed to have it always minimized