Add and use SettingsListbox throughout app

33 files changed, 292 insertions, 243 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/SettingsListbox.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/SettingsListbox.tsx
new file mode 100644
index 0000000000..3e94f107d1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/SettingsListbox.tsx
@@ -0,0 +1,31 @@
+import { ScrollToAnchorId } from '../../../shared/ipc-types';
+import { useScrollToListItem } from '../../hooks';
+import { Listbox, ListboxProps } from '../../lib/components/listbox/Listbox';
+import { DefaultListboxOption, InputListboxOption, SplitListboxOption } from './components';
+
+export type SettingsListboxProps<T> = Omit<ListboxProps<T>, 'animation'> & {
+  anchorId?: ScrollToAnchorId;
+};
+
+function SettingsListbox<T>({ anchorId, ...props }: SettingsListboxProps<T>) {
+  const { ref, animation } = useScrollToListItem(anchorId);
+
+  return <Listbox ref={ref} animation={animation} {...props} />;
+}
+
+const SettingsListboxNamespace = Object.assign(SettingsListbox, {
+  Item: Listbox.Item,
+  Content: Listbox.Content,
+  Label: Listbox.Label,
+  Group: Listbox.Group,
+  Text: Listbox.Text,
+  Footer: Listbox.Footer,
+  Icon: Listbox.Icon,
+  Option: Listbox.Option,
+  Options: Listbox.Options,
+  BaseOption: DefaultListboxOption,
+  InputOption: InputListboxOption,
+  SplitOption: SplitListboxOption,
+});
+
+export { SettingsListboxNamespace as SettingsListbox };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/default-listbox-option/DefaultListboxOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/default-listbox-option/DefaultListboxOption.tsx
index ceb78299f0..3557b49b82 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/default-listbox-option/DefaultListboxOption.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/default-listbox-option/DefaultListboxOption.tsx
@@ -1,5 +1,5 @@
-import { ListboxOptionProps } from '../../lib/components/listbox/components';
-import { Listbox } from '../../lib/components/listbox/Listbox';
+import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
+import { Listbox } from '../../../../lib/components/listbox/Listbox';
 
 export type DefaultListboxOptionProps<T> = ListboxOptionProps<T>;
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/default-listbox-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/default-listbox-option/index.ts
index 1aafd5ae27..1aafd5ae27 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/default-listbox-option/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/default-listbox-option/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/index.ts
new file mode 100644
index 0000000000..8d5c63ffcf
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/index.ts
@@ -0,0 +1,3 @@
+export * from './default-listbox-option';
+export * from './input-listbox-option';
+export * from './split-listbox-option';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/InputListboxOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/InputListboxOption.tsx
index 68899fec46..4e055a5fb5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/InputListboxOption.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/InputListboxOption.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ListboxOptionProps } from '../../lib/components/listbox/components';
-import { Listbox } from '../../lib/components/listbox/Listbox';
+import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
+import { Listbox } from '../../../../lib/components/listbox/Listbox';
 import {
   InputListboxOptionInput,
   InputListboxOptionLabel,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/index.ts
index 0dd9c17d78..0dd9c17d78 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-context/InputListboxOptionContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-context/InputListboxOptionContext.tsx
index dd3c5f5760..dd3c5f5760 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-context/InputListboxOptionContext.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-context/InputListboxOptionContext.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-context/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-context/index.ts
index f59a35a516..f59a35a516 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-context/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-context/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-input/InputListboxOptionInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/InputListboxOptionInput.tsx
index 1ccd2ff078..bd8d2935af 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-input/InputListboxOptionInput.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/InputListboxOptionInput.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { ListItem } from '../../../../lib/components/list-item';
-import { ListItemTextFieldInputProps } from '../../../../lib/components/list-item/components/list-item-text-field/list-item-text-field-input';
-import { useListboxContext } from '../../../../lib/components/listbox/components';
-import { useTextField } from '../../../../lib/components/text-field';
+import { ListItem } from '../../../../../../lib/components/list-item';
+import { ListItemTextFieldInputProps } from '../../../../../../lib/components/list-item/components/list-item-text-field/list-item-text-field-input';
+import { useListboxContext } from '../../../../../../lib/components/listbox/components';
+import { useTextField } from '../../../../../../lib/components/text-field';
 import { useInputListboxOption } from '../input-listbox-option-context';
 
 type InputListboxOptionInputProps = {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-input/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/index.ts
index fcb33ef37f..fcb33ef37f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-input/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-label/InputListboxOptionLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/InputListboxOptionLabel.tsx
index 14e480762d..50034dee16 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-label/InputListboxOptionLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/InputListboxOptionLabel.tsx
@@ -1,4 +1,4 @@
-import { Listbox } from '../../../../lib/components/listbox/Listbox';
+import { Listbox } from '../../../../../../lib/components/listbox/Listbox';
 import { useInputListboxOption } from '../input-listbox-option-context';
 
 export type InputListboxOptionLabelProps = {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-label/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/index.ts
index 31b3f095e7..31b3f095e7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-label/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-trigger/InputListboxOptionTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/InputListboxOptionTrigger.tsx
index 574d707ee4..315b398f7d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-trigger/InputListboxOptionTrigger.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/InputListboxOptionTrigger.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { useListboxContext } from '../../../../lib/components/listbox/components';
-import { ListboxOptionTriggerProps } from '../../../../lib/components/listbox/components/listbox-option/components';
-import { useListboxOptionContext } from '../../../../lib/components/listbox/components/listbox-option/components/listbox-option-context/ListboxOptionContext';
-import { StyledListItemOptionItem } from '../../../../lib/components/listbox/components/listbox-option/components/listbox-option-item/ListboxOptionItem';
-import { colors } from '../../../../lib/foundations';
+import { useListboxContext } from '../../../../../../lib/components/listbox/components';
+import {
+  ListboxOptionTriggerProps,
+  StyledListItemOptionItem,
+  useListboxOptionContext,
+} from '../../../../../../lib/components/listbox/components/listbox-option/components';
+import { colors } from '../../../../../../lib/foundations';
 import { useInputListboxOption } from '../input-listbox-option-context';
 
 export type InputListboxOptionTriggerProps = ListboxOptionTriggerProps;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-trigger/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/index.ts
index 1785479636..1785479636 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/components/input-listbox-option-trigger/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/index.ts
index e7ed819a25..e7ed819a25 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/input-listbox-option/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/SplitListboxOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/SplitListboxOption.tsx
index 5126f0f62e..a2fdd86d57 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/SplitListboxOption.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/SplitListboxOption.tsx
@@ -1,6 +1,6 @@
-import { Flex } from '../../lib/components';
-import { ListboxOptionProps } from '../../lib/components/listbox/components';
-import { Listbox } from '../../lib/components/listbox/Listbox';
+import { Flex } from '../../../../lib/components';
+import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
+import { Listbox } from '../../../../lib/components/listbox/Listbox';
 import { SplitListboxOptionItem, SplitListboxOptionNavigateButton } from './components';
 
 export type ListBoxOptionWithNavigationProps<T> = ListboxOptionProps<T>;
@@ -16,6 +16,7 @@ function SplitListboxOption<T>({ children, ...props }: ListBoxOptionWithNavigati
 const SplitListboxOptionNamespace = Object.assign(SplitListboxOption, {
   Item: SplitListboxOptionItem,
   NavigateButton: SplitListboxOptionNavigateButton,
+  Label: Listbox.Option.Label,
 });
 
 export { SplitListboxOptionNamespace as SplitListboxOption };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/index.ts
index a2dce96c0e..a2dce96c0e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx
index a39db24dd6..799fd25bb9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx
@@ -1,4 +1,4 @@
-import { Listbox } from '../../../../lib/components/listbox/Listbox';
+import { Listbox } from '../../../../../../lib/components/listbox/Listbox';
 
 export type ListBoxOptionWithNavigationProps = React.ComponentPropsWithRef<'li'>;
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/index.ts
index 4de2adf5b5..4de2adf5b5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx
index 4a7eda59f2..d7bda6d648 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { RoutePath } from '../../../../../shared/routes';
-import { Flex, Icon } from '../../../../lib/components';
-import { colors } from '../../../../lib/foundations';
-import { useHistory } from '../../../../lib/history';
+import { RoutePath } from '../../../../../../../shared/routes';
+import { Flex, Icon } from '../../../../../../lib/components';
+import { colors } from '../../../../../../lib/foundations';
+import { useHistory } from '../../../../../../lib/history';
 
 export type NavigationListboxOptionNavigateProps = {
   to: RoutePath;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts
index 2733912a04..2733912a04 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/index.ts
index 89452272b3..89452272b3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/index.ts
new file mode 100644
index 0000000000..69e0ef86bf
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/index.ts
@@ -0,0 +1 @@
+export * from './SettingsListbox';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx
index b9c414b76c..ae0d1a2857 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx
@@ -10,13 +10,11 @@ import {
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { formatHtml } from '../../../../../lib/html-formatter';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 export function BridgeModeSetting() {
   const { setBridgeState: setBridgeStateImpl } = useAppContext();
@@ -24,8 +22,6 @@ export function BridgeModeSetting() {
 
   const bridgeState = useSelector((state) => state.settings.bridgeState);
 
-  const { ref, animation } = useScrollToListItem('bridge-mode-setting');
-
   const tunnelProtocol = useMemo(() => {
     const protocol = 'normal' in relaySettings ? relaySettings.normal.tunnelProtocol : 'any';
     return protocol === 'any' ? null : protocol;
@@ -58,15 +54,18 @@ export function BridgeModeSetting() {
   const footerText = bridgeModeFooterText(bridgeState === 'on', tunnelProtocol, transportProtocol);
 
   return (
-    <Listbox value={bridgeState} onValueChange={onSelectBridgeState} animation={animation}>
-      <Listbox.Item ref={ref}>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox
+      anchorId="bridge-mode-setting"
+      value={bridgeState}
+      onValueChange={onSelectBridgeState}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the shadowsocks bridge selector section.
               messages.pgettext('openvpn-settings-view', 'Bridge mode')
             }
-          </Listbox.Label>
+          </SettingsListbox.Label>
           <InfoButton>
             <>
               <ModalMessage>
@@ -87,23 +86,27 @@ export function BridgeModeSetting() {
               </ModalMessage>
             </>
           </InfoButton>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={'auto'}>{messages.gettext('Automatic')}</DefaultListboxOption>
-        <DefaultListboxOption
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={'auto'}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption
           value={'on'}
           disabled={tunnelProtocol !== 'openvpn' || transportProtocol === 'udp'}>
           {messages.gettext('On')}
-        </DefaultListboxOption>
-        <DefaultListboxOption value={'off'}>{messages.gettext('Off')}</DefaultListboxOption>
-      </Listbox.Options>
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={'off'}>
+          {messages.gettext('Off')}
+        </SettingsListbox.BaseOption>
+      </SettingsListbox.Options>
       {footerText !== undefined && (
-        <Listbox.Footer>
-          <Listbox.Text>{footerText}</Listbox.Text>
-        </Listbox.Footer>
+        <SettingsListbox.Footer>
+          <SettingsListbox.Text>{footerText}</SettingsListbox.Text>
+        </SettingsListbox.Footer>
       )}
-    </Listbox>
+    </SettingsListbox>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/open-vpn-port-setting/OpenVpnPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/open-vpn-port-setting/OpenVpnPortSetting.tsx
index 40fd659b45..9176c4a1a8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/open-vpn-port-setting/OpenVpnPortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/open-vpn-port-setting/OpenVpnPortSetting.tsx
@@ -4,11 +4,10 @@ import styled from 'styled-components';
 
 import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
 import { SelectorItem } from '../../../../cell/Selector';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 const UDP_PORTS = [1194, 1195, 1196, 1197, 1300, 1301, 1302];
 const TCP_PORTS = [80, 443];
@@ -55,10 +54,10 @@ export function OpenVpnPortSetting() {
   }
 
   return (
-    <Listbox value={port} onValueChange={onSelect}>
-      <Listbox.Item>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox value={port} onValueChange={onSelect}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {sprintf(
               // TRANSLATORS: The title for the port selector section.
               // TRANSLATORS: Available placeholders:
@@ -68,17 +67,19 @@ export function OpenVpnPortSetting() {
                 portType: protocol.toUpperCase(),
               },
             )}
-          </Listbox.Label>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
+          </SettingsListbox.Label>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={null}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
         {portItems[protocol].map((item) => (
-          <DefaultListboxOption key={item.value} value={item.value}>
+          <SettingsListbox.BaseOption key={item.value} value={item.value}>
             {item.label}
-          </DefaultListboxOption>
+          </SettingsListbox.BaseOption>
         ))}
-      </Listbox.Options>
-    </Listbox>
+      </SettingsListbox.Options>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
index 68751368cc..0c00e3f22d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
@@ -2,18 +2,15 @@ import React, { useCallback, useMemo } from 'react';
 
 import { RelayProtocol, wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { formatHtml } from '../../../../../lib/html-formatter';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 export function TransportProtocolSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const bridgeState = useSelector((state) => state.settings.bridgeState);
-  const { animation } = useScrollToListItem();
 
   const descriptionId = React.useId();
 
@@ -34,27 +31,31 @@ export function TransportProtocolSetting() {
   );
 
   return (
-    <Listbox animation={animation} value={protocol} onValueChange={onSelect}>
-      <Listbox.Item>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox value={protocol} onValueChange={onSelect}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {messages.pgettext('openvpn-settings-view', 'Transport protocol')}
-          </Listbox.Label>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
-        <DefaultListboxOption value={'tcp'}>{messages.gettext('TCP')}</DefaultListboxOption>
-        <DefaultListboxOption
+          </SettingsListbox.Label>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={null}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={'tcp'}>
+          {messages.gettext('TCP')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption
           value={'udp'}
           disabled={bridgeState === 'on'}
           aria-describedby={bridgeState === 'on' ? descriptionId : undefined}>
           {messages.gettext('UDP')}
-        </DefaultListboxOption>
-      </Listbox.Options>
+        </SettingsListbox.BaseOption>
+      </SettingsListbox.Options>
       {bridgeState === 'on' && (
-        <Listbox.Footer>
-          <Listbox.Text id={descriptionId}>
+        <SettingsListbox.Footer>
+          <SettingsListbox.Text id={descriptionId}>
             {formatHtml(
               // TRANSLATORS: This is used to instruct users how to make UDP mode
               // TRANSLATORS: available.
@@ -63,9 +64,9 @@ export function TransportProtocolSetting() {
                 'To activate UDP, change <b>Bridge mode</b> to <b>Automatic</b> or <b>Off</b>.',
               ),
             )}
-          </Listbox.Text>
-        </Listbox.Footer>
+          </SettingsListbox.Text>
+        </SettingsListbox.Footer>
       )}
-    </Listbox>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx
index 284f333915..5dcb0a951a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx
@@ -5,10 +5,8 @@ import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
 import { useAppContext } from '../../../../../context';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
-import { InputListboxOption } from '../../../../input-listbox-option';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 const ALLOWED_RANGE = [1, 65535];
 
@@ -49,22 +47,26 @@ export function ShadowsocksPortSetting() {
   }, []);
 
   return (
-    <Listbox value={selectedOption.value} onValueChange={setShadowsocksPort}>
-      <Listbox.Item>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox value={selectedOption.value} onValueChange={setShadowsocksPort}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the WireGuard port selector.
               messages.pgettext('wireguard-settings-view', 'Port')
             }
-          </Listbox.Label>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
-        <InputListboxOption value="custom">
-          <InputListboxOption.Label>{messages.gettext('Custom')}</InputListboxOption.Label>
-          <InputListboxOption.Input
+          </SettingsListbox.Label>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={null}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.InputOption value="custom">
+          <SettingsListbox.InputOption.Label>
+            {messages.gettext('Custom')}
+          </SettingsListbox.InputOption.Label>
+          <SettingsListbox.InputOption.Input
             aria-describedby={descriptionId}
             type="text"
             placeholder={messages.pgettext('wireguard-settings-view', 'Port')}
@@ -75,17 +77,17 @@ export function ShadowsocksPortSetting() {
             format={removeNonNumericCharacters}
             maxLength={`${ALLOWED_RANGE[1]}`.length}
           />
-        </InputListboxOption>
-      </Listbox.Options>
-      <Listbox.Footer>
-        <Listbox.Text id={descriptionId}>
+        </SettingsListbox.InputOption>
+      </SettingsListbox.Options>
+      <SettingsListbox.Footer>
+        <SettingsListbox.Text id={descriptionId}>
           {sprintf(
             // TRANSLATORS: Text describing the valid port range for a port selector.
             messages.pgettext('wireguard-settings-view', 'Valid range: %(min)s - %(max)s'),
             { min: ALLOWED_RANGE[0], max: ALLOWED_RANGE[1] },
           )}
-        </Listbox.Text>
-      </Listbox.Footer>
-    </Listbox>
+        </SettingsListbox.Text>
+      </SettingsListbox.Footer>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx
index be92e59b8e..83d7a3797b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx
@@ -7,12 +7,11 @@ import {
 } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
 import { SelectorItem } from '../../../../cell/Selector';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 const UDP2TCP_PORTS = [80, 5001];
 
@@ -44,15 +43,15 @@ export function UdpOverTcpPortSetting() {
   );
 
   return (
-    <Listbox value={port} onValueChange={selectPort}>
-      <Listbox.Item>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox value={port} onValueChange={selectPort}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the WireGuard port selector.
               messages.pgettext('wireguard-settings-view', 'Port')
             }
-          </Listbox.Label>
+          </SettingsListbox.Label>
           <InfoButton>
             <ModalMessage>
               {messages.pgettext(
@@ -61,18 +60,20 @@ export function UdpOverTcpPortSetting() {
               )}
             </ModalMessage>
           </InfoButton>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={'any'}>{messages.gettext('Automatic')}</DefaultListboxOption>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={'any'}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
         {portItems.map((item) => {
           return (
-            <DefaultListboxOption key={item.value} value={item.value}>
+            <SettingsListbox.BaseOption key={item.value} value={item.value}>
               {item.label}
-            </DefaultListboxOption>
+            </SettingsListbox.BaseOption>
           );
         })}
-      </Listbox.Options>
-    </Listbox>
+      </SettingsListbox.Options>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
index b26bfc6f58..80ca4991c8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
@@ -5,13 +5,11 @@ import { strings, urls } from '../../../../../../shared/constants';
 import { TunnelProtocol } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useTunnelProtocol } from '../../../../../lib/relay-settings-hooks';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
 import { ExternalLink } from '../../../../ExternalLink';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 export function TunnelProtocolSetting() {
   const tunnelProtocol = useTunnelProtocol();
@@ -24,8 +22,6 @@ export function TunnelProtocolSetting() {
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
   const openVpnDisabled = daita || multihop || quantumResistant;
 
-  const { animation } = useScrollToListItem();
-
   const featuresToDisableForOpenVpn = [];
   if (daita) {
     featuresToDisableForOpenVpn.push(strings.daita);
@@ -63,31 +59,34 @@ export function TunnelProtocolSetting() {
   );
 
   return (
-    <Listbox
+    <SettingsListbox
       onValueChange={setTunnelProtocol}
       value={tunnelProtocol}
-      animation={animation}
       aria-description={openVpnDisabled ? openVpnDisabledFooter : undefined}>
-      <Listbox.Item>
-        <Listbox.Content>
-          <Listbox.Label>{messages.pgettext('vpn-settings-view', 'Tunnel protocol')}</Listbox.Label>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={'wireguard'}>{strings.wireguard}</DefaultListboxOption>
-        <DefaultListboxOption value={'openvpn'} disabled={openVpnDisabled}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
+            {messages.pgettext('vpn-settings-view', 'Tunnel protocol')}
+          </SettingsListbox.Label>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={'wireguard'}>
+          {strings.wireguard}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={'openvpn'} disabled={openVpnDisabled}>
           {strings.openvpn}
-        </DefaultListboxOption>
-      </Listbox.Options>
+        </SettingsListbox.BaseOption>
+      </SettingsListbox.Options>
       {openVpnDisabled && (
-        <Listbox.Footer>
-          <Listbox.Text>{openVpnDisabledFooter}</Listbox.Text>
-        </Listbox.Footer>
+        <SettingsListbox.Footer>
+          <SettingsListbox.Text>{openVpnDisabledFooter}</SettingsListbox.Text>
+        </SettingsListbox.Footer>
       )}
       {tunnelProtocol === 'openvpn' && (
-        <Listbox.Footer>
+        <SettingsListbox.Footer>
           <div>
-            <Listbox.Text>
+            <SettingsListbox.Text>
               {sprintf(
                 // TRANSLATORS: Footer text for tunnel protocol selector when OpenVPN is selected.
                 // TRANSLATORS: Available placeholders:
@@ -98,7 +97,7 @@ export function TunnelProtocolSetting() {
                 ),
                 { openVpn: strings.openvpn },
               )}{' '}
-            </Listbox.Text>
+            </SettingsListbox.Text>
             <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
               <ExternalLink.Text>
                 {sprintf(
@@ -110,8 +109,8 @@ export function TunnelProtocolSetting() {
               <ExternalLink.Icon icon="external" size="small" />
             </ExternalLink>
           </div>
-        </Listbox.Footer>
+        </SettingsListbox.Footer>
       )}
-    </Listbox>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
index c6d59011d6..9c4f6b157b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
@@ -5,11 +5,9 @@ import { strings } from '../../../../../../shared/constants';
 import { IpVersion, wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 export function IpVersionSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
@@ -19,8 +17,6 @@ export function IpVersionSetting() {
     return ipVersion === 'any' ? null : ipVersion;
   }, [relaySettings]);
 
-  const { animation } = useScrollToListItem();
-
   const setIpVersion = useCallback(
     async (ipVersion: IpVersion | null) => {
       try {
@@ -37,24 +33,30 @@ export function IpVersionSetting() {
   );
 
   return (
-    <Listbox value={ipVersion} onValueChange={setIpVersion} animation={animation}>
-      <Listbox.Item>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox value={ipVersion} onValueChange={setIpVersion}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the WireGuard IP version selector.
               messages.pgettext('wireguard-settings-view', 'IP version')
             }
-          </Listbox.Label>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
-        <DefaultListboxOption value={'ipv4'}>{messages.gettext('IPv4')}</DefaultListboxOption>
-        <DefaultListboxOption value={'ipv6'}>{messages.gettext('IPv6')}</DefaultListboxOption>
-      </Listbox.Options>
-      <Listbox.Footer>
-        <Listbox.Text>
+          </SettingsListbox.Label>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={null}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={'ipv4'}>
+          {messages.gettext('IPv4')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={'ipv6'}>
+          {messages.gettext('IPv6')}
+        </SettingsListbox.BaseOption>
+      </SettingsListbox.Options>
+      <SettingsListbox.Footer>
+        <SettingsListbox.Text>
           {sprintf(
             // TRANSLATORS: The hint displayed below the WireGuard IP version selector.
             // TRANSLATORS: Available placeholders:
@@ -65,8 +67,8 @@ export function IpVersionSetting() {
             ),
             { wireguard: strings.wireguard },
           )}
-        </Listbox.Text>
-      </Listbox.Footer>
-    </Listbox>
+        </SettingsListbox.Text>
+      </SettingsListbox.Footer>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
index c9939df199..5589764c56 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
@@ -5,15 +5,12 @@ import { Constraint, ObfuscationType } from '../../../../../../shared/daemon-rpc
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { Text } from '../../../../../lib/components';
 import { FlexColumn } from '../../../../../lib/components/flex-column';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
-import { SplitListboxOption } from '../../../../split-listbox-option';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 export function formatPortForSubLabel(port: Constraint<number>): string {
   return port === 'any' ? messages.gettext('Automatic') : `${port.only}`;
@@ -23,8 +20,6 @@ export function ObfuscationSettings() {
   const { setObfuscationSettings } = useAppContext();
   const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
 
-  const { ref, animation } = useScrollToListItem('obfuscation-setting');
-
   // TRANSLATORS: Text showing currently selected port.
   // TRANSLATORS: Available placeholders:
   // TRANSLATORS: %(port)s - Can be either a number between 1 and 65535 or the text "Automatic".
@@ -43,15 +38,18 @@ export function ObfuscationSettings() {
   );
 
   return (
-    <Listbox onValueChange={selectObfuscationType} value={obfuscationType} animation={animation}>
-      <Listbox.Item ref={ref}>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox
+      anchorId="obfuscation-setting"
+      onValueChange={selectObfuscationType}
+      value={obfuscationType}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the WireGuard obfuscation selector.
               messages.pgettext('wireguard-settings-view', 'Obfuscation')
             }
-          </Listbox.Label>
+          </SettingsListbox.Label>
           <InfoButton>
             <ModalMessage>
               {
@@ -64,55 +62,55 @@ export function ObfuscationSettings() {
               }
             </ModalMessage>
           </InfoButton>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={ObfuscationType.auto}>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={ObfuscationType.auto}>
           {messages.gettext('Automatic')}
-        </DefaultListboxOption>
-        <SplitListboxOption value={ObfuscationType.shadowsocks}>
-          <SplitListboxOption.Item>
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.SplitOption value={ObfuscationType.shadowsocks}>
+          <SettingsListbox.SplitOption.Item>
             <FlexColumn>
-              <Listbox.Option.Label>
+              <SettingsListbox.SplitOption.Label>
                 {messages.pgettext('wireguard-settings-view', 'Shadowsocks')}
-              </Listbox.Option.Label>
+              </SettingsListbox.SplitOption.Label>
               <Text variant="labelTiny" color="whiteAlpha60">
                 {sprintf(subLabelTemplate, {
                   port: formatPortForSubLabel(obfuscationSettings.shadowsocksSettings.port),
                 })}
               </Text>
             </FlexColumn>
-          </SplitListboxOption.Item>
-          <SplitListboxOption.NavigateButton
+          </SettingsListbox.SplitOption.Item>
+          <SettingsListbox.SplitOption.NavigateButton
             to={RoutePath.shadowsocks}
             aria-description={messages.pgettext('accessibility', 'Shadowsocks settings')}
           />
-        </SplitListboxOption>
-        <SplitListboxOption value={ObfuscationType.udp2tcp}>
-          <SplitListboxOption.Item>
+        </SettingsListbox.SplitOption>
+        <SettingsListbox.SplitOption value={ObfuscationType.udp2tcp}>
+          <SettingsListbox.SplitOption.Item>
             <FlexColumn>
-              <Listbox.Option.Label>
+              <SettingsListbox.SplitOption.Label>
                 {messages.pgettext('wireguard-settings-view', 'UDP-over-TCP')}
-              </Listbox.Option.Label>
+              </SettingsListbox.SplitOption.Label>
               <Text variant="labelTiny" color="whiteAlpha60">
                 {sprintf(subLabelTemplate, {
                   port: formatPortForSubLabel(obfuscationSettings.udp2tcpSettings.port),
                 })}
               </Text>
             </FlexColumn>
-          </SplitListboxOption.Item>
-          <SplitListboxOption.NavigateButton
+          </SettingsListbox.SplitOption.Item>
+          <SettingsListbox.SplitOption.NavigateButton
             to={RoutePath.udpOverTcp}
             aria-description={messages.pgettext('accessibility', 'UDP-over-TCP settings')}
           />
-        </SplitListboxOption>
-        <DefaultListboxOption value={ObfuscationType.quic}>
+        </SettingsListbox.SplitOption>
+        <SettingsListbox.BaseOption value={ObfuscationType.quic}>
           {messages.pgettext('wireguard-settings-view', 'QUIC')}
-        </DefaultListboxOption>
-        <DefaultListboxOption value={ObfuscationType.off}>
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={ObfuscationType.off}>
           {messages.gettext('Off')}
-        </DefaultListboxOption>
-      </Listbox.Options>
-    </Listbox>
+        </SettingsListbox.BaseOption>
+      </SettingsListbox.Options>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
index 33819dec18..04fa29c9b9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
@@ -6,15 +6,12 @@ import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
 import { isInRanges } from '../../../../../../shared/utils';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
 import { SelectorItem } from '../../../../cell/Selector';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
 import InfoButton from '../../../../InfoButton';
-import { InputListboxOption } from '../../../../input-listbox-option';
 import { ModalMessage } from '../../../../Modal';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 const WIREUGARD_UDP_PORTS = [51820, 53];
 
@@ -26,8 +23,6 @@ export function PortSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
   const allowedPortRanges = useSelector((state) => state.settings.wireguardEndpointData.portRanges);
 
-  const { ref, animation } = useScrollToListItem('port-setting');
-
   const wireguardPortItems = useMemo<Array<SelectorItem<number>>>(
     () => WIREUGARD_UDP_PORTS.map(mapPortToSelectorItem),
     [],
@@ -87,15 +82,18 @@ export function PortSetting() {
     .join(', ');
 
   return (
-    <Listbox value={selectedOption.value} onValueChange={setWireguardPort} animation={animation}>
-      <Listbox.Item ref={ref}>
-        <Listbox.Content>
-          <Listbox.Label>
+    <SettingsListbox
+      anchorId="port-setting"
+      value={selectedOption.value}
+      onValueChange={setWireguardPort}>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the WireGuard port selector.
               messages.pgettext('wireguard-settings-view', 'Port')
             }
-          </Listbox.Label>
+          </SettingsListbox.Label>
           <InfoButton>
             <>
               <ModalMessage>
@@ -115,18 +113,22 @@ export function PortSetting() {
               </ModalMessage>
             </>
           </InfoButton>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={null}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
         {wireguardPortItems.map((item) => (
-          <DefaultListboxOption key={item.value} value={item.value}>
+          <SettingsListbox.BaseOption key={item.value} value={item.value}>
             {item.label}
-          </DefaultListboxOption>
+          </SettingsListbox.BaseOption>
         ))}
-        <InputListboxOption value="custom">
-          <InputListboxOption.Label>{messages.gettext('Custom')}</InputListboxOption.Label>
-          <InputListboxOption.Input
+        <SettingsListbox.InputOption value="custom">
+          <SettingsListbox.InputOption.Label>
+            {messages.gettext('Custom')}
+          </SettingsListbox.InputOption.Label>
+          <SettingsListbox.InputOption.Input
             initialValue={
               selectedOption.value === 'custom' ? selectedOption.port?.toString() : undefined
             }
@@ -137,8 +139,8 @@ export function PortSetting() {
             validate={validateStringValue}
             format={removeNonNumericCharacters}
           />
-        </InputListboxOption>
-      </Listbox.Options>
-    </Listbox>
+        </SettingsListbox.InputOption>
+      </SettingsListbox.Options>
+    </SettingsListbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
index 9507376879..d177685557 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
@@ -2,19 +2,15 @@ import { useCallback } from 'react';
 
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
-import { DefaultListboxOption } from '../../../../default-listbox-option';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
+import { SettingsListbox } from '../../../../settings-listbox';
 
 export function QuantumResistantSetting() {
   const { setWireguardQuantumResistant } = useAppContext();
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
 
-  const { ref, animation } = useScrollToListItem('quantum-resistant-setting');
-
   const selectQuantumResistant = useCallback(
     async (quantumResistant: boolean | null) => {
       await setWireguardQuantumResistant(quantumResistant ?? undefined);
@@ -23,20 +19,20 @@ export function QuantumResistantSetting() {
   );
 
   return (
-    <Listbox
-      animation={animation}
+    <SettingsListbox
+      anchorId="quantum-resistant-setting"
       value={quantumResistant ?? null}
       onValueChange={selectQuantumResistant}>
-      <Listbox.Item ref={ref}>
-        <Listbox.Content>
-          <Listbox.Label>
+      <SettingsListbox.Item>
+        <SettingsListbox.Content>
+          <SettingsListbox.Label>
             {
               // TRANSLATORS: The title for the WireGuard quantum resistance selector. This setting
               // TRANSLATORS: makes the cryptography resistant to the future abilities of quantum
               // TRANSLATORS: computers.
               messages.pgettext('wireguard-settings-view', 'Quantum-resistant tunnel')
             }
-          </Listbox.Label>
+          </SettingsListbox.Label>
           <InfoButton>
             <>
               <ModalMessage>
@@ -53,13 +49,19 @@ export function QuantumResistantSetting() {
               </ModalMessage>
             </>
           </InfoButton>
-        </Listbox.Content>
-      </Listbox.Item>
-      <Listbox.Options>
-        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
-        <DefaultListboxOption value={true}>{messages.gettext('On')}</DefaultListboxOption>
-        <DefaultListboxOption value={false}>{messages.gettext('Off')}</DefaultListboxOption>
-      </Listbox.Options>
-    </Listbox>
+        </SettingsListbox.Content>
+      </SettingsListbox.Item>
+      <SettingsListbox.Options>
+        <SettingsListbox.BaseOption value={null}>
+          {messages.gettext('Automatic')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={true}>
+          {messages.gettext('On')}
+        </SettingsListbox.BaseOption>
+        <SettingsListbox.BaseOption value={false}>
+          {messages.gettext('Off')}
+        </SettingsListbox.BaseOption>
+      </SettingsListbox.Options>
+    </SettingsListbox>
   );
 }