Merge pull request #24988 from overleaf/td-bs5-upgrade-and-rename

Apply minor upgrades to Bootstrap 5 and react-bootstrap GitOrigin-RevId: eb013f38515ebd4b9572d139f00841aca344e3c6
2026-05-25 02:00:10 +02:00 · 2025-05-15 10:01:29 +01:00
parent 7ebb21ccfa
commit 0debb4e752
90 changed files with 120 additions and 122 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -16487,9 +16487,9 @@
    },
    "node_modules/bootstrap-5": {
      "name": "bootstrap",
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz",
+      "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==",
      "dev": true,
      "funding": [
        {
@@ -16501,6 +16501,7 @@
          "url": "https://opencollective.com/bootstrap"
        }
      ],
+      "license": "MIT",
      "peerDependencies": {
        "@popperjs/core": "^2.11.8"
      }
@@ -34373,17 +34374,17 @@
        "react": ">=16.4.1"
      }
    },
-    "node_modules/react-bootstrap-5": {
-      "name": "react-bootstrap",
-      "version": "2.10.5",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.5.tgz",
-      "integrity": "sha512-XueAOEn64RRkZ0s6yzUTdpFtdUXs5L5491QU//8ZcODKJNDLt/r01tNyriZccjgRImH1REynUc9pqjiRMpDLWQ==",
+    "node_modules/react-bootstrap": {
+      "version": "2.10.10",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.10.tgz",
+      "integrity": "sha512-gMckKUqn8aK/vCnfwoBpBVFUGT9SVQxwsYrp9yDHt0arXMamxALerliKBxr1TPbntirK/HGrUAHYbAeQTa9GHQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.24.7",
        "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.9",
+        "@restart/ui": "^1.9.4",
+        "@types/prop-types": "^15.7.12",
        "@types/react-transition-group": "^4.4.6",
        "classnames": "^2.3.2",
        "dom-helpers": "^5.2.1",
@@ -44897,7 +44898,7 @@
        "babel-plugin-module-resolver": "^5.0.2",
        "backbone": "^1.6.0",
        "bootstrap": "^3.4.1",
-        "bootstrap-5": "npm:bootstrap@^5.3.3",
+        "bootstrap-5": "npm:bootstrap@^5.3.6",
        "c8": "^7.2.0",
        "chai": "^4.3.6",
        "chai-as-promised": "^7.1.1",
@@ -44962,7 +44963,7 @@
        "prop-types": "^15.7.2",
        "qrcode": "^1.4.4",
        "react": "^18.3.1",
-        "react-bootstrap-5": "npm:react-bootstrap@^2.10.5",
+        "react-bootstrap": "^2.10.10",
        "react-chartjs-2": "^5.0.1",
        "react-color": "^2.19.3",
        "react-dnd": "^16.0.1",
--- a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
@@ -3,7 +3,7 @@ import LeftMenuMask from './left-menu-mask'
 import classNames from 'classnames'
 import { lazy, memo, Suspense } from 'react'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
-import { Offcanvas } from 'react-bootstrap-5'
+import { Offcanvas } from 'react-bootstrap'
 import { EditorLeftMenuProvider } from './editor-left-menu-context'
 import withErrorBoundary from '@/infrastructure/error-boundary'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
--- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx
@@ -2,7 +2,7 @@ import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
 import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
 import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
 import { ChangeEventHandler, useCallback, useEffect, useRef } from 'react'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'
 import { useEditorLeftMenuContext } from '@/features/editor-left-menu/components/editor-left-menu-context'

 type PossibleValue = string | number | boolean
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.tsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, forwardRef } from 'react'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'
 import {
  Dropdown,
  DropdownItem,
--- a/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.tsx
@@ -24,7 +24,7 @@ import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
 import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
 import OLForm from '@/features/ui/components/ol/ol-form'
 import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 export default function FileTreeImportFromProject() {
  const { t } = useTranslation()
--- a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
+++ b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
@@ -13,7 +13,7 @@ import {
  FormGroup,
  FormLabel,
  FormControl,
-} from 'react-bootstrap-5'
+} from 'react-bootstrap'
 import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
 import Button from '@/features/ui/components/bootstrap-5/button'
 import PoNumber from '@/features/group-management/components/add-seats/po-number'
--- a/services/web/frontend/js/features/group-management/components/add-seats/cost-summary.tsx
+++ b/services/web/frontend/js/features/group-management/components/add-seats/cost-summary.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import { Card, ListGroup } from 'react-bootstrap-5'
+import { Card, ListGroup } from 'react-bootstrap'
 import { formatCurrency } from '@/shared/utils/currency'
 import { formatTime } from '@/features/utils/format-date'
 import {
--- a/services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx
+++ b/services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FormControl, FormGroup, FormLabel } from 'react-bootstrap-5'
+import { FormControl, FormGroup, FormLabel } from 'react-bootstrap'
 import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
 import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'

--- a/services/web/frontend/js/features/group-management/components/card.tsx
+++ b/services/web/frontend/js/features/group-management/components/card.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
-import { Card as BSCard, CardBody, Col, Row } from 'react-bootstrap-5'
+import { Card as BSCard, CardBody, Col, Row } from 'react-bootstrap'
 import IconButton from '@/features/ui/components/bootstrap-5/icon-button'

 type CardProps = {
--- a/services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx
+++ b/services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx
@@ -19,7 +19,7 @@ import { useGroupMembersContext } from '../../context/group-members-context'
 import getMeta from '@/utils/meta'
 import MaterialIcon from '@/shared/components/material-icon'
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 type resendInviteResponse = {
  success: boolean
--- a/services/web/frontend/js/features/group-management/components/request-status.tsx
+++ b/services/web/frontend/js/features/group-management/components/request-status.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Card, CardBody, Row, Col } from 'react-bootstrap-5'
+import { Card, CardBody, Row, Col } from 'react-bootstrap'
 import Button from '@/features/ui/components/bootstrap-5/button'
 import MaterialIcon from '@/shared/components/material-icon'
 import getMeta from '@/utils/meta'
--- a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription-plan-details.tsx
+++ b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription-plan-details.tsx
@@ -1,7 +1,7 @@
 import getMeta from '@/utils/meta'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Card, Row, Col } from 'react-bootstrap-5'
+import { Card, Row, Col } from 'react-bootstrap'
 import MaterialIcon from '@/shared/components/material-icon'
 import { formatCurrency } from '@/shared/utils/currency'

--- a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription-upgrade-summary.tsx
+++ b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription-upgrade-summary.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Card, ListGroup } from 'react-bootstrap-5'
+import { Card, ListGroup } from 'react-bootstrap'
 import { formatCurrency } from '@/shared/utils/currency'
 import { formatTime } from '@/features/utils/format-date'
 import {
--- a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
+++ b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
@@ -1,7 +1,7 @@
 import getMeta from '@/utils/meta'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { useTranslation, Trans } from 'react-i18next'
-import { Card, Row, Col } from 'react-bootstrap-5'
+import { Card, Row, Col } from 'react-bootstrap'
 import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
 import Button from '@/features/ui/components/bootstrap-5/button'
 import UpgradeSubscriptionPlanDetails from './upgrade-subscription-plan-details'
--- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactElement, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Nav, NavLink, Tab, TabContainer } from 'react-bootstrap-5'
+import { Nav, NavLink, Tab, TabContainer } from 'react-bootstrap'
 import MaterialIcon, {
  AvailableUnfilledIcon,
 } from '@/shared/components/material-icon'
--- a/services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx
@@ -2,7 +2,7 @@ import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
 import { ChangeEventHandler, useCallback } from 'react'
 import Setting from './setting'
 import classNames from 'classnames'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 type PossibleValue = string | number | boolean

--- a/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal-body.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal-body.tsx
@@ -8,7 +8,7 @@ import {
  TabContainer,
  TabContent,
  TabPane,
-} from 'react-bootstrap-5'
+} from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import EditorSettings from './editor-settings/editor-settings'
 import AppearanceSettings from './appearance-settings/appearance-settings'
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/change-layout-options.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/change-layout-options.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { DetachRole } from '@/shared/context/detach-context'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 type LayoutOption = 'sideBySide' | 'editorOnly' | 'pdfOnly' | 'detachedPdf'

--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.tsx
@@ -9,7 +9,7 @@ import PdfHybridDownloadButton from './pdf-hybrid-download-button'
 import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
 import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
 import { DetachedSynctexControl } from './detach-synctex-control'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 const ORPHAN_UI_TIMEOUT_MS = 5000

--- a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.tsx
@@ -7,8 +7,8 @@ import * as eventTracking from '../../../infrastructure/event-tracking'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import MaterialIcon from '@/shared/components/material-icon'
-import { Spinner } from 'react-bootstrap-5'
-import { Placement } from 'react-bootstrap-5/types'
+import { Spinner } from 'react-bootstrap'
+import { Placement } from 'react-bootstrap/types'
 import useSynctex from '../hooks/use-synctex'

 const GoToCodeButton = memo(function GoToCodeButton({
--- a/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'
 import {
  Dropdown,
  DropdownItem,
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
@@ -5,7 +5,7 @@ import NewProjectButton from '../new-project-button'
 import SidebarFilters from './sidebar-filters'
 import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
 import { usePersistedResize } from '@/shared/hooks/use-resize'
-import { Dropdown } from 'react-bootstrap-5'
+import { Dropdown } from 'react-bootstrap'
 import getMeta from '@/utils/meta'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import { useTranslation } from 'react-i18next'
--- a/services/web/frontend/js/features/share-project-modal/components/select-collaborators.jsx
+++ b/services/web/frontend/js/features/share-project-modal/components/select-collaborators.jsx
@@ -8,7 +8,7 @@ import classnames from 'classnames'
 import MaterialIcon from '@/shared/components/material-icon'
 import Tag from '@/features/ui/components/bootstrap-5/tag'
 import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 // Unicode characters in these Unicode groups:
 //  "General Punctuation — Spaces"
--- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
@@ -11,7 +11,7 @@ import OLModal, {
 } from '@/features/ui/components/ol/ol-modal'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 const ReadOnlyTokenLink = lazy(() =>
  import('./link-sharing').then(({ ReadOnlyTokenLink }) => ({
--- a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.jsx
+++ b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.jsx
@@ -12,7 +12,7 @@ import OLModal, {
 } from '@/features/ui/components/ol/ol-modal'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 export default function TransferOwnershipModal({ member, cancel }) {
  const { t } = useTranslation()
--- a/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx
+++ b/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import type { ConnectionStatus } from './types'
-import { Badge, Button } from 'react-bootstrap-5'
+import { Badge, Button } from 'react-bootstrap'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 import MaterialIcon from '@/shared/components/material-icon'

--- a/services/web/frontend/js/features/socket-diagnostics/components/socket-diagnostics.tsx
+++ b/services/web/frontend/js/features/socket-diagnostics/components/socket-diagnostics.tsx
@@ -7,7 +7,7 @@ import {
  DiagnosticItem,
  ErrorAlert,
 } from './diagnostic-component'
-import { Col, Container, Row } from 'react-bootstrap-5'
+import { Col, Container, Row } from 'react-bootstrap'
 import MaterialIcon from '@/shared/components/material-icon'
 import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
 import { CopyToClipboard } from '@/shared/components/copy-to-clipboard'
--- a/services/web/frontend/js/features/source-editor/components/full-project-search-button.tsx
+++ b/services/web/frontend/js/features/source-editor/components/full-project-search-button.tsx
@@ -7,7 +7,7 @@ import { forwardRef, memo, Ref, useCallback, useEffect, useRef } from 'react'
 import { useCodeMirrorViewContext } from './codemirror-context'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
-import { Overlay, Popover } from 'react-bootstrap-5'
+import { Overlay, Popover } from 'react-bootstrap'
 import Close from '@/shared/components/close'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { useEditorContext } from '@/shared/context/editor-context'
--- a/services/web/frontend/js/features/source-editor/extensions/spelling/spelling-suggestions-language.tsx
+++ b/services/web/frontend/js/features/source-editor/extensions/spelling/spelling-suggestions-language.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import { Dropdown } from 'react-bootstrap-5'
+import { Dropdown } from 'react-bootstrap'
 import MaterialIcon from '@/shared/components/material-icon'

 export const SpellingSuggestionsLanguage = memo<{
--- a/services/web/frontend/js/features/source-editor/extensions/spelling/spelling-suggestions.tsx
+++ b/services/web/frontend/js/features/source-editor/extensions/spelling/spelling-suggestions.tsx
@@ -15,7 +15,7 @@ import { SpellingSuggestionsLanguage } from './spelling-suggestions-language'
 import { captureException } from '@/infrastructure/error-reporter'
 import { debugConsole } from '@/utils/debugging'
 import { SpellCheckLanguage } from '../../../../../../types/project-settings'
-import { Dropdown } from 'react-bootstrap-5'
+import { Dropdown } from 'react-bootstrap'

 const ITEMS_TO_SHOW = 8

--- a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
@@ -10,7 +10,7 @@ import OLModal, {
 import { Select } from '@/shared/components/select'
 import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
 import Button from '@/features/ui/components/bootstrap-5/button'
-import { Stack } from 'react-bootstrap-5'
+import { Stack } from 'react-bootstrap'
 import { debugConsole } from '@/utils/debugging'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import PauseDuck from '../../images/pause-duck.svg'
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
-import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap-5'
+import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
 import MaterialIcon from '@/shared/components/material-icon'
 import {
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx
@@ -9,7 +9,7 @@ import OLModal, {
 } from '@/features/ui/components/ol/ol-modal'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import sparkle from '@/shared/svgs/sparkle.svg'
-import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap-5'
+import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
 import MaterialIcon from '@/shared/components/material-icon'
 import { ADD_ON_NAME } from '@/features/subscription/data/add-on-codes'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/badge-link-with-tooltip.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/badge-link-with-tooltip.tsx
@@ -1,4 +1,4 @@
-import { OverlayTrigger, Tooltip } from 'react-bootstrap-5'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import type { MergeAndOverride } from '../../../../../../types/utils'
 import BadgeLink, { type BadgeLinkProps } from './badge-link'
 import { useEffect, useRef, useState } from 'react'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx
@@ -1,4 +1,4 @@
-import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap-5'
+import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap'
 import { MergeAndOverride } from '../../../../../../types/utils'

 export type BadgeProps = MergeAndOverride<
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import { Button as BS5Button, Spinner } from 'react-bootstrap-5'
+import { Button as BS5Button, Spinner } from 'react-bootstrap'
 import type { ButtonProps } from '@/features/ui/components/types/button-props'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
@@ -7,8 +7,7 @@ import {
  DropdownDivider as BS5DropdownDivider,
  DropdownHeader as BS5DropdownHeader,
  Button as BS5Button,
-  type ButtonProps,
-} from 'react-bootstrap-5'
+} from 'react-bootstrap'
 import type {
  DropdownProps,
  DropdownItemProps,
@@ -109,19 +108,20 @@ const ForwardReferredDropdownItem = fixedForwardRef(DropdownItem, {

 export { ForwardReferredDropdownItem as DropdownItem }

-export const DropdownToggleCustom = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, className, ...props }, ref) => (
-    <BS5Button
-      ref={ref}
-      className={classnames('custom-toggle', className)}
-      {...props}
-    >
-      {children}
-      <MaterialIcon type="expand_more" />
-    </BS5Button>
-  )
-)
-DropdownToggleCustom.displayName = 'CustomCaret'
+export const DropdownToggleCustom = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof BS5Button>
+>(({ children, className, ...props }, ref) => (
+  <BS5Button
+    ref={ref}
+    className={classnames('custom-toggle', className)}
+    {...props}
+  >
+    {children}
+    <MaterialIcon type="expand_more" />
+  </BS5Button>
+))
+DropdownToggleCustom.displayName = 'DropdownToggleCustom'

 export const DropdownToggle = forwardRef<
  typeof BS5DropdownToggle,
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-toggle-with-tooltip.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-toggle-with-tooltip.tsx
@@ -1,12 +1,12 @@
 import { ReactNode, forwardRef } from 'react'
-import { BsPrefixRefForwardingComponent } from 'react-bootstrap-5/helpers'
+import { BsPrefixRefForwardingComponent } from 'react-bootstrap/helpers'
 import type { DropdownToggleProps } from '@/features/ui/components/types/dropdown-menu-props'
 import {
  DropdownToggle as BS5DropdownToggle,
  OverlayTrigger,
  OverlayTriggerProps,
  Tooltip,
-} from 'react-bootstrap-5'
+} from 'react-bootstrap'
 import type { MergeAndOverride } from '../../../../../../types/utils'

 type DropdownToggleWithTooltipProps = MergeAndOverride<
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-control.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-control.tsx
@@ -1,8 +1,5 @@
 import React, { forwardRef } from 'react'
-import {
-  Form,
-  FormControlProps as BS5FormControlProps,
-} from 'react-bootstrap-5'
+import { Form, FormControlProps as BS5FormControlProps } from 'react-bootstrap'
 import classnames from 'classnames'

 export type OLBS5FormControlProps = BS5FormControlProps & {
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-feedback.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-feedback.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
 import { ComponentProps } from 'react'

--- a/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-group.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-group.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import { FormGroup as BS5FormGroup, FormGroupProps } from 'react-bootstrap-5'
+import { FormGroup as BS5FormGroup, FormGroupProps } from 'react-bootstrap'
 import classnames from 'classnames'

 const FormGroup = forwardRef<typeof BS5FormGroup, FormGroupProps>(
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx
@@ -1,4 +1,4 @@
-import { Form, FormTextProps as BS5FormTextProps } from 'react-bootstrap-5'
+import { Form, FormTextProps as BS5FormTextProps } from 'react-bootstrap'
 import MaterialIcon from '@/shared/components/material-icon'
 import classnames from 'classnames'
 import { MergeAndOverride } from '../../../../../../../types/utils'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx
@@ -1,4 +1,4 @@
-import { Dropdown } from 'react-bootstrap-5'
+import { Dropdown } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { DropdownItem } from 'react-bootstrap-5'
+import { DropdownItem } from 'react-bootstrap'
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import {
  type ExtraSegmentations,
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useTranslation } from 'react-i18next'
-import { Button, Container, Nav, Navbar } from 'react-bootstrap-5'
+import { Button, Container, Nav, Navbar } from 'react-bootstrap'
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import AdminMenu from '@/features/ui/components/bootstrap-5/navbar/admin-menu'
 import type { DefaultNavbarMetadata } from '@/features/ui/components/types/default-navbar-metadata'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
-import { DropdownItem } from 'react-bootstrap-5'
-import { DropdownItemProps } from 'react-bootstrap-5/DropdownItem'
+import { DropdownItem } from 'react-bootstrap'
+import { DropdownItemProps } from 'react-bootstrap/DropdownItem'

 export default function NavDropdownLinkItem({
  href,
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx
@@ -1,5 +1,5 @@
 import { type ReactNode, useState } from 'react'
-import { Dropdown } from 'react-bootstrap-5'
+import { Dropdown } from 'react-bootstrap'
 import { CaretUp, CaretDown } from '@phosphor-icons/react'
 import { useDsNavStyle } from '@/features/project-list/components/use-is-ds-nav'

--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-item.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-item.tsx
@@ -1,4 +1,4 @@
-import { Nav, NavItemProps } from 'react-bootstrap-5'
+import { Nav, NavItemProps } from 'react-bootstrap'

 export default function NavItem(props: Omit<NavItemProps, 'as'>) {
  const { children, ...rest } = props
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-link-item.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-link-item.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { Nav } from 'react-bootstrap-5'
+import { Nav } from 'react-bootstrap'
 import NavItem from '@/features/ui/components/bootstrap-5/navbar/nav-item'

 export default function NavLinkItem({
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/table.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/table.tsx
@@ -1,4 +1,4 @@
-import { Table as BS5Table } from 'react-bootstrap-5'
+import { Table as BS5Table } from 'react-bootstrap'
 import classnames from 'classnames'

 export function TableContainer({
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/tag.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/tag.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Badge, BadgeProps } from 'react-bootstrap-5'
+import { Badge, BadgeProps } from 'react-bootstrap'
 import MaterialIcon from '@/shared/components/material-icon'
 import { MergeAndOverride } from '../../../../../../types/utils'
 import classnames from 'classnames'
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/tooltip.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/tooltip.tsx
@@ -4,7 +4,7 @@ import {
  OverlayTriggerProps,
  Tooltip as BSTooltip,
  TooltipProps as BSTooltipProps,
-} from 'react-bootstrap-5'
+} from 'react-bootstrap'
 import { callFnsInSequence } from '@/utils/functions'

 type OverlayProps = Omit<OverlayTriggerProps, 'overlay' | 'children'>
--- a/services/web/frontend/js/features/ui/components/ol/ol-button-group.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-button-group.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, ButtonGroupProps } from 'react-bootstrap-5'
+import { ButtonGroup, ButtonGroupProps } from 'react-bootstrap'

 function OLButtonGroup({ as, ...rest }: ButtonGroupProps) {
  return <ButtonGroup {...rest} as={as} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-button-toolbar.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-button-toolbar.tsx
@@ -1,4 +1,4 @@
-import { ButtonToolbar, ButtonToolbarProps } from 'react-bootstrap-5'
+import { ButtonToolbar, ButtonToolbarProps } from 'react-bootstrap'

 function OLButtonToolbar(props: ButtonToolbarProps) {
  return <ButtonToolbar {...props} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-card.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-card.tsx
@@ -1,4 +1,4 @@
-import { Card } from 'react-bootstrap-5'
+import { Card } from 'react-bootstrap'
 import { FC } from 'react'

 const OLCard: FC<React.PropsWithChildren<{ className?: string }>> = ({
--- a/services/web/frontend/js/features/ui/components/ol/ol-close-button.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-close-button.tsx
@@ -1,4 +1,4 @@
-import { CloseButton, CloseButtonProps } from 'react-bootstrap-5'
+import { CloseButton, CloseButtonProps } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { forwardRef } from 'react'

--- a/services/web/frontend/js/features/ui/components/ol/ol-col.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-col.tsx
@@ -1,4 +1,4 @@
-import { Col } from 'react-bootstrap-5'
+import { Col } from 'react-bootstrap'

 function OLCol(props: React.ComponentProps<typeof Col>) {
  return <Col {...props} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
@@ -1,4 +1,4 @@
-import { Form, FormCheckProps } from 'react-bootstrap-5'
+import { Form, FormCheckProps } from 'react-bootstrap'
 import { MergeAndOverride } from '../../../../../../types/utils'
 import FormText from '../bootstrap-5/form/form-text'

--- a/services/web/frontend/js/features/ui/components/ol/ol-form-feedback.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-feedback.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import { ComponentProps } from 'react'
 import FormFeedback from '@/features/ui/components/bootstrap-5/form/form-feedback'

--- a/services/web/frontend/js/features/ui/components/ol/ol-form-group.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-group.tsx
@@ -1,4 +1,4 @@
-import { FormGroupProps } from 'react-bootstrap-5'
+import { FormGroupProps } from 'react-bootstrap'
 import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'

 function OLFormGroup(props: FormGroupProps) {
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-label.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-label.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'

 function OLFormLabel(props: React.ComponentProps<(typeof Form)['Label']>) {
  return <Form.Label {...props} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-select.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-select.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import { Form, FormSelectProps } from 'react-bootstrap-5'
+import { Form, FormSelectProps } from 'react-bootstrap'

 const OLFormSelect = forwardRef<HTMLSelectElement, FormSelectProps>(
  (props, ref) => {
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-switch.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-switch.tsx
@@ -1,4 +1,4 @@
-import { FormCheck, FormCheckProps, FormLabel } from 'react-bootstrap-5'
+import { FormCheck, FormCheckProps, FormLabel } from 'react-bootstrap'

 type OLFormSwitchProps = FormCheckProps & {
  inputRef?: React.MutableRefObject<HTMLInputElement | null>
--- a/services/web/frontend/js/features/ui/components/ol/ol-form.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import { ComponentProps } from 'react'

 function OLForm(props: ComponentProps<typeof Form>) {
--- a/services/web/frontend/js/features/ui/components/ol/ol-list-group-item.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-list-group-item.tsx
@@ -1,4 +1,4 @@
-import { ListGroupItem, ListGroupItemProps } from 'react-bootstrap-5'
+import { ListGroupItem, ListGroupItemProps } from 'react-bootstrap'

 function OLListGroupItem(props: ListGroupItemProps) {
  const as = props.as ?? 'button'
--- a/services/web/frontend/js/features/ui/components/ol/ol-list-group.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-list-group.tsx
@@ -1,4 +1,4 @@
-import { ListGroup, ListGroupProps } from 'react-bootstrap-5'
+import { ListGroup, ListGroupProps } from 'react-bootstrap'

 function OLListGroup(props: ListGroupProps) {
  const as = props.as ?? 'div'
--- a/services/web/frontend/js/features/ui/components/ol/ol-modal.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-modal.tsx
@@ -4,8 +4,8 @@ import {
  ModalHeaderProps,
  ModalTitleProps,
  ModalFooterProps,
-} from 'react-bootstrap-5'
-import { ModalBodyProps } from 'react-bootstrap-5/ModalBody'
+} from 'react-bootstrap'
+import { ModalBodyProps } from 'react-bootstrap/ModalBody'

 type OLModalProps = ModalProps & {
  size?: 'sm' | 'lg'
--- a/services/web/frontend/js/features/ui/components/ol/ol-overlay.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-overlay.tsx
@@ -1,4 +1,4 @@
-import { Overlay, OverlayProps } from 'react-bootstrap-5'
+import { Overlay, OverlayProps } from 'react-bootstrap'

 function OLOverlay(props: OverlayProps) {
  return <Overlay {...props} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-page-content-card.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-page-content-card.tsx
@@ -1,4 +1,4 @@
-import { Card, CardBody } from 'react-bootstrap-5'
+import { Card, CardBody } from 'react-bootstrap'
 import { FC } from 'react'
 import classNames from 'classnames'

--- a/services/web/frontend/js/features/ui/components/ol/ol-popover.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-popover.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import { Popover, PopoverProps } from 'react-bootstrap-5'
+import { Popover, PopoverProps } from 'react-bootstrap'

 type OLPopoverProps = Omit<PopoverProps, 'title'> & {
  title?: React.ReactNode
--- a/services/web/frontend/js/features/ui/components/ol/ol-row.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-row.tsx
@@ -1,4 +1,4 @@
-import { Row } from 'react-bootstrap-5'
+import { Row } from 'react-bootstrap'

 function OLRow(props: React.ComponentProps<typeof Row>) {
  return <Row {...props} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-spinner.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-spinner.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'

 export type OLSpinnerSize = 'sm' | 'lg'

--- a/services/web/frontend/js/features/ui/components/ol/ol-toast-container.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-toast-container.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react'
-import { ToastContainer as BS5ToastContainer } from 'react-bootstrap-5'
+import { ToastContainer as BS5ToastContainer } from 'react-bootstrap'

 type OLToastContainerProps = {
  style?: CSSProperties
--- a/services/web/frontend/js/features/ui/components/ol/ol-toast.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-toast.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { Toast as BS5Toast } from 'react-bootstrap-5'
+import { Toast as BS5Toast } from 'react-bootstrap'
 import {
  NotificationIcon,
  NotificationType,
--- a/services/web/frontend/js/features/ui/components/ol/ol-toggle-button-group.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-toggle-button-group.tsx
@@ -1,4 +1,4 @@
-import { ToggleButtonGroup, ToggleButtonGroupProps } from 'react-bootstrap-5'
+import { ToggleButtonGroup, ToggleButtonGroupProps } from 'react-bootstrap'

 function OLToggleButtonGroup<T>(props: ToggleButtonGroupProps<T>) {
  return <ToggleButtonGroup {...props} />
--- a/services/web/frontend/js/features/ui/components/ol/ol-toggle-button.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-toggle-button.tsx
@@ -1,4 +1,4 @@
-import { ToggleButton, ToggleButtonProps } from 'react-bootstrap-5'
+import { ToggleButton, ToggleButtonProps } from 'react-bootstrap'

 function OLToggleButton(props: ToggleButtonProps) {
  return <ToggleButton {...props} />
--- a/services/web/frontend/js/features/word-count-modal/components/word-count-loading.tsx
+++ b/services/web/frontend/js/features/word-count-modal/components/word-count-loading.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from 'react-bootstrap-5'
+import { Spinner } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'

 export const WordCountLoading = () => {
--- a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx
+++ b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { WordCountData } from '@/features/word-count-modal/components/word-count-data'
 import { useTranslation } from 'react-i18next'
-import { Container, Row, Col, Form } from 'react-bootstrap-5'
+import { Container, Row, Col, Form } from 'react-bootstrap'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 import usePersistedState from '@/shared/hooks/use-persisted-state'

--- a/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx
+++ b/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { ServerWordCountData } from '@/features/word-count-modal/components/word-count-data'
 import { useTranslation } from 'react-i18next'
-import { Container, Row, Col } from 'react-bootstrap-5'
+import { Container, Row, Col } from 'react-bootstrap'
 import OLNotification from '@/features/ui/components/ol/ol-notification'

 export const WordCounts: FC<{
--- a/services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx
+++ b/services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx
@@ -7,7 +7,7 @@ import { FC, forwardRef, useCallback } from 'react'
 import classNames from 'classnames'
 import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown'
 import { NestableDropdownContextProvider } from '@/shared/context/nestable-dropdown-context'
-import { AnchorProps } from 'react-bootstrap-5'
+import { AnchorProps } from 'react-bootstrap'
 import MaterialIcon from '../material-icon'
 import { DropdownMenuProps } from '@/features/ui/components/types/dropdown-menu-props'

--- a/services/web/frontend/js/shared/components/select.tsx
+++ b/services/web/frontend/js/shared/components/select.tsx
@@ -9,7 +9,7 @@ import {
 import classNames from 'classnames'
 import { useSelect } from 'downshift'
 import { useTranslation } from 'react-i18next'
-import { Form, Spinner } from 'react-bootstrap-5'
+import { Form, Spinner } from 'react-bootstrap'
 import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
 import MaterialIcon from '@/shared/components/material-icon'
 import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
--- a/services/web/frontend/js/shared/components/upgrade-prompt.tsx
+++ b/services/web/frontend/js/shared/components/upgrade-prompt.tsx
@@ -5,7 +5,7 @@ import OLCol from '@/features/ui/components/ol/ol-col'
 import OLRow from '@/features/ui/components/ol/ol-row'
 import MaterialIcon from '@/shared/components/material-icon'
 import { PropsWithChildren } from 'react'
-import { Container } from 'react-bootstrap-5'
+import { Container } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'

 type IconListItemProps = PropsWithChildren<{
--- a/services/web/frontend/stories/ui/form/form-check-bs5.stories.tsx
+++ b/services/web/frontend/stories/ui/form/form-check-bs5.stories.tsx
@@ -1,5 +1,5 @@
 import { useRef, useLayoutEffect } from 'react'
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import type { Meta, StoryObj } from '@storybook/react'

 const meta: Meta<(typeof Form)['Check']> = {
--- a/services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
+++ b/services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import type { Meta, StoryObj } from '@storybook/react'
 import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
 import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
--- a/services/web/frontend/stories/ui/form/form-radio-bs5.stories.tsx
+++ b/services/web/frontend/stories/ui/form/form-radio-bs5.stories.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import type { Meta, StoryObj } from '@storybook/react'

 const meta: Meta<(typeof Form)['Check']> = {
--- a/services/web/frontend/stories/ui/form/form-select-bs5.stories.tsx
+++ b/services/web/frontend/stories/ui/form/form-select-bs5.stories.tsx
@@ -1,4 +1,4 @@
-import { Form, FormSelectProps } from 'react-bootstrap-5'
+import { Form, FormSelectProps } from 'react-bootstrap'
 import type { Meta, StoryObj } from '@storybook/react'
 import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
 import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
--- a/services/web/frontend/stories/ui/form/form-textarea-bs5.stories.tsx
+++ b/services/web/frontend/stories/ui/form/form-textarea-bs5.stories.tsx
@@ -1,4 +1,4 @@
-import { Form } from 'react-bootstrap-5'
+import { Form } from 'react-bootstrap'
 import type { Meta, StoryObj } from '@storybook/react'
 import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
 import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
--- a/services/web/frontend/stories/ui/row.stories.tsx
+++ b/services/web/frontend/stories/ui/row.stories.tsx
@@ -1,4 +1,4 @@
-import { Container, Row, Col } from 'react-bootstrap-5'
+import { Container, Row, Col } from 'react-bootstrap'
 import { Meta } from '@storybook/react'

 type Args = React.ComponentProps<typeof Row>
--- a/services/web/frontend/stories/ui/split-button.stories.tsx
+++ b/services/web/frontend/stories/ui/split-button.stories.tsx
@@ -9,7 +9,7 @@ import {
  DropdownToggle,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
 import Button from '@/features/ui/components/bootstrap-5/button'
-import { ButtonGroup } from 'react-bootstrap-5'
+import { ButtonGroup } from 'react-bootstrap'

 type Args = React.ComponentProps<typeof Dropdown>

--- a/services/web/package.json
+++ b/services/web/package.json
@@ -261,7 +261,7 @@
    "babel-plugin-module-resolver": "^5.0.2",
    "backbone": "^1.6.0",
    "bootstrap": "^3.4.1",
-    "bootstrap-5": "npm:bootstrap@^5.3.3",
+    "bootstrap-5": "npm:bootstrap@^5.3.6",
    "c8": "^7.2.0",
    "chai": "^4.3.6",
    "chai-as-promised": "^7.1.1",
@@ -326,7 +326,7 @@
    "prop-types": "^15.7.2",
    "qrcode": "^1.4.4",
    "react": "^18.3.1",
-    "react-bootstrap-5": "npm:react-bootstrap@^2.10.5",
+    "react-bootstrap": "^2.10.10",
    "react-chartjs-2": "^5.0.1",
    "react-color": "^2.19.3",
    "react-dnd": "^16.0.1",