diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..1cb9db4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Before contributing to this project, please review [Contribution.md](https://github.com/nasa/earthdata-search/blob/master/CONTRIBUTING.md).
+
+### Description
+A clear and concise description of what the bug is.
+
+**Reproduction Steps**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**System Information (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+### Additional context
+Add any other context about the problem here.
+
+### Acceptance Criteria
+Steps to produce expected behavior.
diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md
new file mode 100644
index 0000000..cc9b875
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/custom.md
@@ -0,0 +1,18 @@
+---
+name: Custom issue template
+about: Template for general tasks and improvements
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Please review [Contribution.md](https://github.com/nasa/earthdata-search/blob/master/CONTRIBUTING.md) before contributing to this project.
+
+### Description
+Describe the purpose of the issue
+
+### Files
+Attach any relevant images or files
+
+### Acceptance Criteria
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..bbcbbe7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..a771a6a
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,33 @@
+# Overview
+
+### What is the feature?
+
+Please summarize the feature or fix.
+
+### What is the Solution?
+
+Summarize what you changed.
+
+### What areas of the application does this impact?
+
+List impacted areas.
+
+# Testing
+
+### Reproduction steps
+
+1. Step 1
+2. Step 2...
+
+### Attachments
+
+Please include relevant screenshots or files that would be helpful in reviewing and verifying this change.
+
+# Checklist
+
+- [ ] I have added automated tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 18d3a9c..497154d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
         matrix:
-          node-version: ['lts/hydrogen']
+          node-version: ['lts/jod']
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -40,7 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['lts/hydrogen']
+        node-version: ['lts/iron', 'lts/jod']
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -74,7 +74,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
         matrix:
-          node-version: ['lts/hydrogen']
+          node-version: ['lts/jod']
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -105,9 +105,15 @@ jobs:
         directory: 'cypress-coverage'
       env:
         CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  tests-passed:
+    needs: [jest, cypress]
+    runs-on: ubuntu-latest
+    steps:
+    - name: All Tests Have Passed
+      run: 'echo true'
   deploy:
     if: success() && github.ref == 'refs/heads/main' # only run on main success
-    needs: [jest, cypress] # only run after jest and cypress jobs complete
+    needs: [tests-passed] # only run after all test jobs complete
     runs-on: ubuntu-latest
     steps:
     - name: Checkout code
diff --git a/.nvmrc b/.nvmrc
index a77793e..0559089 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-lts/hydrogen
+lts/jod
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index 2096c74..43c1144 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,9 +3,8 @@ module.exports = {
     [
       '@babel/preset-env', {
         targets: {
-          node: '12',
-          esmodules: true,
-          ie: '10'
+          node: '22',
+          esmodules: true
         }
       }
     ],
diff --git a/cypress/e2e/callbacks.cy.js b/cypress/e2e/callbacks.cy.js
index eeb4e27..3bae879 100644
--- a/cypress/e2e/callbacks.cy.js
+++ b/cypress/e2e/callbacks.cy.js
@@ -17,13 +17,20 @@ describe('Callbacks', () => {
     getByTestId('timelineInterval-31').trigger('click')
 
     // Click the focus next button
-    getByTestId('timelineList')
-      .trigger('keydown', { key: 'ArrowLeft' })
+    getByTestId('timelineList').trigger('keydown', { key: 'ArrowLeft' })
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleFocusedIntervalClick called')
-      expect(win.console.log.getCall(1).args[0]).to.equal('handleArrowKeyPan called')
-      expect(win.console.log.getCall(1).args[1]).to.equal('{"center":1609459200000,"focusedEnd":1612137599999,"focusedStart":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleFocusedIntervalClick called'
+      )
+
+      expect(win.console.log.getCall(1).args[0]).to.equal(
+        'handleArrowKeyPan called'
+      )
+
+      expect(win.console.log.getCall(1).args[1]).to.equal(
+        '{"center":1609459200000,"focusedEnd":1612137599999,"focusedStart":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}'
+      )
     })
   })
 
@@ -35,9 +42,17 @@ describe('Callbacks', () => {
     getByTestId('focusNext').trigger('click')
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleFocusedIntervalClick called')
-      expect(win.console.log.getCall(1).args[0]).to.equal('handleButtonPan called')
-      expect(win.console.log.getCall(1).args[1]).to.equal('{"center":1609459200000,"focusedEnd":1612137599999,"focusedStart":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleFocusedIntervalClick called'
+      )
+
+      expect(win.console.log.getCall(1).args[0]).to.equal(
+        'handleButtonPan called'
+      )
+
+      expect(win.console.log.getCall(1).args[1]).to.equal(
+        '{"center":1609459200000,"focusedEnd":1612137599999,"focusedStart":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}'
+      )
     })
   })
 
@@ -46,8 +61,13 @@ describe('Callbacks', () => {
     getByTestId('zoomUp').trigger('click')
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleButtonZoom called')
-      expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":4}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleButtonZoom called'
+      )
+
+      expect(win.console.log.getCall(0).args[1]).to.equal(
+        '{"center":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":4}'
+      )
     })
   })
 
@@ -67,8 +87,13 @@ describe('Callbacks', () => {
       .trigger('pointerup', { pointerId: 1 })
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleTemporalSet called')
-      expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1609459200000,"temporalEnd":1610769677838,"temporalStart":1608006278919,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleTemporalSet called'
+      )
+
+      expect(win.console.log.getCall(0).args[1]).to.equal(
+        '{"center":1609459200000,"temporalEnd":1610498221714,"temporalStart":1608307241143,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}'
+      )
     })
   })
 
@@ -86,8 +111,13 @@ describe('Callbacks', () => {
       .trigger('pointerup', { pointerId: 1 })
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleDragPan called')
-      expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1608120233514,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleDragPan called'
+      )
+
+      expect(win.console.log.getCall(0).args[1]).to.equal(
+        '{"center":1608397590857,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}'
+      )
     })
   })
 
@@ -96,33 +126,46 @@ describe('Callbacks', () => {
     getByTestId('timelineInterval-31').trigger('click')
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleFocusedIntervalClick called')
-      expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1609459200000,"focusedEnd":1612137599999,"focusedStart":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleFocusedIntervalClick called'
+      )
+
+      expect(win.console.log.getCall(0).args[1]).to.equal(
+        '{"center":1609459200000,"focusedEnd":1612137599999,"focusedStart":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}'
+      )
     })
   })
 
   it('calls onScrollPan', () => {
     // Scroll the timeline
-    getByTestId('timelineList')
-      .trigger('wheel', { deltaX: 47 })
+    getByTestId('timelineList').trigger('wheel', { deltaX: 47 })
 
     // Wait for the wheel event to end
     cy.wait(300)
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleScrollPan called')
-      expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1610798166486,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleScrollPan called'
+      )
+
+      expect(win.console.log.getCall(0).args[1]).to.equal(
+        '{"center":1610520809143,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}'
+      )
     })
   })
 
   it('calls onScrollZoom', () => {
     // Scroll the timeline
-    getByTestId('timelineList')
-      .trigger('wheel', { deltaY: 1 })
+    getByTestId('timelineList').trigger('wheel', { deltaY: 1 })
 
     cy.window().then((win) => {
-      expect(win.console.log.getCall(0).args[0]).to.equal('handleScrollZoom called')
-      expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":2}')
+      expect(win.console.log.getCall(0).args[0]).to.equal(
+        'handleScrollZoom called'
+      )
+
+      expect(win.console.log.getCall(0).args[1]).to.equal(
+        '{"center":1609459200000,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":2}'
+      )
     })
   })
 })
diff --git a/cypress/e2e/focused_intervals.cy.js b/cypress/e2e/focused_intervals.cy.js
index 963ee48..27cb699 100644
--- a/cypress/e2e/focused_intervals.cy.js
+++ b/cypress/e2e/focused_intervals.cy.js
@@ -2,7 +2,7 @@
 
 import { getByTestId } from '../support/getByTestId'
 
-describe('Focused intervals', () => {
+describe('intervals', () => {
   describe('when no temporal range exists', () => {
     beforeEach(() => {
       cy.visit('/empty')
@@ -13,16 +13,16 @@ describe('Focused intervals', () => {
       // Click on a timeline interval bottom
       getByTestId('timelineInterval-31').trigger('click')
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2021-01-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2021-01-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2021-01-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2021-01-31T23:59:59.999Z')
     })
 
     it('clicking an interval in the middle does not select it as the focused interval', () => {
       // Click in the middle of the timeline list
       getByTestId('timelineList').trigger('click')
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: null')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: null')
+      getByTestId('focusedStart').should('have.text', 'Start: null')
+      getByTestId('focusedEnd').should('have.text', 'End: null')
     })
 
     it('clicking a focused interval removes focus', () => {
@@ -45,24 +45,24 @@ describe('Focused intervals', () => {
       // force: true - force the click to happen through the temporal range
       getByTestId('timelineInterval-31').trigger('click', { force: true })
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2021-01-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2021-01-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2021-01-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2021-01-31T23:59:59.999Z')
     })
 
     it('clicking an interval outside the temporal range does not select it as the focused interval', () => {
       // Click on a timeline interval bottom that is outside the temporal range
       getByTestId('timelineInterval-30').trigger('click')
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: null')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: null')
+      getByTestId('focusedStart').should('have.text', 'Start: null')
+      getByTestId('focusedEnd').should('have.text', 'End: null')
     })
 
     it('clicking an interval in the middle does not select it as the focused interval', () => {
       // Click in the middle of the timeline list
       getByTestId('timelineList').trigger('click')
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: null')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: null')
+      getByTestId('focusedStart').should('have.text', 'Start: null')
+      getByTestId('focusedEnd').should('have.text', 'End: null')
     })
 
     it('selects the correct interval when pressing the left arrow button', () => {
@@ -70,13 +70,13 @@ describe('Focused intervals', () => {
       // force: true - force the click to happen through the temporal range
       getByTestId('timelineInterval-31').trigger('click', { force: true })
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2021-01-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2021-01-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2021-01-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2021-01-31T23:59:59.999Z')
 
       getByTestId('timeline').type('{leftArrow}')
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2020-12-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2020-12-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2020-12-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2020-12-31T23:59:59.999Z')
     })
 
     it('selects the correct interval when pressing the right arrow button', () => {
@@ -84,13 +84,13 @@ describe('Focused intervals', () => {
       // force: true - force the click to happen through the temporal range
       getByTestId('timelineInterval-32').trigger('click', { force: true })
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2020-12-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2020-12-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2020-12-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2020-12-31T23:59:59.999Z')
 
       getByTestId('timeline').type('{rightArrow}')
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2021-01-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2021-01-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2021-01-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2021-01-31T23:59:59.999Z')
     })
 
     it('selects the correct interval when pressing the focus previous button', () => {
@@ -98,13 +98,13 @@ describe('Focused intervals', () => {
       // force: true - force the click to happen through the temporal range
       getByTestId('timelineInterval-31').trigger('click', { force: true })
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2021-01-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2021-01-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2021-01-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2021-01-31T23:59:59.999Z')
 
       getByTestId('focusPrevious').click()
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2020-12-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2020-12-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2020-12-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2020-12-31T23:59:59.999Z')
     })
 
     it('selects the correct interval when pressing the focus next button', () => {
@@ -112,13 +112,13 @@ describe('Focused intervals', () => {
       // force: true - force the click to happen through the temporal range
       getByTestId('timelineInterval-32').trigger('click', { force: true })
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2020-12-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2020-12-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2020-12-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2020-12-31T23:59:59.999Z')
 
       getByTestId('focusNext').click()
 
-      getByTestId('focusedStart').should('have.text', 'Focused Start: 2021-01-01T00:00:00.000Z')
-      getByTestId('focusedEnd').should('have.text', 'Focused End: 2021-01-31T23:59:59.999Z')
+      getByTestId('focusedStart').should('have.text', 'Start: 2021-01-01T00:00:00.000Z')
+      getByTestId('focusedEnd').should('have.text', 'End: 2021-01-31T23:59:59.999Z')
     })
   })
 
diff --git a/cypress/e2e/resizing.cy.js b/cypress/e2e/resizing.cy.js
index e17ad5d..90e8f65 100644
--- a/cypress/e2e/resizing.cy.js
+++ b/cypress/e2e/resizing.cy.js
@@ -9,9 +9,9 @@ describe('Window resizing', () => {
     // Mouse over the temporal range
     getByTestId('timelineList').rightclick()
 
-    getByTestId('center').should('have.text', 'Center: Fri, 01 Jan 2021 00:00:00 GMT')
+    getByTestId('center').should('have.text', 'Center:Fri, 01 Jan 2021 00:00:00 GMT')
     getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38')
-    getByTestId('tooltip').should('have.css', 'left', '552.507px')
+    getByTestId('tooltip').should('have.css', 'left', '696.856px')
     getByTestId('tooltip').should('have.css', 'bottom', '2px')
 
     // Change the window from 1400x1100 to 1000x1100
@@ -20,9 +20,9 @@ describe('Window resizing', () => {
     // Mouse over the temporal range
     getByTestId('timelineList').rightclick()
 
-    getByTestId('center').should('have.text', 'Center: Fri, 01 Jan 2021 00:00:00 GMT')
+    getByTestId('center').should('have.text', 'Center:Fri, 01 Jan 2021 00:00:00 GMT')
     getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38')
-    getByTestId('tooltip').should('have.css', 'left', '462.911px')
+    getByTestId('tooltip').should('have.css', 'left', '497.754px')
     getByTestId('tooltip').should('have.css', 'bottom', '2px')
 
     // Drag the timeline a little
@@ -31,9 +31,9 @@ describe('Window resizing', () => {
       .trigger('pointermove', 450, 25, { pointerId: 1 })
       .trigger('pointerup', { pointerId: 1 })
 
-    getByTestId('center').should('have.text', 'Center: Tue, 19 Jan 2021 11:55:21 GMT')
+    getByTestId('center').should('have.text', 'Center:Mon, 18 Jan 2021 04:50:52 GMT')
     getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38')
-    getByTestId('tooltip').should('have.css', 'left', '415.911px')
+    getByTestId('tooltip').should('have.css', 'left', '450.754px')
     getByTestId('tooltip').should('have.css', 'bottom', '2px')
 
     // Reset the window size
@@ -42,9 +42,9 @@ describe('Window resizing', () => {
     // Mouse over the temporal range
     getByTestId('timelineList').rightclick()
 
-    getByTestId('center').should('have.text', 'Center: Tue, 19 Jan 2021 11:55:21 GMT')
+    getByTestId('center').should('have.text', 'Center:Mon, 18 Jan 2021 04:50:52 GMT')
     getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38')
-    getByTestId('tooltip').should('have.css', 'left', '496.41px')
+    getByTestId('tooltip').should('have.css', 'left', '631.056px')
     getByTestId('tooltip').should('have.css', 'bottom', '2px')
   })
 })
diff --git a/cypress/e2e/temporal_dragging.cy.js b/cypress/e2e/temporal_dragging.cy.js
index 72b13f3..572bf1c 100644
--- a/cypress/e2e/temporal_dragging.cy.js
+++ b/cypress/e2e/temporal_dragging.cy.js
@@ -1,6 +1,6 @@
 import { getByTestId } from '../support/getByTestId'
 
-describe('Temporal dragging', () => {
+describe('dragging', () => {
   describe('creating temporal range', () => {
     beforeEach(() => {
       cy.visit('/empty')
@@ -70,8 +70,8 @@ describe('Temporal dragging', () => {
             clientY: 10
           })
 
-        getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-12-15T04:24:38.919Z')
-        getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-01-16T04:01:17.838Z')
+        getByTestId('temporalStart').should('have.text', 'Start: 2020-12-18T16:00:41.143Z')
+        getByTestId('temporalEnd').should('have.text', 'End: 2021-01-13T00:37:01.714Z')
       })
 
       it('when mousing out of a temporal marker does not hover the marker ', () => {
@@ -114,8 +114,8 @@ describe('Temporal dragging', () => {
           })
           .trigger('pointerup', { pointerId: 1 })
 
-        getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z')
-        getByTestId('temporalEnd').should('have.text', 'Temporal End: 2020-12-15T04:24:38.919Z')
+        getByTestId('temporalStart').should('have.text', 'Start: 2020-11-23T07:24:20.571Z')
+        getByTestId('temporalEnd').should('have.text', 'End: 2020-12-18T16:00:41.143Z')
       })
     })
   })
@@ -136,8 +136,8 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: null')
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: null')
+      getByTestId('temporalStart').should('have.text', 'Start: null')
+      getByTestId('temporalEnd').should('have.text', 'End: null')
     })
 
     it('clicking on the middle of the timeline does not removes the temporal range', () => {
@@ -148,8 +148,8 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-12-15T05:30:49.884Z')
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-01-16T03:01:38.533Z')
+      getByTestId('temporalStart').should('have.text', 'Start: 2020-12-15T05:30:49.884Z')
+      getByTestId('temporalEnd').should('have.text', 'End: 2021-01-16T03:01:38.533Z')
     })
   })
 
@@ -175,8 +175,8 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z')
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-01-16T03:01:38.533Z')
+      getByTestId('temporalStart').should('have.text', 'Start: 2020-11-23T07:24:20.571Z')
+      getByTestId('temporalEnd').should('have.text', 'End: 2021-01-16T03:01:38.533Z')
     })
 
     it('dragging the start marker past the end marker changes the temporal range', () => {
@@ -194,8 +194,8 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: 2021-01-16T03:01:38.533Z')
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-02-18T03:22:22.703Z')
+      getByTestId('temporalStart').should('have.text', 'Start: 2021-01-16T03:01:38.533Z')
+      getByTestId('temporalEnd').should('have.text', 'End: 2021-02-08T04:02:44.571Z')
     })
 
     it('dragging the end marker changes the temporal range', () => {
@@ -213,8 +213,8 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-12-15T05:30:49.884Z')
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-02-18T03:22:22.703Z')
+      getByTestId('temporalStart').should('have.text', 'Start: 2020-12-15T05:30:49.884Z')
+      getByTestId('temporalEnd').should('have.text', 'End: 2021-02-08T04:02:44.571Z')
     })
 
     it('dragging the end marker past the start marker changes the temporal range', () => {
@@ -232,8 +232,8 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z')
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: 2020-12-15T05:30:49.884Z')
+      getByTestId('temporalStart').should('have.text', 'Start: 2020-11-23T07:24:20.571Z')
+      getByTestId('temporalEnd').should('have.text', 'End: 2020-12-15T05:30:49.884Z')
     })
   })
 
@@ -257,7 +257,7 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z')
+      getByTestId('temporalStart').should('have.text', 'Start: 2020-11-23T07:24:20.571Z')
     })
 
     it('dragging the end marker changes the temporal range', () => {
@@ -279,7 +279,7 @@ describe('Temporal dragging', () => {
         })
         .trigger('pointerup', { pointerId: 1 })
 
-      getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-02-18T03:22:22.703Z')
+      getByTestId('temporalEnd').should('have.text', 'End: 2021-02-08T04:02:44.571Z')
     })
   })
 })
diff --git a/cypress/e2e/temporal_tooltips.cy.js b/cypress/e2e/temporal_tooltips.cy.js
index c595305..ee66143 100644
--- a/cypress/e2e/temporal_tooltips.cy.js
+++ b/cypress/e2e/temporal_tooltips.cy.js
@@ -16,7 +16,7 @@ describe('Temporal tooltips', () => {
       getByTestId('timelineList').rightclick()
 
       getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38')
-      getByTestId('tooltip').should('have.css', 'left', '552.507px')
+      getByTestId('tooltip').should('have.css', 'left', '696.856px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
 
@@ -25,7 +25,7 @@ describe('Temporal tooltips', () => {
       getByTestId('startMarker').rightclick()
 
       getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49')
-      getByTestId('tooltip').should('have.css', 'left', '504.139px')
+      getByTestId('tooltip').should('have.css', 'left', '635.852px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
 
@@ -34,7 +34,7 @@ describe('Temporal tooltips', () => {
       getByTestId('endMarker').rightclick()
 
       getByTestId('tooltip').should('have.text', '16 Jan 2021 03:01:38')
-      getByTestId('tooltip').should('have.css', 'left', '600.874px')
+      getByTestId('tooltip').should('have.css', 'left', '757.86px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
   })
@@ -50,7 +50,7 @@ describe('Temporal tooltips', () => {
       getByTestId('timelineList').rightclick()
 
       getByTestId('tooltip').should('have.text', '15 Dec 2020 13:24:20 ongoing')
-      getByTestId('tooltip').should('have.css', 'left', '807.568px')
+      getByTestId('tooltip').should('have.css', 'left', '1018.55px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
 
@@ -59,7 +59,7 @@ describe('Temporal tooltips', () => {
       getByTestId('startMarker').rightclick()
 
       getByTestId('tooltip').should('have.text', '15 Dec 2020 13:24:20')
-      getByTestId('tooltip').should('have.css', 'left', '505.137px')
+      getByTestId('tooltip').should('have.css', 'left', '637.109px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
   })
@@ -75,7 +75,7 @@ describe('Temporal tooltips', () => {
       getByTestId('timelineList').rightclick()
 
       getByTestId('tooltip').should('have.text', 'Up to 16 Jan 2021 10:55:09')
-      getByTestId('tooltip').should('have.css', 'left', '300.936px')
+      getByTestId('tooltip').should('have.css', 'left', '379.559px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
 
@@ -84,7 +84,7 @@ describe('Temporal tooltips', () => {
       getByTestId('endMarker').rightclick()
 
       getByTestId('tooltip').should('have.text', '16 Jan 2021 10:55:09')
-      getByTestId('tooltip').should('have.css', 'left', '601.872px')
+      getByTestId('tooltip').should('have.css', 'left', '759.117px')
       getByTestId('tooltip').should('have.css', 'bottom', '2px')
     })
   })
diff --git a/cypress/e2e/timeline_dragging.cy.js b/cypress/e2e/timeline_dragging.cy.js
index 2b3114d..e966d02 100644
--- a/cypress/e2e/timeline_dragging.cy.js
+++ b/cypress/e2e/timeline_dragging.cy.js
@@ -1,10 +1,10 @@
 import { getByTestId } from '../support/getByTestId'
 
-const startCenter = 'Center: Fri, 01 Jan 2021 00:00:00 GMT'
-const backwardCenter = 'Center: Wed, 16 Dec 2020 12:03:53 GMT'
-const forwardCenter = 'Center: Sat, 16 Jan 2021 11:56:06 GMT'
-const timelineRangeStart = 'Timeline Start: 2018-07-01T00:00:00.000Z'
-const timelineRangeEnd = 'Timeline End: 2023-07-01T00:00:00.000Z'
+const startCenter = 'Center:Fri, 01 Jan 2021 00:00:00 GMT'
+const backwardCenter = 'Center:Sat, 19 Dec 2020 17:06:30 GMT'
+const forwardCenter = 'Center:Wed, 13 Jan 2021 06:53:29 GMT'
+const timelineRangeStart = 'Start:2018-07-01T00:00:00.000Z'
+const timelineRangeEnd = 'End:2023-07-01T00:00:00.000Z'
 
 describe('Timeline dragging', () => {
   beforeEach(() => {
@@ -24,7 +24,9 @@ describe('Timeline dragging', () => {
           pointerId: 1,
           clientX: 550
         })
-        .trigger('pointerup', { pointerId: 1 })
+        .trigger('pointerup', {
+          pointerId: 1
+        })
 
       getByTestId('center').should('have.text', backwardCenter)
       getByTestId('timelineStart').should('have.text', timelineRangeStart)
@@ -39,18 +41,20 @@ describe('Timeline dragging', () => {
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: 1900,
-            clientY: 200
+            clientX: 2400,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timelineInterval').should('have.length', 91)
         getByTestId('timelineInterval').eq(0).should('have.text', '2016Jan')
-        getByTestId('timelineStart').should('have.text', 'Timeline Start: 2016-01-01T00:00:00.000Z')
+        getByTestId('timelineStart').should('have.text', 'Start:2016-01-01T00:00:00.000Z')
       })
     })
 
@@ -62,53 +66,61 @@ describe('Timeline dragging', () => {
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: 1900,
-            clientY: 200
+            clientX: 2400,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timeline')
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: 2800,
-            clientY: 200
+            clientX: 3800,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timeline')
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: 2800,
-            clientY: 200
+            clientX: 3800,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timeline')
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: 2800,
-            clientY: 200
+            clientX: 3800,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timelineInterval').should('have.length', 151)
       })
@@ -128,7 +140,9 @@ describe('Timeline dragging', () => {
           pointerId: 1,
           clientX: 450
         })
-        .trigger('pointerup', { pointerId: 1 })
+        .trigger('pointerup', {
+          pointerId: 1
+        })
 
       getByTestId('center').should('have.text', forwardCenter)
       getByTestId('timelineStart').should('have.text', timelineRangeStart)
@@ -143,18 +157,20 @@ describe('Timeline dragging', () => {
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: -2000,
-            clientY: 200
+            clientX: -2500,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timelineInterval').should('have.length', 91)
         getByTestId('timelineInterval').eq(-1).should('have.text', '2026Jan')
-        getByTestId('timelineEnd').should('have.text', 'Timeline End: 2026-01-01T00:00:00.000Z')
+        getByTestId('timelineEnd').should('have.text', 'End:2026-01-01T00:00:00.000Z')
       })
     })
 
@@ -166,53 +182,61 @@ describe('Timeline dragging', () => {
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: -1900,
-            clientY: 200
+            clientX: -2400,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timeline')
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: -2800,
-            clientY: 200
+            clientX: -3800,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timeline')
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: -2800,
-            clientY: 200
+            clientX: -3800,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timeline')
           .trigger('pointerdown', {
             pointerId: 1,
             clientX: 0,
-            clientY: 200
+            clientY: 350
           })
           .trigger('pointermove', {
             pointerId: 1,
-            clientX: -2800,
-            clientY: 200
+            clientX: -3800,
+            clientY: 350
+          })
+          .trigger('pointerup', {
+            pointerId: 1
           })
-          .trigger('pointerup', { pointerId: 1 })
 
         getByTestId('timelineInterval').should('have.length', 151)
       })
diff --git a/cypress/e2e/timeline_zooming.cy.js b/cypress/e2e/timeline_zooming.cy.js
index 2e9eb16..be1322e 100644
--- a/cypress/e2e/timeline_zooming.cy.js
+++ b/cypress/e2e/timeline_zooming.cy.js
@@ -1,11 +1,11 @@
 import { getByTestId } from '../support/getByTestId'
 
-const startCenter = 'Center: Fri, 01 Jan 2021 00:00:00 GMT'
-const zoom1Center = 'Center: Tue, 23 Mar 2021 21:04:51 GMT'
-const zoom2Center = 'Center: Wed, 17 Mar 2021 08:57:04 GMT'
-const zoom3Center = 'Center: Fri, 01 Jan 2021 00:00:00 GMT'
-const zoom4Center = 'Center: Tue, 25 Dec 2018 15:30:24 GMT'
-const zoom5Center = 'Center: Mon, 04 Jan 2010 06:27:34 GMT'
+const startCenter = 'Center:Fri, 01 Jan 2021 00:00:00 GMT'
+const zoom1Center = 'Center:Sat, 06 Mar 2021 22:01:42 GMT'
+const zoom2Center = 'Center:Mon, 01 Mar 2021 13:58:17 GMT'
+const zoom3Center = 'Center:Thu, 31 Dec 2020 23:59:59 GMT'
+const zoom4Center = 'Center:Mon, 27 May 2019 09:12:14 GMT'
+const zoom5Center = 'Center:Sat, 14 Apr 2012 21:22:21 GMT'
 
 const scrollWheel = (direction) => {
   getByTestId('timelineList')
@@ -64,35 +64,35 @@ describe('Timeline zooming', () => {
 
   describe('when zooming with the mouse wheel', () => {
     it('does not scroll past min zoomLevel', () => {
-      getByTestId('zoom').should('have.text', 'Zoom: Month (3)')
+      getByTestId('zoom').should('have.text', 'Zoom:Month (3)')
 
       // Scroll down to zoom 2
       scrollWheel(1)
-      getByTestId('zoom').should('have.text', 'Zoom: Day (2)')
+      getByTestId('zoom').should('have.text', 'Zoom:Day (2)')
 
       // Scroll down to zoom 1
       scrollWheel(1)
-      getByTestId('zoom').should('have.text', 'Zoom: Hour (1)')
+      getByTestId('zoom').should('have.text', 'Zoom:Hour (1)')
 
       // Scroll down again
       scrollWheel(1)
-      getByTestId('zoom').should('have.text', 'Zoom: Hour (1)')
+      getByTestId('zoom').should('have.text', 'Zoom:Hour (1)')
     })
 
     it('does not scroll past max zoomLevel', () => {
-      getByTestId('zoom').should('have.text', 'Zoom: Month (3)')
+      getByTestId('zoom').should('have.text', 'Zoom:Month (3)')
 
       // Scroll up to zoom 4
       scrollWheel(-1)
-      getByTestId('zoom').should('have.text', 'Zoom: Year (4)')
+      getByTestId('zoom').should('have.text', 'Zoom:Year (4)')
 
       // Scroll up to zoom 5
       scrollWheel(-1)
-      getByTestId('zoom').should('have.text', 'Zoom: Year (5)')
+      getByTestId('zoom').should('have.text', 'Zoom:Year (5)')
 
       // Scroll up again
       scrollWheel(-1)
-      getByTestId('zoom').should('have.text', 'Zoom: Year (5)')
+      getByTestId('zoom').should('have.text', 'Zoom:Year (5)')
     })
 
     it('keeps the mouse position centered in the timeline', () => {
diff --git a/example/src/components/ExampleWrapper/ExampleWrapper.js b/example/src/components/ExampleWrapper/ExampleWrapper.js
new file mode 100644
index 0000000..9f16f6b
--- /dev/null
+++ b/example/src/components/ExampleWrapper/ExampleWrapper.js
@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+  Col,
+  Container,
+  Row,
+  Tab,
+  Tabs
+} from 'react-bootstrap'
+
+const ExampleWrapper = ({
+  code,
+  children,
+  description,
+  output,
+  pageHeading,
+  timeline
+}) => (
+  <div>
+    <header className="pt-5">
+      <Container className="p-0">
+        <h2 className="h1 mb-4 fw-bolder">{pageHeading}</h2>
+        <p>{description}</p>
+      </Container>
+    </header>
+    {children}
+    <div className="timeline-example timeline-example--one mb-5 mt-5 bg-light">
+      <Container className="px-0 py-2">
+        <span className="text-uppercase small fw-bolder">
+          Interactive Example
+        </span>
+      </Container>
+      {timeline}
+    </div>
+    <Container className="px-0">
+      <Tabs defaultActiveKey="code" id="example-page-tabs mb-5">
+        <Tab eventKey="code" className="py-4" title="Code (.jsx)">
+          <Container>
+            <Row>
+              <Col>
+                <pre className="w-100">
+                  <code className="jsx px-4 pb-4">{code}</code>
+                </pre>
+              </Col>
+            </Row>
+          </Container>
+        </Tab>
+        <Tab eventKey="output" className="py-4" title="Callback Return Values">
+          <Container>
+            <Row>
+              <Col>
+                <p>
+                  When callback functions are defined, the timeline provides them values
+                  that represent its current position, zoom, and ranges. See the
+                  {' '}
+                  <a target="_blank" href="https://github.com/nasa/edsc-timeline?tab=readme-ov-file#callback-function-return-value" rel="noreferrer">README.md</a>
+                  {' '}
+                  in the
+                  {' '}
+                  <a target="_blank" href="https://github.com/nasa/edsc-timeline" rel="noreferrer">@edsc/timeline</a>
+                  {' '}
+                  repository for more information
+                  about the callback functions.
+                </p>
+                {output}
+              </Col>
+            </Row>
+          </Container>
+        </Tab>
+      </Tabs>
+    </Container>
+  </div>
+)
+
+ExampleWrapper.defaultProps = {
+  children: null
+}
+
+ExampleWrapper.propTypes = {
+  code: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  description: PropTypes.string.isRequired,
+  output: PropTypes.node.isRequired,
+  pageHeading: PropTypes.string.isRequired,
+  timeline: PropTypes.node.isRequired
+}
+
+export default ExampleWrapper
diff --git a/example/src/components/Examples/Callbacks.js b/example/src/components/Examples/Callbacks.js
deleted file mode 100644
index 549a146..0000000
--- a/example/src/components/Examples/Callbacks.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { useState } from 'react'
-
-import EDSCTimeline from '../../../../src'
-import { Output } from '../Output/Output'
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import '../../styles.scss'
-
-export const Callbacks = () => {
-  // eslint-disable-next-line no-undef
-  if (hljs) hljs.highlightAll()
-
-  const [center] = useState(new Date('2021').getTime())
-  const [temporal, setTemporal] = useState({})
-  const [focusedInterval, setFocusedInterval] = useState({})
-
-  const [displayedCenter, setDisplayedCenter] = useState()
-  const [timelineRange, setTimelineRange] = useState({})
-  const [displayedZoom, setDisplayedZoom] = useState()
-
-  const handleTimelineMove = (values) => {
-    const {
-      center,
-      timelineEnd,
-      zoom,
-      timelineStart
-    } = values
-
-    setDisplayedCenter(center)
-    setTimelineRange({ end: timelineEnd, start: timelineStart })
-    setDisplayedZoom(zoom)
-  }
-
-  const handleTemporalSet = (data) => {
-    const { temporalEnd, temporalStart } = data
-    setTemporal({ end: temporalEnd, start: temporalStart })
-    console.log('handleTemporalSet called', JSON.stringify(data))
-  }
-
-  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
-    setFocusedInterval({ end: focusedEnd, start: focusedStart })
-  }
-
-  const {
-    end: temporalEnd,
-    start: temporalStart
-  } = temporal
-
-  const {
-    end: focusedEnd,
-    start: focusedStart
-  } = focusedInterval
-
-  const data = [
-    {
-      id: 'row1',
-      title: 'Test',
-      intervals: []
-    }
-  ]
-
-  const handleArrowKeyPan = (data) => console.log('handleArrowKeyPan called', JSON.stringify(data))
-  const handleButtonPan = (data) => console.log('handleButtonPan called', JSON.stringify(data))
-  const handleButtonZoom = (data) => console.log('handleButtonZoom called', JSON.stringify(data))
-  const handleDragPan = (data) => console.log('handleDragPan called', JSON.stringify(data))
-  const handleFocusedIntervalClick = (data) => console.log('handleFocusedIntervalClick called', JSON.stringify(data))
-  const handleScrollPan = (data) => console.log('handleScrollPan called', JSON.stringify(data))
-  const handleScrollZoom = (data) => console.log('handleScrollZoom called', JSON.stringify(data))
-
-  return (
-    <section className="container">
-      <div className="timeline-example timeline-example--one">
-        <EDSCTimeline
-          data={data}
-          center={center}
-          focusedInterval={focusedInterval}
-          zoom={3}
-          minZoom={1}
-          maxZoom={5}
-          temporalRange={temporal}
-          onArrowKeyPan={handleArrowKeyPan}
-          onButtonPan={handleButtonPan}
-          onButtonZoom={handleButtonZoom}
-          onDragPan={handleDragPan}
-          onFocusedIntervalClick={handleFocusedIntervalClick}
-          onFocusedSet={handleFocusedSet}
-          onScrollPan={handleScrollPan}
-          onScrollZoom={handleScrollZoom}
-          onTemporalSet={handleTemporalSet}
-          onTimelineMoveEnd={handleTimelineMove}
-        />
-      </div>
-
-      <Output
-        displayedCenter={displayedCenter}
-        zoom={displayedZoom}
-        timelineRange={timelineRange}
-        temporalStart={temporalStart}
-        temporalEnd={temporalEnd}
-        focusedStart={focusedStart}
-        focusedEnd={focusedEnd}
-      />
-
-      <div className="demo__code">
-        <p>
-          This example shows a timeline where all the callbacks are used.
-          Check the console log for the callback output.
-        </p>
-        <pre>
-          <code className="jsx">
-            {`
-<EDSCTimeline
-  data={[{
-    id: 'row1',
-    title: 'Test',
-    intervals: []
-  }]}
-  onArrowKeyPan={handleArrowKeyPan}
-  onButtonPan={handleButtonPan}
-  onButtonZoom={handleButtonZoom}
-  onDragPan={handleDragPan}
-  onFocusedIntervalClick={handleFocusedIntervalClick}
-  onFocusedSet={handleFocusedSet}
-  onScrollPan={handleScrollPan}
-  onScrollZoom={handleScrollZoom}
-  onTemporalSet={handleTemporalSet}
-  onTimelineMoveEnd={handleTimelineMove}
-/>
-            `}
-          </code>
-        </pre>
-      </div>
-
-    </section>
-  )
-}
diff --git a/example/src/components/Examples/Callbacks.jsx b/example/src/components/Examples/Callbacks.jsx
new file mode 100644
index 0000000..d933ca4
--- /dev/null
+++ b/example/src/components/Examples/Callbacks.jsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+
+import EDSCTimeline from '../../../../src'
+
+import { Output } from '../Output/Output'
+import ExampleWrapper from '../ExampleWrapper/ExampleWrapper'
+
+export const Callbacks = () => {
+  // eslint-disable-next-line no-undef
+  if (hljs) hljs.highlightAll()
+
+  const [center] = useState(new Date('2021').getTime())
+  const [temporal, setTemporal] = useState({})
+  const [focusedInterval, setFocusedInterval] = useState({})
+
+  const [displayedCenter, setDisplayedCenter] = useState()
+  const [timelineRange, setTimelineRange] = useState({})
+  const [displayedZoom, setDisplayedZoom] = useState()
+
+  const handleTimelineMove = (values) => {
+    const {
+      center: newCenter, timelineEnd, zoom, timelineStart
+    } = values
+
+    setDisplayedCenter(newCenter)
+    setTimelineRange({
+      end: timelineEnd,
+      start: timelineStart
+    })
+
+    setDisplayedZoom(zoom)
+  }
+
+  const handleTemporalSet = (data) => {
+    const { temporalEnd, temporalStart } = data
+    setTemporal({
+      end: temporalEnd,
+      start: temporalStart
+    })
+
+    console.log('handleTemporalSet called', JSON.stringify(data))
+  }
+
+  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
+    setFocusedInterval({
+      end: focusedEnd,
+      start: focusedStart
+    })
+  }
+
+  const { end: temporalEnd, start: temporalStart } = temporal
+
+  const { end: focusedEnd, start: focusedStart } = focusedInterval
+
+  const data = [
+    {
+      id: 'row1',
+      title: 'Test',
+      intervals: []
+    }
+  ]
+
+  const handleArrowKeyPan = (eventData) => console.log('handleArrowKeyPan called', JSON.stringify(eventData))
+  const handleButtonPan = (eventData) => console.log('handleButtonPan called', JSON.stringify(eventData))
+  const handleButtonZoom = (eventData) => console.log('handleButtonZoom called', JSON.stringify(eventData))
+  const handleDragPan = (eventData) => console.log('handleDragPan called', JSON.stringify(eventData))
+  const handleFocusedIntervalClick = (eventData) => console.log('handleFocusedIntervalClick called', JSON.stringify(eventData))
+  const handleScrollPan = (eventData) => console.log('handleScrollPan called', JSON.stringify(eventData))
+  const handleScrollZoom = (eventData) => console.log('handleScrollZoom called', JSON.stringify(eventData))
+
+  return (
+    <ExampleWrapper
+      pageHeading="Callbacks"
+      description="This example shows a timeline where all the callbacks are used. Check the console log for the callback output."
+      timeline={
+        (
+          <EDSCTimeline
+            data={data}
+            center={center}
+            focusedInterval={focusedInterval}
+            zoom={3}
+            minZoom={1}
+            maxZoom={5}
+            temporalRange={temporal}
+            onArrowKeyPan={handleArrowKeyPan}
+            onButtonPan={handleButtonPan}
+            onButtonZoom={handleButtonZoom}
+            onDragPan={handleDragPan}
+            onFocusedIntervalClick={handleFocusedIntervalClick}
+            onFocusedSet={handleFocusedSet}
+            onScrollPan={handleScrollPan}
+            onScrollZoom={handleScrollZoom}
+            onTemporalSet={handleTemporalSet}
+            onTimelineMoveEnd={handleTimelineMove}
+          />
+        )
+      }
+      output={
+        (
+          <Output
+            displayedCenter={displayedCenter}
+            zoom={displayedZoom}
+            timelineRange={timelineRange}
+            temporalStart={temporalStart}
+            temporalEnd={temporalEnd}
+            focusedStart={focusedStart}
+            focusedEnd={focusedEnd}
+          />
+        )
+      }
+      code={
+        `
+<EDSCTimeline
+  data={[{
+    id: 'row1',
+    title: 'Test',
+    intervals: []
+  }]}
+  onArrowKeyPan={handleArrowKeyPan}
+  onButtonPan={handleButtonPan}
+  onButtonZoom={handleButtonZoom}
+  onDragPan={handleDragPan}
+  onFocusedIntervalClick={handleFocusedIntervalClick}
+  onFocusedSet={handleFocusedSet}
+  onScrollPan={handleScrollPan}
+  onScrollZoom={handleScrollZoom}
+  onTemporalSet={handleTemporalSet}
+  onTimelineMoveEnd={handleTimelineMove}
+/>
+            `
+      }
+    />
+  )
+}
diff --git a/example/src/components/Examples/EmptyTimeline.js b/example/src/components/Examples/EmptyTimeline.js
deleted file mode 100644
index 4e7a637..0000000
--- a/example/src/components/Examples/EmptyTimeline.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useState } from 'react'
-
-import EDSCTimeline from '../../../../src'
-import { Output } from '../Output/Output'
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import '../../styles.scss'
-
-export const EmptyTimeline = () => {
-  // eslint-disable-next-line no-undef
-  if (hljs) hljs.highlightAll()
-
-  const [center] = useState(new Date('2021').getTime())
-  const [temporal, setTemporal] = useState({})
-  const [focusedInterval, setFocusedInterval] = useState({})
-
-  const [displayedCenter, setDisplayedCenter] = useState()
-  const [timelineRange, setTimelineRange] = useState({})
-  const [displayedZoom, setDisplayedZoom] = useState()
-
-  const handleTimelineMove = (values) => {
-    const {
-      center,
-      timelineEnd,
-      zoom,
-      timelineStart
-    } = values
-
-    setDisplayedCenter(center)
-    setTimelineRange({ end: timelineEnd, start: timelineStart })
-    setDisplayedZoom(zoom)
-  }
-
-  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
-    setTemporal({ end: temporalEnd, start: temporalStart })
-  }
-
-  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
-    setFocusedInterval({ end: focusedEnd, start: focusedStart })
-  }
-
-  const {
-    end: temporalEnd,
-    start: temporalStart
-  } = temporal
-
-  const {
-    end: focusedEnd,
-    start: focusedStart
-  } = focusedInterval
-
-  const data = [
-    {
-      id: 'row1',
-      title: 'Test',
-      intervals: []
-    }
-  ]
-
-  return (
-    <section className="container">
-      <div className="timeline-example timeline-example--one">
-        <EDSCTimeline
-          data={data}
-          center={center}
-          focusedInterval={focusedInterval}
-          zoom={3}
-          minZoom={1}
-          maxZoom={5}
-          temporalRange={temporal}
-          onTimelineMove={handleTimelineMove}
-          onTimelineMoveEnd={handleTimelineMove}
-          onTemporalSet={handleTemporalSet}
-          onFocusedSet={handleFocusedSet}
-        />
-      </div>
-
-      <Output
-        displayedCenter={displayedCenter}
-        zoom={displayedZoom}
-        timelineRange={timelineRange}
-        temporalStart={temporalStart}
-        temporalEnd={temporalEnd}
-        focusedStart={focusedStart}
-        focusedEnd={focusedEnd}
-      />
-
-      <div className="demo__code">
-        <p>
-          This example shows a timeline with only an empty row included.
-        </p>
-        <pre>
-          <code className="jsx">
-            {`
-<EDSCTimeline
-  data={[{
-    id: 'row1',
-    title: 'Test',
-    intervals: []
-  }]}
-/>
-            `}
-          </code>
-        </pre>
-      </div>
-
-    </section>
-  )
-}
diff --git a/example/src/components/Examples/EmptyTimeline.jsx b/example/src/components/Examples/EmptyTimeline.jsx
new file mode 100644
index 0000000..80de174
--- /dev/null
+++ b/example/src/components/Examples/EmptyTimeline.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react'
+
+import EDSCTimeline from '../../../../src'
+
+import { Output } from '../Output/Output'
+import ExampleWrapper from '../ExampleWrapper/ExampleWrapper'
+
+export const EmptyTimeline = () => {
+  // eslint-disable-next-line no-undef
+  if (hljs) hljs.highlightAll()
+
+  const [center] = useState(new Date('2021').getTime())
+  const [temporal, setTemporal] = useState({})
+  const [focusedInterval, setFocusedInterval] = useState({})
+
+  const [displayedCenter, setDisplayedCenter] = useState()
+  const [timelineRange, setTimelineRange] = useState({})
+  const [displayedZoom, setDisplayedZoom] = useState()
+
+  const handleTimelineMove = (values) => {
+    const {
+      center: newCenter, timelineEnd, zoom, timelineStart
+    } = values
+
+    setDisplayedCenter(newCenter)
+    setTimelineRange({
+      end: timelineEnd,
+      start: timelineStart
+    })
+
+    setDisplayedZoom(zoom)
+  }
+
+  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
+    setTemporal({
+      end: temporalEnd,
+      start: temporalStart
+    })
+  }
+
+  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
+    setFocusedInterval({
+      end: focusedEnd,
+      start: focusedStart
+    })
+  }
+
+  const { end: temporalEnd, start: temporalStart } = temporal
+
+  const { end: focusedEnd, start: focusedStart } = focusedInterval
+
+  const data = [
+    {
+      id: 'row1',
+      title: 'Test',
+      intervals: []
+    }
+  ]
+
+  return (
+    <ExampleWrapper
+      pageHeading="Empty"
+      description="This example shows a timeline with only an empty row applied."
+      timeline={
+        (
+          <EDSCTimeline
+            data={data}
+            center={center}
+            focusedInterval={focusedInterval}
+            zoom={3}
+            minZoom={1}
+            maxZoom={5}
+            temporalRange={temporal}
+            onTimelineMove={handleTimelineMove}
+            onTimelineMoveEnd={handleTimelineMove}
+            onTemporalSet={handleTemporalSet}
+            onFocusedSet={handleFocusedSet}
+          />
+        )
+      }
+      output={
+        (
+          <Output
+            displayedCenter={displayedCenter}
+            zoom={displayedZoom}
+            timelineRange={timelineRange}
+            temporalStart={temporalStart}
+            temporalEnd={temporalEnd}
+            focusedStart={focusedStart}
+            focusedEnd={focusedEnd}
+          />
+        )
+      }
+      code={
+        `
+<EDSCTimeline
+  data={[{
+    id: 'row1',
+    title: 'Test',
+    intervals: []
+  }]}
+/>
+`
+      }
+    />
+  )
+}
diff --git a/example/src/components/Examples/TemporalEnd.js b/example/src/components/Examples/TemporalEnd.js
deleted file mode 100644
index 7328267..0000000
--- a/example/src/components/Examples/TemporalEnd.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { useState } from 'react'
-
-import EDSCTimeline from '../../../../src'
-import { Output } from '../Output/Output'
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import '../../styles.scss'
-
-export const TemporalEnd = () => {
-  // eslint-disable-next-line no-undef
-  if (hljs) hljs.highlightAll()
-
-  const [center] = useState(new Date('2021').getTime())
-  const [temporal, setTemporal] = useState({
-    end: new Date('2021-01-16T10:55:09.343Z').getTime()
-  })
-  const [focusedInterval, setFocusedInterval] = useState({})
-
-  const [displayedCenter, setDisplayedCenter] = useState()
-  const [timelineRange, setTimelineRange] = useState({})
-  const [displayedZoom, setDisplayedZoom] = useState()
-
-  const handleTimelineMove = (values) => {
-    const {
-      center,
-      timelineEnd,
-      zoom,
-      timelineStart
-    } = values
-
-    setDisplayedCenter(center)
-    setTimelineRange({ end: timelineEnd, start: timelineStart })
-    setDisplayedZoom(zoom)
-  }
-
-  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
-    setTemporal({ end: temporalEnd, start: temporalStart })
-  }
-
-  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
-    setFocusedInterval({ end: focusedEnd, start: focusedStart })
-  }
-
-  const {
-    end: temporalEnd,
-    start: temporalStart
-  } = temporal
-
-  const {
-    end: focusedEnd,
-    start: focusedStart
-  } = focusedInterval
-
-  const data = [
-    {
-      id: 'row1',
-      title: 'Test',
-      intervals: []
-    }
-  ]
-
-  return (
-    <section className="container">
-      <div className="timeline-example timeline-example--one">
-        <EDSCTimeline
-          data={data}
-          center={center}
-          focusedInterval={focusedInterval}
-          zoom={3}
-          minZoom={1}
-          maxZoom={5}
-          temporalRange={temporal}
-          onTimelineMove={handleTimelineMove}
-          onTimelineMoveEnd={handleTimelineMove}
-          onTemporalSet={handleTemporalSet}
-          onFocusedSet={handleFocusedSet}
-        />
-      </div>
-
-      <Output
-        displayedCenter={displayedCenter}
-        zoom={displayedZoom}
-        timelineRange={timelineRange}
-        temporalStart={temporalStart}
-        temporalEnd={temporalEnd}
-        focusedStart={focusedStart}
-        focusedEnd={focusedEnd}
-      />
-
-      <div className="demo__code">
-        <p>
-          This example shows a timeline where a temporal range with only a end value is provided.
-        </p>
-        <pre>
-          <code className="jsx">
-            {`
-<EDSCTimeline
-  data={[{
-    id: 'row1',
-    title: 'Test',
-    intervals: []
-  }]}
-  temporalRange={{
-    end: new Date('2021-01-16T10:55:09.343Z').getTime()
-  }}
-/>
-            `}
-          </code>
-        </pre>
-      </div>
-    </section>
-  )
-}
diff --git a/example/src/components/Examples/TemporalEnd.jsx b/example/src/components/Examples/TemporalEnd.jsx
new file mode 100644
index 0000000..e76c702
--- /dev/null
+++ b/example/src/components/Examples/TemporalEnd.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+
+import EDSCTimeline from '../../../../src'
+
+import { Output } from '../Output/Output'
+import ExampleWrapper from '../ExampleWrapper/ExampleWrapper'
+
+export const TemporalEnd = () => {
+  // eslint-disable-next-line no-undef
+  if (hljs) hljs.highlightAll()
+
+  const [center] = useState(new Date('2021').getTime())
+  const [temporal, setTemporal] = useState({
+    end: new Date('2021-01-16T10:55:09.343Z').getTime()
+  })
+  const [focusedInterval, setFocusedInterval] = useState({})
+
+  const [displayedCenter, setDisplayedCenter] = useState()
+  const [timelineRange, setTimelineRange] = useState({})
+  const [displayedZoom, setDisplayedZoom] = useState()
+
+  const handleTimelineMove = (values) => {
+    const {
+      center: newCenter, timelineEnd, zoom, timelineStart
+    } = values
+
+    setDisplayedCenter(newCenter)
+    setTimelineRange({
+      end: timelineEnd,
+      start: timelineStart
+    })
+
+    setDisplayedZoom(zoom)
+  }
+
+  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
+    setTemporal({
+      end: temporalEnd,
+      start: temporalStart
+    })
+  }
+
+  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
+    setFocusedInterval({
+      end: focusedEnd,
+      start: focusedStart
+    })
+  }
+
+  const { end: temporalEnd, start: temporalStart } = temporal
+
+  const { end: focusedEnd, start: focusedStart } = focusedInterval
+
+  const data = [
+    {
+      id: 'row1',
+      title: 'Test',
+      intervals: []
+    }
+  ]
+
+  return (
+    <ExampleWrapper
+      pageHeading="Temporal End"
+      description="This example shows a timeline where a temporal range with only a end value is applied."
+      timeline={
+        (
+          <EDSCTimeline
+            data={data}
+            center={center}
+            focusedInterval={focusedInterval}
+            zoom={3}
+            minZoom={1}
+            maxZoom={5}
+            temporalRange={temporal}
+            onTimelineMove={handleTimelineMove}
+            onTimelineMoveEnd={handleTimelineMove}
+            onTemporalSet={handleTemporalSet}
+            onFocusedSet={handleFocusedSet}
+          />
+        )
+      }
+      output={
+        (
+          <Output
+            displayedCenter={displayedCenter}
+            zoom={displayedZoom}
+            timelineRange={timelineRange}
+            temporalStart={temporalStart}
+            temporalEnd={temporalEnd}
+            focusedStart={focusedStart}
+            focusedEnd={focusedEnd}
+          />
+        )
+      }
+      code={
+        `
+<EDSCTimeline
+  data={[{
+    id: 'row1',
+    title: 'Test',
+    intervals: []
+  }]}
+  temporalRange={{
+    end: new Date('2021-01-16T10:55:09.343Z').getTime()
+  }}
+/>
+`
+      }
+    />
+  )
+}
diff --git a/example/src/components/Examples/TemporalRange.js b/example/src/components/Examples/TemporalRange.js
deleted file mode 100644
index 2edad86..0000000
--- a/example/src/components/Examples/TemporalRange.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useState } from 'react'
-
-import EDSCTimeline from '../../../../src'
-import { Output } from '../Output/Output'
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import '../../styles.scss'
-
-export const TemporalRange = () => {
-  // eslint-disable-next-line no-undef
-  if (hljs) hljs.highlightAll()
-
-  const [center] = useState(new Date('2021').getTime())
-  const [temporal, setTemporal] = useState({
-    start: new Date('2020-12-15T05:30:49.884Z').getTime(),
-    end: new Date('2021-01-16T03:01:38.533Z').getTime()
-  })
-  const [focusedInterval, setFocusedInterval] = useState({})
-
-  const [displayedCenter, setDisplayedCenter] = useState()
-  const [timelineRange, setTimelineRange] = useState({})
-  const [displayedZoom, setDisplayedZoom] = useState()
-
-  const handleTimelineMove = (values) => {
-    const {
-      center,
-      timelineEnd,
-      zoom,
-      timelineStart
-    } = values
-
-    setDisplayedCenter(center)
-    setTimelineRange({ end: timelineEnd, start: timelineStart })
-    setDisplayedZoom(zoom)
-  }
-
-  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
-    setTemporal({ end: temporalEnd, start: temporalStart })
-  }
-
-  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
-    setFocusedInterval({ end: focusedEnd, start: focusedStart })
-  }
-
-  const {
-    end: temporalEnd,
-    start: temporalStart
-  } = temporal
-
-  const {
-    end: focusedEnd,
-    start: focusedStart
-  } = focusedInterval
-
-  const data = [
-    {
-      id: 'row1',
-      title: 'Test',
-      intervals: []
-    }
-  ]
-
-  return (
-    <section className="container">
-      <div className="timeline-example timeline-example--one">
-        <EDSCTimeline
-          data={data}
-          center={center}
-          focusedInterval={focusedInterval}
-          zoom={3}
-          minZoom={1}
-          maxZoom={5}
-          temporalRange={temporal}
-          onTimelineMove={handleTimelineMove}
-          onTimelineMoveEnd={handleTimelineMove}
-          onTemporalSet={handleTemporalSet}
-          onFocusedSet={handleFocusedSet}
-        />
-      </div>
-
-      <Output
-        displayedCenter={displayedCenter}
-        zoom={displayedZoom}
-        timelineRange={timelineRange}
-        temporalStart={temporalStart}
-        temporalEnd={temporalEnd}
-        focusedStart={focusedStart}
-        focusedEnd={focusedEnd}
-      />
-
-      <div className="demo__code">
-        <p>
-          This example shows a timeline with a temporal range provided.
-        </p>
-        <pre>
-          <code className="jsx">
-            {`
-<EDSCTimeline
-  data={[{
-    id: 'row1',
-    title: 'Test',
-    intervals: []
-  }]}
-  temporalRange={{
-    end: new Date('2021-01-16T10:55:09.343Z').getTime()
-  }}
-/>
-            `}
-          </code>
-        </pre>
-      </div>
-
-    </section>
-  )
-}
diff --git a/example/src/components/Examples/TemporalRange.jsx b/example/src/components/Examples/TemporalRange.jsx
new file mode 100644
index 0000000..8fbcc5f
--- /dev/null
+++ b/example/src/components/Examples/TemporalRange.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+
+import EDSCTimeline from '../../../../src'
+
+import { Output } from '../Output/Output'
+import ExampleWrapper from '../ExampleWrapper/ExampleWrapper'
+
+export const TemporalRange = () => {
+  // eslint-disable-next-line no-undef
+  if (hljs) hljs.highlightAll()
+
+  const [center] = useState(new Date('2021').getTime())
+  const [temporal, setTemporal] = useState({
+    start: new Date('2020-12-15T05:30:49.884Z').getTime(),
+    end: new Date('2021-01-16T03:01:38.533Z').getTime()
+  })
+  const [focusedInterval, setFocusedInterval] = useState({})
+
+  const [displayedCenter, setDisplayedCenter] = useState()
+  const [timelineRange, setTimelineRange] = useState({})
+  const [displayedZoom, setDisplayedZoom] = useState()
+
+  const handleTimelineMove = (values) => {
+    const {
+      center: newCenter, timelineEnd, zoom, timelineStart
+    } = values
+
+    setDisplayedCenter(newCenter)
+    setTimelineRange({
+      end: timelineEnd,
+      start: timelineStart
+    })
+
+    setDisplayedZoom(zoom)
+  }
+
+  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
+    setTemporal({
+      end: temporalEnd,
+      start: temporalStart
+    })
+  }
+
+  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
+    setFocusedInterval({
+      end: focusedEnd,
+      start: focusedStart
+    })
+  }
+
+  const { end: temporalEnd, start: temporalStart } = temporal
+
+  const { end: focusedEnd, start: focusedStart } = focusedInterval
+
+  const data = [
+    {
+      id: 'row1',
+      title: 'Test',
+      intervals: []
+    }
+  ]
+
+  return (
+    <ExampleWrapper
+      pageHeading="Temporal Range"
+      description="This example shows a timeline with a temporal range applied."
+      timeline={
+        (
+          <EDSCTimeline
+            data={data}
+            center={center}
+            focusedInterval={focusedInterval}
+            zoom={3}
+            minZoom={1}
+            maxZoom={5}
+            temporalRange={temporal}
+            onTimelineMove={handleTimelineMove}
+            onTimelineMoveEnd={handleTimelineMove}
+            onTemporalSet={handleTemporalSet}
+            onFocusedSet={handleFocusedSet}
+          />
+        )
+      }
+      output={
+        (
+          <Output
+            displayedCenter={displayedCenter}
+            zoom={displayedZoom}
+            timelineRange={timelineRange}
+            temporalStart={temporalStart}
+            temporalEnd={temporalEnd}
+            focusedStart={focusedStart}
+            focusedEnd={focusedEnd}
+          />
+        )
+      }
+      code={
+        `
+<EDSCTimeline
+  data={[{
+    id: 'row1',
+    title: 'Test',
+    intervals: []
+  }]}
+  temporalRange={{
+    end: new Date('2021-01-16T10:55:09.343Z').getTime()
+  }}
+/>
+`
+      }
+    />
+  )
+}
diff --git a/example/src/components/Examples/TemporalStart.js b/example/src/components/Examples/TemporalStart.js
deleted file mode 100644
index 0466394..0000000
--- a/example/src/components/Examples/TemporalStart.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from 'react'
-
-import EDSCTimeline from '../../../../src'
-import { Output } from '../Output/Output'
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import '../../styles.scss'
-
-export const TemporalStart = () => {
-  // eslint-disable-next-line no-undef
-  if (hljs) hljs.highlightAll()
-
-  const [center] = useState(new Date('2021').getTime())
-  const [temporal, setTemporal] = useState({
-    start: new Date('2020-12-15T13:24:20.695Z').getTime()
-  })
-  const [focusedInterval, setFocusedInterval] = useState({})
-
-  const [displayedCenter, setDisplayedCenter] = useState()
-  const [timelineRange, setTimelineRange] = useState({})
-  const [displayedZoom, setDisplayedZoom] = useState()
-
-  const handleTimelineMove = (values) => {
-    const {
-      center,
-      timelineEnd,
-      zoom,
-      timelineStart
-    } = values
-
-    setDisplayedCenter(center)
-    setTimelineRange({ end: timelineEnd, start: timelineStart })
-    setDisplayedZoom(zoom)
-  }
-
-  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
-    setTemporal({ end: temporalEnd, start: temporalStart })
-  }
-
-  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
-    setFocusedInterval({ end: focusedEnd, start: focusedStart })
-  }
-
-  const {
-    end: temporalEnd,
-    start: temporalStart
-  } = temporal
-
-  const {
-    end: focusedEnd,
-    start: focusedStart
-  } = focusedInterval
-
-  const data = [
-    {
-      id: 'row1',
-      title: 'Test',
-      intervals: []
-    }
-  ]
-
-  return (
-    <section className="container">
-      <div className="timeline-example timeline-example--one">
-        <EDSCTimeline
-          data={data}
-          center={center}
-          focusedInterval={focusedInterval}
-          zoom={3}
-          minZoom={1}
-          maxZoom={5}
-          temporalRange={temporal}
-          onTimelineMove={handleTimelineMove}
-          onTimelineMoveEnd={handleTimelineMove}
-          onTemporalSet={handleTemporalSet}
-          onFocusedSet={handleFocusedSet}
-        />
-      </div>
-
-      <Output
-        displayedCenter={displayedCenter}
-        zoom={displayedZoom}
-        timelineRange={timelineRange}
-        temporalStart={temporalStart}
-        temporalEnd={temporalEnd}
-        focusedStart={focusedStart}
-        focusedEnd={focusedEnd}
-      />
-
-      <div className="demo__code">
-        <p>
-          This example shows a timeline where a temporal range with only a start value is provided.
-        </p>
-        <pre>
-          <code className="jsx">
-            {`
-<EDSCTimeline
-  data={[{
-    id: 'row1',
-    title: 'Test',
-    intervals: []
-  }]}
-  temporalRange={{
-    start: new Date('2020-12-15T13:24:20.695Z').getTime()
-  }}
-/>
-            `}
-          </code>
-        </pre>
-      </div>
-
-    </section>
-  )
-}
diff --git a/example/src/components/Examples/TemporalStart.jsx b/example/src/components/Examples/TemporalStart.jsx
new file mode 100644
index 0000000..2bed179
--- /dev/null
+++ b/example/src/components/Examples/TemporalStart.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+
+import EDSCTimeline from '../../../../src'
+
+import { Output } from '../Output/Output'
+import ExampleWrapper from '../ExampleWrapper/ExampleWrapper'
+
+export const TemporalStart = () => {
+  // eslint-disable-next-line no-undef
+  if (hljs) hljs.highlightAll()
+
+  const [center] = useState(new Date('2021').getTime())
+  const [temporal, setTemporal] = useState({
+    start: new Date('2020-12-15T13:24:20.695Z').getTime()
+  })
+  const [focusedInterval, setFocusedInterval] = useState({})
+
+  const [displayedCenter, setDisplayedCenter] = useState()
+  const [timelineRange, setTimelineRange] = useState({})
+  const [displayedZoom, setDisplayedZoom] = useState()
+
+  const handleTimelineMove = (values) => {
+    const {
+      center: newCenter, timelineEnd, zoom, timelineStart
+    } = values
+
+    setDisplayedCenter(newCenter)
+    setTimelineRange({
+      end: timelineEnd,
+      start: timelineStart
+    })
+
+    setDisplayedZoom(zoom)
+  }
+
+  const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
+    setTemporal({
+      end: temporalEnd,
+      start: temporalStart
+    })
+  }
+
+  const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
+    setFocusedInterval({
+      end: focusedEnd,
+      start: focusedStart
+    })
+  }
+
+  const { end: temporalEnd, start: temporalStart } = temporal
+
+  const { end: focusedEnd, start: focusedStart } = focusedInterval
+
+  const data = [
+    {
+      id: 'row1',
+      title: 'Test',
+      intervals: []
+    }
+  ]
+
+  return (
+    <ExampleWrapper
+      pageHeading="Temporal Start"
+      description="This example shows a timeline where a temporal range with only a start value is applied."
+      timeline={
+        (
+          <EDSCTimeline
+            data={data}
+            center={center}
+            focusedInterval={focusedInterval}
+            zoom={3}
+            minZoom={1}
+            maxZoom={5}
+            temporalRange={temporal}
+            onTimelineMove={handleTimelineMove}
+            onTimelineMoveEnd={handleTimelineMove}
+            onTemporalSet={handleTemporalSet}
+            onFocusedSet={handleFocusedSet}
+          />
+        )
+      }
+      output={
+        (
+          <Output
+            displayedCenter={displayedCenter}
+            zoom={displayedZoom}
+            timelineRange={timelineRange}
+            temporalStart={temporalStart}
+            temporalEnd={temporalEnd}
+            focusedStart={focusedStart}
+            focusedEnd={focusedEnd}
+          />
+        )
+      }
+      code={
+        `
+<EDSCTimeline
+  data={[{
+    id: 'row1',
+    title: 'Test',
+    intervals: []
+  }]}
+  temporalRange={{
+    start: new Date('2020-12-15T13:24:20.695Z').getTime()
+  }}
+/>
+`
+      }
+    />
+  )
+}
diff --git a/example/src/components/Layout/Layout.js b/example/src/components/Layout/Layout.js
new file mode 100644
index 0000000..9d10b77
--- /dev/null
+++ b/example/src/components/Layout/Layout.js
@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { LinkContainer } from 'react-router-bootstrap'
+import {
+  Container,
+  Nav,
+  Navbar,
+  NavDropdown
+} from 'react-bootstrap'
+import { Outlet } from 'react-router-dom'
+
+const routes = [
+  {
+    to: '/empty',
+    title: 'Empty'
+  },
+  {
+    to: '/temporalRange',
+    title: 'Temporal Range'
+  },
+  {
+    to: '/temporalStart',
+    title: 'Temporal Start'
+  },
+  {
+    to: '/temporalEnd',
+    title: 'Temporal End'
+  },
+  {
+    to: '/callbacks',
+    title: 'Callbacks'
+  }
+]
+
+const Layout = () => (
+  <>
+    <Navbar expand="lg" bg="light">
+      <Container>
+        <Navbar.Brand href="/">@edsc/timeline Demo</Navbar.Brand>
+        <Navbar.Toggle aria-controls="navbar-nav" />
+        <Navbar.Collapse id="navbar-nav">
+          <Nav className="me-auto">
+            <LinkContainer to="/">
+              <Nav.Link>Demo</Nav.Link>
+            </LinkContainer>
+            <NavDropdown  id="additional-demos-dropdown" title="Additional Demos">
+            {
+                routes.map(({ title, to }) => {
+                  console.log('🚀 ~ routes.map ~ { title, to }:', { title, to })
+                  return (
+                    <NavDropdown.Item key={`link__${to}`} to={to} as={LinkContainer}>
+                      <Nav.Link>{title}</Nav.Link>
+                    </NavDropdown.Item>
+                  )
+                })
+              }
+            </NavDropdown>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+    <Outlet />
+  </>
+)
+
+export default Layout
diff --git a/example/src/components/Output/Output.js b/example/src/components/Output/Output.js
deleted file mode 100644
index c55fee5..0000000
--- a/example/src/components/Output/Output.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { startCase } from 'lodash'
-
-import { RESOLUTIONS } from '../../../../src/constants'
-
-export const Output = ({
-  displayedCenter,
-  zoom,
-  timelineRange,
-  temporalStart,
-  temporalEnd,
-  focusedStart,
-  focusedEnd
-}) => {
-  const {
-    end: timelineEnd,
-    start: timelineStart
-  } = timelineRange
-
-  return (
-    <section className="demo__metadata mb-4">
-      <h3>
-        Timeline Output Values
-      </h3>
-
-      <div data-testid="center">
-        <span className="demo__metadata-label">Center:</span>
-        {` ${new Date(displayedCenter).toUTCString()}`}
-      </div>
-
-      <div data-testid="zoom">
-        <span className="demo__metadata-label">Zoom:</span>
-        {` ${startCase(RESOLUTIONS[zoom])} (${zoom})`}
-      </div>
-
-      <div data-testid="timelineStart">
-        <span className="demo__metadata-label">Timeline Start:</span>
-        {` ${timelineStart && new Date(timelineStart).toISOString()}`}
-      </div>
-
-      <div data-testid="timelineEnd">
-        <span className="demo__metadata-label">Timeline End:</span>
-        {` ${timelineEnd && new Date(timelineEnd).toISOString()}`}
-      </div>
-
-      <div data-testid="temporalStart">
-        <span className="demo__metadata-label">Temporal Start:</span>
-        {` ${temporalStart && new Date(temporalStart).toISOString()}`}
-      </div>
-
-      <div data-testid="temporalEnd">
-        <span className="demo__metadata-label">Temporal End:</span>
-        {` ${temporalEnd && new Date(temporalEnd).toISOString()}`}
-      </div>
-
-      <div data-testid="focusedStart">
-        <span className="demo__metadata-label">Focused Start:</span>
-        {` ${focusedStart && new Date(focusedStart).toISOString()}`}
-      </div>
-
-      <div data-testid="focusedEnd">
-        <span className="demo__metadata-label">Focused End:</span>
-        {` ${focusedEnd && new Date(focusedEnd).toISOString()}`}
-      </div>
-    </section>
-  )
-}
-
-Output.defaultProps = {
-  displayedCenter: null,
-  zoom: null,
-  timelineRange: {},
-  temporalStart: null,
-  temporalEnd: null,
-  focusedStart: null,
-  focusedEnd: null
-}
-
-Output.propTypes = {
-  displayedCenter: PropTypes.number,
-  zoom: PropTypes.number,
-  timelineRange: PropTypes.shape({
-    end: PropTypes.number,
-    start: PropTypes.number
-  }),
-  temporalStart: PropTypes.number,
-  temporalEnd: PropTypes.number,
-  focusedStart: PropTypes.number,
-  focusedEnd: PropTypes.number
-}
diff --git a/example/src/components/Output/Output.jsx b/example/src/components/Output/Output.jsx
new file mode 100644
index 0000000..3403a42
--- /dev/null
+++ b/example/src/components/Output/Output.jsx
@@ -0,0 +1,161 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { startCase } from 'lodash'
+
+import {
+  Card,
+  Col,
+  Container,
+  Row
+} from 'react-bootstrap'
+import { RESOLUTIONS } from '../../../../src/constants'
+
+import './Output.scss'
+
+const OutputItemEntry = ({
+  borderBottom, heading, value, ...props
+}) => {
+  let classNames = 'd-flex align-items-center p-2'
+
+  if (borderBottom) classNames += ' border-bottom border-bottom-light'
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <div data-testid="center" className={classNames} {...props}>
+      <span className="output-item-entry__heading pl-3 fw-bold">
+        {heading}
+      </span>
+      <span className="text-monospace pr-3">{value}</span>
+    </div>
+  )
+}
+
+OutputItemEntry.defaultProps = {
+  borderBottom: false
+}
+
+OutputItemEntry.propTypes = {
+  borderBottom: PropTypes.bool,
+  heading: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired
+}
+
+const OutputItem = ({ heading, children }) => (
+  <Col>
+    <Card>
+      <Card.Header>{heading}</Card.Header>
+      <div className="mb-0">{children}</div>
+    </Card>
+  </Col>
+)
+
+OutputItem.propTypes = {
+  heading: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+}
+
+export const Output = ({
+  displayedCenter,
+  zoom,
+  timelineRange,
+  temporalStart,
+  temporalEnd,
+  focusedStart,
+  focusedEnd
+}) => {
+  const { end: timelineEnd, start: timelineStart } = timelineRange
+
+  return (
+    <section className="mt-5 mb-5 d-flex flex-column align-items-center">
+      <Container fluid className="px-0">
+        <Row className="mb-4">
+          <OutputItem heading="Center & Zoom">
+            <OutputItemEntry
+              data-testid="center"
+              heading="Center:"
+              value={`${new Date(displayedCenter).toUTCString()}`}
+              borderBottom
+            />
+            <OutputItemEntry
+              data-testid="zoom"
+              heading="Zoom:"
+              value={`${startCase(RESOLUTIONS[zoom])} (${zoom})`}
+            />
+          </OutputItem>
+          <OutputItem heading="Timeline Range">
+            <OutputItemEntry
+              data-testid="timelineStart"
+              heading="Start:"
+              value={
+                `${
+                  timelineStart && new Date(timelineStart).toISOString()
+                }`
+              }
+              borderBottom
+            />
+            <OutputItemEntry
+              data-testid="timelineEnd"
+              heading="End:"
+              value={`${timelineEnd && new Date(timelineEnd).toISOString()}`}
+            />
+          </OutputItem>
+        </Row>
+        <Row>
+          <OutputItem heading="Temporal Range">
+            <OutputItemEntry
+              data-testid="temporalStart"
+              heading="Start:"
+              value={
+                ` ${
+                  temporalStart && new Date(temporalStart).toISOString()
+                }`
+              }
+              borderBottom
+            />
+            <OutputItemEntry
+              data-testid="temporalEnd"
+              heading="End:"
+              value={` ${temporalEnd && new Date(temporalEnd).toISOString()}`}
+            />
+          </OutputItem>
+          <OutputItem heading="Focused Range">
+            <OutputItemEntry
+              data-testid="focusedStart"
+              heading="Start:"
+              value={` ${focusedStart && new Date(focusedStart).toISOString()}`}
+              borderBottom
+            />
+            <OutputItemEntry
+              data-testid="focusedEnd"
+              heading="End:"
+              value={` ${focusedEnd && new Date(focusedEnd).toISOString()}`}
+            />
+          </OutputItem>
+        </Row>
+      </Container>
+    </section>
+  )
+}
+
+Output.defaultProps = {
+  displayedCenter: null,
+  zoom: null,
+  timelineRange: {},
+  temporalStart: null,
+  temporalEnd: null,
+  focusedStart: null,
+  focusedEnd: null
+}
+
+Output.propTypes = {
+  displayedCenter: PropTypes.number,
+  zoom: PropTypes.number,
+  timelineRange: PropTypes.shape({
+    end: PropTypes.number,
+    start: PropTypes.number
+  }),
+  temporalStart: PropTypes.number,
+  temporalEnd: PropTypes.number,
+  focusedStart: PropTypes.number,
+  focusedEnd: PropTypes.number
+}
diff --git a/example/src/components/Output/Output.scss b/example/src/components/Output/Output.scss
new file mode 100644
index 0000000..79fc892
--- /dev/null
+++ b/example/src/components/Output/Output.scss
@@ -0,0 +1,5 @@
+.output-item-entry {
+  &__heading {
+    width: 5rem;
+  }
+}
\ No newline at end of file
diff --git a/example/src/components/Playground/Playground.js b/example/src/components/Playground/Playground.jsx
similarity index 73%
rename from example/src/components/Playground/Playground.js
rename to example/src/components/Playground/Playground.jsx
index f73c239..26c0286 100644
--- a/example/src/components/Playground/Playground.js
+++ b/example/src/components/Playground/Playground.jsx
@@ -3,8 +3,8 @@ import React, { useState } from 'react'
 import EDSCTimeline from '../../../../src'
 
 import 'bootstrap/dist/css/bootstrap.min.css'
-import '../../styles.scss'
 import { Output } from '../Output/Output'
+import ExampleWrapper from '../ExampleWrapper/ExampleWrapper'
 
 export const Playground = () => {
   // eslint-disable-next-line no-undef
@@ -26,34 +26,35 @@ export const Playground = () => {
 
   const handleTimelineMove = (values) => {
     const {
-      center,
-      timelineEnd,
-      zoom,
-      timelineStart
+      center: newCenter, timelineEnd, zoom, timelineStart
     } = values
 
-    setDisplayedCenter(center)
-    setTimelineRange({ end: timelineEnd, start: timelineStart })
+    setDisplayedCenter(newCenter)
+    setTimelineRange({
+      end: timelineEnd,
+      start: timelineStart
+    })
+
     setDisplayedZoom(zoom)
   }
 
   const handleTemporalSet = ({ temporalEnd, temporalStart }) => {
-    setTemporal({ end: temporalEnd, start: temporalStart })
+    setTemporal({
+      end: temporalEnd,
+      start: temporalStart
+    })
   }
 
   const handleFocusedSet = ({ focusedEnd, focusedStart }) => {
-    setFocusedInterval({ end: focusedEnd, start: focusedStart })
+    setFocusedInterval({
+      end: focusedEnd,
+      start: focusedStart
+    })
   }
 
-  const {
-    end: temporalEnd,
-    start: temporalStart
-  } = temporal
+  const { end: temporalEnd, start: temporalStart } = temporal
 
-  const {
-    end: focusedEnd,
-    start: focusedStart
-  } = focusedInterval
+  const { end: focusedEnd, start: focusedStart } = focusedInterval
 
   const data = [
     {
@@ -147,41 +148,7 @@ export const Playground = () => {
     }
   ]
 
-  return (
-    <section className="container">
-      <div className="timeline-example timeline-example--one">
-        <EDSCTimeline
-          data={data}
-          center={center}
-          focusedInterval={focusedInterval}
-          zoom={3}
-          minZoom={1}
-          maxZoom={5}
-          temporalRange={temporal}
-          onTimelineMoveEnd={handleTimelineMove}
-          onTemporalSet={handleTemporalSet}
-          onFocusedSet={handleFocusedSet}
-        />
-      </div>
-
-      <Output
-        displayedCenter={displayedCenter}
-        zoom={displayedZoom}
-        timelineRange={timelineRange}
-        temporalStart={temporalStart}
-        temporalEnd={temporalEnd}
-        focusedStart={focusedStart}
-        focusedEnd={focusedEnd}
-      />
-
-      <div className="demo__code">
-        <p>
-          This example shows a timeline with three rows of data,
-          a temporal range and a focused interval included.
-        </p>
-        <pre>
-          <code className="jsx">
-            {`
+  const code = `
 <EDSCTimeline
   data={[
     {
@@ -235,10 +202,42 @@ export const Playground = () => {
     end: new Date('2020-03-15').getTime()
   }}
 />
-            `}
-          </code>
-        </pre>
-      </div>
-    </section>
+`
+
+  const output = (
+    <Output
+      displayedCenter={displayedCenter}
+      zoom={displayedZoom}
+      timelineRange={timelineRange}
+      temporalStart={temporalStart}
+      temporalEnd={temporalEnd}
+      focusedStart={focusedStart}
+      focusedEnd={focusedEnd}
+    />
+  )
+
+  return (
+    <ExampleWrapper
+      pageHeading="Demo"
+      description="This example shows a timeline with three rows of data, a temporal range, and a focused interval applied."
+      timeline={
+        (
+          <EDSCTimeline
+            data={data}
+            center={center}
+            focusedInterval={focusedInterval}
+            zoom={3}
+            minZoom={1}
+            maxZoom={5}
+            temporalRange={temporal}
+            onTimelineMoveEnd={handleTimelineMove}
+            onTemporalSet={handleTemporalSet}
+            onFocusedSet={handleFocusedSet}
+          />
+        )
+      }
+      code={code}
+      output={output}
+    />
   )
 }
diff --git a/example/src/index.html b/example/src/index.html
index a730889..69e7963 100644
--- a/example/src/index.html
+++ b/example/src/index.html
@@ -1,16 +1,20 @@
 <html>
+
 <head>
-    <title>EDSC Timeline Demo</title>
+    <title>@edsc/timeline demo</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="shortcut icon" href="/favicon.ico?v=1.1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/default.min.css">
+    <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/default.min.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>
 </head>
+
 <body>
     <noscript>
         You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/example/src/index.js b/example/src/index.js
deleted file mode 100644
index d01ec7a..0000000
--- a/example/src/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import {
-  HashRouter as Router,
-  Routes,
-  Route,
-  Link
-} from 'react-router-dom'
-import GithubCorner from 'react-github-corner'
-
-import { Callbacks } from './components/Examples/Callbacks'
-import { EmptyTimeline } from './components/Examples/EmptyTimeline'
-import { Playground } from './components/Playground/Playground'
-import { TemporalEnd } from './components/Examples/TemporalEnd'
-import { TemporalRange } from './components/Examples/TemporalRange'
-import { TemporalStart } from './components/Examples/TemporalStart'
-
-const App = () => (
-  <>
-    <section className="container">
-      <h1>
-        EDSC Timeline React Plugin Demo
-      </h1>
-    </section>
-
-    <Router>
-      <Routes>
-        <Route exact path="/" element={<Playground />} />
-        <Route path="/empty" element={<EmptyTimeline />} />
-        <Route path="/temporalRange" element={<TemporalRange />} />
-        <Route path="/temporalStart" element={<TemporalStart />} />
-        <Route path="/temporalEnd" element={<TemporalEnd />} />
-        <Route path="/callbacks" element={<Callbacks />} />
-      </Routes>
-
-      <div className="container demo__navigation">
-        <h3>Additional Examples</h3>
-        <ul className="">
-          <li>
-            <Link to="/">Full Example</Link>
-          </li>
-          <li>
-            <Link to="/empty">Empty Timeline</Link>
-          </li>
-          <li>
-            <Link to="/temporalRange">Timeline with a temporal range</Link>
-          </li>
-          <li>
-            <Link to="/temporalStart">Timeline with a only a temporal start</Link>
-          </li>
-          <li>
-            <Link to="/temporalEnd">Timeline with a only a temporal end</Link>
-          </li>
-          <li>
-            <Link to="/callbacks">Timeline with all callbacks logged</Link>
-          </li>
-        </ul>
-      </div>
-    </Router>
-
-    <GithubCorner href="https://github.com/nasa/edsc-timeline" />
-  </>
-)
-
-const container = document.getElementById('root')
-const root = createRoot(container)
-
-root.render(<App />)
diff --git a/example/src/index.jsx b/example/src/index.jsx
new file mode 100644
index 0000000..c48354b
--- /dev/null
+++ b/example/src/index.jsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  HashRouter as Router,
+  Routes,
+  Route
+} from 'react-router-dom'
+
+import GithubCorner from 'react-github-corner'
+
+import Layout from './components/Layout/Layout'
+
+import { Callbacks } from './components/Examples/Callbacks'
+import { EmptyTimeline } from './components/Examples/EmptyTimeline'
+import { Playground } from './components/Playground/Playground'
+import { TemporalEnd } from './components/Examples/TemporalEnd'
+import { TemporalRange } from './components/Examples/TemporalRange'
+import { TemporalStart } from './components/Examples/TemporalStart'
+
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+const App = () => (
+  <>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Playground />} />
+          <Route path="empty" element={<EmptyTimeline />} />
+          <Route path="temporalRange" element={<TemporalRange />} />
+          <Route path="temporalStart" element={<TemporalStart />} />
+          <Route path="temporalEnd" element={<TemporalEnd />} />
+          <Route path="callbacks" element={<Callbacks />} />
+        </Route>
+      </Routes>
+    </Router>
+
+    <GithubCorner href="https://github.com/nasa/edsc-timeline" />
+  </>
+)
+
+const container = document.getElementById('root')
+const root = createRoot(container)
+
+root.render(<App />)
diff --git a/example/src/styles.scss b/example/src/styles.scss
deleted file mode 100644
index 31454b4..0000000
--- a/example/src/styles.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  position: relative;
-}
-
-#root {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.timeline-example {
-  margin-top: 2rem;
-
-  &--fixed {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-.demo {
-  &__metadata {
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: 0.925rem;
-    color: $color__black--200;
-  }
-
-  &__metadata-label {
-    font-weight: 700;
-    color: $color__black--300;
-  }
-
-  &__code {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    code {
-      border: 1px solid $color__black--300;
-      border-radius: 5px;
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-  }
-
-  &__navigation {
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: 0.925rem;
-    color: $color__black--200;
-
-    ul {
-      list-style: none;
-    }
-  }
-}
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 1eddb4b..f479362 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -8,7 +8,7 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
 })
 
 module.exports = {
-  entry: path.join(__dirname, 'src/index.js'),
+  entry: path.join(__dirname, 'src/index.jsx'),
   module: {
     rules: [
       {
@@ -21,14 +21,7 @@ module.exports = {
         use: [
           'style-loader',
           'css-loader',
-          'sass-loader',
-          {
-            loader: 'sass-resources-loader',
-            options: {
-              // eslint-disable-next-line import/no-dynamic-require, global-require
-              resources: require(path.join(process.cwd(), '/src/css/globalUtils.js'))
-            }
-          }
+          'sass-loader'
         ]
       },
       {
diff --git a/package-lock.json b/package-lock.json
index 0b84036..2e13d20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-runtime": "^6.23.0",
         "babel-preset-env": "^1.7.0",
-        "bootstrap": "^4.6.1",
+        "bootstrap": "^5.3.3",
         "css-loader": "^3.6.0",
         "cypress": "^10.11.0",
         "eslint": "^8.14.0",
@@ -57,14 +57,15 @@
         "html-webpack-plugin": "^5.5.0",
         "jest": "^26.6.3",
         "mockdate": "^3.0.5",
-        "node-sass": "^7.0.1",
         "nyc": "^15.1.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.10.6",
         "react-dom": "^18.2.0",
         "react-github-corner": "^2.5.0",
+        "react-router-bootstrap": "^0.26.3",
         "react-router-dom": "^6.4.3",
-        "sass": "^1.51.0",
+        "sass": "1.77.6",
         "sass-loader": "^13.0.0",
         "sass-resources-loader": "^2.2.5",
         "script-loader": "^0.6.1",
@@ -1808,10 +1809,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
-      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2223,7 +2225,9 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -3054,6 +3058,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
       "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@gar/promisify": "^1.0.1",
         "semver": "^7.3.5"
@@ -3064,6 +3070,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -3079,6 +3087,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "rimraf": "^3.0.2"
@@ -3087,6 +3097,33 @@
         "node": ">=10"
       }
     },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@react-spring/web": {
       "version": "9.5.5",
       "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.5.tgz",
@@ -3163,6 +3200,64 @@
         "node": ">=14"
       }
     },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.1.tgz",
+      "integrity": "sha512-qghR21ynHiUrpcIkKCoKYB+3rJtezY5Y7ikrwradCL+7hZHdQ2Ozc5ffxtpmpahoAGgc31gyXaSx2sXXaThmqA==",
+      "dev": true,
+      "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.0",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.0.tgz",
+      "integrity": "sha512-wS+h6IusJCPjTkmOOrRZxIPICD/mtFA3PRZviutoM23/b7akyDGfZF/WS+nIFk27u7JDhPE2+0GBdZxjSqHZkg==",
+      "dev": true,
+      "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==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -3208,6 +3303,16 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
@@ -3901,7 +4006,9 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/node": {
       "version": "17.0.38",
@@ -3959,6 +4066,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -4024,6 +4141,13 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -4261,7 +4385,9 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -4354,6 +4480,8 @@
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
       "integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "^4.1.0",
         "depd": "^1.1.2",
@@ -4522,7 +4650,9 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/arch": {
       "version": "2.2.0",
@@ -4554,6 +4684,8 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -4766,6 +4898,8 @@
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4819,6 +4953,8 @@
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -6122,17 +6258,23 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
-      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
@@ -6251,6 +6393,8 @@
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
       "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@npmcli/fs": "^1.0.0",
         "@npmcli/move-file": "^1.0.1",
@@ -6379,6 +6523,8 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -6508,6 +6654,8 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -6631,9 +6779,10 @@
       }
     },
     "node_modules/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+      "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/clean-css": {
       "version": "5.3.0",
@@ -6836,6 +6985,8 @@
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "color-support": "bin.js"
       }
@@ -6969,7 +7120,9 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/content-disposition": {
       "version": "0.5.4",
@@ -7452,6 +7605,8 @@
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
       "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "decamelize": "^1.1.0",
         "map-obj": "^1.0.0"
@@ -7465,6 +7620,8 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7632,7 +7789,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/depd": {
       "version": "1.1.2",
@@ -7743,6 +7902,17 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -7861,6 +8031,7 @@
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
       }
@@ -7902,6 +8073,8 @@
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -7922,7 +8095,9 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
@@ -9720,6 +9895,8 @@
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -9790,6 +9967,8 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.2",
@@ -9810,6 +9989,8 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
       "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "globule": "^1.0.0"
       },
@@ -9864,6 +10045,8 @@
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10164,6 +10347,8 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.3.tgz",
       "integrity": "sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "~7.1.1",
         "lodash": "~4.17.10",
@@ -10178,6 +10363,8 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
       "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -10198,6 +10385,8 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
       "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -10246,6 +10435,8 @@
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -10256,6 +10447,8 @@
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "deprecated": "this library is no longer supported",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -10269,6 +10462,8 @@
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
       "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -10379,7 +10574,9 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/has-value": {
       "version": "1.0.0",
@@ -10483,6 +10680,8 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
       "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -10613,7 +10812,9 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
       "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
@@ -10755,6 +10956,8 @@
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
       "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ms": "^2.0.0"
       }
@@ -10765,6 +10968,7 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -10813,10 +11017,11 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
-      "dev": true
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -10895,7 +11100,9 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/inflight": {
       "version": "1.0.6",
@@ -10955,7 +11162,9 @@
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
       "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
@@ -11246,7 +11455,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
       "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/is-map": {
       "version": "2.0.2",
@@ -11306,6 +11517,8 @@
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
       "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13304,18 +13517,13 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -13922,6 +14130,8 @@
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
       "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agentkeepalive": "^4.1.3",
         "cacache": "^15.2.0",
@@ -13967,6 +14177,8 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -14029,6 +14241,8 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
       "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/minimist": "^1.2.0",
         "camelcase-keys": "^6.2.2",
@@ -14055,6 +14269,8 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
       "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -14167,6 +14383,8 @@
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
       "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "arrify": "^1.0.1",
         "is-plain-obj": "^1.1.0",
@@ -14181,6 +14399,8 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
       "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -14193,6 +14413,8 @@
       "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
       "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -14205,6 +14427,8 @@
       "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
       "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.1.0",
         "minipass-sized": "^1.0.3",
@@ -14222,6 +14446,8 @@
       "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
       "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -14234,6 +14460,8 @@
       "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
       "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -14246,6 +14474,8 @@
       "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
       "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -14258,6 +14488,8 @@
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.0.0",
         "yallist": "^4.0.0"
@@ -14284,6 +14516,8 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -14319,7 +14553,9 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
       "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanomatch": {
       "version": "1.2.13",
@@ -14394,6 +14630,8 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
       "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.0",
         "glob": "^7.1.4",
@@ -14418,6 +14656,8 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz",
       "integrity": "sha512-0GWpv50YSOcLXaN6/FAKY3vfRbllXWV2xvfA/oKJF8pzFhWXPV+yjhJXDBbjscDYowv7Yw1A3uigpzn5iEGTyw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -14431,6 +14671,8 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
       "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.3",
@@ -14450,6 +14692,8 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
       "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "are-we-there-yet": "^3.0.0",
         "console-control-strings": "^1.1.0",
@@ -14465,6 +14709,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -14536,6 +14782,8 @@
       "integrity": "sha512-8MIlsY/4dXUkJDYht9pIWBhMil3uHmE8b/AdJPjmFn1nBx9X9BASzfzmsCy0uCCb8eqI3SYYzVPDswWqSx7gjw==",
       "dev": true,
       "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "async-foreach": "^0.1.3",
         "chalk": "^4.1.2",
@@ -14565,6 +14813,8 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -14580,6 +14830,8 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -14596,6 +14848,8 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -14607,13 +14861,17 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-sass/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -14623,6 +14881,8 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -14635,6 +14895,8 @@
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "abbrev": "1"
       },
@@ -14650,6 +14912,8 @@
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
       "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "hosted-git-info": "^4.0.1",
         "is-core-module": "^2.5.0",
@@ -14665,6 +14929,8 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -14700,6 +14966,8 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "are-we-there-yet": "^2.0.0",
         "console-control-strings": "^1.1.0",
@@ -14842,6 +15110,8 @@
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
       "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -15510,18 +15780,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "dev": true,
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -15738,13 +15996,17 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
       "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "err-code": "^2.0.2",
         "retry": "^0.12.0"
@@ -15777,6 +16039,20 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "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==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -15874,6 +16150,8 @@
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -15949,6 +16227,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.6",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.6.tgz",
+      "integrity": "sha512-fNvKytSp0nHts1WRnRBJeBEt+I9/ZdrnhIjWOucEduRNvFRU1IXjZueDdWnBiqsTSJ7MckQJi9i/hxGolaRq+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.0",
+        "@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-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -15995,6 +16304,13 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "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==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/react-router": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
@@ -16010,6 +16326,20 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/react-router-bootstrap": {
+      "version": "0.26.3",
+      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.3.tgz",
+      "integrity": "sha512-cBgcWekti6lFRl/vXP8ZfKuA/0Qe7L5xBjQ6OwbGI30+NSAAH/YZGbO6whSeBWFILn6uTVOX939HDGhs+5WzOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1",
+        "react-router-dom": ">=6.0.0"
+      }
+    },
     "node_modules/react-router-dom": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
@@ -16027,6 +16357,23 @@
         "react-dom": ">=16.8"
       }
     },
+    "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==",
+      "dev": true,
+      "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/react-use-gesture": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz",
@@ -16442,6 +16789,8 @@
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -16481,6 +16830,8 @@
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -16496,6 +16847,8 @@
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -16512,6 +16865,8 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "uuid": "bin/uuid"
       }
@@ -16617,6 +16972,8 @@
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -17036,10 +17393,11 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.52.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.1.tgz",
-      "integrity": "sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==",
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -17049,7 +17407,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-graph": {
@@ -17057,6 +17415,8 @@
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
       "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.0.0",
         "lodash": "^4.17.11",
@@ -17075,6 +17435,8 @@
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
       "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.1",
@@ -17089,6 +17451,8 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -17098,6 +17462,8 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
       "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "cliui": "^8.0.1",
         "escalade": "^3.1.1",
@@ -17116,6 +17482,8 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -17284,6 +17652,8 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
       "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "js-base64": "^2.4.9",
         "source-map": "^0.7.3"
@@ -17294,6 +17664,8 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -17679,6 +18051,8 @@
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
       "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 6.0.0",
         "npm": ">= 3.0.0"
@@ -17909,6 +18283,8 @@
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
       "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ip": "^1.1.5",
         "smart-buffer": "^4.2.0"
@@ -17923,6 +18299,8 @@
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
       "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "^6.0.2",
         "debug": "^4.3.3",
@@ -18134,6 +18512,8 @@
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
       "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "minipass": "^3.1.1"
       },
@@ -18362,6 +18742,8 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
       "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readable-stream": "^2.0.1"
       }
@@ -18370,13 +18752,17 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/stdout-stream/node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
       "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -18392,6 +18778,8 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -18697,6 +19085,8 @@
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
       "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -18996,6 +19386,8 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -19017,6 +19409,8 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
       "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.2"
       }
@@ -19055,9 +19449,10 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "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",
@@ -19209,6 +19604,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -19278,6 +19689,8 @@
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
       "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "unique-slug": "^2.0.0"
       }
@@ -19287,6 +19700,8 @@
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
       "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "imurmurhash": "^0.1.4"
       }
@@ -19528,6 +19943,16 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -20113,6 +20538,8 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
@@ -20266,6 +20693,8 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -21500,9 +21929,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
-      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
@@ -21818,7 +22247,9 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "@hapi/hoek": {
       "version": "9.3.0",
@@ -22474,6 +22905,8 @@
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
       "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@gar/promisify": "^1.0.1",
         "semver": "^7.3.5"
@@ -22484,6 +22917,8 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -22495,11 +22930,28 @@
       "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "mkdirp": "^1.0.4",
         "rimraf": "^3.0.2"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true
+    },
+    "@react-aria/ssr": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+      "dev": true,
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "@react-spring/web": {
       "version": "9.5.5",
       "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.5.tgz",
@@ -22558,6 +23010,50 @@
       "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
       "dev": true
     },
+    "@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==",
+      "dev": true,
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.1.tgz",
+      "integrity": "sha512-qghR21ynHiUrpcIkKCoKYB+3rJtezY5Y7ikrwradCL+7hZHdQ2Ozc5ffxtpmpahoAGgc31gyXaSx2sXXaThmqA==",
+      "dev": true,
+      "requires": {
+        "@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"
+      },
+      "dependencies": {
+        "@restart/hooks": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.0.tgz",
+          "integrity": "sha512-wS+h6IusJCPjTkmOOrRZxIPICD/mtFA3PRZviutoM23/b7akyDGfZF/WS+nIFk27u7JDhPE2+0GBdZxjSqHZkg==",
+          "dev": true,
+          "requires": {
+            "dequal": "^2.0.3"
+          }
+        },
+        "uncontrollable": {
+          "version": "8.0.4",
+          "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+          "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -22603,6 +23099,15 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.8.0"
+      }
+    },
     "@testing-library/dom": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
@@ -23180,7 +23685,9 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "@types/node": {
       "version": "17.0.38",
@@ -23238,6 +23745,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -23303,6 +23819,12 @@
         "@types/jest": "*"
       }
     },
+    "@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "dev": true
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -23527,7 +24049,9 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "accepts": {
       "version": "1.3.8",
@@ -23597,6 +24121,8 @@
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
       "integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "debug": "^4.1.0",
         "depd": "^1.1.2",
@@ -23716,7 +24242,9 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "arch": {
       "version": "2.2.0",
@@ -23734,6 +24262,8 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -23891,7 +24421,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "asn1": {
       "version": "0.2.6",
@@ -23932,7 +24464,9 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "asynciterator.prototype": {
       "version": "1.0.0",
@@ -25078,9 +25612,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
-      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "requires": {}
     },
@@ -25161,6 +25695,8 @@
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
       "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@npmcli/fs": "^1.0.0",
         "@npmcli/move-file": "^1.0.1",
@@ -25264,6 +25800,8 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -25349,7 +25887,9 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "chrome-trace-event": {
       "version": "1.0.3",
@@ -25449,9 +25989,9 @@
       }
     },
     "classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
     "clean-css": {
       "version": "5.3.0",
@@ -25625,7 +26165,9 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "colorette": {
       "version": "2.0.16",
@@ -25724,7 +26266,9 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "content-disposition": {
       "version": "0.5.4",
@@ -26088,6 +26632,8 @@
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
       "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "decamelize": "^1.1.0",
         "map-obj": "^1.0.0"
@@ -26097,7 +26643,9 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
           "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -26221,7 +26769,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "depd": {
       "version": "1.1.2",
@@ -26307,6 +26857,16 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -26403,6 +26963,7 @@
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "requires": {
         "iconv-lite": "^0.6.2"
       }
@@ -26437,7 +26998,9 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "envinfo": {
       "version": "7.8.1",
@@ -26449,7 +27012,9 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "error-ex": {
       "version": "1.3.2",
@@ -27817,6 +28382,8 @@
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -27868,6 +28435,8 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.2",
@@ -27885,6 +28454,8 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
       "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "globule": "^1.0.0"
       }
@@ -27923,7 +28494,9 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "get-stream": {
       "version": "5.2.0",
@@ -28144,6 +28717,8 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.3.tgz",
       "integrity": "sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "glob": "~7.1.1",
         "lodash": "~4.17.10",
@@ -28155,6 +28730,8 @@
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
           "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
@@ -28169,6 +28746,8 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
           "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -28212,13 +28791,17 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "har-validator": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -28228,7 +28811,9 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
       "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "has": {
       "version": "1.0.3",
@@ -28302,7 +28887,9 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -28385,6 +28972,8 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
       "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -28494,7 +29083,9 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
       "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "http-deceiver": {
       "version": "1.2.7",
@@ -28602,6 +29193,8 @@
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
       "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "ms": "^2.0.0"
       }
@@ -28612,6 +29205,7 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -28637,9 +29231,9 @@
       "dev": true
     },
     "immutable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
       "dev": true
     },
     "import-fresh": {
@@ -28696,7 +29290,9 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "inflight": {
       "version": "1.0.6",
@@ -28747,7 +29343,9 @@
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
       "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "ipaddr.js": {
       "version": "2.0.1",
@@ -28948,7 +29546,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
       "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "is-map": {
       "version": "2.0.2",
@@ -28986,7 +29586,9 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
       "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -30485,18 +31087,13 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "dev": true,
-      "peer": true
-    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -30961,6 +31558,8 @@
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
       "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "agentkeepalive": "^4.1.3",
         "cacache": "^15.2.0",
@@ -30999,7 +31598,9 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "map-stream": {
       "version": "0.1.0",
@@ -31047,6 +31648,8 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
       "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@types/minimist": "^1.2.0",
         "camelcase-keys": "^6.2.2",
@@ -31066,7 +31669,9 @@
           "version": "0.18.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
           "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -31151,6 +31756,8 @@
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
       "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "arrify": "^1.0.1",
         "is-plain-obj": "^1.1.0",
@@ -31162,6 +31769,8 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
       "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -31171,6 +31780,8 @@
       "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
       "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -31180,6 +31791,8 @@
       "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
       "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "encoding": "^0.1.12",
         "minipass": "^3.1.0",
@@ -31192,6 +31805,8 @@
       "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
       "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -31201,6 +31816,8 @@
       "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
       "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -31210,6 +31827,8 @@
       "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
       "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -31219,6 +31838,8 @@
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.0.0",
         "yallist": "^4.0.0"
@@ -31238,7 +31859,9 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "mockdate": {
       "version": "3.0.5",
@@ -31265,7 +31888,9 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
       "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -31331,6 +31956,8 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
       "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "env-paths": "^2.2.0",
         "glob": "^7.1.4",
@@ -31349,6 +31976,8 @@
           "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz",
           "integrity": "sha512-0GWpv50YSOcLXaN6/FAKY3vfRbllXWV2xvfA/oKJF8pzFhWXPV+yjhJXDBbjscDYowv7Yw1A3uigpzn5iEGTyw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "delegates": "^1.0.0",
             "readable-stream": "^3.6.0"
@@ -31359,6 +31988,8 @@
           "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
           "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "aproba": "^1.0.3 || ^2.0.0",
             "color-support": "^1.1.3",
@@ -31375,6 +32006,8 @@
           "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
           "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "are-we-there-yet": "^3.0.0",
             "console-control-strings": "^1.1.0",
@@ -31387,6 +32020,8 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -31446,6 +32081,8 @@
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-7.0.3.tgz",
       "integrity": "sha512-8MIlsY/4dXUkJDYht9pIWBhMil3uHmE8b/AdJPjmFn1nBx9X9BASzfzmsCy0uCCb8eqI3SYYzVPDswWqSx7gjw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^4.1.2",
@@ -31469,6 +32106,8 @@
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -31478,6 +32117,8 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -31488,6 +32129,8 @@
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -31496,19 +32139,25 @@
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -31520,6 +32169,8 @@
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "abbrev": "1"
       }
@@ -31529,6 +32180,8 @@
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
       "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "hosted-git-info": "^4.0.1",
         "is-core-module": "^2.5.0",
@@ -31541,6 +32194,8 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -31566,6 +32221,8 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "are-we-there-yet": "^2.0.0",
         "console-control-strings": "^1.1.0",
@@ -31679,7 +32336,9 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
       "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "object-assign": {
       "version": "4.1.1",
@@ -32176,13 +32835,6 @@
         }
       }
     },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "dev": true,
-      "peer": true
-    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -32354,13 +33006,17 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
       "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "err-code": "^2.0.2",
         "retry": "^0.12.0"
@@ -32387,6 +33043,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "prop-types-extra": {
+      "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==",
+      "dev": true,
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -32453,7 +33119,9 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "randombytes": {
       "version": "2.1.0",
@@ -32513,6 +33181,26 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-bootstrap": {
+      "version": "2.10.6",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.6.tgz",
+      "integrity": "sha512-fNvKytSp0nHts1WRnRBJeBEt+I9/ZdrnhIjWOucEduRNvFRU1IXjZueDdWnBiqsTSJ7MckQJi9i/hxGolaRq+g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.0",
+        "@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"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -32551,6 +33239,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "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==",
+      "dev": true
+    },
     "react-router": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
@@ -32560,6 +33254,15 @@
         "@remix-run/router": "1.0.3"
       }
     },
+    "react-router-bootstrap": {
+      "version": "0.26.3",
+      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.3.tgz",
+      "integrity": "sha512-cBgcWekti6lFRl/vXP8ZfKuA/0Qe7L5xBjQ6OwbGI30+NSAAH/YZGbO6whSeBWFILn6uTVOX939HDGhs+5WzOw==",
+      "dev": true,
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-router-dom": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
@@ -32570,6 +33273,18 @@
         "react-router": "6.4.3"
       }
     },
+    "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==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-use-gesture": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz",
@@ -32895,6 +33610,8 @@
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -32923,6 +33640,8 @@
           "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
           "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "assert-plus": "^1.0.0",
             "jsprim": "^1.2.2",
@@ -32934,6 +33653,8 @@
           "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
           "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "assert-plus": "1.0.0",
             "extsprintf": "1.3.0",
@@ -32945,7 +33666,9 @@
           "version": "3.4.0",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
           "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -33032,7 +33755,9 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "reusify": {
       "version": "1.0.4",
@@ -33354,9 +34079,9 @@
       }
     },
     "sass": {
-      "version": "1.52.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.1.tgz",
-      "integrity": "sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==",
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -33369,6 +34094,8 @@
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
       "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.17.11",
@@ -33381,6 +34108,8 @@
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
           "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "string-width": "^4.2.0",
             "strip-ansi": "^6.0.1",
@@ -33391,13 +34120,17 @@
           "version": "5.0.8",
           "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
           "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "yargs": {
           "version": "17.6.2",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
           "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "cliui": "^8.0.1",
             "escalade": "^3.1.1",
@@ -33412,7 +34145,9 @@
           "version": "21.1.1",
           "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
           "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -33523,6 +34258,8 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
       "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "js-base64": "^2.4.9",
         "source-map": "^0.7.3"
@@ -33532,7 +34269,9 @@
           "version": "0.7.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
           "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
@@ -33859,7 +34598,9 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
       "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "snapdragon": {
       "version": "0.8.2",
@@ -34045,6 +34786,8 @@
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
       "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "ip": "^1.1.5",
         "smart-buffer": "^4.2.0"
@@ -34055,6 +34798,8 @@
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
       "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "agent-base": "^6.0.2",
         "debug": "^4.3.3",
@@ -34231,6 +34976,8 @@
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
       "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "minipass": "^3.1.1"
       }
@@ -34402,6 +35149,8 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
       "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "readable-stream": "^2.0.1"
       },
@@ -34410,13 +35159,17 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "readable-stream": {
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
           "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -34432,6 +35185,8 @@
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -34656,6 +35411,8 @@
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
       "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -34875,7 +35632,9 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "trim-repeated": {
       "version": "1.0.0",
@@ -34891,6 +35650,8 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
       "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "glob": "^7.1.2"
       }
@@ -34925,9 +35686,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
@@ -35040,6 +35801,18 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -35093,6 +35866,8 @@
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
       "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "unique-slug": "^2.0.0"
       }
@@ -35102,6 +35877,8 @@
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
       "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "imurmurhash": "^0.1.4"
       }
@@ -35297,6 +36074,15 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -35715,6 +36501,8 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
@@ -35846,7 +36634,9 @@
       "version": "20.2.9",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "yauzl": {
       "version": "2.10.0",
diff --git a/package.json b/package.json
index 4758aac..fe5b7d4 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.3.3",
     "css-loader": "^3.6.0",
     "cypress": "^10.11.0",
     "eslint": "^8.14.0",
@@ -89,14 +89,15 @@
     "html-webpack-plugin": "^5.5.0",
     "jest": "^26.6.3",
     "mockdate": "^3.0.5",
-    "node-sass": "^7.0.1",
     "nyc": "^15.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.6",
     "react-dom": "^18.2.0",
     "react-github-corner": "^2.5.0",
+    "react-router-bootstrap": "^0.26.3",
     "react-router-dom": "^6.4.3",
-    "sass": "^1.51.0",
+    "sass": "1.77.6",
     "sass-loader": "^13.0.0",
     "sass-resources-loader": "^2.2.5",
     "script-loader": "^0.6.1",
diff --git a/src/components/TimelineDataSection/TimelineDataSection.js b/src/components/TimelineDataSection/TimelineDataSection.jsx
similarity index 100%
rename from src/components/TimelineDataSection/TimelineDataSection.js
rename to src/components/TimelineDataSection/TimelineDataSection.jsx
diff --git a/src/components/TimelineInterval/TimelineInterval.js b/src/components/TimelineInterval/TimelineInterval.jsx
similarity index 100%
rename from src/components/TimelineInterval/TimelineInterval.js
rename to src/components/TimelineInterval/TimelineInterval.jsx
diff --git a/src/components/TimelineInterval/TimelineInterval.scss b/src/components/TimelineInterval/TimelineInterval.scss
index f830494..ecb9c02 100644
--- a/src/components/TimelineInterval/TimelineInterval.scss
+++ b/src/components/TimelineInterval/TimelineInterval.scss
@@ -1,3 +1,5 @@
+@use '../../css/variables';
+
 .edsc-timeline-interval {
   display: inline-flex;
   flex-direction: column;
@@ -6,10 +8,10 @@
   height: 100%;
   background: linear-gradient(
     90deg,
-    rgba($color__blue, 0) 0%,
-    rgba($color__blue, 0) 20px,
-    rgba($color__blue, 0) calc(100% - 20px),
-    rgba($color__blue, 0) 100%
+    rgba(variables.$color__blue, 0) 0%,
+    rgba(variables.$color__blue, 0) 20px,
+    rgba(variables.$color__blue, 0) calc(100% - 20px),
+    rgba(variables.$color__blue, 0) 100%
   );
   transition: background 0.2s ease-in-out;
 
@@ -17,13 +19,13 @@
     content: '';
     display: block;
     position: absolute;
-    bottom: calc(#{$timeline__axis-height} - 3px);
+    bottom: calc(#{variables.$const__timeline--axis-height} - 3px);
     height: 7px;
     width: 7px;
     left: -3px;
-    background: $color__black--900;
+    background: variables.$color__black--900;
     border-radius: 50%;
-    box-shadow: 0 0 5px 5px rgba($color__black--050, 0.25);
+    box-shadow: 0 0 5px 5px rgba(variables.$color__black--050, 0.25);
     z-index: 0;
   }
 
@@ -41,7 +43,7 @@
 
       .edsc-timeline-interval__interval-top,
       .edsc-timeline-interval__interval-bottom {
-        border-left: 2px solid $color__blue;
+        border-left: 2px solid variables.$color__blue;
       }
     }
   }
@@ -52,13 +54,13 @@
     transition: border-color 0.2s ease-in-out;
 
     .edsc-timeline-interval--is-focused & {
-      border-left: 2px solid $color__blue;
+      border-left: 2px solid variables.$color__blue;
     }
   }
 
   &__interval-bottom {
     position: relative;
-    height: $timeline__axis-height;
+    height: variables.$const__timeline--axis-height;
     flex-grow: 0;
     outline: none;
     border-left: 2px solid transparent;
@@ -78,33 +80,33 @@
 
     &:hover {
       cursor: pointer !important;
-      border-left: 2px solid $color__blue;
+      border-left: 2px solid variables.$color__blue;
 
       .edsc-timeline-interval--is-unfocusable & {
-        background-color: $color__black--100;
-        border-left: 2px solid $color__black--500;
+        background-color: variables.$color__black--100;
+        border-left: 2px solid variables.$color__black--500;
       }
 
       .edsc-timeline-interval--is-focused & {
-        border-left: 2px solid darken($color__blue, 20);
+        border-left: 2px solid darken(variables.$color__blue, 20);
       }
 
       &:after {
-        border-right: 2px solid $color__blue;
+        border-right: 2px solid variables.$color__blue;
 
         .edsc-timeline-interval--is-unfocusable & {
-          border-right: 2px solid $color__black--500;
+          border-right: 2px solid variables.$color__black--500;
         }
 
         .edsc-timeline-interval--is-focused & {
-          border-right: 2px solid darken($color__blue, 20);
+          border-right: 2px solid darken(variables.$color__blue, 20);
         }
       }
     }
 
     .edsc-timeline-interval--is-focused & {
       cursor: pointer !important;
-      border-left: 2px solid $color__blue;
+      border-left: 2px solid variables.$color__blue;
     }
 
     .edsc-timeline-interval--is-unfocusable & {
@@ -123,21 +125,21 @@
 
     .edsc-timeline-interval__interval-bottom:hover &,
     .edsc-timeline-interval--is-focused & {
-      color: lighten($color__blue, 20);
+      color: lighten(variables.$color__blue, 20);
 
       .edsc-timeline-interval--is-unfocusable & {
-        color: $color__black--500;
+        color: variables.$color__black--500;
       }
 
       .edsc-timeline-interval--is-focused & {
-        color: darken($color__blue, 5);
+        color: darken(variables.$color__blue, 5);
       }
     }
   }
 
   &__interval-section-label {
     cursor: pointer !important;
-    color: $color__black--650;
+    color: variables.$color__black--650;
     position: absolute;
     top: 0rem;
     left: 2px;
@@ -145,7 +147,7 @@
     font-size: 0.675rem;
     width: auto;
     z-index: 1;
-    text-shadow: 2px 2px 2px rgba($color__black--050, 1);
+    text-shadow: 2px 2px 2px rgba(variables.$color__black--050, 1);
     letter-spacing: -0.01rem;
     white-space: nowrap;
     z-index: 1;
diff --git a/src/components/TimelineList/TimelineList.js b/src/components/TimelineList/TimelineList.jsx
similarity index 100%
rename from src/components/TimelineList/TimelineList.js
rename to src/components/TimelineList/TimelineList.jsx
diff --git a/src/components/TimelineList/TimelineList.scss b/src/components/TimelineList/TimelineList.scss
index 3937418..213ca67 100644
--- a/src/components/TimelineList/TimelineList.scss
+++ b/src/components/TimelineList/TimelineList.scss
@@ -1,9 +1,11 @@
+@use '../../css/variables';
+
 // !important is used in a few places to override default cursor properties in Bootstrap. Because attribute selectors
 // are used to style the cursor, this is the easiest way to override that behavior.
 .edsc-timeline-list {
   height: 100%;
   width: 100%;
-  background-color: $color__black--050;
+  background-color: variables.$color__black--050;
   position: relative;
   box-shadow: 0 -10px 15px 0 rgba(0,0,0,.3);
   color: white;
@@ -32,10 +34,10 @@
   &__line {
     display: block;
     position: absolute;
-    bottom: $timeline__axis-height;
+    bottom: variables.$const__timeline--axis-height;
     width: 100%;
     height: 0;
-    border-bottom: 1px solid $color__black--900;
+    border-bottom: 1px solid variables.$color__black--900;
     z-index: 1;
     pointer-events: none;
   }
@@ -54,7 +56,7 @@
     position: absolute;
     height: 10px;
     width: 10px;
-    background-color: rgba($color__red-orange, 0.75);
+    background-color: rgba(variables.$color__red-orange, 0.75);
     transform: rotate(45deg) translate(-5px, -5px);
     transform-origin: top left;
   }
@@ -64,7 +66,7 @@
     display: block;
     height: 100%;
     width: 1px;
-    background-color: $color__red-orange;
+    background-color: variables.$color__red-orange;
     position: absolute;
     left: 50%;
     z-index: 2;
@@ -72,7 +74,7 @@
     padding: 0;
     outline: none;
     border: 0;
-    box-shadow: 0 0 3px 3px rgba($color__black--050, 0.1);
+    box-shadow: 0 0 3px 3px rgba(variables.$color__black--050, 0.1);
     transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
 
     &:after {
@@ -84,20 +86,20 @@
       width: 10px;
       left: 0;
       top: 0;
-      background-color: $color__red-orange;
+      background-color: variables.$color__red-orange;
       transform: translate3d(-4.5px, -4.5px, 0px) rotate(45deg);
       transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     }
 
     &:hover {
-      background-color: darken($color__red-orange, 10);
+      background-color: darken(variables.$color__red-orange, 10);
 
       &:not(:disabled) {
         cursor: ew-resize;
       }
 
       &:after {
-        background-color: darken($color__red-orange, 10);
+        background-color: darken(variables.$color__red-orange, 10);
         cursor: ew-resize;
       }
 
@@ -123,14 +125,14 @@
     pointer-events: all;
     display: block;
     height: 100%;
-    background-color: rgba($color__red-orange, 0.25);
+    background-color: rgba(variables.$color__red-orange, 0.25);
     position: absolute;
     z-index: 1;
     user-select: none;
     padding: 0;
     outline: none;
     border: 0;
-    box-shadow: 0 0 3px 3px rgba($color__black--050, 0.1);
+    box-shadow: 0 0 3px 3px rgba(variables.$color__black--050, 0.1);
     transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
 
     .edsc-timeline-list--prevent-temporal-selection-hover & {
@@ -148,19 +150,19 @@
     height: 100%;
     background: linear-gradient(
       90deg,
-      rgba($color__blue, 0.325) 0%,
-      rgba($color__blue, 0) 20px,
-      rgba($color__blue, 0) calc(100% - 20px),
-      rgba($color__blue, 0.325) 100%
+      rgba(variables.$color__blue, 0.325) 0%,
+      rgba(variables.$color__blue, 0) 20px,
+      rgba(variables.$color__blue, 0) calc(100% - 20px),
+      rgba(variables.$color__blue, 0.325) 100%
     );
-    border-left: 2px solid $color__blue;
-    border-right: 2px solid $color__blue;
+    border-left: 2px solid variables.$color__blue;
+    border-right: 2px solid variables.$color__blue;
     position: absolute;
     z-index: 2;
     user-select: none;
     padding: 0;
     outline: none;
-    box-shadow: 0 0 3px 3px rgba($color__black--050, 0.1);
+    box-shadow: 0 0 3px 3px rgba(variables.$color__black--050, 0.1);
     transition: background-color 0.2s ease-in-out;
   }
 
@@ -168,7 +170,7 @@
     pointer-events: none;
     display: block;
     height: 100%;
-    background: rgba($color__black, 0.325);
+    background: rgba(variables.$color__black, 0.325);
     position: absolute;
     z-index: 2;
     user-select: none;
diff --git a/src/components/TimelinePrimarySection/TimelinePrimarySection.js b/src/components/TimelinePrimarySection/TimelinePrimarySection.jsx
similarity index 100%
rename from src/components/TimelinePrimarySection/TimelinePrimarySection.js
rename to src/components/TimelinePrimarySection/TimelinePrimarySection.jsx
diff --git a/src/components/TimelinePrimarySection/TimelinePrimarySection.scss b/src/components/TimelinePrimarySection/TimelinePrimarySection.scss
index 2c96300..97ee183 100644
--- a/src/components/TimelinePrimarySection/TimelinePrimarySection.scss
+++ b/src/components/TimelinePrimarySection/TimelinePrimarySection.scss
@@ -1,12 +1,14 @@
+@use '../../css/variables';
+
 .edsc-timeline-primary-section {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   margin-top: 0.925rem;
-  margin-bottom: $timeline__axis-height + 0.25rem;
+  margin-bottom: variables.$const__timeline--axis-height + 0.25rem;
   z-index: 3;
-  color: $color__white;
+  color: variables.$color__white;
   width: 100%;
   pointer-events: none;
   user-select: none;
@@ -24,7 +26,7 @@
     height: 1.5rem;
     margin: 0;
     padding: 0;
-    text-shadow: 0px 0px 5px rgba($color__black, 0.75);
+    text-shadow: 0px 0px 5px rgba(variables.$color__black, 0.75);
   }
 
   &__primary {
diff --git a/src/components/TimelineTools/TimelineTools.js b/src/components/TimelineTools/TimelineTools.jsx
similarity index 100%
rename from src/components/TimelineTools/TimelineTools.js
rename to src/components/TimelineTools/TimelineTools.jsx
diff --git a/src/components/TimelineTools/TimelineTools.scss b/src/components/TimelineTools/TimelineTools.scss
index 1e5fca1..3c3c490 100644
--- a/src/components/TimelineTools/TimelineTools.scss
+++ b/src/components/TimelineTools/TimelineTools.scss
@@ -1,9 +1,11 @@
+@use '../../css/variables';
+
 .edsc-timeline-tools {
   flex-grow: 0;
   display: flex;
   flex-direction: row;
-  background-color: $color__black--050;
-  color: $color__black--900;
+  background-color: variables.$color__black--050;
+  color: variables.$color__black--900;
   position: sticky;
   z-index: 5;
 
@@ -11,7 +13,7 @@
     outline: 0;
     border: 0;
     background: transparent;
-    color: $color__black--700;
+    color: variables.$color__black--700;
     transition: all 0.2s ease;
 
     svg {
@@ -20,15 +22,15 @@
     }
 
     &:hover {
-      color: $color__black--900;
+      color: variables.$color__black--900;
     }
 
     &:active {
-      color: $color__black--750;
+      color: variables.$color__black--750;
     }
 
     &:disabled {
-      color: $color__black--400;
+      color: variables.$color__black--400;
       cursor: not-allowed;
     }
   }
@@ -37,7 +39,7 @@
     padding: 0.025rem 0;
     text-transform: uppercase;
     font-size: 0.725rem;
-    color: $color__black--900;
+    color: variables.$color__black--900;
     letter-spacing: 0.02rem;
     white-space: nowrap;
     text-align: center;
@@ -75,7 +77,7 @@
     justify-content: center;
     height: auto;
     padding: 0.5rem 0.75rem;
-    border-right: 1px solid $color__black--250;
+    border-right: 1px solid variables.$color__black--250;
 
     &--horizontal {
       flex-direction: row;
diff --git a/src/css/_constants.scss b/src/css/_constants.scss
deleted file mode 100644
index 0a99a28..0000000
--- a/src/css/_constants.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Timeline
-$timeline__axis-height: 1.325rem;
\ No newline at end of file
diff --git a/src/css/_index.scss b/src/css/_index.scss
deleted file mode 100644
index 5f2c76f..0000000
--- a/src/css/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "vendor";
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
deleted file mode 100644
index f288b34..0000000
--- a/src/css/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'constants';
-@import 'colors';
\ No newline at end of file
diff --git a/src/css/globalUtils.js b/src/css/globalUtils.js
deleted file mode 100644
index 4b64407..0000000
--- a/src/css/globalUtils.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Any files referenced in the resources array will be included in each component.
-// Only import variables, functions, etc so css is not duplicated. The variables included
-// here will be available in all sass files included by Webpack.
-
-const path = require('path')
-
-const resources = [
-  'vendor/bootstrap/_variables.scss',
-  '_variables.scss'
-]
-
-module.exports = resources.map((file) => path.resolve(__dirname, file))
diff --git a/src/css/_colors.scss b/src/css/variables/_colors.scss
similarity index 96%
rename from src/css/_colors.scss
rename to src/css/variables/_colors.scss
index 77fadce..e3af9a1 100644
--- a/src/css/_colors.scss
+++ b/src/css/variables/_colors.scss
@@ -28,6 +28,9 @@ $color__black: $color__black--000;
 // Orange
 $color__orange: #ff7a00;
 
+// Red
+$color__red: #B60109;
+
 // Red Orange
 $color__red-orange: #ff5e00;
 
diff --git a/src/css/variables/_constants.scss b/src/css/variables/_constants.scss
new file mode 100644
index 0000000..3bf7bfd
--- /dev/null
+++ b/src/css/variables/_constants.scss
@@ -0,0 +1,2 @@
+// Timeline
+$const__timeline--axis-height: 1.325rem;
\ No newline at end of file
diff --git a/src/css/variables/_index.scss b/src/css/variables/_index.scss
new file mode 100644
index 0000000..a30f23a
--- /dev/null
+++ b/src/css/variables/_index.scss
@@ -0,0 +1,2 @@
+@forward "colors";
+@forward "constants";
\ No newline at end of file
diff --git a/src/css/vendor/_index.scss b/src/css/vendor/_index.scss
deleted file mode 100644
index cbd46a7..0000000
--- a/src/css/vendor/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "bootstrap";
diff --git a/src/css/vendor/bootstrap/_variables.scss b/src/css/vendor/bootstrap/_variables.scss
deleted file mode 100644
index 9184bc7..0000000
--- a/src/css/vendor/bootstrap/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "~bootstrap/scss/_functions.scss";
-@import "~bootstrap/scss/_variables.scss";
diff --git a/src/index.js b/src/index.jsx
similarity index 91%
rename from src/index.js
rename to src/index.jsx
index e1199f2..6ab7ebb 100644
--- a/src/index.js
+++ b/src/index.jsx
@@ -189,11 +189,7 @@ export const EDSCTimeline = ({
       reverse: false
     })
 
-    return [
-      ...leftIntervals,
-      centerInterval,
-      ...rightIntervals
-    ]
+    return [...leftIntervals, centerInterval, ...rightIntervals]
   }
 
   // Store calculated time intervals that power the display of the timeline dates
@@ -209,15 +205,9 @@ export const EDSCTimeline = ({
     newTimeIntervals = timeIntervals,
     newZoom = zoomLevel
   }) => {
-    const {
-      end: focusedEnd,
-      start: focusedStart
-    } = newFocusedInterval
+    const { end: focusedEnd, start: focusedStart } = newFocusedInterval
 
-    const {
-      end: temporalEnd,
-      start: temporalStart
-    } = newTemporalRange
+    const { end: temporalEnd, start: temporalStart } = newTemporalRange
 
     return {
       center: newCenter,
@@ -240,7 +230,11 @@ export const EDSCTimeline = ({
 
     const newTimelineWrapperWidth = timelineWrapperRef.current.getBoundingClientRect().width
 
-    const width = determineScaledWidth(duration, zoomLevel, newTimelineWrapperWidth)
+    const width = determineScaledWidth(
+      duration,
+      zoomLevel,
+      newTimelineWrapperWidth
+    )
 
     return width
   }
@@ -261,7 +255,11 @@ export const EDSCTimeline = ({
 
     const newTimelineWrapperWidth = timelineWrapperRef.current.getBoundingClientRect().width
 
-    const width = determineScaledWidth(duration, newZoom, newTimelineWrapperWidth)
+    const width = determineScaledWidth(
+      duration,
+      newZoom,
+      newTimelineWrapperWidth
+    )
 
     setIntervalListWidthInPixels(width)
   }
@@ -279,7 +277,7 @@ export const EDSCTimeline = ({
     if (timeIntervals.length > MAX_INTERVAL_BUFFER) {
       currentTimeIntervals = currentTimeIntervals.slice(
         0,
-        (currentTimeIntervals.length - INTERVAL_BUFFER)
+        currentTimeIntervals.length - INTERVAL_BUFFER
       )
     }
 
@@ -290,10 +288,7 @@ export const EDSCTimeline = ({
       reverse: true
     })
 
-    const allIntervals = [
-      ...nextIntervals,
-      ...currentTimeIntervals
-    ]
+    const allIntervals = [...nextIntervals, ...currentTimeIntervals]
 
     updateTimeIntervals(allIntervals)
 
@@ -304,7 +299,11 @@ export const EDSCTimeline = ({
 
     const newTimelineWrapperWidth = timelineWrapperRef.current.getBoundingClientRect().width
 
-    translationAdjustment = -determineScaledWidth(duration, zoomLevel, newTimelineWrapperWidth)
+    translationAdjustment = -determineScaledWidth(
+      duration,
+      zoomLevel,
+      newTimelineWrapperWidth
+    )
 
     return {
       left: translationAdjustment
@@ -337,7 +336,11 @@ export const EDSCTimeline = ({
 
       const newTimelineWrapperWidth = timelineWrapperRef.current.getBoundingClientRect().width
 
-      translationAdjustment = determineScaledWidth(duration, zoomLevel, newTimelineWrapperWidth)
+      translationAdjustment = determineScaledWidth(
+        duration,
+        zoomLevel,
+        newTimelineWrapperWidth
+      )
     }
 
     updateTimeIntervals([
@@ -414,7 +417,7 @@ export const EDSCTimeline = ({
     })
 
     // Move the timeline to the timestampPosition - offset, then subtract half the wrapper width to center that value in the timeline wrapper
-    const left = -((timestampPosition - offset) - (newTimelineWrapperWidth / 2))
+    const left = -(timestampPosition - offset - newTimelineWrapperWidth / 2)
 
     setTimelinePosition({
       ...timelinePosition,
@@ -422,17 +425,21 @@ export const EDSCTimeline = ({
     })
 
     if (onTimelineMove) {
-      onTimelineMove(buildReturnObject({
-        newCenter: timestamp,
-        newZoom
-      }))
+      onTimelineMove(
+        buildReturnObject({
+          newCenter: timestamp,
+          newZoom
+        })
+      )
     }
 
     if (onTimelineMoveEnd) {
-      onTimelineMoveEnd(buildReturnObject({
-        newCenter: timestamp,
-        newZoom
-      }))
+      onTimelineMoveEnd(
+        buildReturnObject({
+          newCenter: timestamp,
+          newZoom
+        })
+      )
     }
   }
 
@@ -458,7 +465,9 @@ export const EDSCTimeline = ({
     setIntervalListWidthInPixels(newIntervalListWidth)
 
     if (timelineWrapperRef.current) {
-      setTimelineWrapperWidth(timelineWrapperRef.current.getBoundingClientRect().width)
+      setTimelineWrapperWidth(
+        timelineWrapperRef.current.getBoundingClientRect().width
+      )
     }
 
     centerTimelineToTimestamp({ timestamp: center })
@@ -494,7 +503,7 @@ export const EDSCTimeline = ({
     const reverseX = reverseDirection ? -1 : 1
 
     const newTimelinePosition = {}
-    newTimelinePosition.left = timelinePosition.left + (deltaX * reverseX)
+    newTimelinePosition.left = timelinePosition.left + deltaX * reverseX
 
     const newTimelineWrapperWidth = timelineWrapperRef.current.getBoundingClientRect().width
     const timelineListWidth = timelineListRef.current.getBoundingClientRect().width
@@ -503,8 +512,7 @@ export const EDSCTimeline = ({
 
     const loadMoreWindow = newTimelineWrapperWidth / 3
     const distanceFromLeftEdge = -newTimelinePosition.left
-    const distanceFromRightEdge = timelineListWidth
-      - (-newTimelinePosition.left + newTimelineWrapperWidth)
+    const distanceFromRightEdge = timelineListWidth - (-newTimelinePosition.left + newTimelineWrapperWidth)
 
     if (scrollDirection === 'backward') {
       // If the scroll position is within the window to load another page
@@ -881,16 +889,19 @@ export const EDSCTimeline = ({
   /**
    * Sets up useGesture handlers
    */
-  const bindTimelineGestures = useGesture({
-    onDrag: handleDrag,
-    onMove: handleMove,
-    onHover: handleHover,
-    onWheel: handleWheel
-  }, {
-    drag: {
-      filterTaps: true
+  const bindTimelineGestures = useGesture(
+    {
+      onDrag: handleDrag,
+      onMove: handleMove,
+      onHover: handleHover,
+      onWheel: handleWheel
+    },
+    {
+      drag: {
+        filterTaps: true
+      }
     }
-  })
+  )
 
   // When the timeline position or focused interval changes, update the calculate and update
   // the visible temporal range
@@ -959,7 +970,8 @@ export const EDSCTimeline = ({
           timeIntervals,
           zoomLevel,
           wrapperWidth: newTimelineWrapperWidth
-        }) - (newTimelineWrapperWidth / 2)
+        })
+        - newTimelineWrapperWidth / 2
       )
 
       setTimelinePosition({
@@ -996,15 +1008,9 @@ export const EDSCTimeline = ({
   const onFocusedClick = (newFocusedInterval) => {
     if (onFocusedIntervalClick) onFocusedIntervalClick(buildReturnObject({ newFocusedInterval }))
 
-    const {
-      end: newEnd,
-      start: newStart
-    } = newFocusedInterval
+    const { end: newEnd, start: newStart } = newFocusedInterval
 
-    const {
-      end,
-      start
-    } = focusedInterval
+    const { end, start } = focusedInterval
 
     // If the selected interval is already focused, remove the focus
     // Convert milliseconds to seconds before comparing the previous focused interval to the new focused interval
@@ -1033,16 +1039,10 @@ export const EDSCTimeline = ({
     let delta = 1
     if (direction === 'previous') delta = -1
 
-    const {
-      end: currentEnd,
-      start: currentStart
-    } = focusedInterval
+    const { end: currentEnd, start: currentStart } = focusedInterval
 
     // Focused intervals shouldn't be outside of the temporalRange, don't allow scrolling past the interval that contains the temporal markers
-    const {
-      end: temporalEnd,
-      start: temporalStart
-    } = temporalRange
+    const { end: temporalEnd, start: temporalStart } = temporalRange
     if (temporalStart && temporalEnd) {
       if (direction === 'previous' && temporalStart >= currentStart) return
       if (direction === 'next' && temporalEnd <= currentEnd) return
@@ -1055,10 +1055,7 @@ export const EDSCTimeline = ({
     if (onFocusedSet) onFocusedSet(buildReturnObject({ newFocusedInterval: newFocused }))
     setFocusedInterval(newFocused)
 
-    const {
-      end: newEnd,
-      start: newStart
-    } = newFocused
+    const { end: newEnd, start: newStart } = newFocused
 
     const newTimelineWrapperWidth = timelineWrapperRef.current.getBoundingClientRect().width
     const newStartPosition = getPositionByTimestamp({
@@ -1088,7 +1085,10 @@ export const EDSCTimeline = ({
         ...offsetPosition,
         ...scrollBackward()
       }
-    } else if (direction === 'next' && startIndex > timeIntervals.length - (INTERVAL_BUFFER)) {
+    } else if (
+      direction === 'next'
+      && startIndex > timeIntervals.length - INTERVAL_BUFFER
+    ) {
       offsetPosition = {
         ...offsetPosition,
         ...scrollForward()
@@ -1176,10 +1176,12 @@ export const EDSCTimeline = ({
 
       zoomToTimestamp(centeredTimestamp, newZoomLevel)
       if (onButtonZoom) {
-        onButtonZoom(buildReturnObject({
-          newCenter: centeredTimestamp,
-          newZoom: newZoomLevel
-        }))
+        onButtonZoom(
+          buildReturnObject({
+            newCenter: centeredTimestamp,
+            newZoom: newZoomLevel
+          })
+        )
       }
     }
   }
@@ -1206,7 +1208,10 @@ export const EDSCTimeline = ({
     }
 
     if (startTemporal && endTemporal && hoveringTemporalRange) {
-      text = `${determineTemporalLabel(startTemporal, 1)} to ${determineTemporalLabel(endTemporal, 1)}`
+      text = `${determineTemporalLabel(
+        startTemporal,
+        1
+      )} to ${determineTemporalLabel(endTemporal, 1)}`
     }
 
     if (hoveringTemporalMarker) {
@@ -1246,7 +1251,9 @@ export const EDSCTimeline = ({
       const newIntervalListWidth = calculateNewIntervalListWidth()
       setIntervalListWidthInPixels(newIntervalListWidth)
 
-      setTimelineWrapperWidth(timelineWrapperRef.current.getBoundingClientRect().width)
+      setTimelineWrapperWidth(
+        timelineWrapperRef.current.getBoundingClientRect().width
+      )
     })
 
     resizeObserver.observe(timelineWrapperRef.current)
@@ -1259,9 +1266,15 @@ export const EDSCTimeline = ({
   // Track the width of the timeline tooltip
   useEffect(() => {
     if (temporalRangeTooltipRef.current) {
-      setTemporalRangeTooltipWidth(temporalRangeTooltipRef.current.getBoundingClientRect().width)
+      setTemporalRangeTooltipWidth(
+        temporalRangeTooltipRef.current.getBoundingClientRect().width
+      )
     }
-  }, [temporalRangeTooltipRef.current, temporalTooltipText, hoveringTemporalRange])
+  }, [
+    temporalRangeTooltipRef.current,
+    temporalTooltipText,
+    hoveringTemporalRange
+  ])
 
   // Set the position of the tooltip
   useEffect(() => {
@@ -1311,7 +1324,7 @@ export const EDSCTimeline = ({
       )
 
       // Find the middle temporal value of the range
-      const middleTemporal = start + ((end - start) / 2)
+      const middleTemporal = start + (end - start) / 2
 
       // Set the tooltip position to the middle value
       middleTooltipPosition = determineTooltipPosition({
@@ -1367,34 +1380,30 @@ export const EDSCTimeline = ({
   //  - when the user is hovering a temporal marker
   //  - when the user is hovering the temporal range
   //  - when the temporal selection will not be canceled
-  const temporalTooltipVisible = (
-    (
-      (draggingTemporalMarker === 'start' || draggingTemporalMarker === 'end')
-      || (hoveringTemporalMarker === 'start' || hoveringTemporalMarker === 'end')
-      || hoveringTemporalRange
-    )
-  )
-  && temporalTooltipText
-  && !willCancelTemporalSelection
-
-  const tooltipSpringStyle = useSpring(
-    {
-      config: (property) => {
-        // Set the opacity to fade out
-        if (property === 'opacity') return { duration: 100 }
-
-        return {}
-      },
-      // Prevent spring animation when dragging a marker or the timeline
-      immediate: () => !!draggingTemporalMarker || draggingTimeline,
-      // Animate the opacity when the tooltip is visible and not dragging the timeline
-      opacity: temporalTooltipVisible && !draggingTimeline ? 1 : 0,
-      // Animate the bottom when the tooltip is visible
-      bottom: temporalTooltipVisible ? '0.125rem' : '-0.125rem',
-      // Animate the tooltip position
-      ...temporalTooltipStyle
-    }
-  )
+  const temporalTooltipVisible = (draggingTemporalMarker === 'start'
+      || draggingTemporalMarker === 'end'
+      || hoveringTemporalMarker === 'start'
+      || hoveringTemporalMarker === 'end'
+      || hoveringTemporalRange)
+    && temporalTooltipText
+    && !willCancelTemporalSelection
+
+  const tooltipSpringStyle = useSpring({
+    config: (property) => {
+      // Set the opacity to fade out
+      if (property === 'opacity') return { duration: 100 }
+
+      return {}
+    },
+    // Prevent spring animation when dragging a marker or the timeline
+    immediate: () => !!draggingTemporalMarker || draggingTimeline,
+    // Animate the opacity when the tooltip is visible and not dragging the timeline
+    opacity: temporalTooltipVisible && !draggingTimeline ? 1 : 0,
+    // Animate the bottom when the tooltip is visible
+    bottom: temporalTooltipVisible ? '0.125rem' : '-0.125rem',
+    // Animate the tooltip position
+    ...temporalTooltipStyle
+  })
 
   return (
     <div
@@ -1402,9 +1411,7 @@ export const EDSCTimeline = ({
       ref={timelineWrapperRef}
       data-testid="timeline"
     >
-      <div
-        className="edsc-timeline__tooltips"
-      >
+      <div className="edsc-timeline__tooltips">
         <animated.div
           className="edsc-timeline__tooltip"
           ref={temporalRangeTooltipRef}
@@ -1433,9 +1440,7 @@ export const EDSCTimeline = ({
         visibleTemporalRange={visibleTemporalRange}
       />
       <div className="edsc-timeline__outer-wrapper">
-        <div
-          className="edsc-timeline__wrapper"
-        >
+        <div className="edsc-timeline__wrapper">
           {
             timeIntervals.length > 0 && (
               <TimelineList
@@ -1494,9 +1499,7 @@ EDSCTimeline.propTypes = {
       title: PropTypes.string,
       color: PropTypes.string,
       intervals: PropTypes.arrayOf(
-        PropTypes.arrayOf(
-          PropTypes.number
-        ) // [start, end, number of items in interval]
+        PropTypes.arrayOf(PropTypes.number) // [start, end, number of items in interval]
       ).isRequired
     })
   ).isRequired,
diff --git a/src/index.scss b/src/index.scss
index fbf9955..31152e2 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,5 @@
+@use '../src/css/variables';
+
 * > * {
   box-sizing: border-box;
 }
@@ -27,9 +29,9 @@
     bottom: -0.125rem;
     padding: 0.25rem 0.5rem;
     white-space: nowrap;
-    color: $color__white;
+    color: variables.$color__white;
     font-size: 0.775rem;
-    background-color: rgba($color__black, 0.7);
+    background-color: rgba(variables.$color__black, 0.7);
     border-radius: 0.25rem;
     transform: translateX(-50%);
     text-align: center;
@@ -55,11 +57,11 @@
       background: transparent;
       background: linear-gradient(
         90deg,
-        rgba($color__black--050, 0.9) 0%,
-        rgba($color__black--050, 0.6) 1%,
-        rgba($color__black--050, 0.6) 3%,
-        rgba($color__black--050, 0) 20%,
-        rgba($color__black--050, 0) 100%
+        rgba(variables.$color__black--050, 0.9) 0%,
+        rgba(variables.$color__black--050, 0.6) 1%,
+        rgba(variables.$color__black--050, 0.6) 3%,
+        rgba(variables.$color__black--050, 0) 20%,
+        rgba(variables.$color__black--050, 0) 100%
       );
       z-index: 2;
     }
@@ -77,7 +79,7 @@
   &__center {
     height: 100%;
     width: 1px;
-    background-color: red;
+    background-color: variables.$color__red;
     position: absolute;
     left: 50%;
     z-index: 1;
diff --git a/webpack.config.js b/webpack.config.js
index a34f26f..d12fc62 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path')
 
 module.exports = {
   mode: 'production',
-  entry: path.join(__dirname, 'src/index.js'),
+  entry: path.join(__dirname, 'src/index.jsx'),
   module: {
     rules: [
       {
@@ -16,14 +16,7 @@ module.exports = {
         use: [
           'style-loader',
           'css-loader',
-          'sass-loader',
-          {
-            loader: 'sass-resources-loader',
-            options: {
-              // eslint-disable-next-line import/no-dynamic-require, global-require
-              resources: require(path.join(process.cwd(), '/src/css/globalUtils.js'))
-            }
-          }
+          'sass-loader'
         ]
       },
       {