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

Apply minor upgrades to Bootstrap 5 and react-bootstrap

GitOrigin-RevId: eb013f38515ebd4b9572d139f00841aca344e3c6

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",

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'

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

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,

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()

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'

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 {

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'
 

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 = {

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

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'

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'
 

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 {

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'

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'

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
 

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'

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'
 

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
 

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({

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,

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'

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"

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 }) => ({

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()

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'
 

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'

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'

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<{

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
 

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'

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 {

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'

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'

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<

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'

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,

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<

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 & {

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'
 

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>(

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'

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'

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,

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'

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,

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'
 

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

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({

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({

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'

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'>

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} />

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} />

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 }>> = ({

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'
 

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} />

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'
 

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'
 

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) {

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} />

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) => {

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>

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>) {

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'

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'

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'

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} />

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'
 

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

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} />

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'
 

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

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,

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} />

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} />

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 = () => {

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'
 

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<{

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'
 

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'

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<{

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']> = {

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'

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']> = {

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'

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'

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>

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>
 

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",