refactor: migrate dropdowns from reach-ui (#2315)

packages/desktop/app/javascripts/Renderer/Renderer.ts

@@ -118,7 +118,7 @@ async function configureWindow(remoteBridge: CrossProcessBridge) {
     /* Use custom title bar. Take the sn-titlebar-height off of
     the app content height so its not overflowing */
     sheet.insertRule(
-      'body, [data-reach-dialog-overlay], [data-mobile-popover] { padding-top: var(--sn-desktop-titlebar-height) !important; }',
+      'body, [data-dialog], [data-mobile-popover] { padding-top: var(--sn-desktop-titlebar-height) !important; }',
       sheet.cssRules.length,
     )
     sheet.insertRule(

packages/web/package.json

@@ -31,7 +31,6 @@
     "@lexical/react": "0.9.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@reach/disclosure": "^0.18.0",
-    "@reach/listbox": "^0.18.0",
     "@simplewebauthn/browser": "^7.1.0",
     "@standardnotes/authenticator": "^2.3.9",
     "@standardnotes/autobiography-theme": "^1.2.7",
@@ -61,7 +60,6 @@
     "@types/jest": "^29.2.4",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@types/styled-components": "^5.1.26",
     "@types/wicg-file-system-access": "^2020.9.5",
     "@zip.js/zip.js": "^2.6.60",
     "autoprefixer": "^10.4.13",
@@ -95,7 +93,6 @@
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
     "sass-loader": "*",
-    "styled-components": "^5.3.8",
     "svg-jest": "^1.0.1",
     "tailwindcss": "^3.2.7",
     "ts-jest": "^29.0.3",

packages/web/src/javascripts/Components/CameraCaptureModal/PhotoCaptureModal.tsx

@@ -155,7 +155,6 @@ const PhotoCaptureModal = ({ filesController, close }: Props) => {
             <label className="text-sm font-medium text-neutral">
               Device:
               <Dropdown
-                id={'photo-capture-device-dropdown'}
                 label={'Photo Capture Device'}
                 items={devicesAsDropdownItems}
                 value={recorder.selectedDevice.deviceId}
@@ -164,7 +163,6 @@ const PhotoCaptureModal = ({ filesController, close }: Props) => {
                 }}
                 classNameOverride={{
                   wrapper: 'mt-1',
-                  popover: 'z-modal',
                 }}
               />
             </label>

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -149,12 +149,8 @@ const NewNotePreferences: FunctionComponent<Props> = ({
         <div className="mt-3 text-mobile-menu-item md:text-menu-item">Note Type</div>
         <div className="mt-2">
           <Dropdown
-            classNameOverride={{
-              popover: 'z-modal',
-            }}
             disabled={disabled}
             fullWidth={true}
-            id="def-editor-dropdown"
             label="Select the default note type"
             items={editorItems}
             value={defaultEditorIdentifier}
@@ -166,12 +162,8 @@ const NewNotePreferences: FunctionComponent<Props> = ({
         <div className="mt-3 text-mobile-menu-item md:text-menu-item">Title Format</div>
         <div className="mt-2">
           <Dropdown
-            classNameOverride={{
-              popover: 'z-modal',
-            }}
             disabled={disabled}
             fullWidth={true}
-            id="def-new-note-title-format"
             label="Select the default note type"
             items={NoteTitleFormatOptions}
             value={newNoteTitleFormat}

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -1,15 +1,18 @@
-import { ListboxArrow, ListboxInput, ListboxList, ListboxPopover } from '@reach/listbox'
+import { useEffect } from 'react'
-import '@reach/listbox/styles.css'
-import { FunctionComponent } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { DropdownItem } from './DropdownItem'
-import StyledListboxButton from './StyledListboxButton'
-import StyledListboxOption from './StyledListboxOption'
 import { classNames } from '@standardnotes/snjs'
-import { VisuallyHidden } from '@ariakit/react'
+import {
+  Select,
+  SelectArrow,
+  SelectItem,
+  SelectLabel,
+  SelectPopover,
+  useSelectStore,
+  VisuallyHidden,
+} from '@ariakit/react'
 
 type DropdownProps = {
-  id: string
   label: string
   items: DropdownItem[]
   value: string
@@ -21,92 +24,77 @@ type DropdownProps = {
     popover?: string
   }
   fullWidth?: boolean
-  portal?: boolean
 }
 
-type ListboxButtonProps = DropdownItem & {
+const Dropdown = ({ label, value, onChange, items, disabled, fullWidth, classNameOverride = {} }: DropdownProps) => {
-  isExpanded: boolean
+  const select = useSelectStore({
-}
+    defaultValue: value,
+  })
 
-const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
+  const selectedValue = select.useState('value')
-  label,
+  const isExpanded = select.useState('open')
-  isExpanded,
-  icon,
-  iconClassName = '',
-}) => (
-  <>
-    <div className="flex items-center">
-      {icon ? (
-        <div className="mr-2 flex">
-          <Icon type={icon} className={iconClassName} size="small" />
-        </div>
-      ) : null}
-      <div className="text-base lg:text-sm">{label}</div>
-    </div>
-    <ListboxArrow className={`flex ${isExpanded ? 'rotate-180' : ''}`}>
-      <Icon type="menu-arrow-down" className="text-passive-1" size="small" />
-    </ListboxArrow>
-  </>
-)
 
-const Dropdown: FunctionComponent<DropdownProps> = ({
+  const currentItem = items.find((item) => item.value === selectedValue)
-  id,
-  label,
-  items,
-  value,
-  onChange,
-  disabled,
-  classNameOverride = {},
-  fullWidth,
-  portal = true,
-}) => {
-  const labelId = `${id}-label`
 
-  const handleChange = (value: string) => {
+  useEffect(() => {
-    const selectedItem = items.find((item) => item.value === value) as DropdownItem
+    return select.subscribe(
-
+      (state) => {
-    onChange(value, selectedItem)
+        if (state.value !== value) {
-  }
+          onChange(state.value, items.find((item) => item.value === state.value) as DropdownItem)
+        }
+      },
+      ['value'],
+    )
+  }, [items, onChange, select, value])
 
   return (
     <div className={classNameOverride.wrapper}>
-      <VisuallyHidden id={labelId}>{label}</VisuallyHidden>
+      <VisuallyHidden>
-      <ListboxInput value={value} onChange={handleChange} aria-labelledby={labelId} disabled={disabled}>
+        <SelectLabel store={select}>{label}</SelectLabel>
-        <StyledListboxButton
+      </VisuallyHidden>
-          className={classNames('w-full', !fullWidth && 'md:w-fit', classNameOverride.button)}
+      <Select
-          children={({ value, label, isExpanded }) => {
+        className={classNames(
-            const current = items.find((item) => item.value === value)
+          'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default py-1.5 px-3.5 text-sm text-foreground',
-            const icon = current ? current?.icon : null
+          disabled && 'opacity-50',
-            const iconClassName = current ? current?.iconClassName : null
+          classNameOverride.button,
-            return CustomDropdownButton({
+          !fullWidth && 'md:w-fit',
-              value: value ? value : label.toLowerCase(),
+        )}
-              label,
+        store={select}
-              isExpanded,
+        disabled={disabled}
-              ...(icon ? { icon } : null),
+      >
-              ...(iconClassName ? { iconClassName } : null),
+        <div className="flex items-center">
-            })
+          {currentItem?.icon ? (
-          }}
+            <div className="mr-2 flex">
-        />
+              <Icon type={currentItem.icon} className={currentItem.iconClassName ?? ''} size="small" />
-        <ListboxPopover
+            </div>
-          portal={portal}
+          ) : null}
-          className={classNames('sn-dropdown sn-dropdown-popover', classNameOverride.popover)}
+          <div className="text-base lg:text-sm">{currentItem?.label}</div>
-        >
+        </div>
-          <div className="sn-component">
+        <SelectArrow className={classNames('text-passive-1', isExpanded && 'rotate-180')} />
-            <ListboxList>
+      </Select>
-              {items.map((item) => (
+      <SelectPopover
-                <StyledListboxOption key={item.value} value={item.value} label={item.label} disabled={item.disabled}>
+        store={select}
-                  {item.icon ? (
+        className={classNames(
-                    <div className="mr-3 flex">
+          'max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-border bg-default py-1',
-                      <Icon type={item.icon} className={item.iconClassName ?? ''} size="small" />
+          classNameOverride.popover,
-                    </div>
+        )}
-                  ) : null}
+      >
-                  <div className="text-base lg:text-sm">{item.label}</div>
+        {items.map((item) => (
-                </StyledListboxOption>
+          <SelectItem
-              ))}
+            className="flex cursor-pointer items-center bg-transparent py-1.5 px-3 text-sm text-text hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info [&[data-active-item]]:text-info-contrast"
-            </ListboxList>
+            key={item.value}
-          </div>
+            value={item.value}
-        </ListboxPopover>
+            disabled={item.disabled}
-      </ListboxInput>
+          >
+            {item.icon ? (
+              <div className="mr-3 flex">
+                <Icon type={item.icon} className={item.iconClassName ?? ''} size="small" />
+              </div>
+            ) : null}
+            <div className="text-base lg:text-sm">{item.label}</div>
+          </SelectItem>
+        ))}
+      </SelectPopover>
     </div>
   )
 }

packages/web/src/javascripts/Components/Dropdown/StyledListboxButton.tsx

@@ -1,20 +0,0 @@
-import { ListboxButton } from '@reach/listbox'
-import styled from 'styled-components'
-
-const StyledListboxButton = styled(ListboxButton)`
-  &[data-reach-listbox-button] {
-    background-color: var(--sn-stylekit-background-color);
-    border-radius: 0.25rem;
-    border: 1px solid var(--sn-stylekit-border-color);
-    color: var(--sn-stylekit-contrast-foreground-color);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    min-width: 13.75rem;
-    padding-bottom: 0.375rem;
-    padding-left: 0.875rem;
-    padding-right: 0.875rem;
-    padding-top: 0.375rem;
-  }
-`
-
-export default StyledListboxButton

packages/web/src/javascripts/Components/Dropdown/StyledListboxOption.tsx

@@ -1,38 +0,0 @@
-import { ListboxOption } from '@reach/listbox'
-import styled from 'styled-components'
-
-const StyledListboxOption = styled(ListboxOption)`
-  &[data-reach-listbox-option] {
-    align-items: center;
-    background-color: transparent;
-    border: none;
-    color: var(--sn-stylekit-contrast-foreground-color);
-    cursor: pointer;
-    display: flex;
-    font-size: 0.875rem;
-    padding-bottom: 0.375rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.375rem;
-    text-align: left;
-    width: 100%;
-
-    &[data-current-selected] {
-      color: var(--sn-stylekit-info-color);
-      background-color: var(--sn-stylekit-info-backdrop-color);
-    }
-
-    &:hover {
-      background-color: var(--sn-stylekit-contrast-background-color);
-      color: var(--sn-stylekit-foreground-color);
-    }
-
-    &:focus {
-      background-color: var(--sn-stylekit-info-backdrop-color);
-      box-shadow: none;
-      outline: none;
-    }
-  }
-`
-
-export default StyledListboxOption

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -14,19 +14,10 @@ type Props = {
   platform: Platform
   useIconGrid?: boolean
   iconGridClassName?: string
-  portalDropdown?: boolean
   className?: string
 }
 
-const IconPicker = ({
+const IconPicker = ({ selectedValue, onIconChange, platform, className, useIconGrid, iconGridClassName }: Props) => {
-  selectedValue,
-  onIconChange,
-  platform,
-  className,
-  useIconGrid,
-  portalDropdown,
-  iconGridClassName,
-}: Props) => {
   const iconKeys = useMemo(() => Object.keys(IconNameToSvgMapping), [])
 
   const iconOptions = useMemo(
@@ -127,12 +118,10 @@ const IconPicker = ({
           ) : (
             <Dropdown
               fullWidth={true}
-              id="change-tag-icon-dropdown"
               label="Change the icon for a tag"
               items={iconOptions}
               value={selectedValue as string}
               onChange={handleIconChange}
-              portal={portalDropdown}
             />
           ))}
         {currentType === 'emoji' && (

packages/web/src/javascripts/Components/NotesOptions/SuperExportModal.tsx

@@ -47,7 +47,6 @@ const SuperExportModal = ({ exportNotes, close }: Props) => {
           We detected your selection includes Super notes. How do you want to export them?
         </div>
         <Dropdown
-          id="export-format-dropdown"
           label="Super notes export format"
           items={[
             { label: 'Keep as Super', value: 'json' },
@@ -61,7 +60,6 @@ const SuperExportModal = ({ exportNotes, close }: Props) => {
               value as PrefValue[PrefKey.SuperNoteExportFormat],
             )
           }}
-          portal={false}
         />
       </div>
       <div className="text-passive-0">

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -23,8 +23,8 @@ export const usePopoverCloseOnClickOutside = ({
       const isAnchorElement = anchorElement ? anchorElement === event.target || anchorElement.contains(target) : false
       const closestPopoverId = target.closest('[data-popover]')?.getAttribute('data-popover')
       const isDescendantOfChildPopover = closestPopoverId && childPopovers.has(closestPopoverId)
-      const isPopoverInModal = popoverElement?.closest('[aria-modal="true"]')
+      const isPopoverInModal = popoverElement?.closest('[data-dialog]')
-      const isDescendantOfModal = isPopoverInModal ? false : !!target.closest('[aria-modal="true"]')
+      const isDescendantOfModal = isPopoverInModal ? false : !!target.closest('[data-dialog]')
 
       if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfModal) {
         if (!disabled) {

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -127,15 +127,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
               <Text>Theme to be used for system light mode:</Text>
               <div className="mt-2">
                 <Dropdown
-                  id="auto-light-theme-dropdown"
                   label="Select the automatic light theme"
                   items={themeItems}
                   value={autoLightTheme}
                   onChange={changeAutoLightTheme}
                   disabled={!useDeviceSettings}
-                  classNameOverride={{
-                    popover: '!z-modal',
-                  }}
                 />
               </div>
             </div>
@@ -145,15 +141,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
               <Text>Theme to be used for system dark mode:</Text>
               <div className="mt-2">
                 <Dropdown
-                  id="auto-dark-theme-dropdown"
                   label="Select the automatic dark theme"
                   items={themeItems}
                   value={autoDarkTheme}
                   onChange={changeAutoDarkTheme}
                   disabled={!useDeviceSettings}
-                  classNameOverride={{
-                    popover: '!z-modal',
-                  }}
                 />
               </div>
             </div>

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -94,14 +94,10 @@ const EditorDefaults = ({ application }: Props) => {
             <Text>Sets the font size in plaintext and Super notes</Text>
             <div className="mt-2">
               <Dropdown
-                id="def-font-size"
                 label="Select the font size for plaintext notes"
                 items={fontSizeDropdownOptions}
                 value={fontSize}
                 onChange={handleFontSizeChange}
-                classNameOverride={{
-                  popover: '!z-modal',
-                }}
               />
             </div>
           </div>
@@ -111,14 +107,10 @@ const EditorDefaults = ({ application }: Props) => {
             <Text>Sets the line height (leading) in plaintext and Super notes</Text>
             <div className="mt-2">
               <Dropdown
-                id="def-line-height"
                 label="Select the line height for plaintext notes"
                 items={lineHeightDropdownOptions}
                 value={lineHeight}
                 onChange={handleLineHeightChange}
-                classNameOverride={{
-                  popover: '!z-modal',
-                }}
               />
             </div>
           </div>

packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx

@@ -125,14 +125,10 @@ const EmailBackups = ({ application }: Props) => {
               <Spinner className="h-4 w-4" />
             ) : (
               <Dropdown
-                id="def-editor-dropdown"
                 label="Select email frequency"
                 items={emailFrequencyOptions}
                 value={emailFrequency}
                 onChange={handleEmailFrequencyChange}
-                classNameOverride={{
-                  popover: '!z-modal',
-                }}
               />
             )}
           </div>

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx

@@ -131,7 +131,6 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
                   }}
                   platform={platform}
                   useIconGrid={true}
-                  portalDropdown={false}
                 />
               </div>
             </Popover>

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useMemo } from 'react'
-import styled from 'styled-components'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
@@ -14,19 +13,6 @@ type Props = {
   menu: PreferencesMenu
 }
 
-const StyledDropdown = styled(Dropdown)`
-  [data-reach-listbox-button] {
-    background: var(--sn-stylekit-contrast-background-color);
-    color: var(--sn-stylekit-info-color);
-    font-weight: bold;
-    padding: 0.55rem 0.875rem;
-
-    [data-reach-listbox-arrow] svg {
-      fill: var(--sn-stylekit-info-color);
-    }
-  }
-`
-
 const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   const application = useApplication()
   const { selectedPaneId, selectPane, menuItems } = menu
@@ -83,8 +69,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
         ))}
       </div>
       <div className="md:hidden">
-        <StyledDropdown
+        <Dropdown
-          id="preferences-menu"
           items={dropdownMenuItems}
           label="Preferences Menu"
           value={selectedPaneId}
@@ -94,8 +79,8 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
           classNameOverride={{
             wrapper: 'relative',
             popover: 'bottom-full w-full max-h-max',
+            button: 'focus:outline-none focus:shadow-none focus:ring-none',
           }}
-          portal={false}
         />
       </div>
     </div>

packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx

@@ -181,7 +181,6 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
                   }}
                   platform={platform}
                   useIconGrid={true}
-                  portalDropdown={false}
                 />
               </div>
             </Popover>

packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx

@@ -90,7 +90,6 @@ const CodeOptionsPlugin = () => {
     <>
       <div className="absolute top-2 right-6 rounded border border-border bg-default p-2">
         <Dropdown
-          id="code-language-dropdown"
           label="Change code block language"
           items={CODE_LANGUAGE_OPTIONS.map(([value, label]) => ({
             label,

yarn.lock

@@ -223,7 +223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.18.6":
+"@babel/helper-annotate-as-pure@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
   dependencies:
@@ -384,7 +384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6":
+"@babel/helper-module-imports@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-module-imports@npm:7.18.6"
   dependencies:
@@ -2063,7 +2063,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.3, @babel/traverse@npm:^7.19.4, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.7.4":
+"@babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.3, @babel/traverse@npm:^7.19.4, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.7.4":
   version: 7.19.4
   resolution: "@babel/traverse@npm:7.19.4"
   dependencies:
@@ -2466,36 +2466,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "@emotion/is-prop-valid@npm:1.2.0"
-  dependencies:
-    "@emotion/memoize": ^0.8.0
-  checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633
-  languageName: node
-  linkType: hard
-
-"@emotion/memoize@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/memoize@npm:0.8.0"
-  checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928
-  languageName: node
-  linkType: hard
-
-"@emotion/stylis@npm:^0.8.4":
-  version: 0.8.5
-  resolution: "@emotion/stylis@npm:0.8.5"
-  checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
-  languageName: node
-  linkType: hard
-
-"@emotion/unitless@npm:^0.7.4":
-  version: 0.7.5
-  resolution: "@emotion/unitless@npm:0.7.5"
-  checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
-  languageName: node
-  linkType: hard
-
 "@eslint/eslintrc@npm:^1.3.3":
   version: 1.3.3
   resolution: "@eslint/eslintrc@npm:1.3.3"
@@ -4272,18 +4242,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/descendants@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/descendants@npm:0.18.0"
-  dependencies:
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 54e1e9302e1db4c924de62d53b6081a1c3c336325119352541c2f3a67ebfb88f282b36e564a87b6defd54ac55556f7237e2c50ab6439d86c8a85daf9877b0fb2
-  languageName: node
-  linkType: hard
-
 "@reach/disclosure@npm:^0.18.0":
   version: 0.18.0
   resolution: "@reach/disclosure@npm:0.18.0"
@@ -4298,44 +4256,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/listbox@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "@reach/listbox@npm:0.18.0"
-  dependencies:
-    "@reach/auto-id": 0.18.0
-    "@reach/descendants": 0.18.0
-    "@reach/machine": 0.18.0
-    "@reach/polymorphic": 0.18.0
-    "@reach/popover": 0.18.0
-    "@reach/utils": 0.18.0
-    tiny-invariant: ^1.2.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: ee759b9cd834253019c679bbf4ff657fc9563b0326e0f0a654dba9d3764b1e496ea2c83aa7dd05563cbc91047673574f52d0400adedc9866f86b90a03ed39915
-  languageName: node
-  linkType: hard
-
-"@reach/machine@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/machine@npm:0.18.0"
-  dependencies:
-    "@reach/utils": 0.18.0
-    "@xstate/fsm": 1.4.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 29e30ab0dd6e296a3d102309cfd8c53d0e419b6cf975bd96ba9e4bfe2d626df549f5c96026f415d6c2bce2efd91f7002ba40f0a5a3f34618198ac3d23577f6ff
-  languageName: node
-  linkType: hard
-
-"@reach/observe-rect@npm:1.2.0":
-  version: 1.2.0
-  resolution: "@reach/observe-rect@npm:1.2.0"
-  checksum: 7dd903eeaad0e22c6d973bd26265d91eadba56ab5134701ceb3e85214db75339fae94aa7e8b88a65e8daa64bc7cf1b915d4ffcdfd324466b561dc6adc3c6e070
-  languageName: node
-  linkType: hard
-
 "@reach/polymorphic@npm:0.18.0":
   version: 0.18.0
   resolution: "@reach/polymorphic@npm:0.18.0"
@@ -4345,47 +4265,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/popover@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/popover@npm:0.18.0"
-  dependencies:
-    "@reach/polymorphic": 0.18.0
-    "@reach/portal": 0.18.0
-    "@reach/rect": 0.18.0
-    "@reach/utils": 0.18.0
-    tabbable: ^5.3.3
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: b25a7310c95006bad1c85afb3668b09f369b95f733bbc3854f7d547aa7ccafcfb68836d2ef3f517abbce52657312c729b21c67be9aad834382af74bdfb8c2488
-  languageName: node
-  linkType: hard
-
-"@reach/portal@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/portal@npm:0.18.0"
-  dependencies:
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: bd54c694922ac8e8ae6ef515547214c1eb05fd7ce5514e1046fd3504e37aa440ba4fb62fdd8664fdcd47e9b865b3ee085b58942c0db667146da6eec2dc269fa3
-  languageName: node
-  linkType: hard
-
-"@reach/rect@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/rect@npm:0.18.0"
-  dependencies:
-    "@reach/observe-rect": 1.2.0
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 5e9fbfb3b6bf62b4f7fd289cde8f22ab11ba3462112761144aad3fe0c4bd0c0bbb7d1489d436151ed964c65d2ff10a6eb3b5a861dd9b7d439f5c2099539e51fc
-  languageName: node
-  linkType: hard
-
 "@reach/utils@npm:0.18.0":
   version: 0.18.0
   resolution: "@reach/utils@npm:0.18.0"
@@ -5680,7 +5559,6 @@ __metadata:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.10
     "@radix-ui/react-slot": ^1.0.1
     "@reach/disclosure": ^0.18.0
-    "@reach/listbox": ^0.18.0
     "@simplewebauthn/browser": ^7.1.0
     "@standardnotes/authenticator": ^2.3.9
     "@standardnotes/autobiography-theme": ^1.2.7
@@ -5710,7 +5588,6 @@ __metadata:
     "@types/jest": ^29.2.4
     "@types/react": ^18.0.26
     "@types/react-dom": ^18.0.9
-    "@types/styled-components": ^5.1.26
     "@types/wicg-file-system-access": ^2020.9.5
     "@zip.js/zip.js": ^2.6.60
     autoprefixer: ^10.4.13
@@ -5745,7 +5622,6 @@ __metadata:
     react-dom: ^18.2.0
     react-refresh: ^0.14.0
     sass-loader: "*"
-    styled-components: ^5.3.8
     svg-jest: ^1.0.1
     tailwindcss: ^3.2.7
     ts-jest: ^29.0.3
@@ -6182,16 +6058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:*":
-  version: 3.3.1
-  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
-  dependencies:
-    "@types/react": "*"
-    hoist-non-react-statics: ^3.3.0
-  checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
-  languageName: node
-  linkType: hard
-
 "@types/http-cache-semantics@npm:*, @types/http-cache-semantics@npm:^4.0.1":
   version: 4.0.1
   resolution: "@types/http-cache-semantics@npm:4.0.1"
@@ -6586,17 +6452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.26":
-  version: 5.1.26
-  resolution: "@types/styled-components@npm:5.1.26"
-  dependencies:
-    "@types/hoist-non-react-statics": "*"
-    "@types/react": "*"
-    csstype: ^3.0.2
-  checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
-  languageName: node
-  linkType: hard
-
 "@types/tough-cookie@npm:*":
   version: 4.0.2
   resolution: "@types/tough-cookie@npm:4.0.2"
@@ -7120,13 +6975,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xstate/fsm@npm:1.4.0":
-  version: 1.4.0
-  resolution: "@xstate/fsm@npm:1.4.0"
-  checksum: 518080d3ddec480b582d5569ebb7e1ad14e4ca6b3fd070b5426930082e79dcfe7fd36b382a2d703ce85c957534867339fcea5ee60b38227cef29fa48f91d166f
-  languageName: node
-  linkType: hard
-
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -8252,28 +8100,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1.12.0":
-  version: 2.0.7
-  resolution: "babel-plugin-styled-components@npm:2.0.7"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.0
-    "@babel/helper-module-imports": ^7.16.0
-    babel-plugin-syntax-jsx: ^6.18.0
-    lodash: ^4.17.11
-    picomatch: ^2.3.0
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: 80b06b10db02d749432a0ac43a5feedd686f6b648628d7433a39b1844260b2b7c72431f6e705c82636ee025fcfd4f6c32fc05677e44033b8a39ddcd4488b3147
-  languageName: node
-  linkType: hard
-
-"babel-plugin-syntax-jsx@npm:^6.18.0":
-  version: 6.18.0
-  resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
-  checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27
-  languageName: node
-  linkType: hard
-
 "babel-plugin-syntax-trailing-function-commas@npm:^7.0.0-beta.0":
   version: 7.0.0-beta.0
   resolution: "babel-plugin-syntax-trailing-function-commas@npm:7.0.0-beta.0"
@@ -9079,13 +8905,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelize@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "camelize@npm:1.0.1"
-  checksum: 91d8611d09af725e422a23993890d22b2b72b4cabf7239651856950c76b4bf53fe0d0da7c5e4db05180e898e4e647220e78c9fbc976113bd96d603d1fcbfcb99
-  languageName: node
-  linkType: hard
-
 "caniuse-lite@npm:^1.0.30001400":
   version: 1.0.30001419
   resolution: "caniuse-lite@npm:1.0.30001419"
@@ -10199,13 +10018,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-color-keywords@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "css-color-keywords@npm:1.0.0"
-  checksum: 8f125e3ad477bd03c77b533044bd9e8a6f7c0da52d49bbc0bbe38327b3829d6ba04d368ca49dd9ff3b667d2fc8f1698d891c198bbf8feade1a5501bf5a296408
-  languageName: node
-  linkType: hard
-
 "css-loader@npm:*":
   version: 6.7.1
   resolution: "css-loader@npm:6.7.1"
@@ -10268,17 +10080,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "css-to-react-native@npm:3.0.0"
-  dependencies:
-    camelize: ^1.0.0
-    css-color-keywords: ^1.0.0
-    postcss-value-parser: ^4.0.2
-  checksum: 98a2e9d4fbe9cabc8b744dfdd5ec108396ce497a7b860912a95b299bd52517461281810fcb707965a021a8be39adca9587184a26fb4e926211391a1557aca3c1
-  languageName: node
-  linkType: hard
-
 "css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
   version: 1.1.3
   resolution: "css-tree@npm:1.1.3"
@@ -13887,15 +13688,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0":
-  version: 3.3.2
-  resolution: "hoist-non-react-statics@npm:3.3.2"
-  dependencies:
-    react-is: ^16.7.0
-  checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8
-  languageName: node
-  linkType: hard
-
 "hosted-git-info@npm:^2.1.4":
   version: 2.8.9
   resolution: "hosted-git-info@npm:2.8.9"
@@ -19855,7 +19647,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -20138,7 +19930,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
@@ -20743,7 +20535,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
+"react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@@ -22142,13 +21934,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "shallowequal@npm:1.1.0"
-  checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
-  languageName: node
-  linkType: hard
-
 "shebang-command@npm:^1.2.0":
   version: 1.2.0
   resolution: "shebang-command@npm:1.2.0"
@@ -23122,28 +22907,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.8":
-  version: 5.3.8
-  resolution: "styled-components@npm:5.3.8"
-  dependencies:
-    "@babel/helper-module-imports": ^7.0.0
-    "@babel/traverse": ^7.4.5
-    "@emotion/is-prop-valid": ^1.1.0
-    "@emotion/stylis": ^0.8.4
-    "@emotion/unitless": ^0.7.4
-    babel-plugin-styled-components: ">= 1.12.0"
-    css-to-react-native: ^3.0.0
-    hoist-non-react-statics: ^3.0.0
-    shallowequal: ^1.1.0
-    supports-color: ^5.5.0
-  peerDependencies:
-    react: ">= 16.8.0"
-    react-dom: ">= 16.8.0"
-    react-is: ">= 16.8.0"
-  checksum: 60148083f4057cd0dd4ad555e82800ec4ec4b8822fd81645f084e9beebf91420f4c9c75875b44933755d32ec97c46be6b79ca0c23578e5a731e3399e6ea0d901
-  languageName: node
-  linkType: hard
-
 "sudo-prompt@npm:^9.0.0":
   version: 9.2.1
   resolution: "sudo-prompt@npm:9.2.1"
@@ -23172,7 +22935,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
+"supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -23244,13 +23007,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tabbable@npm:^5.3.3":
-  version: 5.3.3
-  resolution: "tabbable@npm:5.3.3"
-  checksum: 1aa56e1bb617cc10616c407f4e756f0607f3e2d30f9803664d70b85db037ca27e75918ed1c71443f3dc902e21dc9f991ce4b52d63a538c9b69b3218d3babcd70
-  languageName: node
-  linkType: hard
-
 "tailwindcss@npm:^3.2.7":
   version: 3.2.7
   resolution: "tailwindcss@npm:3.2.7"
@@ -23551,13 +23307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.2.0":
-  version: 1.3.1
-  resolution: "tiny-invariant@npm:1.3.1"
-  checksum: 872dbd1ff20a21303a2fd20ce3a15602cfa7fcf9b228bd694a52e2938224313b5385a1078cb667ed7375d1612194feaca81c4ecbe93121ca1baebe344de4f84c
-  languageName: node
-  linkType: hard
-
 "tmp-promise@npm:^3.0.2":
   version: 3.0.3
   resolution: "tmp-promise@npm:3.0.3"