Remove listbox prefix from SettingsListbox option components

33 files changed, 123 insertions, 137 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
index 128fc9e82f..098700ee21 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/SettingsListbox.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/SettingsListbox.tsx
@@ -1,7 +1,7 @@
 import { ScrollToAnchorId } from '../../../shared/ipc-types';
 import { useScrollToListItem } from '../../hooks';
 import { Listbox, ListboxProps } from '../../lib/components/listbox/Listbox';
-import { BaseOption, InputListboxOption, SplitListboxOption } from './components';
+import { BaseOption, InputOption, SplitOption } from './components';
 
 export type SettingsListboxProps<T> = Omit<ListboxProps<T>, 'animation'> & {
   anchorId?: ScrollToAnchorId;
@@ -24,8 +24,8 @@ const SettingsListboxNamespace = Object.assign(SettingsListbox, {
   Option: Listbox.Option,
   Options: Listbox.Options,
   BaseOption: BaseOption,
-  InputOption: InputListboxOption,
-  SplitOption: SplitListboxOption,
+  InputOption: InputOption,
+  SplitOption: SplitOption,
 });
 
 export { SettingsListboxNamespace as SettingsListbox };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/base-option/BaseOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/base-option/BaseOption.tsx
index ec50330c71..7b916cd027 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/base-option/BaseOption.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/base-option/BaseOption.tsx
@@ -1,7 +1,7 @@
 import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
 import { Listbox } from '../../../../lib/components/listbox/Listbox';
 
-export type DefaultListboxOptionProps<T> = ListboxOptionProps<T>;
+export type BaseOptionProps<T> = ListboxOptionProps<T>;
 
 export function BaseOption<T>({
   value,
@@ -9,7 +9,7 @@ export function BaseOption<T>({
   disabled,
   children,
   ...props
-}: DefaultListboxOptionProps<T>) {
+}: BaseOptionProps<T>) {
   return (
     <Listbox.Option level={1} value={value} animation={animation} disabled={disabled} {...props}>
       <Listbox.Option.Trigger>
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
index c0fbfd2b31..a57c6ded36 100644
--- 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
@@ -1,3 +1,3 @@
 export * from './base-option';
-export * from './input-listbox-option';
-export * from './split-listbox-option';
+export * from './input-option';
+export * from './split-option';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/InputListboxOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/InputListboxOption.tsx
deleted file mode 100644
index 4e055a5fb5..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/InputListboxOption.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
-import { Listbox } from '../../../../lib/components/listbox/Listbox';
-import {
-  InputListboxOptionInput,
-  InputListboxOptionLabel,
-  InputListboxOptionProvider,
-  InputListboxOptionTrigger,
-} from './components';
-
-export type InputListboxOptionProps<T> = ListboxOptionProps<T>;
-
-function InputListboxOption<T>({ children, ...props }: InputListboxOptionProps<T>) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const labelId = React.useId();
-  return (
-    <InputListboxOptionProvider inputRef={inputRef} labelId={labelId}>
-      <Listbox.Option level={1} {...props}>
-        <InputListboxOptionTrigger>
-          <Listbox.Option.Item>
-            <Listbox.Option.Content>{children}</Listbox.Option.Content>
-          </Listbox.Option.Item>
-        </InputListboxOptionTrigger>
-      </Listbox.Option>
-    </InputListboxOptionProvider>
-  );
-}
-
-const InputListboxOptionNamespace = Object.assign(InputListboxOption, {
-  Label: InputListboxOptionLabel,
-  Input: InputListboxOptionInput,
-});
-
-export { InputListboxOptionNamespace as InputListboxOption };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/index.ts
deleted file mode 100644
index 0dd9c17d78..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './input-listbox-option-input';
-export * from './input-listbox-option-label';
-export * from './input-listbox-option-context';
-export * from './input-listbox-option-trigger';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index dd3c5f5760..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-context/InputListboxOptionContext.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { createContext, ReactNode, useContext } from 'react';
-
-type InputListboxOptionContextType = {
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  labelId: string | undefined;
-};
-
-const InputListboxOptionContextContext = createContext<InputListboxOptionContextType | undefined>(
-  undefined,
-);
-
-type InputListboxOptionProviderProps = {
-  children: ReactNode;
-} & InputListboxOptionContextType;
-
-export const InputListboxOptionProvider = ({
-  children,
-  ...props
-}: InputListboxOptionProviderProps) => {
-  return (
-    <InputListboxOptionContextContext.Provider value={props}>
-      {children}
-    </InputListboxOptionContextContext.Provider>
-  );
-};
-
-export const useInputListboxOption = (): InputListboxOptionContextType => {
-  const context = useContext(InputListboxOptionContextContext);
-  if (!context) {
-    throw new Error('useInputListboxOption must be used within a InputListboxOptionProvider');
-  }
-  return context;
-};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index f59a35a516..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-context/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputListboxOptionContext';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index fcb33ef37f..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputListboxOptionInput';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index 31b3f095e7..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputListboxOptionLabel';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index 1785479636..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputListboxOptionTrigger';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/index.ts
deleted file mode 100644
index e7ed819a25..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputListboxOption';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/InputOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/InputOption.tsx
new file mode 100644
index 0000000000..3317901e62
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/InputOption.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
+import { Listbox } from '../../../../lib/components/listbox/Listbox';
+import { InputOptionInput, InputOptionLabel, InputOptionTrigger } from './components';
+import { InputOptionProvider } from './InputOptionContext';
+
+export type InputOptionProps<T> = ListboxOptionProps<T>;
+
+function InputOption<T>({ children, ...props }: InputOptionProps<T>) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const labelId = React.useId();
+  return (
+    <InputOptionProvider inputRef={inputRef} labelId={labelId}>
+      <Listbox.Option level={1} {...props}>
+        <InputOptionTrigger>
+          <Listbox.Option.Item>
+            <Listbox.Option.Content>{children}</Listbox.Option.Content>
+          </Listbox.Option.Item>
+        </InputOptionTrigger>
+      </Listbox.Option>
+    </InputOptionProvider>
+  );
+}
+
+const InputOptionNamespace = Object.assign(InputOption, {
+  Label: InputOptionLabel,
+  Input: InputOptionInput,
+});
+
+export { InputOptionNamespace as InputOption };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/InputOptionContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/InputOptionContext.tsx
new file mode 100644
index 0000000000..083456c356
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/InputOptionContext.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+type InputOptionContextType = {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  labelId: string | undefined;
+};
+
+const InputOptionContextContext = createContext<InputOptionContextType | undefined>(undefined);
+
+type InputOptionProviderProps = {
+  children: ReactNode;
+} & InputOptionContextType;
+
+export const InputOptionProvider = ({ children, ...props }: InputOptionProviderProps) => {
+  return (
+    <InputOptionContextContext.Provider value={props}>
+      {children}
+    </InputOptionContextContext.Provider>
+  );
+};
+
+export const useInputOptionContext = (): InputOptionContextType => {
+  const context = useContext(InputOptionContextContext);
+  if (!context) {
+    throw new Error('useInputOptionContext must be used within an InputOptionProvider');
+  }
+  return context;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/index.ts
new file mode 100644
index 0000000000..aa7b93b16e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/index.ts
@@ -0,0 +1,3 @@
+export * from './input-option-input';
+export * from './input-option-label';
+export * from './input-option-trigger';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/InputListboxOptionInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-input/InputOptionInput.tsx
index bd8d2935af..34f1b1b368 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-input/InputListboxOptionInput.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-input/InputOptionInput.tsx
@@ -4,25 +4,25 @@ 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';
+import { useInputOptionContext } from '../../InputOptionContext';
 
-type InputListboxOptionInputProps = {
+type InputOptionInputProps = {
   initialValue?: string;
   validate?: (value: string) => boolean;
   format?: (value: string) => string;
 } & ListItemTextFieldInputProps;
 
-export function InputListboxOptionInput({
+export function InputOptionInput({
   initialValue,
   validate,
   format,
   ...props
-}: InputListboxOptionInputProps) {
+}: InputOptionInputProps) {
   const { onValueChange: listBoxOnValueChange, value: listBoxValue } = useListboxContext<
     string | undefined
   >();
 
-  const { inputRef, labelId } = useInputListboxOption();
+  const { inputRef, labelId } = useInputOptionContext();
 
   const { value, invalid, dirty, blur, handleChange, reset } = useTextField({
     inputRef,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-input/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-input/index.ts
new file mode 100644
index 0000000000..adb7b801d4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-input/index.ts
@@ -0,0 +1 @@
+export * from './InputOptionInput';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/InputListboxOptionLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-label/InputOptionLabel.tsx
index 50034dee16..0a64b54f5d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-label/InputListboxOptionLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-label/InputOptionLabel.tsx
@@ -1,12 +1,12 @@
 import { Listbox } from '../../../../../../lib/components/listbox/Listbox';
-import { useInputListboxOption } from '../input-listbox-option-context';
+import { useInputOptionContext } from '../../InputOptionContext';
 
-export type InputListboxOptionLabelProps = {
+export type InputOptionLabelProps = {
   children: React.ReactNode;
 };
 
-export function InputListboxOptionLabel({ children }: InputListboxOptionLabelProps) {
-  const { labelId } = useInputListboxOption();
+export function InputOptionLabel({ children }: InputOptionLabelProps) {
+  const { labelId } = useInputOptionContext();
   return (
     <Listbox.Option.Group>
       <Listbox.Option.Icon icon="checkmark" />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-label/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-label/index.ts
new file mode 100644
index 0000000000..97ae323ddc
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-label/index.ts
@@ -0,0 +1 @@
+export * from './InputOptionLabel';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/InputListboxOptionTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-trigger/InputOptionTrigger.tsx
index 315b398f7d..b5341c590b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-listbox-option/components/input-listbox-option-trigger/InputListboxOptionTrigger.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-trigger/InputOptionTrigger.tsx
@@ -8,11 +8,11 @@ import {
   useListboxOptionContext,
 } from '../../../../../../lib/components/listbox/components/listbox-option/components';
 import { colors } from '../../../../../../lib/foundations';
-import { useInputListboxOption } from '../input-listbox-option-context';
+import { useInputOptionContext } from '../../InputOptionContext';
 
-export type InputListboxOptionTriggerProps = ListboxOptionTriggerProps;
+export type InputOptionTriggerProps = ListboxOptionTriggerProps;
 
-export const StyledListItemOptionTrigger = styled.li`
+export const StyledInputOptionTrigger = styled.li`
   &&[aria-selected='true'] {
     &:hover {
       ${StyledListItemOptionItem} {
@@ -27,12 +27,9 @@ export const StyledListItemOptionTrigger = styled.li`
   }
 `;
 
-export const InputListboxOptionTrigger = ({
-  children,
-  ...props
-}: InputListboxOptionTriggerProps) => {
+export const InputOptionTrigger = ({ children, ...props }: InputOptionTriggerProps) => {
   const { value } = useListboxOptionContext();
-  const { inputRef } = useInputListboxOption();
+  const { inputRef } = useInputOptionContext();
 
   const { value: selectedValue, focusedValue, setFocusedValue } = useListboxContext();
   const selected = value === selectedValue;
@@ -54,13 +51,13 @@ export const InputListboxOptionTrigger = ({
   }, [focused, inputRef, setFocusedValue, value]);
 
   return (
-    <StyledListItemOptionTrigger
+    <StyledInputOptionTrigger
       role="option"
       aria-selected={selected}
       tabIndex={tabIndex}
       onFocus={handleFocus}
       {...props}>
       {children}
-    </StyledListItemOptionTrigger>
+    </StyledInputOptionTrigger>
   );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-trigger/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-trigger/index.ts
new file mode 100644
index 0000000000..d5e7a3c910
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/components/input-option-trigger/index.ts
@@ -0,0 +1 @@
+export * from './InputOptionTrigger';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/index.ts
new file mode 100644
index 0000000000..99cdd8032a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/input-option/index.ts
@@ -0,0 +1 @@
+export * from './InputOption';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/SplitListboxOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/SplitListboxOption.tsx
deleted file mode 100644
index a2fdd86d57..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/SplitListboxOption.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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>;
-
-function SplitListboxOption<T>({ children, ...props }: ListBoxOptionWithNavigationProps<T>) {
-  return (
-    <Listbox.Option level={1} {...props}>
-      <Flex>{children}</Flex>
-    </Listbox.Option>
-  );
-}
-
-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/settings-listbox/components/split-listbox-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/index.ts
deleted file mode 100644
index a2dce96c0e..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './split-listbox-option-navigate-button';
-export * from './split-listbox-option-item';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index 4de2adf5b5..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SplitListboxOptionItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/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
deleted file mode 100644
index 2733912a04..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SplitListboxOptionNavigateButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/index.ts
deleted file mode 100644
index 89452272b3..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SplitListboxOption';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/SplitOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/SplitOption.tsx
new file mode 100644
index 0000000000..1e11445240
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/SplitOption.tsx
@@ -0,0 +1,22 @@
+import { Flex } from '../../../../lib/components';
+import { ListboxOptionProps } from '../../../../lib/components/listbox/components';
+import { Listbox } from '../../../../lib/components/listbox/Listbox';
+import { SplitOptionItem, SplitOptionNavigateButton } from './components';
+
+export type SplitOptionProps<T> = ListboxOptionProps<T>;
+
+function SplitOption<T>({ children, ...props }: SplitOptionProps<T>) {
+  return (
+    <Listbox.Option level={1} {...props}>
+      <Flex>{children}</Flex>
+    </Listbox.Option>
+  );
+}
+
+const SplitOptionNamespace = Object.assign(SplitOption, {
+  Item: SplitOptionItem,
+  NavigateButton: SplitOptionNavigateButton,
+  Label: Listbox.Option.Label,
+});
+
+export { SplitOptionNamespace as SplitOption };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/index.ts
new file mode 100644
index 0000000000..58ae01cb7f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/index.ts
@@ -0,0 +1,2 @@
+export * from './split-option-navigate-button';
+export * from './split-option-item';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-item/SplitOptionItem.tsx
index 799fd25bb9..3c4dc15d45 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-item/SplitOptionItem.tsx
@@ -2,7 +2,7 @@ import { Listbox } from '../../../../../../lib/components/listbox/Listbox';
 
 export type ListBoxOptionWithNavigationProps = React.ComponentPropsWithRef<'li'>;
 
-export function SplitListboxOptionItem({ children, ...props }: ListBoxOptionWithNavigationProps) {
+export function SplitOptionItem({ children, ...props }: ListBoxOptionWithNavigationProps) {
   return (
     <Listbox.Option.Trigger {...props}>
       <Listbox.Option.Item>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-item/index.ts
new file mode 100644
index 0000000000..c00939c9e7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-item/index.ts
@@ -0,0 +1 @@
+export * from './SplitOptionItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-navigate-button/SplitOptionNavigateButton.tsx
index d7bda6d648..c942f159c7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-navigate-button/SplitOptionNavigateButton.tsx
@@ -6,7 +6,7 @@ import { Flex, Icon } from '../../../../../../lib/components';
 import { colors } from '../../../../../../lib/foundations';
 import { useHistory } from '../../../../../../lib/history';
 
-export type NavigationListboxOptionNavigateProps = {
+export type NavigationOptionNavigateProps = {
   to: RoutePath;
 } & React.ComponentPropsWithRef<'button'>;
 
@@ -15,7 +15,7 @@ const StyledFlex = styled(Flex)`
   height: 100%;
 `;
 
-const StyledSplitListboxOptionNavigateButton = styled.button`
+const StyledSplitOptionNavigateButton = styled.button`
   position: relative;
   &&::before {
     content: '';
@@ -43,21 +43,21 @@ const StyledSplitListboxOptionNavigateButton = styled.button`
   }
 `;
 
-export function SplitListboxOptionNavigateButton({
+export function SplitOptionNavigateButton({
   to,
   children,
   ...props
-}: NavigationListboxOptionNavigateProps) {
+}: NavigationOptionNavigateProps) {
   const history = useHistory();
   const navigate = useCallback(() => {
     return history.push(to);
   }, [history, to]);
 
   return (
-    <StyledSplitListboxOptionNavigateButton onClick={navigate} {...props}>
+    <StyledSplitOptionNavigateButton onClick={navigate} {...props}>
       <StyledFlex $justifyContent="center" $alignItems="center" $padding={{ horizontal: 'medium' }}>
         <Icon icon={'chevron-right'} aria-hidden="true" />
       </StyledFlex>
-    </StyledSplitListboxOptionNavigateButton>
+    </StyledSplitOptionNavigateButton>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-navigate-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-navigate-button/index.ts
new file mode 100644
index 0000000000..280c18472a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/components/split-option-navigate-button/index.ts
@@ -0,0 +1 @@
+export * from './SplitOptionNavigateButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/index.ts
new file mode 100644
index 0000000000..14ff83a168
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-listbox/components/split-option/index.ts
@@ -0,0 +1 @@
+export * from './SplitOption';