changed Select to Listbox

studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx

@@ -2,7 +2,7 @@ import { isNil } from 'lodash'
 import { useEffect, useState } from 'react'
 import { object, string } from 'yup'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Form, IconMail, Input, Modal, Select } from 'ui'
+import { Button, Form, IconMail, Input, Listbox, Modal } from 'ui'
 
 import { Member, Role } from 'types'
 import { checkPermissions, useParams, useStore } from 'hooks'
@@ -153,7 +153,7 @@ const InviteMemberButton = ({
                     <div className="space-y-4">
                       <div className="space-y-2">
                         {roles && (
-                          <Select
+                          <Listbox
                             id="role"
                             name="role"
                             label="Member role"
@@ -164,14 +164,15 @@ const InviteMemberButton = ({
                             }
                           >
                             {roles.map((role: any) => (
-                              <Select.Option key={role.id} value={role.id}>
+                              <Listbox.Option key={role.id} value={role.id} label={role.name}>
                                 {role.name}
-                              </Select.Option>
+                              </Listbox.Option>
                             ))}
-                          </Select>
+                          </Listbox>
                         )}
                       </div>
 
+
                       <Input
                         autoFocus
                         id="email"