function u() {
          return (0, c.jsxs)(a.WI, {
            title: 'Select Menus',
            lead: 'Menus display a list of choices on a transient sheet of material.',
            module: '@rmwc/select',
            styles: [
              '@rmwc/select/select.css',
              '@material/select/dist/mdc.select.css',
              '@material/floating-label/dist/mdc.floating-label.css',
              '@material/notched-outline/dist/mdc.notched-outline.css',
              '@material/line-ripple/dist/mdc.line-ripple.css',
              '@material/list/dist/mdc.list.css',
              '@material/menu/dist/mdc.menu.css',
              '@material/menu-surface/dist/mdc.menu-surface.css',
              '@material/ripple/dist/mdc.ripple.css'
            ],
            docsLink:
              'https://material.io/develop/web/components/input-controls/select-menus/',
            examples: s,
            children: [
              (0, c.jsx)(a.sb, { children: 'Select Styles' }),
              (0, c.jsx)(a.PJ, {
                children:
                  'Selects come in three different styles: standard,outlined, and enhanced.'
              }),
              (0, c.jsx)(a.q3, {
                label: 'Standard',
                children: (0, c.jsx)(l.P, {
                  label: 'Standard',
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'Outlined',
                children: (0, c.jsx)(l.P, {
                  label: 'Outlined',
                  outlined: !0,
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'Enhanced',
                children: (0, c.jsx)(l.P, {
                  label: 'Enhanced',
                  enhanced: !0,
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'With Options',
                children: (0, c.jsx)(l.P, {
                  label: 'With Icon',
                  defaultValue: 'Pizza',
                  helpText: 'Choose your favorite snack...',
                  icon: 'favorite',
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.sb, { children: 'Validation' }),
              (0, c.jsx)(a.q3, {
                label: 'Required',
                children: (0, c.jsx)(l.P, {
                  label: 'Required',
                  required: !0,
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'Invalid',
                children: (0, c.jsx)(l.P, {
                  label: 'Invalid',
                  invalid: !0,
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'Disabled',
                children: (0, c.jsx)(l.P, {
                  label: 'Disabled',
                  disabled: !0,
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.sb, { children: 'Controlled / Uncontrolled' }),
              (0, c.jsx)(a.PJ, {
                children:
                  'The Select component has the same behaviors as a native HTML select and be both controlled and uncontrolled.'
              }),
              (0, c.jsx)(a.q3, {
                label: 'Controlled',
                children: function () {
                  var e = i.useState('Cookies'),
                    t = (0, r.Z)(e, 2),
                    n = t[0],
                    a = t[1];
                  return (0, c.jsx)(l.P, {
                    label: 'Controlled',
                    options: ['Cookies', 'Pizza', 'Icecream'],
                    value: n,
                    onChange: function (e) {
                      return a(e.currentTarget.value);
                    }
                  });
                }
              }),
              (0, c.jsx)(a.q3, {
                label: 'Uncontrolled',
                children: (0, c.jsx)(l.P, {
                  label: 'Uncontrolled',
                  options: ['Cookies', 'Pizza', 'Icecream'],
                  defaultValue: 'Cookies',
                  onChange: function (e) {
                    return console.log(e.currentTarget.value);
                  }
                })
              }),
              (0, c.jsx)(a.sb, { children: 'Data Driven Selects' }),
              (0, c.jsx)(a.PJ, {
                children:
                  'To fit common use cases, RMWC Select provides a data driven method for rendering select menus. There are multiple formats you can pass data in, use the one that best fits your requirements. To make your label not float by default and to have an unselected blank value, set the `placeholder` prop to a blank string.'
              }),
              (0, c.jsx)(a.q3, {
                label: 'Formatted Options',
                children: function () {
                  return (0, c.jsx)(l.P, {
                    label: 'Array',
                    options: [
                      { label: 'Cookies', value: '1' },
                      {
                        label: 'Pizza',
                        value: '2',
                        'aria-disabled': !0,
                        tabIndex: -1
                      },
                      { label: 'Icecream', value: '3' }
                    ]
                  });
                }
              }),
              (0, c.jsx)(a.q3, {
                label: 'Value => Label Map',
                children: (0, c.jsx)(l.P, {
                  label: 'Object map',
                  options: { 1: 'Cookies', 2: 'Pizza', 3: 'Icecream' }
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'Array',
                children: (0, c.jsx)(l.P, {
                  label: 'Simple Array',
                  placeholder: '-- Select One --',
                  options: ['Cookies', 'Pizza', 'Icecream']
                })
              }),
              (0, c.jsx)(a.sb, { children: 'Manually Building the List' }),
              (0, c.jsx)(a.PJ, {
                children:
                  'If you want full control over the child `ListItems`, you can manually build the list yourself.'
              }),
              (0, c.jsx)(a.q3, {
                label: 'Manually Built',
                children: (0, c.jsxs)(l.P, {
                  label: 'Manual',
                  defaultValue: 'Cookies',
                  children: [
                    (0, c.jsx)('option', {
                      value: 'Cookies',
                      children: 'Cookies'
                    }),
                    (0, c.jsx)('option', { value: 'Pizza', children: 'Pizza' }),
                    (0, c.jsx)('option', {
                      value: 'Icecream',
                      children: 'Icecream'
                    })
                  ]
                })
              }),
              (0, c.jsx)(a.sb, { children: 'Option Groups' }),
              (0, c.jsx)(a.PJ, {
                children:
                  'Both native and enhanced Selects can contain option groups. Just nest additional options arrays in your data.'
              }),
              (0, c.jsx)(a.q3, {
                label: 'Option Groups: Formatted',
                children: (0, c.jsx)(l.P, {
                  label: 'Formatted',
                  enhanced: !0,
                  options: [
                    {
                      label: 'Dinner',
                      options: [{ label: 'Pizza', value: '2' }]
                    },
                    {
                      label: 'Dessert',
                      options: [
                        { label: 'Cookies', value: '1' },
                        { label: 'Icecream', value: '3' }
                      ]
                    }
                  ]
                })
              }),
              (0, c.jsx)(a.q3, {
                label: 'Options Groups: Manually Built',
                children: (0, c.jsxs)(l.P, {
                  label: 'Manually Built',
                  children: [
                    (0, c.jsx)('optgroup', {
                      label: 'Dinner',
                      children: (0, c.jsx)('option', {
                        value: 'Pizza',
                        children: 'Pizza'
                      })
                    }),
                    (0, c.jsxs)('optgroup', {
                      label: 'Dessert',
                      children: [
                        (0, c.jsx)('option', {
                          value: 'Cookies',
                          children: 'Cookies'
                        }),
                        (0, c.jsx)('option', {
                          value: 'Icecream',
                          children: 'Icecream'
                        })
                      ]
                    })
                  ]
                })
              }),
              (0, c.jsx)(a.PQ, {
                src: o,
                components: [{ displayName: 'Select', component: l.P }]
              })
            ]
          });
        }
Any additional items will be passed to the\\n         child ListItem as props