deps: react-bootstrap 0.31 -> 2 (Bootstrap 5 CSS deferred as debt)

Removes the largest batch of React-19-blocking warnings: the 0.31 components (Grid, FormGroup, ControlLabel, Navbar.Header/Brand, Checkbox, SafeAnchor) all leaned on legacy context / defaultProps. 29 files converted: Grid->Container, FormGroup/ControlLabel/FormControl/ HelpBlock -> Form.Group/Label/Control/Text, Checkbox -> Form.Check (label as prop), bsStyle->variant (default->secondary), bsSize->size, pull-right->float-end. Custom Col.js now re-exports v2's Col; custom NavItem.js rewritten self-contained (no SafeAnchor/createChainedFunction); Navigation.js drops react-bootstrap Navbar (raw markup anyway). CSS stays on Bootstrap 4 (alexwine:bootstrap-4) for now: the BS4->5 jump is entangled with the jQuery carousel/swipe + navbar-collapse and is tracked as separate debt in UPGRADE.md. Only .form-label needed a shim (forms.scss). Browser-verified home carousel+navbar, signup form + terms checkbox, login form; REST smoke byte-identical.
2026-07-21 12:44:46 +02:00 · 2026-07-21 12:44:46 +02:00 · a1a1b9a801
commit a1a1b9a801
parent 12bdbe8fed
30 changed files with 539 additions and 333 deletions
--- a/UPGRADE.md
+++ b/UPGRADE.md
@ -317,6 +317,8 @@ MONGO_CONTAINER=tcef-mongo7 MONGO_SHELL=mongosh MONGO_PORT=27019 ./smoke/smoke.s
 | fourseven:scss | 4.5.4 | 4.14.1 | ✅ node-12 compatible |
 | node-gcm | 1.0.2 | — | ✅ removed (dead API, moved to microservice) |
 | react-helmet | 5.2.0 | react-helmet-async 2.0.5 | ✅ done — react-helmet is unmaintained and misbehaves under React 18 StrictMode. Drop-in: same `<Helmet>` children API across the 15 pages; `<HelmetProvider>` wraps `<App/>` in `imports/startup/client/index.js`. Verified in browser: per-page titles, meta description and hreflang alternates injected (`data-rh`). Note: head updates are rAF-deferred (like react-helmet), so hidden/background tabs don't flush — irrelevant for real users. |
+| react-bootstrap | 0.31.5 | 2.10 | ✅ done — kills the biggest batch of React-19-blocking warnings (Grid/FormGroup/ControlLabel/Navbar.Header/Navbar.Brand/Checkbox/SafeAnchor all used legacy context/defaultProps). 29 files: `Grid`→`Container`, `FormGroup/ControlLabel/FormControl/HelpBlock`→`Form.Group/Label/Control/Text`, `Checkbox`→`Form.Check` (label moves to a prop), `bsStyle`→`variant` (×23, `"default"`→`"secondary"`), `bsSize`→`size` (×2), `pull-right`→`float-end` (×7). Custom `Col.js` (used v0.31 `bootstrapUtils`/`StyleConfig` internals) now re-exports v2's `Col`; custom `NavItem.js` rewritten self-contained (dropped `SafeAnchor`+`createChainedFunction`); `Navigation.js` drops the react-bootstrap `Navbar` (was hand-rolled raw markup anyway). **CSS kept at Bootstrap 4** (see next row) — the only BS5-only class v2 emits that BS4 lacks is `.form-label`, shimmed in `forms.scss`. Browser-verified: home carousel+navbar, signup form + terms `Form.Check` (toggles submit), login form; REST smoke byte-identical. |
+| Bootstrap CSS/JS | 4.1 (alexwine:bootstrap-4) | 5.x | ⏸️ **deferred as debt.** The app's CSS+JS still comes from the Atmosphere `alexwine:bootstrap-4` (Bootstrap 4 + jQuery). The BS4→5 jump is a separate invasive sub-project: the home **carousel** uses the jQuery `bootstrap-carousel-swipe` plugin (BS4-only), the **navbar collapse** and ~17 `data-toggle`/`data-slide` attributes across 6 files are BS4 jQuery behaviors, and BS5 is vanilla-JS with `data-bs-*`. react-bootstrap v2 runs fine on BS4 CSS for every component we use (Button/Alert/Row/Col/Table/ButtonGroup/Modal render identical classes; only `.form-label` needed a shim). Do this jump on its own: npm `bootstrap@5` SCSS+JS, rewrite carousel (BS5 has native swipe → drop the plugin), `data-toggle`→`data-bs-toggle`, `ml-auto`→`ms-auto`, etc. |
 | reactstrap | 5.0.0-alpha.3 | — | ✅ removed — zero imports in the codebase (react-bootstrap covers all UI). |
 | react-leaflet-sidebarv2 | 0.5.1 | — | ✅ removed — never imported. |
 | react-router-hash-link | 1.1.1 | — | ✅ removed — only a commented-out import in Index.js. |
--- a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
+++ b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
@ -48,7 +48,7 @@ class CenterInMyPosition extends React.Component {
    const { onlyIcon, t } = this.props;
    const msg = t('Centrar en tu ubicación');
    return (
-      <Button bsStyle="default" title={msg} onClick={() => this.onClick()}>
+      <Button variant="secondary" title={msg} onClick={() => this.onClick()}>
        <i className="fa fa-crosshairs" />{!onlyIcon ? ` ${msg}` : ''}
      </Button>);
  }
--- a/imports/ui/components/Col/Col.js
+++ b/imports/ui/components/Col/Col.js
@ -1,111 +1,6 @@
-import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import elementType from 'prop-types-extra/lib/elementType';
-
-import { bsClass, prefix, splitBsProps } from 'react-bootstrap/lib/utils/bootstrapUtils';
-import { DEVICE_SIZES } from 'react-bootstrap/lib/utils/StyleConfig';
-
-const column = PropTypes.oneOfType([
-  PropTypes.oneOf(['auto']),
-  PropTypes.number,
-]);
-
-const propTypes = {
-  componentClass: elementType,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Extra small devices Phones (<576px)
-   *
-   * class-prefix `col-`
-   */
-  xs: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Small devices Tablets (≥576px)
-   *
-   * class-prefix `col-sm-`
-   */
-  sm: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Medium devices Desktops (≥768px)
-   *
-   * class-prefix `col-md-`
-   */
-  md: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Large devices Desktops (≥992px)
-   *
-   * class-prefix `col-lg-`
-   */
-  lg: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Large devices Desktops (≥1200px)
-   *
-   * class-prefix `col-xl-`
-   */
-  xl: column,
-};
-
-const defaultProps = {
-  componentClass: 'div',
-};
-
-class Col extends React.Component {
-  render() {
-    const { componentClass: Component, className, ...props } = this.props;
-    const [bsProps, elementProps] = splitBsProps(props);
-
-    const classes = [];
-
-    DEVICE_SIZES.forEach((size) => {
-      const propValue = elementProps[size];
-
-      if (propValue == null) return;
-
-      if (size === 'xs') {
-        // col and col-4
-        classes.push(propValue === true ?
-          bsProps.bsClass :
-          prefix(bsProps, `${propValue}`),
-        );
-      } else {
-        // col-md-3
-        classes.push(
-          prefix(bsProps, `${size}-${propValue}`),
-        );
-      }
-
-      delete elementProps[size];
-    });
-
-    if (!classes.length) {
-      classes.push(bsProps.bsClass); // plain 'col'
-    }
-
-    return (
-      <Component
-        {...elementProps}
-        className={classNames(className, classes)}
-      />
-    );
-  }
-}
-
-Col.propTypes = propTypes;
-Col.defaultProps = defaultProps;
-
-export default bsClass('col', Col);
+// The old custom Col hand-rolled Bootstrap-4/5 grid classes on top of
+// react-bootstrap 0.31 internals (`bootstrapUtils`, `StyleConfig`), which no
+// longer exist in react-bootstrap v2. v2's own Col produces the exact same
+// `col`/`col-{size}-{n}` output for the xs/sm/md/lg/xl props we use, so we
+// simply re-export it and keep every importer unchanged.
+export { Col as default } from 'react-bootstrap';
--- a/imports/ui/components/DocumentEditor/DocumentEditor.js
+++ b/imports/ui/components/DocumentEditor/DocumentEditor.js
@ -2,7 +2,7 @@

 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import validate from '../../../modules/validate';
@ -57,8 +57,8 @@ class DocumentEditor extends React.Component {
  render() {
    const { doc } = this.props;
    return (<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-      <FormGroup>
-        <ControlLabel>Title</ControlLabel>
+      <Form.Group>
+        <Form.Label>Title</Form.Label>
        <input
          type="text"
          className="form-control"
@ -67,9 +67,9 @@ class DocumentEditor extends React.Component {
          defaultValue={doc && doc.title}
          placeholder="Oh, The Places You'll Go!"
        />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>Body</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Body</Form.Label>
        <textarea
          className="form-control"
          name="body"
@ -77,8 +77,8 @@ class DocumentEditor extends React.Component {
          defaultValue={doc && doc.body}
          placeholder="Congratulations! Today is your day. You're off to Great Places! You're off and away!"
        />
-      </FormGroup>
-      <Button type="submit" bsStyle="success">
+      </Form.Group>
+      <Button type="submit" variant="success">
        {doc && doc._id ? 'Save Changes' : 'Add Document'}
      </Button>
    </form>);
--- a/imports/ui/components/Feedback/Feedback.js
+++ b/imports/ui/components/Feedback/Feedback.js
@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { withTranslation } from 'react-i18next';
-import { FormGroup, Button, FormControl } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { withTracker } from 'meteor/react-meteor-data';
 import { isHome } from '/imports/ui/components/Utils/location';
@ -82,7 +82,7 @@ class Feedback extends Component {
                  className="form card-body"
                  onSubmit={event => event.preventDefault()}
              >
-                <FormGroup controlId="formEmail">
+                <Form.Group controlId="formEmail">
                  <input
                      id={testId('emailInput')}
                      onChange={this.handleChange}
@ -95,8 +95,8 @@ class Feedback extends Component {
                      defaultValue={disabled ? this.props.emailAddress : ''}
                      type="email"
                  />
-                </FormGroup>
-                <FormGroup
+                </Form.Group>
+                <Form.Group
                    controlId="formFeedback"
                >
                  <textarea
@ -107,9 +107,9 @@ class Feedback extends Component {
                      placeholder={t('Por favor, escribe aquí tu feedback...')}
                      rows="6"
                  />
-                  <FormControl.Feedback />
-                </FormGroup>
-                <Button type="submit" bsStyle="success" className="float-right" id={testId('sendFeedbackBtn')} >
+                  <Form.Control.Feedback />
+                </Form.Group>
+                <Button type="submit" variant="success" className="float-right" id={testId('sendFeedbackBtn')} >
                  {t('Enviar')}
                </Button>
              </form>
--- a/imports/ui/components/Footer/Footer.js
+++ b/imports/ui/components/Footer/Footer.js
@ -3,7 +3,7 @@
 import React from 'react';
 import { year } from '@cleverbeagle/dates';
 import { Link } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';

@ -19,10 +19,10 @@ const Footer = (props) => {
  const { t } = props;
  return (
    <div className="Footer">
-      <Grid>
+      <Container>
        <p className="pull-left"><span className="reverse">&copy;</span><span className="d-none d-md-inline"> Copyleft</span> {copyrightYear()} <a href="https://comunes.org/"><span className="d-none d-md-inline">{t('OrgName')}</span><span className="d-inline d-md-none">{t('OrgName')}</span></a></p>

-        <ul className="pull-right">
+        <ul className="float-end">
          <li>
            <Link id={testId('about')} to="/about">
              <span className="d-none d-lg-inline">{t('Sobre nosotr@s')}</span>
@ -44,7 +44,7 @@ const Footer = (props) => {
          <li><span className="d-none d-md-inline"><Link id={testId('license')} to="/license">{t('Licencia')}</Link></span></li>
          <li><span className="d-none d-md-inline"><Link id={testId('credits')} to="/credits">{t('Créditos')}</Link></span></li>
        </ul>
-      </Grid>
+      </Container>
    </div>
  );
 };
--- a/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js
+++ b/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js
@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
-import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';


@ -82,8 +82,8 @@ class LocationAutocomplete extends React.Component {

    return (
      <form>
-        <FormGroup>
-          { label.length > 0 && <ControlLabel>{t(label)}</ControlLabel> }
+        <Form.Group>
+          { label.length > 0 && <Form.Label>{t(label)}</Form.Label> }
          <PlacesAutocomplete
              styles={myStyles}
              autocompleteItem={AutocompleteItem}
@ -114,8 +114,8 @@ class LocationAutocomplete extends React.Component {
                  autoFocus: this.props.focusInput
                }}
          />
-          { helpText.length > 0 && <HelpBlock>{t(helpText)}</HelpBlock> }
-        </FormGroup>
+          { helpText.length > 0 && <Form.Text>{t(helpText)}</Form.Text> }
+        </Form.Group>
      </form>
    );
  }
--- a/imports/ui/components/NavItem/NavItem.js
+++ b/imports/ui/components/NavItem/NavItem.js
@ -2,9 +2,9 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';

-import { SafeAnchor } from 'react-bootstrap';
-import createChainedFunction from 'react-bootstrap/lib/utils/createChainedFunction';
-
+// Self-contained NavItem. The old one wrapped react-bootstrap 0.31's
+// `SafeAnchor` + `createChainedFunction` (both gone in v2); the markup this
+// navbar needs is just an <li><a> that toggles the collapsed menu on click.
 const propTypes = {
  active: PropTypes.bool,
  disabled: PropTypes.bool,
@ -12,7 +12,11 @@ const propTypes = {
  href: PropTypes.string,
  onClick: PropTypes.func,
  onSelect: PropTypes.func,
-  eventKey: PropTypes.any
+  eventKey: PropTypes.any,
+  className: PropTypes.string,
+  anchorClassName: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
 };

 const defaultProps = {
@ -21,42 +25,35 @@ const defaultProps = {
 };

 class NavItem extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
+  constructor(props) {
+    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
-    if (this.props.onSelect) {
+    const { disabled, onClick, onSelect, eventKey } = this.props;
+    if (disabled) {
      e.preventDefault();
-
-      if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, e);
-      }
+      return;
+    }
+    if (onClick) onClick(e);
+    if (onSelect) {
+      e.preventDefault();
+      onSelect(eventKey, e);
    }
  }

  render() {
    const {
-      active, disabled, onClick, className, anchorClassName, style, ...props
-    } =
-      this.props;
+      active, disabled, role, href, onClick, onSelect, eventKey,
+      className, anchorClassName, style, children, ...props
+    } = this.props;

-    delete props.onSelect;
-    delete props.eventKey;
+    const anchorProps = { ...props };
+    if (href) anchorProps.href = href;
+    anchorProps.role = role || (href === '#' ? 'button' : undefined);
+    if (role === 'tab') anchorProps['aria-selected'] = active;

-    // These are injected down by `<Nav>` for building `<SubNav>`s.
-    delete props.activeKey;
-    delete props.activeHref;
-
-    if (!props.role) {
-      if (props.href === '#') {
-        props.role = 'button';
-      }
-    } else if (props.role === 'tab') {
-      props['aria-selected'] = active;
-    }
    return (
      <li
        role="presentation"
@ -65,12 +62,14 @@ class NavItem extends React.Component {
        className={classNames(className, { active, disabled })}
        style={style}
      >
-        <SafeAnchor
-          {...props}
-          disabled={disabled}
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          {...anchorProps}
          className={anchorClassName}
-          onClick={createChainedFunction(onClick, this.handleClick)}
-        />
+          onClick={this.handleClick}
+        >
+          {children}
+        </a>
      </li>
    );
  }
--- a/imports/ui/components/Navigation/Navigation.js
+++ b/imports/ui/components/Navigation/Navigation.js
@ -2,7 +2,6 @@

 import React from 'react';
 import PropTypes from 'prop-types';
-import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Trans, withTranslation } from 'react-i18next';
@ -20,19 +19,12 @@ const Navigation = props => (
  <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
    <div style={{ overflow: 'hidden' } /* for ribbon */} className="container">
      {/* <BetaRibbon /> */}
-      {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
-      {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
-      <Navbar.Header>
-        <Navbar.Brand>
-          <Link to="/" className={window.location.pathname === '/' ? 'hide-brand' : ''} >
-            {props.t('AppNameFull')}
-          </Link>
-        </Navbar.Brand>
-        {/* <Navbar.Toggle/> */}
-        <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span className="navbar-toggler-icon" />
-        </button>
-      </Navbar.Header>
+      <Link to="/" className={`navbar-brand ${window.location.pathname === '/' ? 'hide-brand' : ''}`} >
+        {props.t('AppNameFull')}
+      </Link>
+      <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon" />
+      </button>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon" />
      </button>
--- a/imports/ui/components/Prompt/Prompt.js
+++ b/imports/ui/components/Prompt/Prompt.js
@ -40,7 +40,7 @@ class Prompt extends Component {
            <p>{confirmation}</p>
          </Modal.Body>
          <Modal.Footer>
-            <Button className="button-l" bsStyle="primary" onClick={proceed}>{okBtn}</Button>
+            <Button className="button-l" variant="primary" onClick={proceed}>{okBtn}</Button>
            <Button onClick={cancel}>{cancelBtn}</Button>
          </Modal.Footer>
        </Modal>
--- a/imports/ui/components/ReSendEmail/ReSendEmail.js
+++ b/imports/ui/components/ReSendEmail/ReSendEmail.js
@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Alert, Button } from 'react-bootstrap';
+import { Alert, Button } from 'react-bootstrap';
 import { Trans, withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';

@ -16,7 +16,7 @@ const handleResendVerificationEmail = (emailAddress, t) => {

 const ReSendEmail = props => (
  <div>
-  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
+  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button variant="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
  </div>
 );

--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/imports/ui/components/SelectionMap/SelectionMap.js
@ -241,7 +241,7 @@ class SelectionMap extends Component {
                  <ButtonGroup>
                    { this.props.sndBtn && this.props.onSndBtn &&
                      <Button
-                          bsStyle="warning"
+                          variant="warning"
                          title={this.props.sndBtnTitle}
                          onClick={event => this.onSndBtn(event)}
                      >
@ -249,7 +249,7 @@ class SelectionMap extends Component {
                      </Button>
                    }
                      <Button
-                          bsStyle="success"
+                          variant="success"
                          disabled={this.props.disableFstBtn}
                          onClick={event => this.onFstBtn(event)}
                      >
--- a/imports/ui/layouts/App/App.js
+++ b/imports/ui/layouts/App/App.js
@ -4,7 +4,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Router, Switch, Route } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { I18nextProvider } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 import { Meteor } from 'meteor/meteor';
@ -115,7 +115,7 @@ const App = props => (
                <Navigation {...props} />
                <ReSendEmail {...props} />

-                <Grid>
+                <Container>
                  <Switch>
                    <Route exact name="index" path="/" component={Index} />
                    <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
@ -147,7 +147,7 @@ const App = props => (

                    <Route component={NotFound} />
                  </Switch>
-                </Grid>
+                </Container>
                <Footer />
                <Reconnect {...props} />
                <Feedback {...props} />
--- a/imports/ui/pages/Documents/Documents.js
+++ b/imports/ui/pages/Documents/Documents.js
@ -27,7 +27,7 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
  <div className="Documents">
    <div className="page-header clearfix">
      <h4 className="pull-left">Documents</h4>
-      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add Document</Link>
+      <Link className="btn btn-success float-end" to={`${match.url}/new`}>Add Document</Link>
    </div>
    {documents.length ? <Table responsive>
      <thead>
@ -47,14 +47,14 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
            <td>{monthDayYearAtTime(createdAt)}</td>
            <td>
              <Button
-                bsStyle="primary"
+                variant="primary"
                onClick={() => history.push(`${match.url}/${_id}`)}
                block
              >View</Button>
            </td>
            <td>
              <Button
-                bsStyle="danger"
+                variant="danger"
                onClick={() => handleRemove(_id)}
                block
              >Delete</Button>
@ -62,7 +62,7 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
          </tr>
        ))}
      </tbody>
-    </Table> : <Alert bsStyle="warning">No documents yet!</Alert>}
+    </Table> : <Alert variant="warning">No documents yet!</Alert>}
  </div>
 ) : <Loading />);

--- a/imports/ui/pages/Fires/Fires.js
+++ b/imports/ui/pages/Fires/Fires.js
@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import { withTranslation, Trans } from 'react-i18next';
-import { Row, Col, Alert, FormGroup } from 'react-bootstrap';
+import { Row, Col, Alert, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
@ -191,14 +191,14 @@ class Fire extends React.Component {
                { (this.props.falsePositives.length > 0 || this.props.industries.length > 0) &&
                  <Row>
                    <Col>
-                      <Alert bsStyle="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
+                      <Alert variant="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
                    </Col>
                  </Row> }
                <h5>{t('¿No es un fuego forestal?')}</h5>
                <div>
                  <Trans>Indícanos de que tipo de fuego se trata y ayúdanos así a mejorar nuestras notificaciones:</Trans>
                </div>
-                <FormGroup>
+                <Form.Group>
                  <div className="btn-group">
                    <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      {t('Elige un tipo')}
@ -217,7 +217,7 @@ class Fire extends React.Component {
                      }
                    </div>
                  </div>
-                </FormGroup>
+                </Form.Group>
              </Fragment> }

              <h4>{t('Comentarios')}</h4>
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-indent */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Row, Col, Checkbox } from 'react-bootstrap';
+import { ButtonGroup, Row, Col, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
@ -224,13 +224,21 @@ class FiresMap extends React.Component {
                     helpText=""
                     onChange={value => this.onAutocompleteChange(value)}
                 />
-                 <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
-                   <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
-                 </Checkbox>
+                 <Form.Check
+                     type="checkbox"
+                     id="showSubsUnion"
+                     defaultChecked={this.state.showSubsUnion}
+                     onClick={e => this.setShowSubsUnion(e.target.checked)}
+                     label={<span><Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)</span>}
+                 />
                 {(this.state.viewport.zoom >= MAXZOOM) &&
-                  <Checkbox inline={false} defaultChecked={this.state.useMarkers} onClick={e => this.useMarkers(e.target.checked)}>
-                    <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
-                  </Checkbox>}
+                  <Form.Check
+                      type="checkbox"
+                      id="useMarkers"
+                      defaultChecked={this.state.useMarkers}
+                      onClick={e => this.useMarkers(e.target.checked)}
+                      label={<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>}
+                  />}
               </Fragment>}
            </Col>
            <Col xs={12} sm={6} md={6} lg={6} >
--- a/imports/ui/pages/Login/Login.js
+++ b/imports/ui/pages/Login/Login.js
@ -2,7 +2,7 @@

 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
@ -87,28 +87,28 @@ class Login extends React.Component {
              </Col>
            </Row>
            <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-              <FormGroup>
-                <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+              <Form.Group>
+                <Form.Label>{this.t('Correo electrónico')}</Form.Label>
                <input
                  type="email"
                  name="emailAddress"
                  ref={emailAddress => (this.emailAddress = emailAddress)}
                  className="form-control"
                />
-              </FormGroup>
-              <FormGroup>
-                <ControlLabel className="clearfix">
+              </Form.Group>
+              <Form.Group>
+                <Form.Label className="clearfix">
                  <span className="pull-left">{this.t('Contraseña')}</span>
-                  <Link className="pull-right" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
-                </ControlLabel>
+                  <Link className="float-end" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
+                </Form.Label>
                <input
                  type="password"
                  name="password"
                  ref={password => (this.password = password)}
                  className="form-control"
                />
-              </FormGroup>
-              <Button id={testId('loginSubmit')} type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
+              </Form.Group>
+              <Button id={testId('loginSubmit')} type="submit" variant="success">{this.t('Iniciar sesión')}</Button>
              <AccountPageFooter>
                <p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
              </AccountPageFooter>
--- a/imports/ui/pages/NotFound/NotFound.js
+++ b/imports/ui/pages/NotFound/NotFound.js
@ -8,7 +8,7 @@ const NotFound = () => (
    <Helmet>
      <title>This page doesn't exist"</title>
    </Helmet>
-    <Alert bsStyle="danger">
+    <Alert variant="danger">
      <p>
        <Trans i18nKey="not-found">Upppps: Esta página no existe</Trans>
      </p>
--- a/imports/ui/pages/Profile/Profile.js
+++ b/imports/ui/pages/Profile/Profile.js
@ -3,7 +3,7 @@

 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import _ from 'lodash';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
@ -164,8 +164,8 @@ class Profile extends React.Component {
    return !loading ? (<div>
      <Row>
        <Col xs={6}>
-          <FormGroup>
-            <ControlLabel>{this.t('Nombre')}</ControlLabel>
+          <Form.Group>
+            <Form.Label>{this.t('Nombre')}</Form.Label>
            <input
              type="text"
              name="firstName"
@ -173,11 +173,11 @@ class Profile extends React.Component {
              ref={firstName => (this.firstName = firstName)}
              className="form-control"
            />
-          </FormGroup>
+          </Form.Group>
        </Col>
        <Col xs={6}>
-          <FormGroup>
-            <ControlLabel>{this.t('Apellidos')}</ControlLabel>
+          <Form.Group>
+            <Form.Label>{this.t('Apellidos')}</Form.Label>
            <input
              type="text"
              name="lastName"
@ -185,11 +185,11 @@ class Profile extends React.Component {
              ref={lastName => (this.lastName = lastName)}
              className="form-control"
            />
-          </FormGroup>
+          </Form.Group>
        </Col>
      </Row>
-      <FormGroup>
-        <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+      <Form.Group>
+        <Form.Label>{this.t('Correo electrónico')}</Form.Label>
        <input
          type="email"
          name="emailAddress"
@ -197,9 +197,9 @@ class Profile extends React.Component {
          ref={emailAddress => (this.emailAddress = emailAddress)}
          className="form-control"
        />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Idioma')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Idioma')}</Form.Label>
        <div className="btn-group">
          <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {langName[i18n.language]}
@ -219,18 +219,18 @@ class Profile extends React.Component {
          </div>
        </div>
        <InputHint><i className="fa fa-language"></i> <a href="https://translate.comunes.org/projects/todos-contra-el-fuego/" rel="noopener noreferrer" target="_blank">{this.t('Puedes participar en las traducciones')}</a></InputHint>
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Contraseña actual')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Contraseña actual')}</Form.Label>
        <input
          type="password"
          name="currentPassword"
          ref={currentPassword => (this.currentPassword = currentPassword)}
          className="form-control"
        />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Nueva contraseña')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Nueva contraseña')}</Form.Label>
        <input
          type="password"
          name="newPassword"
@ -238,8 +238,8 @@ class Profile extends React.Component {
          className="form-control"
        />
        <InputHint>{this.t('Usa al menos seis caracteres.')}</InputHint>
-      </FormGroup>
-      <Button id={testId('profileSubmit')} type="submit" bsStyle="success">{this.t('Guardar perfíl')}</Button>
+      </Form.Group>
+      <Button id={testId('profileSubmit')} type="submit" variant="success">{this.t('Guardar perfíl')}</Button>
    </div>) : <div />;
  }

--- a/imports/ui/pages/RecoverPassword/RecoverPassword.js
+++ b/imports/ui/pages/RecoverPassword/RecoverPassword.js
@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Alert, Form, Button } from 'react-bootstrap';
 import Col from '../../components/Col/Col';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@ -61,20 +61,20 @@ class RecoverPassword extends React.Component {
        </Helmet>
        <Col xs={12} sm={6} md={5} lg={4}>
          <h4 className="page-header">{this.t('Recupera tu contraseña')}</h4>
-          <Alert bsStyle="info">
+          <Alert variant="info">
            {this.t('Introduce tu correo abajo para recibir un enlace para resetear tu contraseña.')}
          </Alert>
          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{this.t('Correo electrónico')}</Form.Label>
              <input
                type="email"
                name="emailAddress"
                ref={emailAddress => (this.emailAddress = emailAddress)}
                className="form-control"
              />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t('Recupera tu contraseña')}</Button>
+            </Form.Group>
+            <Button type="submit" variant="success">{this.t('Recupera tu contraseña')}</Button>
            <AccountPageFooter>
              <p>{this.t('¿Recuerdas tu contraseña?')} <Link to="/login">{this.t('Iniciar sesión')}</Link>.</p>
            </AccountPageFooter>
--- a/imports/ui/pages/ResetPassword/ResetPassword.js
+++ b/imports/ui/pages/ResetPassword/ResetPassword.js
@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Alert, Form, Button } from 'react-bootstrap';
 import Col from '../../components/Col/Col';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
@ -67,12 +67,12 @@ class ResetPassword extends React.Component {
        </Helmet>
        <Col xs={12} sm={6} md={4}>
          <h4 className="page-header">{this.t("Resetea tu contraseña")}</h4>
-          <Alert bsStyle="info">
+          <Alert variant="info">
            { this.t("Para resetear tu contraseña, introduce una nueva debajo. Iniciarás la sesión con la nueva contraseña.") }
          </Alert>
          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t("Nueva contraseña")}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{this.t("Nueva contraseña")}</Form.Label>
              <input
                type="password"
                className="form-control"
@ -80,9 +80,9 @@ class ResetPassword extends React.Component {
                name="newPassword"
                placeholder={this.t("Nueva contraseña")}
              />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>{this.t("Repite la nueva contraseña")}</ControlLabel>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>{this.t("Repite la nueva contraseña")}</Form.Label>
              <input
                type="password"
                className="form-control"
@ -90,8 +90,8 @@ class ResetPassword extends React.Component {
                name="repeatNewPassword"
                placeholder={this.t("Repite la nueva contraseña")}
              />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t("Resetea la contraseña y entra")}</Button>
+            </Form.Group>
+            <Button type="submit" variant="success">{this.t("Resetea la contraseña y entra")}</Button>
          </form>
        </Col>
      </Row>
--- a/imports/ui/pages/Signup/Signup.js
+++ b/imports/ui/pages/Signup/Signup.js
@ -2,7 +2,7 @@
 /* eslint-disable import/no-absolute-path */

 import React from 'react';
-import { Row, FormGroup, ControlLabel, Button, Checkbox } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
@ -152,39 +152,39 @@ class Signup extends React.Component {
          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
            <Row>
              <Col xs={6}>
-                <FormGroup>
-                  <ControlLabel>{t('Nombre')}</ControlLabel>
+                <Form.Group>
+                  <Form.Label>{t('Nombre')}</Form.Label>
                  <input
                    type="text"
                    name="firstName"
                    ref={firstName => (this.firstName = firstName)}
                    className="form-control"
                  />
-                </FormGroup>
+                </Form.Group>
              </Col>
              <Col xs={6}>
-                <FormGroup>
-                  <ControlLabel>{t('Apellidos')}</ControlLabel>
+                <Form.Group>
+                  <Form.Label>{t('Apellidos')}</Form.Label>
                  <input
                    type="text"
                    name="lastName"
                    ref={lastName => (this.lastName = lastName)}
                    className="form-control"
                  />
-                </FormGroup>
+                </Form.Group>
              </Col>
            </Row>
-            <FormGroup>
-              <ControlLabel>{t('Correo electrónico')}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{t('Correo electrónico')}</Form.Label>
              <input
                type="email"
                name="emailAddress"
                ref={emailAddress => (this.emailAddress = emailAddress)}
                className="form-control"
              />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>{t('Contraseña')}</ControlLabel>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>{t('Contraseña')}</Form.Label>
              <input
                type="password"
                name="password"
@ -192,12 +192,17 @@ class Signup extends React.Component {
                className="form-control"
              />
              <InputHint>{t('Usa al menos seis caracteres.')}</InputHint>
-            </FormGroup>
-            <Checkbox inline={false} name="tos" defaultChecked={this.state.termsAccept} onClick={e => this.setTermsAccept(e.target.checked)}>
-              <Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>
-            </Checkbox>
+            </Form.Group>
+            <Form.Check
+                type="checkbox"
+                id="tos"
+                name="tos"
+                defaultChecked={this.state.termsAccept}
+                onClick={e => this.setTermsAccept(e.target.checked)}
+                label={<Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>}
+            />

-            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} bsStyle="success">{t('Registrarse')}</Button>
+            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} variant="success">{t('Registrarse')}</Button>
            <AccountPageFooter>
              <p>{t('¿Ya tienes un cuenta?')} <Link to={{ pathname: '/login', state: this.state }} >{t('Iniciar sesión')}</Link>.</p>
            </AccountPageFooter>
--- a/imports/ui/pages/Subscriptions/Subscriptions.js
+++ b/imports/ui/pages/Subscriptions/Subscriptions.js
@ -91,11 +91,11 @@ class Subscriptions extends Component {
        </Helmet>
        <h4 className="page-header"><Trans>Suscripciones a alertas de fuegos en zonas de mi interés</Trans></h4>
      { subscriptions.length === 0 ?
-        <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
-        <Alert bsStyle="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
+        <Alert variant="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
+        <Alert variant="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
      }
        { maxDistance && maxDistance.distance > 20 &&
-          <Alert bsStyle="warning"><Trans>Estás subscrito a una zona muy grande</Trans></Alert>
+          <Alert variant="warning"><Trans>Estás subscrito a una zona muy grande</Trans></Alert>
        }
        <br />
        <SelectionMap
--- a/imports/ui/pages/Subscriptions/SubscriptionsMap.js
+++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.js
@ -135,7 +135,7 @@ class SubscriptionsMap extends React.Component {
             <ButtonGroup>
               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
               <Button
-                   bsStyle="success"
+                   variant="success"
                   onClick={() => { this.gotoParticipe(); }}
               >
                 {this.props.t('Participa')}
--- a/imports/ui/pages/VerifyEmail/VerifyEmail.js
+++ b/imports/ui/pages/VerifyEmail/VerifyEmail.js
@ -36,7 +36,7 @@ class VerifyEmail extends React.Component {
      <Helmet>
        <title>{this.t('AppName')}: {this.t('Verifica tu dirección de correo')}</title>
      </Helmet>
-      <Alert bsStyle={!this.state.error ? 'info' : 'danger'}>
+      <Alert variant={!this.state.error ? 'info' : 'danger'}>
        {!this.state.error ? this.t('Verificando...') : this.state.error}
      </Alert>
    </div>);
--- a/imports/ui/pages/ViewDocument/ViewDocument.js
+++ b/imports/ui/pages/ViewDocument/ViewDocument.js
@ -25,8 +25,8 @@ const renderDocument = (doc, match, history) => (doc ? (
  <div className="ViewDocument">
    <div className="page-header clearfix">
      <h4 className="pull-left">{ doc && doc.title }</h4>
-      <ButtonToolbar className="pull-right">
-        <ButtonGroup bsSize="small">
+      <ButtonToolbar className="float-end">
+        <ButtonGroup size="sm">
          <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
          <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
            Delete
--- a/imports/ui/pages/ViewSubscription/ViewSubscription.js
+++ b/imports/ui/pages/ViewSubscription/ViewSubscription.js
@ -25,8 +25,8 @@ const renderSubscription = (doc, match, history) => (doc ? (
  <div className="ViewSubscription">
    <div className="page-header clearfix">
      <h4 className="pull-left">{ doc && doc.title }</h4>
-      <ButtonToolbar className="pull-right">
-        <ButtonGroup bsSize="small">
+      <ButtonToolbar className="float-end">
+        <ButtonGroup size="sm">
          <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
          <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
            Delete
--- a/imports/ui/stylesheets/forms.scss
+++ b/imports/ui/stylesheets/forms.scss
@ -1,12 +1,22 @@
@use './mixins' as *;
@use './colors' as *;

+// react-bootstrap v2 emits Bootstrap 5 form markup (`.form-label`) while we
+// still ship the Bootstrap 4 stylesheet (alexwine:bootstrap-4), which has no
+// `.form-label`. Shim it until the Bootstrap 4 -> 5 CSS jump lands (tracked as
+// debt in UPGRADE.md). v2's Form.Group is a plain div, so restore the old
+// per-field bottom margin the removed `.form-group` used to give.
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
 form {
  label,
  .control-label {
    display: block;
  }
-  
+
  label.error {
    display: block;
    margin-top: 8px;
--- a/package-lock.json
+++ b/package-lock.json
@ -60,7 +60,7 @@
        "rc-slider": "^8.5.0",
        "rc-tooltip": "^3.7.0",
        "react": "^18.3.1",
-        "react-bootstrap": "^0.31.5",
+        "react-bootstrap": "^2.10.10",
        "react-confirm": "^0.1.16",
        "react-dom": "^18.3.1",
        "react-helmet-async": "^2.0.5",
@ -115,6 +115,33 @@
        "moment-timezone": "^0.5.13"
      }
    },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+      "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+      "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.9",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.9.tgz",
+      "integrity": "sha512-kzP/M/mbQxODlmOt4bIQZ2SBVUWUSqMLXooXixnX7noche8WHaQcA+nwFN1K2KCF/cp+LDUhcJsCicwkvhD1pg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
    "node_modules/@mapbox/node-pre-gyp": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@ -1324,6 +1351,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@prisma/instrumentation": {
      "version": "5.22.0",
      "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-5.22.0.tgz",
@ -1379,6 +1416,95 @@
        "node": ">=10"
      }
    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.10.1.tgz",
+      "integrity": "sha512-jn038/ZYmu6DpfXJ6r2U9zFFppjbc9wnApPJSCxao2RZVEqep4YyoniHSy8qv6V21/xyS4IV7W9a+X2jOjSuag==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "react-aria": "^3.48.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
+      "integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@popperjs/core": "^2.11.8",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.5.0",
+        "@types/warning": "^3.0.3",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.4",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/@sentry-internal/browser-utils": {
      "version": "8.55.2",
      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.2.tgz",
@ -1520,6 +1646,15 @@
        "@opentelemetry/semantic-conventions": "^1.28.0"
      }
    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
    "node_modules/@turf/bbox": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.0.1.tgz",
@ -1738,6 +1873,30 @@
        "@types/pg": "*"
      }
    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/shimmer": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz",
@ -1753,6 +1912,12 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/warning": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.4.tgz",
+      "integrity": "sha512-CqN8MnISMwQbLJXO3doBAV4Yw9hx9/Pyr2rZ78+NfaCnhyRA/nKrpyk6E7mKw17ZOaQdLpK9GiUjrqLzBlN3sg==",
+      "license": "MIT"
+    },
    "node_modules/abab": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@ -1967,6 +2132,18 @@
        "sprintf-js": "~1.0.2"
      }
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/aria-query": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.0.tgz",
@ -4158,9 +4335,10 @@
      "license": "MIT"
    },
    "node_modules/classnames": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
-      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
    },
    "node_modules/cli-cursor": {
      "version": "2.1.0",
@ -4208,6 +4386,15 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/co": {
      "version": "4.6.0",
      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
@ -4627,6 +4814,12 @@
        "cssom": "0.3.x"
      }
    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
    "node_modules/d": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
@ -4770,6 +4963,15 @@
      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/detect-indent": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
@ -4824,9 +5026,14 @@
      "integrity": "sha512-yBCGmhzj6SRaeAJlFUK/iMDh6bBpQE7EuChyPnrV8LQFV3vo3XghZw2lgHgj/8o9USFunVlvJ6YXfQWVdGnV8Q=="
    },
    "node_modules/dom-helpers": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz",
-      "integrity": "sha1-MgPgf+0he9H0JLAZc1WC/Deyglo="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
    },
    "node_modules/dom-serializer": {
      "version": "0.1.0",
@ -10905,11 +11112,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/keycode": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
-      "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
-    },
    "node_modules/kind-of": {
      "version": "3.2.2",
      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@ -19087,16 +19289,27 @@
      }
    },
    "node_modules/prop-types-extra": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.0.1.tgz",
-      "integrity": "sha1-pXvUgQ6C0no/9DF+zBtK0AX3moI=",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
      "dependencies": {
-        "warning": "^3.0.0"
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
      },
      "peerDependencies": {
        "react": ">=0.14.0"
      }
    },
+    "node_modules/prop-types-extra/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/prr": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/prr/-/prr-0.0.0.tgz",
@ -19287,25 +19500,65 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/react-bootstrap": {
-      "version": "0.31.5",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.31.5.tgz",
-      "integrity": "sha512-xgDihgX4QvYHmHzL87faDBMDnGfYyqcrqV0TEbWY+JizePOG1vfb8M3xJN+6MJ3kUYqDtQSZ7v/Q6Y5YDrkMdA==",
+    "node_modules/react-aria": {
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
+      "integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
+      "license": "Apache-2.0",
      "dependencies": {
-        "babel-runtime": "^6.11.6",
-        "classnames": "^2.2.5",
-        "dom-helpers": "^3.2.0",
-        "invariant": "^2.2.1",
-        "keycode": "^2.1.2",
-        "prop-types": "^15.5.10",
-        "prop-types-extra": "^1.0.1",
-        "react-overlays": "^0.7.4",
-        "uncontrollable": "^4.1.0",
-        "warning": "^3.0.0"
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.36.0",
+        "@swc/helpers": "^0.5.0",
+        "aria-hidden": "^1.2.3",
+        "clsx": "^2.0.0",
+        "react-stately": "3.48.0",
+        "use-sync-external-store": "^1.6.0"
      },
      "peerDependencies": {
-        "react": "^0.14.9 || >=15.3.0",
-        "react-dom": "^0.14.9 || >=15.3.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.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",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-bootstrap/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
      }
    },
    "node_modules/react-confirm": {
@ -19441,6 +19694,12 @@
        "loose-envify": "^1.0.0"
      }
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
    "node_modules/react-mobile-store-button": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/react-mobile-store-button/-/react-mobile-store-button-0.0.3.tgz",
@ -19468,22 +19727,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/react-overlays": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.7.4.tgz",
-      "integrity": "sha512-7vsooMx3siLAuEfTs8FYeP/lAORWWFXTO8PON3KgX0Htq1Oa+po6ioSjGyO0/GO5CVSMNhpWt6V2opeexHgBuQ==",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "dom-helpers": "^3.2.1",
-        "prop-types": "^15.5.10",
-        "prop-types-extra": "^1.0.1",
-        "warning": "^3.0.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.9 || >=15.3.0",
-        "react-dom": "^0.14.9 || >=15.3.0"
-      }
-    },
    "node_modules/react-places-autocomplete": {
      "version": "5.4.3",
      "resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-5.4.3.tgz",
@ -19631,6 +19874,39 @@
        "react": "^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0-0"
      }
    },
+    "node_modules/react-stately": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
+      "integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.36.0",
+        "@swc/helpers": "^0.5.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/read-pkg": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -21091,6 +21367,12 @@
      "integrity": "sha1-OTvnMKlEb9Hq1tpZoBQwjzbCics=",
      "dev": true
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
    "node_modules/tunnel-agent": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@ -21172,14 +21454,27 @@
      "optional": true
    },
    "node_modules/uncontrollable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-4.1.0.tgz",
-      "integrity": "sha1-4DWCkSUuGGUiLZCTmxny9J+Bwak=",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
      "dependencies": {
-        "invariant": "^2.1.0"
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
      },
      "peerDependencies": {
-        "react": ">=0.11.0"
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
    "node_modules/util-deprecate": {
--- a/package.json
+++ b/package.json
@ -60,7 +60,7 @@
    "rc-slider": "^8.5.0",
    "rc-tooltip": "^3.7.0",
    "react": "^18.3.1",
-    "react-bootstrap": "^0.31.5",
+    "react-bootstrap": "^2.10.10",
    "react-confirm": "^0.1.16",
    "react-dom": "^18.3.1",
    "react-helmet-async": "^2.0.5",