diff --git a/.eslintrc.js b/.eslintrc.js
index c7de1979550a2..6b38aaed71fd7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -126,7 +126,7 @@ module.exports = {
             },
         ],
         'react/forbid-dom-props': [
-            'warn',
+            'error',
             {
                 forbid: [
                     {
diff --git a/.github/workflows/storybook-chromatic.yml b/.github/workflows/storybook-chromatic.yml
index 48fb95f8b804a..4faed2ea8e084 100644
--- a/.github/workflows/storybook-chromatic.yml
+++ b/.github/workflows/storybook-chromatic.yml
@@ -124,7 +124,7 @@ jobs:
               run: pnpm install http-server wait-on
 
             - name: Build Storybook
-              run: pnpm build-storybook --quiet # Silence since progress logging results in a massive wall of spam
+              run: pnpm build-storybook --test --quiet # Silence since progress logging results in a massive wall of spam
 
             - name: Serve Storybook in the background
               run: |
diff --git a/.storybook/main.ts b/.storybook/main.ts
index a800cd203cf27..e2956ae3da544 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -44,6 +44,8 @@ const config: StorybookConfig = {
     docs: {
         autodocs: 'tag',
     },
+
+    typescript: { reactDocgen: 'react-docgen' }, // Shouldn't be needed in Storybook 8
 }
 
 export default config
diff --git a/README.md b/README.md
index c8200e3c30491..4629af2ac101e 100644
--- a/README.md
+++ b/README.md
@@ -22,15 +22,21 @@
 - Gather insights by capturing session replays, console logs, and network monitoring
 - Improve your product with A/B testing that automatically analyzes performance
 - Safely roll out features to select users or cohorts with feature flags
+- Send out fully customizable surveys to specific cohorts of users
 - Connect to external services and manage data flows with PostHog CDP
 
-PostHog is available with hosting in the EU or US and is fully SOC 2 compliant. It's free to get started and your first 1 million events (and 15k replays) are free every month. We're constantly adding new features, such as user surveys!
+PostHog is available with hosting in the EU or US and is fully SOC 2 compliant. It's free to get started and comes with a generous monthly free tier:
+- 1 million product analytics events
+- 15k session replays
+- 1 million feature flag requests
+- 250 survey responses
+
+We're constantly adding new features, with web analytics and data warehouse now in beta!
 
 ## Table of Contents
 
 - [Get started for free](#get-started-for-free)
-- [Features](#features)
-- [Docs and support](#docs-and-support)
+- [Docs](#docs)
 - [Contributing](#contributing)
 - [Philosophy](#philosophy)
 - [Open-source vs paid](#open-source-vs-paid)
@@ -49,11 +55,9 @@ You can deploy a hobby instance in one line on Linux with Docker (recommended 4G
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/posthog/posthog/HEAD/bin/deploy-hobby)" 
  ``` 
 
-Open source deployments should scale to approximately 100k events per month, after which we recommend migrating to a PostHog Cloud instance. See our [docs for more info and limitations](https://posthog.com/docs/self-host/open-source/deployment).
-
-PostHog has [sunset support for self-hosted K8s deployments](https://posthog.com/blog/sunsetting-helm-support-posthog).
+Open source deployments should scale to approximately 100k events per month, after which we recommend migrating to a PostHog Cloud instance. See our [docs for more info and limitations](https://posthog.com/docs/self-host/open-source/deployment). Please note that we do not provide customer support for open source deployments. 
 
-## Features
+## Docs
 ![ui-demo](https://user-images.githubusercontent.com/85295485/144591577-fe97e4a5-5631-4a60-a684-45caf421507f.gif)
 <p align="center">Want to find out more? <a href="https://posthog.com/book-a-demo">Request a demo!</a>
 
@@ -64,12 +68,13 @@ PostHog brings all the tools and data you need to build better products.
 - **Event-based analytics:** Capture your product's usage [automatically](https://posthog.com/docs/integrate/client/js#autocapture), or [customize](https://posthog.com/docs/integrate) it to your needs
 - **User and group tracking:** Understand the [people](https://posthog.com/manual/persons) and [groups](https://posthog.com/manual/group-analytics) behind the events and track properties about them
 - **Data visualizations:** Create and share [graphs](https://posthog.com/docs/features/trends), [funnels](https://posthog.com/docs/features/funnels), [paths](https://posthog.com/docs/features/paths), [retention](https://posthog.com/docs/features/retention), and [dashboards](https://posthog.com/docs/features/dashboards)
-- **SQL access:** Use SQL to get a deeper understanding of your users, breakdown information and create completely tailored visualizations
+- **SQL access:** Use [SQL](https://posthog.com/docs/product-analytics/sql) to get a deeper understanding of your users, breakdown information and create completely tailored visualizations
 - **Session replays:** [Watch videos](https://posthog.com/docs/features/session-recording) of your users' behavior, with fine-grained filters and privacy controls, as well as network monitoring and captured console logs
 - **Heatmaps:** See where users click and get a visual representation of their behaviour with the [PostHog Toolbar](https://posthog.com/docs/features/toolbar)
-- **Feature flags:** Test and manage the rollout of new features to specific users and groups, or deploy flags as kill-switches
+- **Feature flags:** Test and manage the rollout of [new features](https://posthog.com/docs/feature-flags/installation) to specific users and groups, or deploy flags as kill-switches
 - **A/B and multivariate experimentation:** run simple or complex changes as [experiments](https://posthog.com/manual/experimentation) and get automatic significance calculations
 - **Correlation analysis:** Discover what events and properties [correlate](https://posthog.com/manual/correlation) with success and failure
+- **Surveys:** Collect qualitative feedback from your users using fully customizable [surveys](https://posthog.com/docs/surveys/installation)
 
 ### Data and infrastructure tools
 
@@ -79,16 +84,6 @@ PostHog brings all the tools and data you need to build better products.
 
 [Read a full list of PostHog features](https://posthog.com/product).
 
-## Docs and support
-
-Read how to [integrate](https://posthog.com/docs/integrate), and [extend](https://posthog.com/docs/apps) an open-source 'Hobby' deployment of PostHog in our [documentation](https://posthog.com/docs).
-
-Check out our [tutorials](https://posthog.com/docs/apps) for step-by-step guides, how-to's, and best practices.
-
-Learn more about getting the most out of PostHog's features in [our product manual](https://posthog.com/using-posthog).
-
-[Ask a question](https://posthog.com/questions) to get support.
-
 ## Contributing
 
 We <3 contributions big and small. In priority order (although everything is appreciated) with the most helpful first:
diff --git a/bin/unit_metrics.py b/bin/unit_metrics.py
index 8ec2f5782f2e3..bab29481c4138 100644
--- a/bin/unit_metrics.py
+++ b/bin/unit_metrics.py
@@ -1,7 +1,12 @@
 import http.client
 import json
+import time
+import logging
 from prometheus_client import CollectorRegistry, Gauge, multiprocess, generate_latest
 
+
+logger = logging.getLogger(__name__)
+
 UNIT_CONNECTIONS_ACCEPTED_TOTAL = Gauge(
     "unit_connections_accepted_total",
     "",
@@ -42,12 +47,25 @@
 
 
 def application(environ, start_response):
-    connection = http.client.HTTPConnection("localhost:8181")
-    connection.request("GET", "/status")
-    response = connection.getresponse()
+    retries = 5
+    try:
+        connection = http.client.HTTPConnection("localhost:8181")
+        connection.request("GET", "/status")
+        response = connection.getresponse()
 
-    statj = json.loads(response.read())
-    connection.close()
+        statj = json.loads(response.read())
+    except Exception as e:
+        if retries > 0:
+            retries -= 1
+            time.sleep(1)
+            return application(environ, start_response)
+        else:
+            raise e
+    finally:
+        try:
+            connection.close()
+        except Exception as e:
+            logger.error("Failed to close connection to unit: ", e)
 
     UNIT_CONNECTIONS_ACCEPTED_TOTAL.set(statj["connections"]["accepted"])
     UNIT_CONNECTIONS_ACTIVE.set(statj["connections"]["active"])
@@ -55,19 +73,11 @@ def application(environ, start_response):
     UNIT_CONNECTIONS_CLOSED.set(statj["connections"]["closed"])
     UNIT_CONNECTIONS_TOTAL.set(statj["requests"]["total"])
 
-    for application in statj["applications"].keys():
-        UNIT_PROCESSES_RUNNING_GAUGE.labels(application=application).set(
-            statj["applications"][application]["processes"]["running"]
-        )
-        UNIT_PROCESSES_STARTING_GAUGE.labels(application=application).set(
-            statj["applications"][application]["processes"]["starting"]
-        )
-        UNIT_PROCESSES_IDLE_GAUGE.labels(application=application).set(
-            statj["applications"][application]["processes"]["idle"]
-        )
-        UNIT_REQUESTS_ACTIVE_GAUGE.labels(application=application).set(
-            statj["applications"][application]["requests"]["active"]
-        )
+    for app in statj["applications"].keys():
+        UNIT_PROCESSES_RUNNING_GAUGE.labels(application=app).set(statj["applications"][app]["processes"]["running"])
+        UNIT_PROCESSES_STARTING_GAUGE.labels(application=app).set(statj["applications"][app]["processes"]["starting"])
+        UNIT_PROCESSES_IDLE_GAUGE.labels(application=app).set(statj["applications"][app]["processes"]["idle"])
+        UNIT_REQUESTS_ACTIVE_GAUGE.labels(application=app).set(statj["applications"][app]["requests"]["active"])
 
     start_response("200 OK", [("Content-Type", "text/plain")])
     # Create the prometheus multi-process metric registry here
diff --git a/cypress/e2e/notebooks.cy.ts b/cypress/e2e/notebooks.cy.ts
index 853f0aba6819c..b251c4ba44e65 100644
--- a/cypress/e2e/notebooks.cy.ts
+++ b/cypress/e2e/notebooks.cy.ts
@@ -54,9 +54,9 @@ describe('Notebooks', () => {
 
     it('Can comment on a recording', () => {
         cy.visit(urls.replay())
-        cy.get('[data-attr="notebooks-add-button"]').click()
 
-        cy.get('.LemonButton').contains('New notebook').click()
+        cy.get('[data-attr="notebooks-add-button"]').click()
+        cy.get('[data-attr="notebooks-select-button-create"]').click()
 
         cy.get('.Notebook.Notebook--editable').should('be.visible')
         cy.get('.ph-recording.NotebookNode').should('be.visible')
diff --git a/ee/api/test/test_organization.py b/ee/api/test/test_organization.py
index cc48690395b83..4d7cf41f21fab 100644
--- a/ee/api/test/test_organization.py
+++ b/ee/api/test/test_organization.py
@@ -274,3 +274,20 @@ def test_feature_available_self_hosted_license_expired(self, patch_post):
             self.organization.refresh_from_db()
             self.assertFalse(self.organization.is_feature_available("whatever"))
         License.PLANS = current_plans
+
+    def test_get_organization_restricted_teams_hidden(self):
+        self.organization_membership.level = OrganizationMembership.Level.MEMBER
+        self.organization_membership.save()
+        Team.objects.create(
+            organization=self.organization,
+            name="FORBIDDEN",
+            access_control=True,
+        )
+
+        response = self.client.get(f"/api/organizations/{self.organization.id}")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertListEqual(
+            [team["name"] for team in response.json()["teams"]],
+            [self.team.name],  # "FORBIDDEN" excluded
+        )
diff --git a/ee/clickhouse/models/test/__snapshots__/test_property.ambr b/ee/clickhouse/models/test/__snapshots__/test_property.ambr
index d27396834cf99..cc8e77f83a0dc 100644
--- a/ee/clickhouse/models/test/__snapshots__/test_property.ambr
+++ b/ee/clickhouse/models/test/__snapshots__/test_property.ambr
@@ -57,7 +57,7 @@
 ---
 # name: test_parse_groups_persons_edge_case_with_single_filter
   <class 'tuple'> (
-    'AND (  has(%(vglobalperson_0)s, "pmat_email"))',
+    'AND (  has(%(vglobalperson_0)s, replaceRegexpAll(JSONExtractRaw(person_props, %(kglobalperson_0)s), \'^"|"$\', \'\')))',
     <class 'dict'> {
       'kglobalperson_0': 'email',
       'vglobalperson_0': <class 'list'> [
diff --git a/ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiment_secondary_results.ambr b/ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiment_secondary_results.ambr
index 8fd354505870a..2d1aa22e3bed4 100644
--- a/ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiment_secondary_results.ambr
+++ b/ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiment_secondary_results.ambr
@@ -1,6 +1,6 @@
 # name: ClickhouseTestExperimentSecondaryResults.test_basic_secondary_metric_results
   '
-  /* user_id:131 celery:posthog.celery.sync_insight_caching_state */
+  /* user_id:132 celery:posthog.celery.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
index fc2cf8cd0d5e2..277da71c3dc6e 100644
--- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
+++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
@@ -57,7 +57,7 @@ exports[`replay/transform transform can convert images 1`] = `
                             "type": 3,
                           },
                         ],
-                        "id": 106,
+                        "id": 104,
                         "tagName": "div",
                         "type": 2,
                       },
@@ -74,7 +74,7 @@ exports[`replay/transform transform can convert images 1`] = `
                         "type": 2,
                       },
                     ],
-                    "id": 105,
+                    "id": 103,
                     "tagName": "div",
                     "type": 2,
                   },
@@ -147,29 +147,11 @@ exports[`replay/transform transform can convert rect with text 1`] = `
                     "childNodes": [
                       {
                         "attributes": {
-                          "style": "width: 100px;height: 30px;position: fixed;left: 11px;top: 12px;",
-                          "viewBox": "0 0 100 30",
+                          "style": "color: #ee3ee4;border-width: 4px;border-radius: 10px;border-color: #ee3ee4;border-style: solid;width: 100px;height: 30px;position: fixed;left: 11px;top: 12px;",
                         },
-                        "childNodes": [
-                          {
-                            "attributes": {
-                              "fill": "transparent",
-                              "height": 30,
-                              "rx": "10px",
-                              "stroke": "#ee3ee4",
-                              "stroke-width": "4px",
-                              "width": 100,
-                              "x": 0,
-                              "y": 0,
-                            },
-                            "childNodes": [],
-                            "id": 108,
-                            "tagName": "rect",
-                            "type": 2,
-                          },
-                        ],
+                        "childNodes": [],
                         "id": 12345,
-                        "tagName": "svg",
+                        "tagName": "div",
                         "type": 2,
                       },
                       {
@@ -183,12 +165,12 @@ exports[`replay/transform transform can convert rect with text 1`] = `
                             "type": 3,
                           },
                         ],
-                        "id": 109,
+                        "id": 106,
                         "tagName": "div",
                         "type": 2,
                       },
                     ],
-                    "id": 107,
+                    "id": 105,
                     "tagName": "div",
                     "type": 2,
                   },
@@ -259,7 +241,7 @@ exports[`replay/transform transform can ignore unknown wireframe types 1`] = `
                   {
                     "attributes": {},
                     "childNodes": [],
-                    "id": 104,
+                    "id": 102,
                     "tagName": "div",
                     "type": 2,
                   },
@@ -344,46 +326,17 @@ exports[`replay/transform transform can process unknown types without error 1`]
                     "childNodes": [
                       {
                         "attributes": {
-                          "height": 30,
-                          "style": "width: 100px;height: 30px;position: fixed;left: 25px;top: 42px;",
-                          "width": 100,
+                          "style": "color: #35373e;background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 25px;top: 42px;align-items: center;justify-content: center;display: flex;",
                         },
                         "childNodes": [
                           {
-                            "attributes": {
-                              "fill": "grey",
-                              "height": 30,
-                              "style": "width: 100px;height: 30px;position: fixed;left: 25px;top: 42px;",
-                              "width": 100,
-                            },
-                            "childNodes": [],
                             "id": 101,
-                            "tagName": "rect",
-                            "type": 2,
-                          },
-                          {
-                            "attributes": {
-                              "dominant-baseline": "middle",
-                              "fill": "white",
-                              "font-size": "30",
-                              "text-anchor": "middle",
-                              "x": "50%",
-                              "y": "50%",
-                            },
-                            "childNodes": [
-                              {
-                                "id": 103,
-                                "textContent": "image",
-                                "type": 3,
-                              },
-                            ],
-                            "id": 102,
-                            "tagName": "text",
-                            "type": 2,
+                            "textContent": "image",
+                            "type": 3,
                           },
                         ],
                         "id": 12345,
-                        "tagName": "svg",
+                        "tagName": "div",
                         "type": 2,
                       },
                     ],
@@ -502,7 +455,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                                     "type": 3,
                                   },
                                 ],
-                                "id": 111,
+                                "id": 108,
                                 "tagName": "div",
                                 "type": 2,
                               },
@@ -517,7 +470,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                                     "type": 3,
                                   },
                                 ],
-                                "id": 112,
+                                "id": 109,
                                 "tagName": "div",
                                 "type": 2,
                               },
@@ -537,7 +490,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                                 "type": 3,
                               },
                             ],
-                            "id": 113,
+                            "id": 110,
                             "tagName": "div",
                             "type": 2,
                           },
@@ -547,7 +500,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                         "type": 2,
                       },
                     ],
-                    "id": 110,
+                    "id": 107,
                     "tagName": "div",
                     "type": 2,
                   },
@@ -625,7 +578,7 @@ exports[`replay/transform transform inputs buttons with nested elements 1`] = `
                       },
                       "childNodes": [
                         {
-                          "id": 119,
+                          "id": 114,
                           "textContent": "click me",
                           "type": 3,
                         },
@@ -635,7 +588,7 @@ exports[`replay/transform transform inputs buttons with nested elements 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 118,
+                  "id": 113,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -695,7 +648,7 @@ exports[`replay/transform transform inputs input - $inputType - hello 1`] = `
                 {
                   "attributes": {},
                   "childNodes": [],
-                  "id": 163,
+                  "id": 160,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -762,7 +715,7 @@ exports[`replay/transform transform inputs input - button - click me 1`] = `
                       },
                       "childNodes": [
                         {
-                          "id": 155,
+                          "id": 152,
                           "textContent": "click me",
                           "type": 3,
                         },
@@ -772,7 +725,7 @@ exports[`replay/transform transform inputs input - button - click me 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 154,
+                  "id": 151,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -849,17 +802,17 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = `
                           "type": 2,
                         },
                         {
-                          "id": 136,
+                          "id": 133,
                           "textContent": "first",
                           "type": 3,
                         },
                       ],
-                      "id": 135,
+                      "id": 132,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 134,
+                  "id": 131,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -935,17 +888,17 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = `
                           "type": 2,
                         },
                         {
-                          "id": 139,
+                          "id": 136,
                           "textContent": "second",
                           "type": 3,
                         },
                       ],
-                      "id": 138,
+                      "id": 135,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 137,
+                  "id": 134,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1023,17 +976,17 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = `
                           "type": 2,
                         },
                         {
-                          "id": 142,
+                          "id": 139,
                           "textContent": "third",
                           "type": 3,
                         },
                       ],
-                      "id": 141,
+                      "id": 138,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 140,
+                  "id": 137,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1105,7 +1058,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 4`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 143,
+                  "id": 140,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1177,7 +1130,7 @@ exports[`replay/transform transform inputs input - email - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 127,
+                  "id": 124,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1249,7 +1202,7 @@ exports[`replay/transform transform inputs input - number - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 128,
+                  "id": 125,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1321,7 +1274,7 @@ exports[`replay/transform transform inputs input - password - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 126,
+                  "id": 123,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1388,10 +1341,26 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;border: 4px solid transparent;border-radius: 50%;border-top: 4px solid #fff;animation: spin 2s linear infinite;",
+                            "style": "background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;border: 4px solid #35373e;border-radius: 50%;border-top: 4px solid #fff;animation: spin 2s linear infinite;",
                           },
-                          "childNodes": [],
-                          "id": 165,
+                          "childNodes": [
+                            {
+                              "attributes": {
+                                "type": "text/css",
+                              },
+                              "childNodes": [
+                                {
+                                  "id": 163,
+                                  "textContent": "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }",
+                                  "type": 3,
+                                },
+                              ],
+                              "id": 162,
+                              "tagName": "style",
+                              "type": 2,
+                            },
+                          ],
+                          "id": 164,
                           "tagName": "div",
                           "type": 2,
                         },
@@ -1401,7 +1370,7 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 164,
+                  "id": 161,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1474,7 +1443,7 @@ exports[`replay/transform transform inputs input - progress - $value 2`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 166,
+                  "id": 165,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1547,7 +1516,7 @@ exports[`replay/transform transform inputs input - progress - 0.75 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 167,
+                  "id": 166,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1620,7 +1589,7 @@ exports[`replay/transform transform inputs input - progress - 0.75 2`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 168,
+                  "id": 167,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1692,7 +1661,7 @@ exports[`replay/transform transform inputs input - search - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 129,
+                  "id": 126,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1765,12 +1734,12 @@ exports[`replay/transform transform inputs input - select - hello 1`] = `
                           },
                           "childNodes": [
                             {
-                              "id": 160,
+                              "id": 157,
                               "textContent": "hello",
                               "type": 3,
                             },
                           ],
-                          "id": 159,
+                          "id": 156,
                           "tagName": "option",
                           "type": 2,
                         },
@@ -1778,12 +1747,12 @@ exports[`replay/transform transform inputs input - select - hello 1`] = `
                           "attributes": {},
                           "childNodes": [
                             {
-                              "id": 162,
+                              "id": 159,
                               "textContent": "world",
                               "type": 3,
                             },
                           ],
-                          "id": 161,
+                          "id": 158,
                           "tagName": "option",
                           "type": 2,
                         },
@@ -1793,7 +1762,7 @@ exports[`replay/transform transform inputs input - select - hello 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 158,
+                  "id": 155,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1866,7 +1835,7 @@ exports[`replay/transform transform inputs input - tel - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 130,
+                  "id": 127,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -1938,7 +1907,7 @@ exports[`replay/transform transform inputs input - text - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 125,
+                  "id": 122,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2010,7 +1979,7 @@ exports[`replay/transform transform inputs input - text - hello 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 124,
+                  "id": 121,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2082,7 +2051,7 @@ exports[`replay/transform transform inputs input - textArea - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 157,
+                  "id": 154,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2154,7 +2123,7 @@ exports[`replay/transform transform inputs input - textArea - hello 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 156,
+                  "id": 153,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2231,17 +2200,17 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
                           "type": 2,
                         },
                         {
-                          "id": 146,
+                          "id": 143,
                           "textContent": "first",
                           "type": 3,
                         },
                       ],
-                      "id": 145,
+                      "id": 142,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 144,
+                  "id": 141,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2317,17 +2286,17 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
                           "type": 2,
                         },
                         {
-                          "id": 149,
+                          "id": 146,
                           "textContent": "second",
                           "type": 3,
                         },
                       ],
-                      "id": 148,
+                      "id": 145,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 147,
+                  "id": 144,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2405,17 +2374,17 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
                           "type": 2,
                         },
                         {
-                          "id": 152,
+                          "id": 149,
                           "textContent": "third",
                           "type": 3,
                         },
                       ],
-                      "id": 151,
+                      "id": 148,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 150,
+                  "id": 147,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2487,7 +2456,7 @@ exports[`replay/transform transform inputs input - toggle - $value 4`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 153,
+                  "id": 150,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2559,7 +2528,7 @@ exports[`replay/transform transform inputs input - url - https://example.io 1`]
                       "type": 2,
                     },
                   ],
-                  "id": 131,
+                  "id": 128,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2621,50 +2590,21 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`]
                   "childNodes": [
                     {
                       "attributes": {
-                        "height": 30,
-                        "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
-                        "width": 100,
+                        "style": "color: #35373e;background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
                       },
                       "childNodes": [
                         {
-                          "attributes": {
-                            "fill": "grey",
-                            "height": 30,
-                            "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
-                            "width": 100,
-                          },
-                          "childNodes": [],
-                          "id": 170,
-                          "tagName": "rect",
-                          "type": 2,
-                        },
-                        {
-                          "attributes": {
-                            "dominant-baseline": "middle",
-                            "fill": "white",
-                            "font-size": "30",
-                            "text-anchor": "middle",
-                            "x": "50%",
-                            "y": "50%",
-                          },
-                          "childNodes": [
-                            {
-                              "id": 172,
-                              "textContent": "hello",
-                              "type": 3,
-                            },
-                          ],
-                          "id": 171,
-                          "tagName": "text",
-                          "type": 2,
+                          "id": 169,
+                          "textContent": "hello",
+                          "type": 3,
                         },
                       ],
                       "id": 12365,
-                      "tagName": "svg",
+                      "tagName": "div",
                       "type": 2,
                     },
                   ],
-                  "id": 169,
+                  "id": 168,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2724,7 +2664,7 @@ exports[`replay/transform transform inputs radio group - $inputType - $value 1`]
                 {
                   "attributes": {},
                   "childNodes": [],
-                  "id": 133,
+                  "id": 130,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2794,7 +2734,7 @@ exports[`replay/transform transform inputs radio_group - $inputType - $value 1`]
                       "type": 2,
                     },
                   ],
-                  "id": 132,
+                  "id": 129,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2864,7 +2804,7 @@ exports[`replay/transform transform inputs radio_group 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 123,
+                  "id": 120,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -2888,7 +2828,7 @@ exports[`replay/transform transform inputs radio_group 1`] = `
 }
 `;
 
-exports[`replay/transform transform inputs webview - $inputType - $value 1`] = `
+exports[`replay/transform transform inputs web_view - $inputType - $value 1`] = `
 {
   "data": {
     "initialOffset": {
@@ -2923,8 +2863,100 @@ exports[`replay/transform transform inputs webview - $inputType - $value 1`] = `
               "childNodes": [
                 {
                   "attributes": {},
-                  "childNodes": [],
-                  "id": 173,
+                  "childNodes": [
+                    {
+                      "attributes": {
+                        "style": "color: #35373e;background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
+                      },
+                      "childNodes": [
+                        {
+                          "id": 171,
+                          "textContent": "web_view",
+                          "type": 3,
+                        },
+                      ],
+                      "id": 12365,
+                      "tagName": "div",
+                      "type": 2,
+                    },
+                  ],
+                  "id": 170,
+                  "tagName": "div",
+                  "type": 2,
+                },
+              ],
+              "id": 5,
+              "tagName": "body",
+              "type": 2,
+            },
+          ],
+          "id": 3,
+          "tagName": "html",
+          "type": 2,
+        },
+      ],
+      "id": 1,
+      "type": 0,
+    },
+  },
+  "timestamp": 1,
+  "type": 2,
+}
+`;
+
+exports[`replay/transform transform inputs web_view with URL 1`] = `
+{
+  "data": {
+    "initialOffset": {
+      "left": 0,
+      "top": 0,
+    },
+    "node": {
+      "childNodes": [
+        {
+          "id": 2,
+          "name": "html",
+          "publicId": "",
+          "systemId": "",
+          "type": 1,
+        },
+        {
+          "attributes": {
+            "style": "height: 100vh; width: 100vw;",
+          },
+          "childNodes": [
+            {
+              "attributes": {},
+              "childNodes": [],
+              "id": 4,
+              "tagName": "head",
+              "type": 2,
+            },
+            {
+              "attributes": {
+                "style": "height: 100vh; width: 100vw;",
+              },
+              "childNodes": [
+                {
+                  "attributes": {},
+                  "childNodes": [
+                    {
+                      "attributes": {
+                        "style": "color: #35373e;background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
+                      },
+                      "childNodes": [
+                        {
+                          "id": 119,
+                          "textContent": "https://example.com",
+                          "type": 3,
+                        },
+                      ],
+                      "id": 12365,
+                      "tagName": "div",
+                      "type": 2,
+                    },
+                  ],
+                  "id": 118,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -3000,17 +3032,17 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = `
                           "type": 2,
                         },
                         {
-                          "id": 122,
+                          "id": 117,
                           "textContent": "i will wrap the checkbox",
                           "type": 3,
                         },
                       ],
-                      "id": 121,
+                      "id": 116,
                       "tagName": "label",
                       "type": 2,
                     },
                   ],
-                  "id": 120,
+                  "id": 115,
                   "tagName": "div",
                   "type": 2,
                 },
@@ -3073,50 +3105,21 @@ exports[`replay/transform transform omitting x and y is equivalent to setting th
                     "childNodes": [
                       {
                         "attributes": {
-                          "height": 30,
-                          "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
-                          "width": 100,
+                          "style": "color: #35373e;background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
                         },
                         "childNodes": [
                           {
-                            "attributes": {
-                              "fill": "grey",
-                              "height": 30,
-                              "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
-                              "width": 100,
-                            },
-                            "childNodes": [],
-                            "id": 115,
-                            "tagName": "rect",
-                            "type": 2,
-                          },
-                          {
-                            "attributes": {
-                              "dominant-baseline": "middle",
-                              "fill": "white",
-                              "font-size": "30",
-                              "text-anchor": "middle",
-                              "x": "50%",
-                              "y": "50%",
-                            },
-                            "childNodes": [
-                              {
-                                "id": 117,
-                                "textContent": "image",
-                                "type": 3,
-                              },
-                            ],
-                            "id": 116,
-                            "tagName": "text",
-                            "type": 2,
+                            "id": 112,
+                            "textContent": "image",
+                            "type": 3,
                           },
                         ],
                         "id": 12345,
-                        "tagName": "svg",
+                        "tagName": "div",
                         "type": 2,
                       },
                     ],
-                    "id": 114,
+                    "id": 111,
                     "tagName": "div",
                     "type": 2,
                   },
diff --git a/ee/frontend/mobile-replay/mobile.types.ts b/ee/frontend/mobile-replay/mobile.types.ts
index e8948c4b5427e..90db59407e500 100644
--- a/ee/frontend/mobile-replay/mobile.types.ts
+++ b/ee/frontend/mobile-replay/mobile.types.ts
@@ -235,6 +235,7 @@ export type wireframeRectangle = wireframeBase & {
 
 export type wireframeWebView = wireframeBase & {
     type: 'web_view'
+    url?: string
 }
 
 export type wireframePlaceholder = wireframeBase & {
diff --git a/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json b/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json
index 2f3d967ce77ed..c815bdba85690 100644
--- a/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json
+++ b/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json
@@ -874,6 +874,9 @@
                 "type": {
                     "$ref": "#/definitions/MobileNodeType"
                 },
+                "url": {
+                    "type": "string"
+                },
                 "width": {
                     "type": "number"
                 },
diff --git a/ee/frontend/mobile-replay/transform.test.ts b/ee/frontend/mobile-replay/transform.test.ts
index ce6da521ea85c..c4cd67e346558 100644
--- a/ee/frontend/mobile-replay/transform.test.ts
+++ b/ee/frontend/mobile-replay/transform.test.ts
@@ -432,6 +432,27 @@ describe('replay/transform', () => {
                     })
                 ).toMatchSnapshot()
             })
+
+            test('web_view with URL', () => {
+                expect(
+                    posthogEEModule.mobileReplay?.transformEventToWeb({
+                        type: 2,
+                        data: {
+                            wireframes: [
+                                {
+                                    id: 12365,
+                                    width: 100,
+                                    height: 30,
+                                    type: 'web_view',
+                                    url: 'https://example.com',
+                                },
+                            ],
+                        },
+                        timestamp: 1,
+                    })
+                ).toMatchSnapshot()
+            })
+
             test('radio_group', () => {
                 expect(
                     posthogEEModule.mobileReplay?.transformEventToWeb({
@@ -741,7 +762,7 @@ describe('replay/transform', () => {
                     id: 12365,
                     width: 100,
                     height: 30,
-                    type: 'webview',
+                    type: 'web_view',
                 },
             ])('$type - $inputType - $value', (testCase) => {
                 expect(
diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformers.ts
index e32d66fa44301..df35abee10704 100644
--- a/ee/frontend/mobile-replay/transformers.ts
+++ b/ee/frontend/mobile-replay/transformers.ts
@@ -15,6 +15,7 @@ import {
     wireframeDiv,
     wireframeImage,
     wireframeInputComponent,
+    wireframePlaceholder,
     wireframeProgress,
     wireframeRadioGroup,
     wireframeRectangle,
@@ -28,11 +29,12 @@ import {
     makeHTMLStyles,
     makeIndeterminateProgressStyles,
     makeMinimalStyles,
-    makePositionStyles,
     makeStylesString,
-    makeSvgBorder,
 } from './wireframeStyle'
 
+const BACKGROUND = '#f3f4ef'
+const FOREGROUND = '#35373e'
+
 /**
  * generates a sequence of ids
  * from 100 to 9,999,999
@@ -121,58 +123,33 @@ function makeTextElement(wireframe: wireframeText, children: serializedNodeWithI
 }
 
 function makeWebViewElement(wireframe: wireframe, children: serializedNodeWithId[]): serializedNodeWithId | null {
-    return makePlaceholderElement(wireframe, children)
+    const labelledWireframe: wireframePlaceholder = { ...wireframe } as wireframePlaceholder
+    if ('url' in wireframe) {
+        labelledWireframe.label = wireframe.url
+    }
+
+    return makePlaceholderElement(labelledWireframe, children)
 }
 
 function makePlaceholderElement(wireframe: wireframe, children: serializedNodeWithId[]): serializedNodeWithId | null {
-    // <svg width="200" height="200">
-    //  <rect width="100%" height="100%" fill="grey"/>
-    //  <text fill="white" font-size="30" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
-    // Keyboard
-    //  </text>
-    // </svg>
     const txt = 'label' in wireframe && wireframe.label ? wireframe.label : wireframe.type || 'PLACEHOLDER'
     return {
         type: NodeType.Element,
-        tagName: 'svg',
+        tagName: 'div',
         attributes: {
-            width: wireframe.width,
-            height: wireframe.height,
-            style: makeStylesString(wireframe),
+            style: makeStylesString(wireframe, {
+                verticalAlign: 'center',
+                horizontalAlign: 'center',
+                backgroundColor: wireframe.style?.backgroundColor || BACKGROUND,
+                color: wireframe.style?.color || FOREGROUND,
+            }),
         },
         id: wireframe.id,
         childNodes: [
             {
-                type: NodeType.Element,
-                tagName: 'rect',
-                attributes: {
-                    width: wireframe.width,
-                    height: wireframe.height,
-                    style: makeStylesString(wireframe),
-                    fill: wireframe.style?.backgroundColor || 'grey',
-                },
-                id: idSequence.next().value,
-                childNodes: [],
-            },
-            {
-                type: NodeType.Element,
-                tagName: 'text',
-                attributes: {
-                    fill: wireframe.style?.color || 'white',
-                    'font-size': '30',
-                    x: '50%',
-                    y: '50%',
-                    'dominant-baseline': 'middle',
-                    'text-anchor': 'middle',
-                },
+                type: NodeType.Text,
                 id: idSequence.next().value,
-                childNodes: [
-                    {
-                        type: NodeType.Text,
-                        textContent: txt,
-                        id: idSequence.next().value,
-                    },
-                ],
+                textContent: txt,
             },
             ...children,
         ],
@@ -351,6 +328,33 @@ function makeProgressElement(
             value = null
         }
 
+        const styleOverride = {
+            color: wireframe.style?.color || FOREGROUND,
+            backgroundColor: wireframe.style?.backgroundColor || BACKGROUND,
+        }
+
+        // if not _isPositiveInteger(value) then we render a spinner,
+        // so we need to add a style element with the spin keyframe
+        const stylingChildren: serializedNodeWithId[] = _isPositiveInteger(value)
+            ? []
+            : [
+                  {
+                      type: NodeType.Element,
+                      tagName: 'style',
+                      attributes: {
+                          type: 'text/css',
+                      },
+                      id: idSequence.next().value,
+                      childNodes: [
+                          {
+                              type: NodeType.Text,
+                              textContent: `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`,
+                              id: idSequence.next().value,
+                          },
+                      ],
+                  },
+              ]
+
         return {
             type: NodeType.Element,
             tagName: 'div',
@@ -365,11 +369,11 @@ function makeProgressElement(
                     attributes: {
                         // with no provided value we render a spinner
                         style: _isPositiveInteger(value)
-                            ? makeDeterminateProgressStyles(wireframe)
-                            : makeIndeterminateProgressStyles(wireframe),
+                            ? makeDeterminateProgressStyles(wireframe, styleOverride)
+                            : makeIndeterminateProgressStyles(wireframe, styleOverride),
                     },
                     id: idSequence.next().value,
-                    childNodes: [],
+                    childNodes: stylingChildren,
                 },
                 ...children,
             ],
@@ -471,28 +475,12 @@ function makeRectangleElement(
 ): serializedNodeWithId | null {
     return {
         type: NodeType.Element,
-        tagName: 'svg',
+        tagName: 'div',
         attributes: {
-            style: makePositionStyles(wireframe),
-            viewBox: `0 0 ${wireframe.width} ${wireframe.height}`,
+            style: makeStylesString(wireframe),
         },
         id: wireframe.id,
-        childNodes: [
-            {
-                type: NodeType.Element,
-                tagName: 'rect',
-                attributes: {
-                    x: 0,
-                    y: 0,
-                    width: wireframe.width,
-                    height: wireframe.height,
-                    fill: wireframe.style?.backgroundColor || 'transparent',
-                    ...makeSvgBorder(wireframe.style),
-                },
-                id: idSequence.next().value,
-                childNodes: children,
-            },
-        ],
+        childNodes: children,
     }
 }
 
diff --git a/ee/frontend/mobile-replay/wireframeStyle.ts b/ee/frontend/mobile-replay/wireframeStyle.ts
index c171730083dcb..579d68fde85e2 100644
--- a/ee/frontend/mobile-replay/wireframeStyle.ts
+++ b/ee/frontend/mobile-replay/wireframeStyle.ts
@@ -16,23 +16,28 @@ function ensureUnit(value: string | number): string {
     return isNumber(value) ? `${value}px` : value.replace(/px$/g, '') + 'px'
 }
 
-function makeBorderStyles(wireframe: wireframe): string {
+function makeBorderStyles(wireframe: wireframe, styleOverride?: MobileStyles): string {
     let styles = ''
 
-    if (!wireframe.style) {
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+
+    if (!combinedStyles) {
         return styles
     }
 
-    if (isUnitLike(wireframe.style.borderWidth)) {
-        const borderWidth = ensureUnit(wireframe.style.borderWidth)
+    if (isUnitLike(combinedStyles.borderWidth)) {
+        const borderWidth = ensureUnit(combinedStyles.borderWidth)
         styles += `border-width: ${borderWidth};`
     }
-    if (isUnitLike(wireframe.style.borderRadius)) {
-        const borderRadius = ensureUnit(wireframe.style.borderRadius)
+    if (isUnitLike(combinedStyles.borderRadius)) {
+        const borderRadius = ensureUnit(combinedStyles.borderRadius)
         styles += `border-radius: ${borderRadius};`
     }
-    if (wireframe.style?.borderColor) {
-        styles += `border-color: ${wireframe.style.borderColor};`
+    if (combinedStyles?.borderColor) {
+        styles += `border-color: ${combinedStyles.borderColor};`
     }
 
     if (styles.length > 0) {
@@ -42,27 +47,7 @@ function makeBorderStyles(wireframe: wireframe): string {
     return styles
 }
 
-export function makeSvgBorder(style: MobileStyles | undefined): Record<string, string> {
-    const svgBorderStyles: Record<string, string> = {}
-
-    if (!style) {
-        return svgBorderStyles
-    }
-
-    if (isUnitLike(style.borderWidth)) {
-        svgBorderStyles['stroke-width'] = ensureUnit(style.borderWidth)
-    }
-    if (style.borderColor) {
-        svgBorderStyles.stroke = style.borderColor
-    }
-    if (isUnitLike(style.borderRadius)) {
-        svgBorderStyles.rx = ensureUnit(style.borderRadius)
-    }
-
-    return svgBorderStyles
-}
-
-export function makePositionStyles(wireframe: wireframe): string {
+function makePositionStyles(wireframe: wireframe): string {
     let styles = ''
     if (isNumber(wireframe.width)) {
         styles += `width: ${ensureUnit(wireframe.width)};`
@@ -85,16 +70,22 @@ export function makePositionStyles(wireframe: wireframe): string {
     return styles
 }
 
-function makeLayoutStyles(wireframe: wireframe): string {
+function makeLayoutStyles(wireframe: wireframe, styleOverride?: MobileStyles): string {
     let styles = ''
-    if (wireframe.style?.verticalAlign) {
+
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+
+    if (combinedStyles.verticalAlign) {
         styles += `align-items: ${
-            { top: 'flex-start', center: 'center', bottom: 'flex-end' }[wireframe.style.verticalAlign]
+            { top: 'flex-start', center: 'center', bottom: 'flex-end' }[combinedStyles.verticalAlign]
         };`
     }
-    if (wireframe.style?.horizontalAlign) {
+    if (combinedStyles.horizontalAlign) {
         styles += `justify-content: ${
-            { left: 'flex-start', center: 'center', right: 'flex-end' }[wireframe.style.horizontalAlign]
+            { left: 'flex-start', center: 'center', right: 'flex-end' }[combinedStyles.horizontalAlign]
         };`
     }
     if (styles.length) {
@@ -103,45 +94,59 @@ function makeLayoutStyles(wireframe: wireframe): string {
     return styles
 }
 
-function makeFontStyles(wireframe: wireframe): string {
+function makeFontStyles(wireframe: wireframe, styleOverride?: MobileStyles): string {
     let styles = ''
 
-    if (!wireframe.style) {
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+
+    if (!combinedStyles) {
         return styles
     }
 
-    if (isUnitLike(wireframe.style.fontSize)) {
-        styles += `font-size: ${ensureUnit(wireframe.style?.fontSize)};`
+    if (isUnitLike(combinedStyles.fontSize)) {
+        styles += `font-size: ${ensureUnit(combinedStyles?.fontSize)};`
     }
-    if (wireframe.style.fontFamily) {
-        styles += `font-family: ${wireframe.style.fontFamily};`
+    if (combinedStyles.fontFamily) {
+        styles += `font-family: ${combinedStyles.fontFamily};`
     }
     return styles
 }
 
-export function makeIndeterminateProgressStyles(wireframe: wireframeProgress): string {
+export function makeIndeterminateProgressStyles(wireframe: wireframeProgress, styleOverride?: MobileStyles): string {
     let styles = ''
-    if (wireframe.style?.backgroundColor) {
-        styles += `background-color: ${wireframe.style.backgroundColor};`
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+    if (combinedStyles.backgroundColor) {
+        styles += `background-color: ${combinedStyles.backgroundColor};`
     }
     styles += makePositionStyles(wireframe)
-    styles += `border: 4px solid ${wireframe.style?.borderColor || 'transparent'};`
+    styles += `border: 4px solid ${combinedStyles.borderColor || combinedStyles.color || 'transparent'};`
     styles += `border-radius: 50%;border-top: 4px solid #fff;`
     styles += `animation: spin 2s linear infinite;`
 
     return styles
 }
 
-export function makeDeterminateProgressStyles(wireframe: wireframeProgress): string {
+export function makeDeterminateProgressStyles(wireframe: wireframeProgress, styleOverride?: MobileStyles): string {
     let styles = ''
-    if (wireframe.style?.backgroundColor) {
-        styles += `background-color: ${wireframe.style.backgroundColor};`
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
+    }
+
+    if (combinedStyles.backgroundColor) {
+        styles += `background-color: ${combinedStyles.backgroundColor};`
     }
     styles += makePositionStyles(wireframe)
     styles += 'border-radius: 50%;'
     const radialGradient = `radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0)`
-    const conicGradient = `conic-gradient(${wireframe.style?.color || 'black'} calc(${wireframe.value} * 1%), ${
-        wireframe.style?.backgroundColor
+    const conicGradient = `conic-gradient(${combinedStyles.color || 'black'} calc(${wireframe.value} * 1%), ${
+        combinedStyles.backgroundColor
     } 0)`
     styles += `background: ${radialGradient}, ${conicGradient};`
 
@@ -151,27 +156,33 @@ export function makeDeterminateProgressStyles(wireframe: wireframeProgress): str
 /**
  * normally use makeStylesString instead, but sometimes you need styles without any colors applied
  * */
-export function makeMinimalStyles(wireframe: wireframe): string {
+export function makeMinimalStyles(wireframe: wireframe, styleOverride?: MobileStyles): string {
     let styles = ''
 
     styles += makePositionStyles(wireframe)
-    styles += makeLayoutStyles(wireframe)
-    styles += makeFontStyles(wireframe)
+    styles += makeLayoutStyles(wireframe, styleOverride)
+    styles += makeFontStyles(wireframe, styleOverride)
 
     return styles
 }
 
-export function makeStylesString(wireframe: wireframe): string {
+export function makeStylesString(wireframe: wireframe, styleOverride?: MobileStyles): string {
     let styles = ''
 
-    if (wireframe.style?.color) {
-        styles += `color: ${wireframe.style.color};`
+    const combinedStyles = {
+        ...wireframe.style,
+        ...styleOverride,
     }
-    if (wireframe.style?.backgroundColor) {
-        styles += `background-color: ${wireframe.style.backgroundColor};`
+
+    if (combinedStyles.color) {
+        styles += `color: ${combinedStyles.color};`
     }
-    styles += makeBorderStyles(wireframe)
-    styles += makeMinimalStyles(wireframe)
+    if (combinedStyles.backgroundColor) {
+        styles += `background-color: ${combinedStyles.backgroundColor};`
+    }
+
+    styles += makeBorderStyles(wireframe, styleOverride)
+    styles += makeMinimalStyles(wireframe, styleOverride)
 
     return styles
 }
diff --git a/frontend/__snapshots__/components-cards-text-card--template.png b/frontend/__snapshots__/components-cards-text-card--template.png
index 3c045b8354ba6..208c5a11fa5d4 100644
Binary files a/frontend/__snapshots__/components-cards-text-card--template.png and b/frontend/__snapshots__/components-cards-text-card--template.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--dashboard.png b/frontend/__snapshots__/exporter-exporter--dashboard.png
index f9f627a9ec7fd..a7164982fde68 100644
Binary files a/frontend/__snapshots__/exporter-exporter--dashboard.png and b/frontend/__snapshots__/exporter-exporter--dashboard.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--lifecycle-insight.png b/frontend/__snapshots__/exporter-exporter--lifecycle-insight.png
index 49e132b82db76..0b7380b3d5b8e 100644
Binary files a/frontend/__snapshots__/exporter-exporter--lifecycle-insight.png and b/frontend/__snapshots__/exporter-exporter--lifecycle-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--stickiness-insight.png b/frontend/__snapshots__/exporter-exporter--stickiness-insight.png
index 3fc3e03143c98..1623f5654fa3e 100644
Binary files a/frontend/__snapshots__/exporter-exporter--stickiness-insight.png and b/frontend/__snapshots__/exporter-exporter--stickiness-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-area-breakdown-insight.png b/frontend/__snapshots__/exporter-exporter--trends-area-breakdown-insight.png
index 7de2045284f44..16d5054623119 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-area-breakdown-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-area-breakdown-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-area-insight.png b/frontend/__snapshots__/exporter-exporter--trends-area-insight.png
index 41d262d023141..06a4cd04eaebd 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-area-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-area-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-bar-insight.png b/frontend/__snapshots__/exporter-exporter--trends-bar-insight.png
index 41d262d023141..06a4cd04eaebd 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-bar-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-bar-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-line-insight.png b/frontend/__snapshots__/exporter-exporter--trends-line-insight.png
index 41d262d023141..06a4cd04eaebd 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-line-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-line-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-line-multi-insight.png b/frontend/__snapshots__/exporter-exporter--trends-line-multi-insight.png
index 93c140d75f49a..55fc5f56d80b4 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-line-multi-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-line-multi-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-table-breakdown-insight.png b/frontend/__snapshots__/exporter-exporter--trends-table-breakdown-insight.png
index 282daf6b30543..c9e00fdd402a4 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-table-breakdown-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-table-breakdown-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-table-insight.png b/frontend/__snapshots__/exporter-exporter--trends-table-insight.png
index 5223b75398630..14ef9b1154ca4 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-table-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-table-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--trends-value-insight.png b/frontend/__snapshots__/exporter-exporter--trends-value-insight.png
index 41d262d023141..06a4cd04eaebd 100644
Binary files a/frontend/__snapshots__/exporter-exporter--trends-value-insight.png and b/frontend/__snapshots__/exporter-exporter--trends-value-insight.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--button--dark.png b/frontend/__snapshots__/filters-property-filter-button--button--dark.png
new file mode 100644
index 0000000000000..d2d5914ad6fd7
Binary files /dev/null and b/frontend/__snapshots__/filters-property-filter-button--button--dark.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--button--light.png b/frontend/__snapshots__/filters-property-filter-button--button--light.png
new file mode 100644
index 0000000000000..01ecaac73a211
Binary files /dev/null and b/frontend/__snapshots__/filters-property-filter-button--button--light.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--button.png b/frontend/__snapshots__/filters-property-filter-button--button.png
new file mode 100644
index 0000000000000..3b8c14ecc0b7c
Binary files /dev/null and b/frontend/__snapshots__/filters-property-filter-button--button.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--filter-types--dark.png b/frontend/__snapshots__/filters-property-filter-button--filter-types--dark.png
index 7d327b393da5c..e5da922ada12b 100644
Binary files a/frontend/__snapshots__/filters-property-filter-button--filter-types--dark.png and b/frontend/__snapshots__/filters-property-filter-button--filter-types--dark.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--filter-types--light.png b/frontend/__snapshots__/filters-property-filter-button--filter-types--light.png
index 84df0a6bd221a..9769da9797415 100644
Binary files a/frontend/__snapshots__/filters-property-filter-button--filter-types--light.png and b/frontend/__snapshots__/filters-property-filter-button--filter-types--light.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--filter-types.png b/frontend/__snapshots__/filters-property-filter-button--filter-types.png
index 7a70395f75462..6ffd6cde8b8b8 100644
Binary files a/frontend/__snapshots__/filters-property-filter-button--filter-types.png and b/frontend/__snapshots__/filters-property-filter-button--filter-types.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--pseudo-states--dark.png b/frontend/__snapshots__/filters-property-filter-button--pseudo-states--dark.png
index f516817d47b28..409601d4b2735 100644
Binary files a/frontend/__snapshots__/filters-property-filter-button--pseudo-states--dark.png and b/frontend/__snapshots__/filters-property-filter-button--pseudo-states--dark.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--pseudo-states--light.png b/frontend/__snapshots__/filters-property-filter-button--pseudo-states--light.png
index c0ba463dbff70..0937f703a736a 100644
Binary files a/frontend/__snapshots__/filters-property-filter-button--pseudo-states--light.png and b/frontend/__snapshots__/filters-property-filter-button--pseudo-states--light.png differ
diff --git a/frontend/__snapshots__/filters-property-filter-button--pseudo-states.png b/frontend/__snapshots__/filters-property-filter-button--pseudo-states.png
index 979a5cb5fe074..e2d1b750a91c2 100644
Binary files a/frontend/__snapshots__/filters-property-filter-button--pseudo-states.png and b/frontend/__snapshots__/filters-property-filter-button--pseudo-states.png differ
diff --git a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png
index 511e5bcc051b4..d6139bbdf9627 100644
Binary files a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png and b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png differ
diff --git a/frontend/__snapshots__/lemon-ui-colors--color-palette.png b/frontend/__snapshots__/lemon-ui-colors--color-palette.png
index bda274f89b37b..540cb196b3f81 100644
Binary files a/frontend/__snapshots__/lemon-ui-colors--color-palette.png and b/frontend/__snapshots__/lemon-ui-colors--color-palette.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png
index 436c618a7212e..d771bd1185591 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--loading--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png
index 7983e16c30ab5..4e4ab63b3dfc1 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--loading--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--loading.png b/frontend/__snapshots__/lemon-ui-lemon-button--loading.png
index 0242c063f0781..f09505f02ebc5 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--loading.png and b/frontend/__snapshots__/lemon-ui-lemon-button--loading.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png
index 8f467d6638590..46440a99a9495 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png
index a003b06034a14..898fabc457edb 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png
index d33d03c99278f..ce16df7e1b459 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png and b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png
index b5b3d8bdb3bd7..c5587c6cbbac7 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png
index 6eff03a894756..ffd8d8fda6cef 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png
index c8d52e384f548..46812f187d7b6 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png
index c8ae34ef7107c..712933f866dcc 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only.png b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only.png
index 18fb90a365541..8bb5647b5ab6b 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only.png and b/frontend/__snapshots__/lemon-ui-lemon-button--sizes-icon-only.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png
index 88fc67bc2f79d..36ef77e47bb64 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png
index ea790808089c2..d99244bb29516 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png
index bcf468b94ebfe..77ba7626ec560 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png
index 9c4cc82a1667d..196511a61d100 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png
index caf9a688bf48d..e67d391598530 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png
index d3cd52d1cce62..6c069b90a1d73 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-and-statuses.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png
index 597b5bce0e0bc..7cf8065b14abc 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png
index f7cee3572ce3a..24515a6bd7a8c 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png
index 51a84ba81aa51..2cad7296bb3c3 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png and b/frontend/__snapshots__/lemon-ui-lemon-button--with-side-action.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png
index b5e2113ee71af..00807ba1c9f73 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png
index 8ea8124973d82..13cde27282b24 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png b/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png
index e81dc1cf31bbc..3c15edb09ac56 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png and b/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-label--basic.png b/frontend/__snapshots__/lemon-ui-lemon-label--basic.png
index cf671f447d65b..528b9a55db843 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-label--basic.png and b/frontend/__snapshots__/lemon-ui-lemon-label--basic.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items.png b/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items.png
index 883d7f489d1d2..f24b402e339d0 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items.png and b/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--clearable.png b/frontend/__snapshots__/lemon-ui-lemon-select--clearable.png
index 4208f609c7000..173e6083b8d7f 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--clearable.png and b/frontend/__snapshots__/lemon-ui-lemon-select--clearable.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--custom-element.png b/frontend/__snapshots__/lemon-ui-lemon-select--custom-element.png
index 04084d27caaf9..f5f49e01f6c14 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--custom-element.png and b/frontend/__snapshots__/lemon-ui-lemon-select--custom-element.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--flat.png b/frontend/__snapshots__/lemon-ui-lemon-select--flat.png
index af67619e3e97e..014fa2c439173 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--flat.png and b/frontend/__snapshots__/lemon-ui-lemon-select--flat.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png b/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png
index 01c803c849fb2..b5e107be8cf4f 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png and b/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--mixed-values-types.png b/frontend/__snapshots__/lemon-ui-lemon-select--mixed-values-types.png
index af67619e3e97e..014fa2c439173 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--mixed-values-types.png and b/frontend/__snapshots__/lemon-ui-lemon-select--mixed-values-types.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--nested-select.png b/frontend/__snapshots__/lemon-ui-lemon-select--nested-select.png
index af67619e3e97e..014fa2c439173 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--nested-select.png and b/frontend/__snapshots__/lemon-ui-lemon-select--nested-select.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--sectioned-options.png b/frontend/__snapshots__/lemon-ui-lemon-select--sectioned-options.png
index af67619e3e97e..014fa2c439173 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--sectioned-options.png and b/frontend/__snapshots__/lemon-ui-lemon-select--sectioned-options.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag--dark.png b/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag--dark.png
new file mode 100644
index 0000000000000..3b4b55227faac
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag--light.png b/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag--light.png
new file mode 100644
index 0000000000000..44c5df9cd7035
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag.png b/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag.png
new file mode 100644
index 0000000000000..22ba415f7ec49
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-tag--breakdown-tag.png differ
diff --git a/frontend/__snapshots__/lemon-ui-object-tags--default.png b/frontend/__snapshots__/lemon-ui-object-tags--default.png
index 718a544e296e9..ec7a9b62816b1 100644
Binary files a/frontend/__snapshots__/lemon-ui-object-tags--default.png and b/frontend/__snapshots__/lemon-ui-object-tags--default.png differ
diff --git a/frontend/__snapshots__/scenes-app-events--event-explorer.png b/frontend/__snapshots__/scenes-app-events--event-explorer.png
index a01b0acd54c8e..6a39938cc49d3 100644
Binary files a/frontend/__snapshots__/scenes-app-events--event-explorer.png and b/frontend/__snapshots__/scenes-app-events--event-explorer.png differ
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
index 9829aceb1fb29..1100671504112 100644
Binary files a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png differ
diff --git a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png
index e430a1e7e64b5..70a44479250c4 100644
Binary files a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png differ
diff --git a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png
index 2d6a0dd22fbb2..cb7249e0ab666 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png and b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png
index fad924d6d992c..06ba2306497bf 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png
index ccf8234088213..3001cd8a9bf15 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png
index 75e979c6000f2..82c54a20f63cc 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png
index 1c676df02d51b..cdc972639fefc 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png
index 4f9ecafb2cb91..0cb97e224e4e6 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png
index c1b930d99d3e0..9d9d059e7c30b 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png
index 23df97529d796..c89e656254be9 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png
index 3898222555311..2104c79414a0c 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png
index 1609928c7ceb8..7d05ac750c474 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png
index 06178fa43b12e..7eb244c5d0d4c 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png
index e3a58a360df55..98c5274496d9d 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png
index 909a8e0fb08f4..968fb23bb9228 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png
index 0987fe2e35a86..ef61297736835 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png
index 14f36451d7c4d..bd8cb78fc7f40 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png
index a263bb10b8e2c..0533de4693a29 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png
index a5b0fe38ddcfb..c82dd5a7302c8 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png
index 0267ec23cbe4d..378dc8501afb5 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png
index f0f8735e3daa3..30a1dc81d26dc 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--default.png b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--default.png
index b40312a58dfcc..bef4b4f7619f2 100644
Binary files a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--default.png and b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--default.png differ
diff --git a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-no-existing-containing-notebooks.png b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-no-existing-containing-notebooks.png
index a2cc724637cdf..d9db9b57a35ad 100644
Binary files a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-no-existing-containing-notebooks.png and b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-no-existing-containing-notebooks.png differ
diff --git a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response-closed-popover.png b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response-closed-popover.png
index 9ffc850689b47..367671dfe77b3 100644
Binary files a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response-closed-popover.png and b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response-closed-popover.png differ
diff --git a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response.png b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response.png
index 68b4ed6a5cdb7..4a044d9792d7d 100644
Binary files a/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response.png and b/frontend/__snapshots__/scenes-app-notebooks-components-notebook-select-button--with-slow-network-response.png differ
diff --git a/frontend/__snapshots__/scenes-app-persons-modal--persons-modal.png b/frontend/__snapshots__/scenes-app-persons-modal--persons-modal.png
index 849f0694e545c..e8fd319d1d87e 100644
Binary files a/frontend/__snapshots__/scenes-app-persons-modal--persons-modal.png and b/frontend/__snapshots__/scenes-app-persons-modal--persons-modal.png differ
diff --git a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png
index 5c8773e3ed204..77483b1607058 100644
Binary files a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png and b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png differ
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png
index 66da5de8f633e..6adacd6d152c8 100644
Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png differ
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png
index 99f004ff819fd..911eaae6e5196 100644
Binary files a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png and b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png differ
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png
new file mode 100644
index 0000000000000..1206e9b1193bf
Binary files /dev/null and b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png differ
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png
new file mode 100644
index 0000000000000..3023765d7b992
Binary files /dev/null and b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png differ
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png
new file mode 100644
index 0000000000000..2f7dfd3f4fff9
Binary files /dev/null and b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png differ
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png
new file mode 100644
index 0000000000000..83ea709a5f282
Binary files /dev/null and b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png differ
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-other-products.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-other-products.png
index 67ca8a8ca62da..a5a8a431f0cd4 100644
Binary files a/frontend/__snapshots__/scenes-other-onboarding--onboarding-other-products.png and b/frontend/__snapshots__/scenes-other-onboarding--onboarding-other-products.png differ
diff --git a/frontend/public/hedgehog/phone-pair-hogs.png b/frontend/public/hedgehog/phone-pair-hogs.png
new file mode 100644
index 0000000000000..a7faa325a9979
Binary files /dev/null and b/frontend/public/hedgehog/phone-pair-hogs.png differ
diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
index 68787fb5643a0..5c7e9dd1e29b5 100644
--- a/frontend/src/layout/navigation-3000/Navigation.scss
+++ b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -73,7 +73,6 @@
         flex: 1;
         flex-direction: column;
         justify-content: space-between;
-        padding: 0 0.375rem;
         overflow-y: auto;
         background: var(--accent-3000);
 
@@ -81,6 +80,10 @@
             --lemon-button-padding-horizontal: 0.25rem !important;
         }
 
+        > * {
+            padding: 0 0.375rem;
+        }
+
         ul {
             padding: 0.5rem 0;
         }
@@ -91,6 +94,10 @@
     }
 }
 
+.Navbar3000__top {
+    overflow: auto;
+}
+
 .Navbar3000__overlay {
     position: fixed;
     z-index: var(--z-mobile-nav-overlay);
@@ -99,12 +106,12 @@
     background-color: var(--modal-backdrop-color);
     backdrop-filter: blur(var(--modal-backdrop-blur));
     opacity: 1;
-    transition: background-color 100ms ease-out, backdrop-filter 100ms ease-out;
+    transition: opacity 100ms ease-out, backdrop-filter 100ms ease-out;
 
     &.Navbar3000--hidden {
         pointer-events: none;
-        background-color: transparent;
         backdrop-filter: blur(0);
+        opacity: 0;
     }
 }
 
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 25f2b0c10d073..f1dd5b6adbb17 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -4,6 +4,7 @@ import { useActions, useValues } from 'kea'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { isMobile } from 'lib/utils'
 import React, { FunctionComponent, ReactElement, useState } from 'react'
 import { sceneLogic } from 'scenes/sceneLogic'
 
@@ -68,7 +69,9 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
                     'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
                 }
                 buttonProps.sideIcon = null
-            } else if (keyboardShortcut) {
+            } else if (keyboardShortcut && !isMobile()) {
+                // If the user agent says we're on mobile, then it's unlikely - but not impossible -
+                // that there's a physical keyboard. Hence in that case we don't show the keyboard shortcut
                 buttonProps.sideIcon = (
                     <span className="text-xs">
                         <KeyboardShortcut {...keyboardShortcut} />
diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss
index 240d91607f908..4268b95d7d28c 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.scss
+++ b/frontend/src/layout/navigation-3000/components/TopBar.scss
@@ -38,6 +38,7 @@
     flex-grow: 1;
     flex-shrink: 1;
     min-width: 0;
+    overflow: hidden;
 }
 
 .TopBar3000__trail {
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
index 62920a7d1fac0..ce08967b7e528 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
@@ -32,6 +32,7 @@ type RowProps = {
 }
 
 const Row = ({ className, columns, children }: RowProps): JSX.Element => (
+    // eslint-disable-next-line react/forbid-dom-props
     <div className={clsx('gap-4 grid', className)} style={{ gridTemplateColumns: columns ? columns : '100%' }}>
         {children}
     </div>
@@ -66,6 +67,7 @@ const Image = ({
     width?: number | string
     height?: number | string
     style?: React.CSSProperties
+    // eslint-disable-next-line react/forbid-dom-props
 }): JSX.Element => <img src={src} alt={alt} width={width} height={height} style={style} className="mt-2" />
 
 export const SidePanelWelcome = (): JSX.Element => {
@@ -96,6 +98,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                     <p className="text-sm font-medium mb-3 opacity-75">We're past 0 to 1.</p>
                     <p
                         className="text-sm font-medium mb-4 opacity-75"
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{ maxWidth: 'min(calc(50% - 1rem), 16rem)' }}
                     >
                         It's time to go from 1 to&nbsp;3000. And&nbsp;this is just the&nbsp;beginning…
@@ -247,7 +250,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                         Share feedback
                     </LemonButton>
                 </div>
-                <div className="-mb-3" style={{ fontSize: 13 }}>
+                <div className="-mb-3" style={{ fontSize: 13 /* eslint-disable-line react/forbid-dom-props */ }}>
                     <IconArrowLeft className="text-base mr-2 inline" />
                     <span className="m-0">
                         <strong>Pro tip:</strong> Access this panel again from the{' '}
diff --git a/frontend/src/lib/components/CommandBar/index.scss b/frontend/src/lib/components/CommandBar/index.scss
index caa7b400e575a..c42b01543f804 100644
--- a/frontend/src/lib/components/CommandBar/index.scss
+++ b/frontend/src/lib/components/CommandBar/index.scss
@@ -18,5 +18,5 @@
 
 .SearchResults {
     // offset container height by input
-    height: 'calc(100% - 2.375rem)';
+    height: calc(100% - 2.375rem);
 }
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
index fd8e9c78dd3a7..74f6ee407c4ed 100644
--- a/frontend/src/lib/components/CopyToClipboard.tsx
+++ b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -62,6 +62,7 @@ export function CopyToClipboardInline({
                     isValueSensitive && 'ph-no-capture',
                     className
                 )}
+                // eslint-disable-next-line react/forbid-dom-props
                 style={style}
                 onClick={!selectable ? copy : undefined}
                 {...props}
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
index db1cdb0b48cdc..118327650e662 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
@@ -1,5 +1,6 @@
 import './DefinitionPopover.scss'
 
+import { ProfilePicture } from '@posthog/lemon-ui'
 import { Divider, DividerProps } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -11,7 +12,6 @@ import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { getKeyMapping } from 'lib/taxonomy'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { Owner } from 'scenes/events/Owner'
 
 import { KeyMapping, UserBasicType } from '~/types'
 
@@ -159,10 +159,7 @@ function TimeMeta({
                 {updatedBy && (
                     <span className="definition-popover-timemeta-user">
                         <span className="definition-popover-timemeta-spacer">by</span>
-                        <Owner
-                            user={updatedBy}
-                            style={{ display: 'inline-flex', fontWeight: 600, paddingLeft: 4, whiteSpace: 'nowrap' }}
-                        />
+                        <Owner user={updatedBy} />
                     </span>
                 )}
             </span>
@@ -174,11 +171,7 @@ function TimeMeta({
                 <span className="definition-popover-timemeta-time">Created {dayjs().to(dayjs.utc(createdAt))} </span>
                 {updatedBy && (
                     <span className="definition-popover-timemeta-user">
-                        <span className="definition-popover-timemeta-spacer">by</span>{' '}
-                        <Owner
-                            user={createdBy}
-                            style={{ display: 'inline-flex', fontWeight: 600, paddingLeft: 4, whiteSpace: 'nowrap' }}
-                        />
+                        <span className="definition-popover-timemeta-spacer">by</span> <Owner user={createdBy} />
                     </span>
                 )}
             </div>
@@ -187,6 +180,21 @@ function TimeMeta({
     return <></>
 }
 
+function Owner({ user }: { user?: UserBasicType | null }): JSX.Element {
+    return (
+        <>
+            {user?.uuid ? (
+                <div className="flex items-center flex-row">
+                    <ProfilePicture name={user.first_name} email={user.email} size="sm" />
+                    <span className="pl-2 inline-flex font-semibold pl-1 whitespace-nowrap">{user.first_name}</span>
+                </div>
+            ) : (
+                <span className="text-muted italic inline-flex font-semibold pl-1 whitespace-nowrap">No owner</span>
+            )}
+        </>
+    )
+}
+
 function HorizontalLine({ children, ...props }: DividerProps): JSX.Element {
     return (
         <Divider className="definition-popover-divider" {...props}>
diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
index 27b4773d25947..85563adf950ff 100644
--- a/frontend/src/lib/components/PageHeader.tsx
+++ b/frontend/src/lib/components/PageHeader.tsx
@@ -12,7 +12,6 @@ interface PageHeaderProps {
     title: string | JSX.Element
     caption?: string | JSX.Element | null | false
     buttons?: JSX.Element | false
-    style?: React.CSSProperties
     tabbedPage?: boolean // Whether the page has tabs for secondary navigation
     delimited?: boolean
     notebookProps?: Pick<DraggableToNotebookProps, 'href' | 'node' | 'properties'>
@@ -22,7 +21,6 @@ export function PageHeader({
     title,
     caption,
     buttons,
-    style,
     tabbedPage,
     delimited,
     notebookProps,
@@ -33,8 +31,7 @@ export function PageHeader({
     return (
         <>
             {!is3000 && (
-                // eslint-disable-next-line react/forbid-dom-props
-                <div className="page-title-row flex justify-between" style={style}>
+                <div className="page-title-row flex justify-between">
                     <div className="min-w-0">
                         {!is3000 &&
                             (notebookProps ? (
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
index f4760971ff52d..b78e0aeedb8ac 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
@@ -2,20 +2,36 @@
     display: inline-flex;
     gap: 0.5rem;
     align-items: center;
+    height: 2rem;
+    padding: 0.25rem 1rem;
     overflow: hidden;
-    text-shadow: none;
+    color: var(--default);
+    white-space: nowrap;
+    user-select: none;
     background: var(--border);
-    border-color: transparent;
-    box-shadow: none;
-    transition-duration: 200ms; // Shorten from Ant's 300ms
+    border: 1px solid transparent;
+    border-radius: 2rem;
+    outline: 0;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &:hover,
     &:focus {
-        color: var(--text-default);
-        background: var(--border);
         border-color: var(--border);
     }
 
+    &:not(.PropertyFilterButton--clickable) {
+        border-color: transparent;
+    }
+
+    &.PropertyFilterButton--clickable {
+        touch-action: manipulation; // faster clicks
+        cursor: pointer;
+    }
+
+    &.PropertyFilterButton--closable {
+        padding-right: 0.5rem;
+    }
+
     > :not(.PropertyFilterButton-content) {
         flex-shrink: 0;
     }
@@ -25,4 +41,28 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    // Close button
+    .LemonButton {
+        margin-left: -0.25rem;
+    }
+
+    .LemonButton__chrome {
+        height: 22px !important;
+        min-height: auto !important;
+        padding: 0 4px !important;
+    }
+}
+
+.posthog-3000 {
+    .PropertyFilterButton {
+        &:hover,
+        &:focus {
+            border-color: var(--border-bold);
+        }
+
+        &:not(.PropertyFilterButton--clickable) {
+            border-color: transparent;
+        }
+    }
 }
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.stories.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.stories.tsx
index d966a58546986..b92f13b21f989 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.stories.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.stories.tsx
@@ -83,6 +83,10 @@ const meta: Meta<typeof PropertyFilterButton> = {
 }
 export default meta
 
+export function Button(): JSX.Element {
+    return <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
+}
+
 export function FilterTypes(): JSX.Element {
     return (
         <div>
@@ -99,22 +103,30 @@ export function PseudoStates(): JSX.Element {
     return (
         <div className="border rounded p-2">
             <div>
-                <h5>STATE=DEFAULT</h5>
+                <h5>Default</h5>
                 <PropertyFilterButton item={propertyFilters[0]} />
                 <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} />
+                <span className="ml-1" />
                 <PropertyFilterButton item={propertyFilters[0]} onClose={() => {}} />
+                <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
             </div>
             <div id="hover">
-                <h5>STATE=HOVER</h5>
+                <h5>Hover</h5>
                 <PropertyFilterButton item={propertyFilters[0]} />
                 <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} />
+                <span className="ml-1" />
                 <PropertyFilterButton item={propertyFilters[0]} onClose={() => {}} />
-            </div>
-            <div id="active">
-                <h5>STATE=HOVER,ACTIVE</h5>
-                <PropertyFilterButton item={propertyFilters[0]} />
                 <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
+            </div>
+            <div id="hover-close">
+                <h5>Hover over close</h5>
                 <PropertyFilterButton item={propertyFilters[0]} onClose={() => {}} />
+                <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
             </div>
         </div>
     )
@@ -122,7 +134,6 @@ export function PseudoStates(): JSX.Element {
 
 PseudoStates.parameters = {
     pseudo: {
-        hover: ['#hover .PropertyFilterButton', '#active .PropertyFilterButton'],
-        active: ['#active .PropertyFilterButton'],
+        hover: ['#hover .PropertyFilterButton', '#hover-close .PropertyFilterButton', '#hover-close .LemonButton'],
     },
 }
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
index eea640e7c1b60..bed6c93160f93 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
@@ -1,9 +1,12 @@
 import './PropertyFilterButton.scss'
 
-import { Button } from 'antd'
+import { LemonButton } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useValues } from 'kea'
 import { CloseButton } from 'lib/components/CloseButton'
 import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+import { IconClose } from 'lib/lemon-ui/icons'
 import { KEY_MAPPING } from 'lib/taxonomy'
 import { midEllipsis } from 'lib/utils'
 import React from 'react'
@@ -19,14 +22,16 @@ export interface PropertyFilterButtonProps {
     onClose?: () => void
     children?: string
     item: AnyPropertyFilter
-    style?: React.CSSProperties
 }
 
 export const PropertyFilterButton = React.forwardRef<HTMLElement, PropertyFilterButtonProps>(
-    function PropertyFilterButton({ onClick, onClose, children, item, style }, ref): JSX.Element {
+    function PropertyFilterButton({ onClick, onClose, children, item }, ref): JSX.Element {
         const { cohortsById } = useValues(cohortsModel)
         const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)
+        const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
+        const closable = onClose !== undefined
+        const clickable = onClick !== undefined
         const label =
             children ||
             formatPropertyLabel(
@@ -36,27 +41,47 @@ export const PropertyFilterButton = React.forwardRef<HTMLElement, PropertyFilter
                 (s) => formatPropertyValueForDisplay(item.key, s)?.toString() || '?'
             )
 
+        const ButtonComponent = clickable ? 'button' : 'div'
+
         return (
-            <Button
-                shape="round"
-                style={style}
+            <ButtonComponent
+                ref={ref as any}
                 onClick={onClick}
-                ref={ref}
-                className="PropertyFilterButton ph-no-capture"
+                className={clsx('PropertyFilterButton', {
+                    'PropertyFilterButton--closeable': closable,
+                    'PropertyFilterButton--clickable': clickable,
+                    'ph-no-capture': true,
+                })}
             >
                 <PropertyFilterIcon type={item.type} />
                 <span className="PropertyFilterButton-content" title={label}>
                     {midEllipsis(label, 32)}
                 </span>
-                {onClose && (
-                    <CloseButton
-                        onClick={(e: MouseEvent) => {
-                            e.stopPropagation()
-                            onClose()
-                        }}
-                    />
+                {closable && (
+                    <>
+                        {is3000 ? (
+                            <LemonButton
+                                size="xsmall"
+                                icon={<IconClose />}
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    onClose()
+                                }}
+                                stealth
+                                className="p-0.5"
+                                status="stealth"
+                            />
+                        ) : (
+                            <CloseButton
+                                onClick={(e: MouseEvent) => {
+                                    e.stopPropagation()
+                                    onClose()
+                                }}
+                            />
+                        )}
+                    </>
                 )}
-            </Button>
+            </ButtonComponent>
         )
     }
 )
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
index 47e0dcd57b105..6c49bbdfb845e 100644
--- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
@@ -170,6 +170,7 @@ export function TaxonomicPropertyFilter({
                                 status={!valuePresent ? 'primary' : 'stealth'}
                                 icon={!valuePresent ? <IconPlusMini /> : undefined}
                                 data-attr={'property-select-toggle-' + index}
+                                sideIcon={null} // The null sideIcon is here on purpose - it prevents the dropdown caret
                                 onClick={() => (dropdownOpen ? closeDropdown() : openDropdown())}
                             >
                                 {filter?.type === 'cohort' ? (
diff --git a/frontend/src/lib/components/hedgehogs.tsx b/frontend/src/lib/components/hedgehogs.tsx
index ddc41d7bf8c4c..a657aee5d1898 100644
--- a/frontend/src/lib/components/hedgehogs.tsx
+++ b/frontend/src/lib/components/hedgehogs.tsx
@@ -17,6 +17,7 @@ import laptopHogEU from 'public/hedgehog/laptop-hog-eu.png'
 import listHog from 'public/hedgehog/list-hog.png'
 import mailHog from 'public/hedgehog/mail-hog.png'
 import microphoneHog from 'public/hedgehog/microphone-hog.png'
+import phonePairHogs from 'public/hedgehog/phone-pair-hogs.png'
 import policeHog from 'public/hedgehog/police-hog.png'
 import professorHog from 'public/hedgehog/professor-hog.png'
 import readingHog from 'public/hedgehog/reading-hog.png'
@@ -136,3 +137,6 @@ export const ReadingHog = (props: HedgehogProps): JSX.Element => {
 export const MicrophoneHog = (props: HedgehogProps): JSX.Element => {
     return <SquaredHedgehog src={microphoneHog} {...props} />
 }
+export const PhonePairHogs = (props: HedgehogProps): JSX.Element => {
+    return <SquaredHedgehog src={phonePairHogs} {...props} />
+}
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index 74ff3b0ecf1d6..a6d1176087685 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -189,8 +189,10 @@ export const FEATURE_FLAGS = {
     SCHEDULED_CHANGES_FEATURE_FLAGS: 'scheduled-changes-feature-flags', // owner: @jurajmajerik #team-feature-success
     ALWAYS_SHOW_SEEKBAR_PREVIEW: 'always-show-seekbar-preview', // owner: #team-replay
     SESSION_REPLAY_MOBILE: 'session-replay-mobile', // owner: #team-replay
+    INVITE_TEAM_MEMBER_ONBOARDING: 'invite-team-member-onboarding', // owner: @biancayang
     SESSION_REPLAY_IOS: 'session-replay-ios', // owner: #team-replay
     YEAR_IN_HOG: 'year-in-hog', // owner: #team-replay
+    SESSION_REPLAY_EXPORT_MOBILE_DATA: 'session-replay-export-mobile-data', // owner: #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
index 0780aadb3a745..6613a79bde94f 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
@@ -46,4 +46,10 @@
             }
         }
     }
+
+    .posthog-3000 & {
+        .LemonCalendar__range--boundary {
+            background-color: var(--glass-border-3000);
+        }
+    }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx
index 3fb703a5b4081..aa30d604a6a59 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx
@@ -102,10 +102,14 @@ export function LemonCalendarRangeInline({
                         className:
                             date.isSame(rangeStart, 'd') && date.isSame(rangeEnd, 'd')
                                 ? props.className
-                                : clsx(props.className, {
-                                      'rounded-r-none': date.isSame(rangeStart, 'd') && dayIndex < 6,
-                                      'rounded-l-none': date.isSame(rangeEnd, 'd') && dayIndex > 0,
-                                  }),
+                                : clsx(
+                                      props.className,
+                                      {
+                                          'rounded-r-none': date.isSame(rangeStart, 'd') && dayIndex < 6,
+                                          'rounded-l-none': date.isSame(rangeEnd, 'd') && dayIndex > 0,
+                                      },
+                                      'LemonCalendar__range--boundary'
+                                  ),
                         status: 'primary',
                         type: 'primary',
                     }
diff --git a/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx b/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx
index c1fe28245c5c6..7d7f1d0502739 100644
--- a/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx
@@ -39,7 +39,7 @@ export const LemonDropdown: React.FunctionComponent<LemonDropdownProps & React.R
             ref
         ) => {
             const [, parentPopoverLevel] = useContext(PopoverOverlayContext)
-            const [localVisible, setLocalVisible] = useState(false)
+            const [localVisible, setLocalVisible] = useState(visible ?? false)
 
             const floatingRef = useRef<HTMLDivElement>(null)
             const referenceRef = useRef<HTMLSpanElement>(null)
@@ -47,8 +47,8 @@ export const LemonDropdown: React.FunctionComponent<LemonDropdownProps & React.R
             const effectiveVisible = visible ?? localVisible
 
             useEffect(() => {
-                onVisibilityChange?.(effectiveVisible)
-            }, [effectiveVisible, onVisibilityChange])
+                onVisibilityChange?.(localVisible)
+            }, [localVisible, onVisibilityChange])
 
             return (
                 <Popover
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index c575bd3f2c07a..aed932dc6ca6a 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -83,6 +83,15 @@
         }
     }
 
+    &--lowercase-header {
+        .LemonTable__content > table {
+            > thead {
+                text-transform: none;
+                letter-spacing: normal;
+            }
+        }
+    }
+
     &.LemonTable--inset {
         --row-horizontal-padding: 0.5rem;
     }
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
index 398f3d8dd735b..a6f44f57c84af 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
@@ -223,8 +223,10 @@ export function LemonTable<T extends Record<string, any>>({
                 stealth && 'LemonTable--stealth',
                 isScrollableLeft && 'scrollable--left',
                 isScrollableRight && 'scrollable--right',
+                !uppercaseHeader && 'LemonTable--lowercase-header',
                 className
             )}
+            // eslint-disable-next-line react/forbid-dom-props
             style={style}
             data-attr={dataAttr}
         >
@@ -232,17 +234,14 @@ export function LemonTable<T extends Record<string, any>>({
                 <div className="LemonTable__content">
                     <table>
                         <colgroup>
-                            {!!expandable && <col style={{ width: 0 }} /> /* Expand/collapse column */}
+                            {!!expandable && <col className="w-0" /> /* Expand/collapse column */}
                             {columns.map((column, index) => (
+                                // eslint-disable-next-line react/forbid-dom-props
                                 <col key={`LemonTable-col-${index}`} style={{ width: column.width }} />
                             ))}
                         </colgroup>
                         {showHeader && (
-                            <thead
-                                style={
-                                    !uppercaseHeader ? { textTransform: 'none', letterSpacing: 'normal' } : undefined
-                                }
-                            >
+                            <thead>
                                 {columnGroups.some((group) => group.title) && (
                                     <tr className="LemonTable__row--grouping">
                                         {!!expandable && <th className="LemonTable__toggle" /> /* Expand/collapse */}
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
index fd474dbc2e865..e3f81c245f92e 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
@@ -15,7 +15,7 @@
         font-weight: normal;
     }
 
-    .posthog-3000 &:not(.breakdown) {
+    .posthog-3000 &:not(.LemonTag--breakdown) {
         padding: 0.075rem 0.25rem;
         font-size: 0.688rem;
         background: none;
@@ -115,7 +115,7 @@
         background: none;
     }
 
-    &.breakdown {
+    &.LemonTag--breakdown {
         padding: 8px 12px;
         font-size: 14px;
         font-weight: 400;
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx
index bdb8fa03531a0..9c1213d323b14 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx
@@ -1,8 +1,8 @@
-import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
+import { BreakdownTag as BreakdownTagComponent } from 'scenes/insights/filters/BreakdownFilter/BreakdownTag'
 
 import { LemonTag as LemonTagComponent, LemonTagType } from './LemonTag'
 
-type Story = StoryObj<typeof LemonTagComponent>
 const meta: Meta<typeof LemonTagComponent> = {
     title: 'Lemon UI/Lemon Tag',
     component: LemonTagComponent,
@@ -13,7 +13,9 @@ const meta: Meta<typeof LemonTagComponent> = {
         },
     },
 }
+
 export default meta
+type Story = StoryObj<typeof LemonTagComponent>
 
 const ALL_COLORS: LemonTagType[] = [
     'primary',
@@ -29,17 +31,26 @@ const ALL_COLORS: LemonTagType[] = [
     'none',
 ]
 
-const Template: StoryFn<typeof LemonTagComponent> = (props) => {
-    return (
+export const LemonTag: Story = {
+    render: () => (
         <div className="flex gap-1 flex-wrap">
             {ALL_COLORS.map((type) => (
-                <LemonTagComponent key={type} {...props} type={type}>
+                <LemonTagComponent key={type} type={type}>
                     {type}
                 </LemonTagComponent>
             ))}
         </div>
-    )
+    ),
 }
 
-export const LemonTag: Story = Template.bind({})
-LemonTag.args = {}
+export const BreakdownTag: Story = {
+    render: () => (
+        <>
+            <BreakdownTagComponent breakdownType="event" breakdown="$browser" />
+            <div className="mt-1" />
+            <BreakdownTagComponent breakdownType="hogql" breakdown="$properties.browser" />
+            <div className="mt-1" />
+            <BreakdownTagComponent breakdownType="cohort" breakdown={1} />
+        </>
+    ),
+}
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
index 5850612f61a4e..0541bbade9e36 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.tsx
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -17,7 +17,7 @@ import clsx from 'clsx'
 import { useEventListener } from 'lib/hooks/useEventListener'
 import { useFloatingContainerContext } from 'lib/hooks/useFloatingContainerContext'
 import { CLICK_OUTSIDE_BLOCK_CLASS, useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
-import React, { MouseEventHandler, ReactElement, useContext, useEffect, useLayoutEffect, useRef } from 'react'
+import React, { MouseEventHandler, ReactElement, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
 export interface PopoverProps {
@@ -136,8 +136,9 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
             ...(middleware ?? []),
         ],
     })
+
+    const [floatingElement, setFloatingElement] = useState<HTMLElement | null>(null)
     const mergedReferenceRef = useMergeRefs([referenceRef, extraReferenceRef || null]) as React.RefCallback<HTMLElement>
-    const mergedFloatingRef = useMergeRefs([floatingRef, extraFloatingRef || null]) as React.RefCallback<HTMLElement>
 
     const arrowStyle = middlewareData.arrow
         ? {
@@ -177,10 +178,10 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
     )
 
     useEffect(() => {
-        if (visible && referenceRef?.current && floatingRef?.current) {
-            return autoUpdate(referenceRef.current, floatingRef.current, update)
+        if (visible && referenceRef?.current && floatingElement) {
+            return autoUpdate(referenceRef.current, floatingElement, update)
         }
-    }, [visible, referenceRef?.current, floatingRef?.current, ...additionalRefs])
+    }, [visible, referenceRef?.current, floatingElement, ...additionalRefs])
 
     const floatingContainer = useFloatingContainerContext()?.current
 
@@ -224,7 +225,13 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
                                 className
                             )}
                             data-placement={effectivePlacement}
-                            ref={mergedFloatingRef}
+                            ref={(el) => {
+                                setFloatingElement(el)
+                                floatingRef.current = el
+                                if (extraFloatingRef) {
+                                    extraFloatingRef.current = el
+                                }
+                            }}
                             // eslint-disable-next-line react/forbid-dom-props
                             style={{
                                 display: middlewareData.hide?.referenceHidden ? 'none' : undefined,
diff --git a/frontend/src/lib/lemon-ui/colors.stories.tsx b/frontend/src/lib/lemon-ui/colors.stories.tsx
index 304661610cb2e..69ab38231380c 100644
--- a/frontend/src/lib/lemon-ui/colors.stories.tsx
+++ b/frontend/src/lib/lemon-ui/colors.stories.tsx
@@ -94,7 +94,7 @@ export function ColorPalette(): JSX.Element {
     return (
         <div className="flex gap-4 flex-wrap items-start">
             {Object.keys(colorGroups).map((group) => (
-                <div key={group} className="flex flex-col" style={{ width: 150, height: 200 }}>
+                <div key={group} className="flex flex-col w-40 h-50">
                     <div className="font-bold text-ellipsis mb-2">{group}</div>
                     <div className="rounded-lg overflow-hidden flex flex-col flex-1">
                         {colorGroups[group].map((color: string) => (
diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
index 94958d5e17fc8..947a9ae3da444 100644
--- a/frontend/src/lib/utils.tsx
+++ b/frontend/src/lib/utils.tsx
@@ -1691,3 +1691,19 @@ export const shouldIgnoreInput = (e: KeyboardEvent): boolean => {
         false
     )
 }
+
+export const base64Encode = (str: string): string => {
+    const data = new TextEncoder().encode(str)
+    const binString = Array.from(data, (byte) => String.fromCharCode(byte)).join('')
+    return btoa(binString)
+}
+
+export const base64Decode = (encodedString: string): string => {
+    const binString = atob(encodedString)
+    const data = new Uint8Array(binString.length)
+    for (let i = 0; i < binString.length; i++) {
+        data[i] = binString.charCodeAt(i)
+    }
+
+    return new TextDecoder().decode(data)
+}
diff --git a/frontend/src/lib/utils/file-utils.ts b/frontend/src/lib/utils/file-utils.ts
new file mode 100644
index 0000000000000..e5eb293ce0bb7
--- /dev/null
+++ b/frontend/src/lib/utils/file-utils.ts
@@ -0,0 +1,38 @@
+export function selectFiles(options: { contentType: string; multiple: boolean }): Promise<File[]> {
+    return new Promise((resolve, reject) => {
+        const input = document.createElement('input')
+        input.type = 'file'
+        input.multiple = options.multiple
+        input.accept = options.contentType
+
+        input.onchange = () => {
+            if (!input.files) {
+                return resolve([])
+            }
+            const files = Array.from(input.files)
+            resolve(files)
+        }
+
+        input.oncancel = () => {
+            resolve([])
+        }
+        input.onerror = () => {
+            reject(new Error('Error selecting file'))
+        }
+
+        input.click()
+    })
+}
+
+export function getTextFromFile(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const filereader = new FileReader()
+        filereader.onload = (e) => {
+            resolve(e.target?.result as string)
+        }
+        filereader.onerror = (e) => {
+            reject(e)
+        }
+        filereader.readAsText(file)
+    })
+}
diff --git a/frontend/src/mocks/fixtures/_billing_v2.json b/frontend/src/mocks/fixtures/_billing_v2.json
index 64f31e5c16d16..cc8fbfd6a1522 100644
--- a/frontend/src/mocks/fixtures/_billing_v2.json
+++ b/frontend/src/mocks/fixtures/_billing_v2.json
@@ -737,10 +737,10 @@
             "unit_amount_usd": null,
             "current_amount_usd_before_addons": "0.00",
             "current_amount_usd": "0.00",
-            "current_usage": 1003478,
+            "current_usage": 1603478,
             "usage_limit": 3624548,
             "has_exceeded_limit": false,
-            "percentage_usage": 0.2768560383253305,
+            "percentage_usage": 0.4423939206,
             "projected_usage": 5469181,
             "projected_amount_usd": "1230.57",
             "unit": "event",
diff --git a/frontend/src/models/notebooksModel.ts b/frontend/src/models/notebooksModel.ts
index b957473000bef..1678704bcf545 100644
--- a/frontend/src/models/notebooksModel.ts
+++ b/frontend/src/models/notebooksModel.ts
@@ -5,7 +5,7 @@ import api from 'lib/api'
 import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
 import posthog from 'posthog-js'
 import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
-import { notebookLogicType } from 'scenes/notebooks/Notebook/notebookLogicType'
+import type { notebookLogicType } from 'scenes/notebooks/Notebook/notebookLogicType'
 import { defaultNotebookContent, EditorFocusPosition, JSONContent } from 'scenes/notebooks/Notebook/utils'
 import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanelLogic'
 import { LOCAL_NOTEBOOK_TEMPLATES } from 'scenes/notebooks/NotebookTemplates/notebookTemplates'
@@ -28,7 +28,7 @@ export const SCRATCHPAD_NOTEBOOK: NotebookListItemType = {
 export const openNotebook = async (
     notebookId: string,
     target: NotebookTarget,
-    focus: EditorFocusPosition | undefined = undefined,
+    autofocus: EditorFocusPosition | undefined = undefined,
     // operations to run against the notebook once it has opened and the editor is ready
     onOpen: (logic: BuiltLogic<notebookLogicType>) => void = () => {}
 ): Promise<void> => {
@@ -36,7 +36,7 @@ export const openNotebook = async (
     const thePanelLogic = notebookPanelLogic.findMounted()
 
     if (thePanelLogic && target === NotebookTarget.Popover) {
-        notebookPanelLogic.actions.selectNotebook(notebookId, focus)
+        notebookPanelLogic.actions.selectNotebook(notebookId, { autofocus })
     } else {
         if (router.values.location.pathname === urls.notebook('new')) {
             router.actions.replace(urls.notebook(notebookId))
@@ -54,10 +54,10 @@ export const openNotebook = async (
         unmount()
     }
 }
+
 export const notebooksModel = kea<notebooksModelType>([
     path(['scenes', 'notebooks', 'Notebook', 'notebooksModel']),
     actions({
-        setScratchpadNotebook: (notebook: NotebookListItemType) => ({ notebook }),
         createNotebook: (
             location: NotebookTarget,
             title?: string,
@@ -79,12 +79,7 @@ export const notebooksModel = kea<notebooksModelType>([
     }),
 
     reducers({
-        scratchpadNotebook: [
-            SCRATCHPAD_NOTEBOOK,
-            {
-                setScratchpadNotebook: (_, { notebook }) => notebook,
-            },
-        ],
+        scratchpadNotebook: [SCRATCHPAD_NOTEBOOK],
     }),
 
     loaders(({ values }) => ({
@@ -116,7 +111,11 @@ export const notebooksModel = kea<notebooksModelType>([
                         object: { name: title || shortId, id: shortId },
                     })
 
-                    notebookPanelLogic.findMounted()?.actions.selectNotebook(SCRATCHPAD_NOTEBOOK.short_id)
+                    const panelLogic = notebookPanelLogic.findMounted()
+
+                    if (panelLogic && panelLogic.values.selectedNotebook === shortId) {
+                        panelLogic.actions.selectNotebook(SCRATCHPAD_NOTEBOOK.short_id, { silent: true })
+                    }
 
                     return values.notebooks.filter((n) => n.short_id !== shortId)
                 },
diff --git a/frontend/src/queries/examples.ts b/frontend/src/queries/examples.ts
index ae185ba6a1e03..3e0349c7a25ce 100644
--- a/frontend/src/queries/examples.ts
+++ b/frontend/src/queries/examples.ts
@@ -321,7 +321,7 @@ const HogQLForDataVisualization: HogQLQuery = {
     kind: NodeKind.HogQLQuery,
     query: `select toDate(timestamp) as timestamp, count()
 from events
-where {filters}
+where {filters} and timestamp <= now()
 group by timestamp
 order by timestamp asc
 limit 100`,
diff --git a/frontend/src/queries/nodes/DataNode/LoadNext.tsx b/frontend/src/queries/nodes/DataNode/LoadNext.tsx
index 3c3f7ab1fc9fe..714d391ce4ba7 100644
--- a/frontend/src/queries/nodes/DataNode/LoadNext.tsx
+++ b/frontend/src/queries/nodes/DataNode/LoadNext.tsx
@@ -9,13 +9,22 @@ interface LoadNextProps {
     query: DataNode
 }
 export function LoadNext({ query }: LoadNextProps): JSX.Element {
-    const { nextDataLoading } = useValues(dataNodeLogic)
+    const { canLoadNextData, nextDataLoading, numberOfRows } = useValues(dataNodeLogic)
     const { loadNextData } = useActions(dataNodeLogic)
 
     return (
         <div className="m-2 flex items-center">
-            <LemonButton onClick={loadNextData} loading={nextDataLoading} fullWidth center>
-                Load more {isPersonsNode(query) || isPersonsQuery(query) ? 'people' : 'events'}
+            <LemonButton onClick={loadNextData} loading={nextDataLoading} fullWidth center disabled={!canLoadNextData}>
+                Showing {canLoadNextData || numberOfRows === 1 ? '' : 'all '}
+                {numberOfRows === 1 ? 'one' : numberOfRows}{' '}
+                {isPersonsNode(query) || isPersonsQuery(query)
+                    ? numberOfRows === 1
+                        ? 'person'
+                        : 'people'
+                    : numberOfRows === 1
+                    ? 'event'
+                    : 'events'}
+                {canLoadNextData ? '. Click to load more.' : '. Reached the end of results.'}
             </LemonButton>
         </div>
     )
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts
index fbe91ff1a4653..c76387b9ed08e 100644
--- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts
+++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts
@@ -240,6 +240,7 @@ describe('dataNodeLogic', () => {
                 kind: NodeKind.EventsQuery,
                 select: ['*', 'event', 'timestamp'],
                 before: '2022-12-24T17:00:41.165000Z',
+                limit: 100,
             },
             response: partial({ results }),
         })
@@ -268,6 +269,7 @@ describe('dataNodeLogic', () => {
                     kind: NodeKind.EventsQuery,
                     select: ['*', 'event', 'timestamp'],
                     before: '2022-12-24T17:00:41.165000Z',
+                    limit: 100,
                 },
                 response: partial({ results }),
             })
@@ -280,6 +282,7 @@ describe('dataNodeLogic', () => {
                 kind: NodeKind.EventsQuery,
                 select: ['*', 'event', 'timestamp'],
                 before: '2022-12-23T17:00:41.165000Z',
+                limit: 100,
             },
             response: partial({ results: [...results, ...results2] }),
         })
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
index 0914fdf73fd33..c733efa7e3e75 100644
--- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
+++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
@@ -33,6 +33,8 @@ import {
     DataNode,
     EventsQuery,
     EventsQueryResponse,
+    InsightVizNode,
+    NodeKind,
     PersonsNode,
     PersonsQuery,
     PersonsQueryResponse,
@@ -41,6 +43,7 @@ import {
 } from '~/queries/schema'
 import {
     isEventsQuery,
+    isInsightPersonsQuery,
     isInsightQueryNode,
     isLifecycleQuery,
     isPersonsNode,
@@ -61,6 +64,7 @@ export interface DataNodeLogicProps {
 }
 
 const AUTOLOAD_INTERVAL = 30000
+const LOAD_MORE_ROWS_LIMIT = 10000
 
 const queryEqual = (a: DataNode, b: DataNode): boolean => {
     if (isInsightQueryNode(a) && isInsightQueryNode(b)) {
@@ -403,7 +407,14 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                             if (sortColumnIndex !== -1) {
                                 const lastTimestamp = typedResults?.[typedResults.length - 1]?.[sortColumnIndex]
                                 if (lastTimestamp) {
-                                    const newQuery: EventsQuery = { ...query, before: lastTimestamp }
+                                    const newQuery: EventsQuery = {
+                                        ...query,
+                                        before: lastTimestamp,
+                                        limit: Math.max(
+                                            100,
+                                            Math.min(2 * (typedResults?.length || 100), LOAD_MORE_ROWS_LIMIT)
+                                        ),
+                                    }
                                     return newQuery
                                 }
                             }
@@ -411,6 +422,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                             return {
                                 ...query,
                                 offset: typedResults?.length || 0,
+                                limit: Math.max(100, Math.min(2 * (typedResults?.length || 100), LOAD_MORE_ROWS_LIMIT)),
                             } as EventsQuery | PersonsQuery
                         }
                     }
@@ -431,6 +443,21 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
             (s) => [s.nextQuery, s.isShowingCachedResults],
             (nextQuery, isShowingCachedResults) => (isShowingCachedResults ? false : !!nextQuery),
         ],
+        backToSourceQuery: [
+            (s) => [s.query],
+            (query): InsightVizNode | null => {
+                if (isPersonsQuery(query) && isInsightPersonsQuery(query.source) && !!query.source.source) {
+                    const insightQuery = query.source.source
+                    const insightVizNode: InsightVizNode = {
+                        kind: NodeKind.InsightVizNode,
+                        source: insightQuery,
+                        full: true,
+                    }
+                    return insightVizNode
+                }
+                return null
+            },
+        ],
         autoLoadRunning: [
             (s) => [s.autoLoadToggled, s.autoLoadStarted, s.dataLoading],
             (autoLoadToggled, autoLoadStarted, dataLoading) => autoLoadToggled && autoLoadStarted && !dataLoading,
@@ -478,6 +505,21 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                 return response && 'timings' in response ? response.timings : null
             },
         ],
+        numberOfRows: [
+            (s) => [s.response],
+            (response): number | null => {
+                if (!response) {
+                    return null
+                }
+                const fields = ['result', 'results']
+                for (const field of fields) {
+                    if (field in response && Array.isArray(response[field])) {
+                        return response[field].length
+                    }
+                }
+                return null
+            },
+        ],
     }),
     listeners(({ actions, values, cache }) => ({
         abortAnyRunningQuery: () => {
diff --git a/frontend/src/queries/nodes/DataTable/BackToSource.tsx b/frontend/src/queries/nodes/DataTable/BackToSource.tsx
new file mode 100644
index 0000000000000..3ca01e12904c2
--- /dev/null
+++ b/frontend/src/queries/nodes/DataTable/BackToSource.tsx
@@ -0,0 +1,41 @@
+import { useValues } from 'kea'
+import { router } from 'kea-router'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { summarizeInsightQuery } from 'scenes/insights/summarizeInsight'
+import { mathsLogic } from 'scenes/trends/mathsLogic'
+import { urls } from 'scenes/urls'
+
+import { cohortsModel } from '~/models/cohortsModel'
+import { groupsModel } from '~/models/groupsModel'
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+
+export function BackToSource(): JSX.Element | null {
+    const { aggregationLabel } = useValues(groupsModel)
+    const { cohortsById } = useValues(cohortsModel)
+    const { mathDefinitions } = useValues(mathsLogic)
+
+    const { backToSourceQuery } = useValues(dataNodeLogic)
+
+    if (!backToSourceQuery) {
+        return null
+    }
+
+    const summary = summarizeInsightQuery(backToSourceQuery.source, {
+        aggregationLabel,
+        cohortsById,
+        mathDefinitions,
+    })
+
+    return (
+        <LemonButton
+            tooltip={summary}
+            type="secondary"
+            status="primary-alt"
+            onClick={() =>
+                router.actions.push(urls.insightNew(undefined, undefined, JSON.stringify(backToSourceQuery)))
+            }
+        >
+            &laquo; Back to {backToSourceQuery.source.kind?.replace('Query', '') ?? 'Insight'}
+        </LemonButton>
+    )
+}
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index a4ead65cdfb73..114d8811494f1 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -19,6 +19,7 @@ import { DateRange } from '~/queries/nodes/DataNode/DateRange'
 import { ElapsedTime } from '~/queries/nodes/DataNode/ElapsedTime'
 import { LoadNext } from '~/queries/nodes/DataNode/LoadNext'
 import { Reload } from '~/queries/nodes/DataNode/Reload'
+import { BackToSource } from '~/queries/nodes/DataTable/BackToSource'
 import { ColumnConfigurator } from '~/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator'
 import { DataTableExport } from '~/queries/nodes/DataTable/DataTableExport'
 import { dataTableLogic, DataTableLogicProps, DataTableRow } from '~/queries/nodes/DataTable/dataTableLogic'
@@ -97,11 +98,11 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
         responseLoading,
         responseError,
         queryCancelled,
-        canLoadNextData,
         canLoadNewData,
         nextDataLoading,
         newDataLoading,
         highlightedRows,
+        backToSourceQuery,
     } = useValues(builtDataNodeLogic)
 
     const dataTableLogicProps: DataTableLogicProps = { query, vizKey: vizKey, dataKey: dataKey, context }
@@ -375,6 +376,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
     )
 
     const firstRowLeft = [
+        backToSourceQuery ? <BackToSource key="return-to-source" /> : null,
         showDateRange && sourceFeatures.has(QueryFeature.dateRangePicker) ? (
             <DateRange key="date-range" query={query.source} setQuery={setQuerySource} />
         ) : null,
@@ -553,12 +555,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                                         result && result[0] && result[0]['event'] === '$exception',
                                 })
                             }
-                            footer={
-                                canLoadNextData &&
-                                ((response as any).results.length > 0 ||
-                                    (response as any).result.length > 0 ||
-                                    !responseLoading) && <LoadNext query={query.source} />
-                            }
+                            footer={(dataTableRows ?? []).length > 0 ? <LoadNext query={query.source} /> : null}
                             onRow={context?.rowProps}
                         />
                     )}
diff --git a/frontend/src/queries/nodes/DataTable/renderColumn.tsx b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
index ab0a886cf8e0e..ac141f208630c 100644
--- a/frontend/src/queries/nodes/DataTable/renderColumn.tsx
+++ b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
@@ -206,7 +206,6 @@ export function renderColumn(
         return <Property value={eventRecord.person?.properties?.[propertyKey]} />
     } else if (key === 'person') {
         const personRecord = record as PersonType
-
         const displayProps: PersonDisplayProps = {
             withIcon: true,
             person: record as PersonType,
@@ -222,8 +221,11 @@ export function renderColumn(
             displayProps.href = urls.personByDistinctId(personRecord.distinct_ids[0])
         }
 
-        if (isPersonsQuery(query.source)) {
-            displayProps.href = urls.personByUUID(personRecord.id ?? '-')
+        if (isPersonsQuery(query.source) && value) {
+            displayProps.person = value
+            displayProps.href = value.id
+                ? urls.personByUUID(value.id)
+                : urls.personByDistinctId(value.distinct_ids?.[0] ?? '-')
         }
 
         return <PersonDisplay {...displayProps} />
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Chart.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Chart.tsx
index 7493f85945cc3..1865f8a9f4018 100644
--- a/frontend/src/queries/nodes/DataVisualization/Components/Chart.tsx
+++ b/frontend/src/queries/nodes/DataVisualization/Components/Chart.tsx
@@ -4,7 +4,7 @@ import { useValues } from 'kea'
 
 import { dataVisualizationLogic } from '../dataVisualizationLogic'
 import { LineGraph } from './Charts/LineGraph'
-import { ChartSelection } from './ChartSelection'
+import { SideBar } from './SideBar'
 
 export const Chart = (): JSX.Element => {
     const { showEditingUI } = useValues(dataVisualizationLogic)
@@ -13,7 +13,7 @@ export const Chart = (): JSX.Element => {
         <div className="flex flex-1 flex-row gap-4">
             {showEditingUI && (
                 <div className="h-full">
-                    <ChartSelection />
+                    <SideBar />
                 </div>
             )}
             <div className="w-full flex flex-1 overflow-auto">
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/ChartSelection.scss b/frontend/src/queries/nodes/DataVisualization/Components/ChartSelection.scss
deleted file mode 100644
index 0d331d249cf7a..0000000000000
--- a/frontend/src/queries/nodes/DataVisualization/Components/ChartSelection.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '../../../../styles/mixins';
-
-.DataVisualization {
-    .ChartSelectionWrapper {
-        min-width: 20vw;
-        height: var(--viz-min-height);
-        border-radius: var(--radius);
-    }
-}
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/ChartSelection.tsx b/frontend/src/queries/nodes/DataVisualization/Components/ChartSelection.tsx
deleted file mode 100644
index 62ae5cb629aff..0000000000000
--- a/frontend/src/queries/nodes/DataVisualization/Components/ChartSelection.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import './ChartSelection.scss'
-
-import { LemonButton, LemonLabel, LemonSelect } from '@posthog/lemon-ui'
-import { useActions, useValues } from 'kea'
-import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
-
-import { dataNodeLogic } from '../../DataNode/dataNodeLogic'
-import { dataVisualizationLogic } from '../dataVisualizationLogic'
-
-export const ChartSelection = (): JSX.Element => {
-    const { columns, selectedXIndex, selectedYIndexes } = useValues(dataVisualizationLogic)
-    const { responseLoading } = useValues(dataNodeLogic)
-    const { updateXSeries, updateYSeries, addYSeries, deletedYSeries } = useActions(dataVisualizationLogic)
-
-    const options = columns.map(({ name, type }) => ({
-        value: name,
-        label: `${name} - ${type}`,
-    }))
-
-    return (
-        <div className="ChartSelectionWrapper bg-bg-light border p-4">
-            <div className="flex flex-col">
-                <LemonLabel>X-axis</LemonLabel>
-                <LemonSelect
-                    className="w-full"
-                    value={selectedXIndex !== null ? options[selectedXIndex]?.label : 'None'}
-                    options={options}
-                    disabledReason={responseLoading ? 'Query loading...' : undefined}
-                    onChange={(value) => {
-                        const columnIndex = options.findIndex((n) => n.value === value)
-                        updateXSeries(columnIndex)
-                    }}
-                />
-                <LemonLabel className="mt-4">Y-axis</LemonLabel>
-                {(selectedYIndexes ?? [null]).map((selectedYIndex, index) => (
-                    <div className="flex gap-1 mb-1" key={selectedYIndex}>
-                        <LemonSelect
-                            className="grow"
-                            value={selectedYIndex !== null ? options[selectedYIndex]?.label : 'None'}
-                            options={options}
-                            disabledReason={responseLoading ? 'Query loading...' : undefined}
-                            onChange={(value) => {
-                                const columnIndex = options.findIndex((n) => n.value === value)
-                                updateYSeries(index, columnIndex)
-                            }}
-                        />
-                        <LemonButton
-                            key="delete"
-                            icon={<IconDelete />}
-                            status="primary-alt"
-                            title="Delete Y-series"
-                            noPadding
-                            onClick={() => deletedYSeries(index)}
-                        />
-                    </div>
-                ))}
-                <LemonButton
-                    className="mt-1"
-                    type="tertiary"
-                    onClick={() => addYSeries()}
-                    icon={<IconPlusMini />}
-                    fullWidth
-                >
-                    Add Y-series
-                </LemonButton>
-            </div>
-        </div>
-    )
-}
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
index 58879042f15e8..0d2e76f3d8ff1 100644
--- a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
+++ b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
@@ -5,6 +5,7 @@ import '../../../../../scenes/insights/InsightTooltip/InsightTooltip.scss'
 
 import { LemonTable } from '@posthog/lemon-ui'
 import { ChartData, ChartType, Color, GridLineOptions, TickOptions, TooltipModel } from 'chart.js'
+import annotationPlugin, { AnnotationPluginOptions, LineAnnotationOptions } from 'chartjs-plugin-annotation'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import clsx from 'clsx'
 import { useValues } from 'kea'
@@ -18,6 +19,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { ChartDisplayType, GraphType } from '~/types'
 
 import { dataVisualizationLogic } from '../../dataVisualizationLogic'
+import { displayLogic } from '../../displayLogic'
 
 export const LineGraph = (): JSX.Element => {
     const canvasRef = useRef<HTMLCanvasElement | null>(null)
@@ -29,13 +31,15 @@ export const LineGraph = (): JSX.Element => {
     const { xData, yData, presetChartHeight, visualizationType } = useValues(dataVisualizationLogic)
     const isBarChart = visualizationType === ChartDisplayType.ActionsBar
 
+    const { goalLines } = useValues(displayLogic)
+
     useEffect(() => {
         if (!xData || !yData) {
             return
         }
 
         const data: ChartData = {
-            labels: xData,
+            labels: xData.data,
             datasets: yData.map(({ data }, index) => {
                 const color = getSeriesColor(index)
 
@@ -54,6 +58,28 @@ export const LineGraph = (): JSX.Element => {
             }),
         }
 
+        const annotations = goalLines.reduce(
+            (acc, cur, curIndex) => {
+                const line: LineAnnotationOptions = {
+                    label: {
+                        display: true,
+                        content: cur.label,
+                        position: 'end',
+                    },
+                    scaleID: 'y',
+                    value: cur.value,
+                }
+
+                acc.annotations[`line${curIndex}`] = {
+                    type: 'line',
+                    ...line,
+                }
+
+                return acc
+            },
+            { annotations: {} } as AnnotationPluginOptions
+        )
+
         const tickOptions: Partial<TickOptions> = {
             color: colors.axisLabel as Color,
             font: {
@@ -99,6 +125,7 @@ export const LineGraph = (): JSX.Element => {
                 legend: {
                     display: false,
                 },
+                annotation: annotations,
                 ...(isBarChart
                     ? { crosshair: false }
                     : {
@@ -146,13 +173,13 @@ export const LineGraph = (): JSX.Element => {
                             tooltipRoot.render(
                                 <div className="InsightTooltip">
                                     <LemonTable
-                                        dataSource={yData.map(({ data, name: seriesLabel }) => ({
-                                            series: seriesLabel,
+                                        dataSource={yData.map(({ data, column }) => ({
+                                            series: column.name,
                                             data: data[referenceDataPoint.dataIndex],
                                         }))}
                                         columns={[
                                             {
-                                                title: xData[referenceDataPoint.dataIndex],
+                                                title: xData.data[referenceDataPoint.dataIndex],
                                                 dataIndex: 'series',
                                                 render: (value) => {
                                                     return (
@@ -233,6 +260,7 @@ export const LineGraph = (): JSX.Element => {
             },
         }
 
+        Chart.register(annotationPlugin)
         const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, {
             type: isBarChart ? GraphType.Bar : GraphType.Line,
             data,
@@ -240,7 +268,7 @@ export const LineGraph = (): JSX.Element => {
             plugins: [ChartDataLabels],
         })
         return () => newChart.destroy()
-    }, [xData, yData, visualizationType])
+    }, [xData, yData, visualizationType, goalLines])
 
     return (
         <div
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/DisplayTab.tsx b/frontend/src/queries/nodes/DataVisualization/Components/DisplayTab.tsx
new file mode 100644
index 0000000000000..8ae66aa4e6052
--- /dev/null
+++ b/frontend/src/queries/nodes/DataVisualization/Components/DisplayTab.tsx
@@ -0,0 +1,54 @@
+import { LemonButton, LemonInput, LemonLabel } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { SeriesLetter } from 'lib/components/SeriesGlyph'
+import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
+
+import { displayLogic } from '../displayLogic'
+
+export const DisplayTab = (): JSX.Element => {
+    const { goalLines } = useValues(displayLogic)
+    const { addGoalLine, updateGoalLine, removeGoalLine } = useActions(displayLogic)
+
+    return (
+        <div className="flex flex-col w-full">
+            <LemonLabel>Goal Line</LemonLabel>
+            <div className="mt-1 mb-1">
+                {goalLines.map((goalLine, goalLineIndex) => (
+                    <div className="flex flex-1 gap-1 mb-1" key={`${goalLineIndex}`}>
+                        <SeriesLetter className="self-center" hasBreakdown={false} seriesIndex={goalLineIndex} />
+                        <LemonInput
+                            placeholder="Label"
+                            className="grow-2"
+                            value={goalLine.label}
+                            onChange={(value) => updateGoalLine(goalLineIndex, 'label', value)}
+                        />
+                        <LemonInput
+                            placeholder="Value"
+                            className="grow"
+                            value={(goalLine.value ?? 0).toString()}
+                            inputMode="numeric"
+                            onChange={(value) => updateGoalLine(goalLineIndex, 'value', parseInt(value))}
+                        />
+                        <LemonButton
+                            key="delete"
+                            icon={<IconDelete />}
+                            status="primary-alt"
+                            title="Delete Y-series"
+                            noPadding
+                            onClick={() => removeGoalLine(goalLineIndex)}
+                        />
+                    </div>
+                ))}
+            </div>
+            <LemonButton
+                className="mt-1"
+                type="tertiary"
+                onClick={() => addGoalLine()}
+                icon={<IconPlusMini />}
+                fullWidth
+            >
+                Add goal line
+            </LemonButton>
+        </div>
+    )
+}
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/SeriesTab.tsx b/frontend/src/queries/nodes/DataVisualization/Components/SeriesTab.tsx
new file mode 100644
index 0000000000000..2f65ed6a5a05f
--- /dev/null
+++ b/frontend/src/queries/nodes/DataVisualization/Components/SeriesTab.tsx
@@ -0,0 +1,69 @@
+import { LemonButton, LemonLabel, LemonSelect } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
+
+import { dataNodeLogic } from '../../DataNode/dataNodeLogic'
+import { dataVisualizationLogic } from '../dataVisualizationLogic'
+
+export const SeriesTab = (): JSX.Element => {
+    const { columns, xData, yData } = useValues(dataVisualizationLogic)
+    const { responseLoading } = useValues(dataNodeLogic)
+    const { updateXSeries, updateYSeries, addYSeries, deleteYSeries } = useActions(dataVisualizationLogic)
+
+    const options = columns.map(({ name, label }) => ({
+        value: name,
+        label,
+    }))
+
+    return (
+        <div className="flex flex-col w-full">
+            <LemonLabel>X-axis</LemonLabel>
+            <LemonSelect
+                className="w-full"
+                value={xData !== null ? xData.column.label : 'None'}
+                options={options}
+                disabledReason={responseLoading ? 'Query loading...' : undefined}
+                onChange={(value) => {
+                    const column = columns.find((n) => n.name === value)
+                    if (column) {
+                        updateXSeries(column.name)
+                    }
+                }}
+            />
+            <LemonLabel className="mt-4">Y-axis</LemonLabel>
+            {(yData ?? [null]).map((series, index) => (
+                <div className="flex gap-1 mb-1" key={series?.column.name}>
+                    <LemonSelect
+                        className="grow"
+                        value={series !== null ? series.column.label : 'None'}
+                        options={options}
+                        disabledReason={responseLoading ? 'Query loading...' : undefined}
+                        onChange={(value) => {
+                            const column = columns.find((n) => n.name === value)
+                            if (column) {
+                                updateYSeries(index, column.name)
+                            }
+                        }}
+                    />
+                    <LemonButton
+                        key="delete"
+                        icon={<IconDelete />}
+                        status="primary-alt"
+                        title="Delete Y-series"
+                        noPadding
+                        onClick={() => deleteYSeries(index)}
+                    />
+                </div>
+            ))}
+            <LemonButton
+                className="mt-1"
+                type="tertiary"
+                onClick={() => addYSeries()}
+                icon={<IconPlusMini />}
+                fullWidth
+            >
+                Add Y-series
+            </LemonButton>
+        </div>
+    )
+}
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/SideBar.scss b/frontend/src/queries/nodes/DataVisualization/Components/SideBar.scss
new file mode 100644
index 0000000000000..a9962f8c5d265
--- /dev/null
+++ b/frontend/src/queries/nodes/DataVisualization/Components/SideBar.scss
@@ -0,0 +1,26 @@
+@import '../../../../styles/mixins';
+
+.DataVisualization {
+    .LemonTabs .LemonTabs__bar {
+        margin-bottom: 0;
+    }
+
+    .SideBar {
+        min-width: 18rem;
+        min-height: var(--viz-min-height);
+        border-radius: var(--radius);
+
+        .LemonInput.LemonInput--medium {
+            display: flex;
+
+            .LemonInput__input {
+                flex: 1;
+                width: 0;
+            }
+        }
+
+        .grow-2 {
+            flex-grow: 2;
+        }
+    }
+}
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/SideBar.tsx b/frontend/src/queries/nodes/DataVisualization/Components/SideBar.tsx
new file mode 100644
index 0000000000000..170b70ccdb878
--- /dev/null
+++ b/frontend/src/queries/nodes/DataVisualization/Components/SideBar.tsx
@@ -0,0 +1,41 @@
+import './SideBar.scss'
+
+import { LemonTabs } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+import { dataVisualizationLogic, SideBarTab } from '../dataVisualizationLogic'
+import { DisplayTab } from './DisplayTab'
+import { SeriesTab } from './SeriesTab'
+
+const TABS_TO_CONTENT = {
+    [SideBarTab.Series]: {
+        label: 'Series',
+        content: <SeriesTab />,
+    },
+    [SideBarTab.Display]: {
+        label: 'Display',
+        content: <DisplayTab />,
+    },
+}
+
+const ContentWrapper = ({ children }: { children: JSX.Element }): JSX.Element => {
+    return <div className="SideBar bg-bg-light border p-4">{children}</div>
+}
+
+export const SideBar = (): JSX.Element => {
+    const { activeSideBarTab } = useValues(dataVisualizationLogic)
+    const { setSideBarTab } = useActions(dataVisualizationLogic)
+
+    return (
+        <LemonTabs
+            activeKey={activeSideBarTab}
+            onChange={(tab) => setSideBarTab(tab as SideBarTab)}
+            borderless
+            tabs={Object.values(TABS_TO_CONTENT).map((tab, index) => ({
+                label: tab.label,
+                key: Object.keys(TABS_TO_CONTENT)[index],
+                content: <ContentWrapper>{tab.content}</ContentWrapper>,
+            }))}
+        />
+    )
+}
diff --git a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
index b8c7b43b27e42..72dd7c18f600d 100644
--- a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
+++ b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx
@@ -17,6 +17,7 @@ import { HogQLQueryEditor } from '../HogQLQuery/HogQLQueryEditor'
 import { Chart } from './Components/Chart'
 import { TableDisplay } from './Components/TableDisplay'
 import { dataVisualizationLogic, DataVisualizationLogicProps } from './dataVisualizationLogic'
+import { displayLogic } from './displayLogic'
 
 interface DataTableVisualizationProps {
     uniqueKey?: string | number
@@ -82,43 +83,45 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX.
     return (
         <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
             <BindLogic logic={dataVisualizationLogic} props={dataVisualizationLogicProps}>
-                <div className="DataVisualization flex flex-1">
-                    <div className="relative w-full flex flex-col gap-4 flex-1 overflow-hidden">
-                        {showEditingUI && (
-                            <>
-                                <HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded />
-                                {sourceFeatures.has(QueryFeature.dateRangePicker) && (
-                                    <div className="flex gap-4 items-center flex-wrap">
-                                        <DateRange
-                                            key="date-range"
-                                            query={query.source}
-                                            setQuery={(query) => {
-                                                if (query.kind === NodeKind.HogQLQuery) {
-                                                    setQuerySource(query)
-                                                }
-                                            }}
-                                        />
+                <BindLogic logic={displayLogic} props={{ key: dataVisualizationLogicProps.key }}>
+                    <div className="DataVisualization flex flex-1">
+                        <div className="relative w-full flex flex-col gap-4 flex-1 overflow-hidden">
+                            {showEditingUI && (
+                                <>
+                                    <HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded />
+                                    {sourceFeatures.has(QueryFeature.dateRangePicker) && (
+                                        <div className="flex gap-4 items-center flex-wrap">
+                                            <DateRange
+                                                key="date-range"
+                                                query={query.source}
+                                                setQuery={(query) => {
+                                                    if (query.kind === NodeKind.HogQLQuery) {
+                                                        setQuerySource(query)
+                                                    }
+                                                }}
+                                            />
+                                        </div>
+                                    )}
+                                </>
+                            )}
+                            {showResultControls && (
+                                <>
+                                    <LemonDivider className="my-0" />
+                                    <div className="flex gap-4 justify-between flex-wrap">
+                                        <div className="flex gap-4 items-center">
+                                            <Reload />
+                                            <ElapsedTime />
+                                        </div>
+                                        <div className="flex gap-4 items-center">
+                                            <TableDisplay />
+                                        </div>
                                     </div>
-                                )}
-                            </>
-                        )}
-                        {showResultControls && (
-                            <>
-                                <LemonDivider className="my-0" />
-                                <div className="flex gap-4 justify-between flex-wrap">
-                                    <div className="flex gap-4 items-center">
-                                        <Reload />
-                                        <ElapsedTime />
-                                    </div>
-                                    <div className="flex gap-4 items-center">
-                                        <TableDisplay />
-                                    </div>
-                                </div>
-                            </>
-                        )}
-                        {component}
+                                </>
+                            )}
+                            {component}
+                        </div>
                     </div>
-                </div>
+                </BindLogic>
             </BindLogic>
         </BindLogic>
     )
diff --git a/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts b/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts
index 52f5677b38d41..ae8103da14f09 100644
--- a/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts
+++ b/frontend/src/queries/nodes/DataVisualization/dataVisualizationLogic.ts
@@ -3,7 +3,7 @@ import { subscriptions } from 'kea-subscriptions'
 import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { teamLogic } from 'scenes/teamLogic'
 
-import { AnyResponseType, DataVisualizationNode } from '~/queries/schema'
+import { AnyResponseType, ChartAxis, DataVisualizationNode } from '~/queries/schema'
 import { QueryContext } from '~/queries/types'
 import { ChartDisplayType, InsightLogicProps, ItemMode } from '~/types'
 
@@ -11,8 +11,20 @@ import { dataNodeLogic } from '../DataNode/dataNodeLogic'
 import { getQueryFeatures, QueryFeature } from '../DataTable/queryFeatures'
 import type { dataVisualizationLogicType } from './dataVisualizationLogicType'
 
-export interface AxisSeries<T> {
+export enum SideBarTab {
+    Series = 'series',
+    Display = 'display',
+}
+
+export interface Column {
     name: string
+    type: string
+    label: string
+    dataIndex: number
+}
+
+export interface AxisSeries<T> {
+    column: Column
     data: T[]
 }
 
@@ -35,21 +47,22 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
     props({ query: {} } as DataVisualizationLogicProps),
     actions({
         setVisualizationType: (visualizationType: ChartDisplayType) => ({ visualizationType }),
-        updateXSeries: (columnIndex: number) => ({
-            selectedXSeriesColumnIndex: columnIndex,
+        updateXSeries: (columnName: string) => ({
+            columnName,
         }),
-        updateYSeries: (seriesIndex: number, columnIndex: number) => ({
+        updateYSeries: (seriesIndex: number, columnName: string) => ({
             seriesIndex,
-            selectedYSeriesColumnIndex: columnIndex,
+            columnName,
         }),
-        addYSeries: (columnIndex?: number) => ({ columnIndex }),
-        deletedYSeries: (seriesIndex: number) => ({ seriesIndex }),
+        addYSeries: (columnName?: string) => ({ columnName }),
+        deleteYSeries: (seriesIndex: number) => ({ seriesIndex }),
         clearAxis: true,
         setQuery: (node: DataVisualizationNode) => ({ node }),
+        setSideBarTab: (tab: SideBarTab) => ({ tab }),
     }),
     reducers({
         columns: [
-            [] as { name: string; type: string }[],
+            [] as Column[],
             {
                 loadDataSuccess: (_state, { response }) => {
                     if (!response) {
@@ -64,6 +77,8 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
                         return {
                             name: column,
                             type,
+                            label: `${column} - ${type}`,
+                            dataIndex: index,
                         }
                     })
                 },
@@ -75,52 +90,61 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
                 setVisualizationType: (_, { visualizationType }) => visualizationType,
             },
         ],
-        selectedXIndex: [
-            null as number | null,
+        selectedXAxis: [
+            null as string | null,
             {
                 clearAxis: () => null,
-                updateXSeries: (_, { selectedXSeriesColumnIndex }) => selectedXSeriesColumnIndex,
+                updateXSeries: (_, { columnName }) => columnName,
             },
         ],
-        selectedYIndexes: [
-            null as (number | null)[] | null,
+        selectedYAxis: [
+            null as (string | null)[] | null,
             {
                 clearAxis: () => null,
-                addYSeries: (prev, { columnIndex }) => {
-                    if (!prev && columnIndex !== undefined) {
-                        return [columnIndex]
+                addYSeries: (state, { columnName }) => {
+                    if (!state && columnName !== undefined) {
+                        return [columnName]
                     }
 
-                    if (!prev) {
+                    if (!state) {
                         return [null]
                     }
 
-                    prev.push(columnIndex === undefined ? null : columnIndex)
-                    return [...prev]
+                    return [...state, columnName === undefined ? null : columnName]
                 },
-                updateYSeries: (prev, { seriesIndex, selectedYSeriesColumnIndex }) => {
-                    if (!prev) {
+                updateYSeries: (state, { seriesIndex, columnName }) => {
+                    if (!state) {
                         return null
                     }
 
-                    prev[seriesIndex] = selectedYSeriesColumnIndex
-                    return [...prev]
+                    const ySeries = [...state]
+
+                    ySeries[seriesIndex] = columnName
+                    return ySeries
                 },
-                deletedYSeries: (prev, { seriesIndex }) => {
-                    if (!prev) {
+                deleteYSeries: (state, { seriesIndex }) => {
+                    if (!state) {
                         return null
                     }
 
-                    if (prev.length <= 1) {
+                    if (state.length <= 1) {
                         return [null]
                     }
 
-                    prev.splice(seriesIndex, 1)
+                    const ySeries = [...state]
+
+                    ySeries.splice(seriesIndex, 1)
 
-                    return [...prev]
+                    return ySeries
                 },
             },
         ],
+        activeSideBarTab: [
+            SideBarTab.Series as SideBarTab,
+            {
+                setSideBarTab: (_state, { tab }) => tab,
+            },
+        ],
     }),
     selectors({
         query: [(_state, props) => [props.query], (query) => query],
@@ -156,40 +180,73 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
             (cachedResults: AnyResponseType | null): boolean => !!cachedResults,
         ],
         yData: [
-            (state) => [state.selectedYIndexes, state.response],
-            (yIndexes, response): null | AxisSeries<number>[] => {
-                if (!response || yIndexes === null || yIndexes.length === 0) {
+            (state) => [state.selectedYAxis, state.response, state.columns],
+            (ySeries, response, columns): null | AxisSeries<number>[] => {
+                if (!response || ySeries === null || ySeries.length === 0) {
                     return null
                 }
 
                 const data: any[] = response?.['results'] ?? []
-                const columns: string[] = response['columns']
 
-                return yIndexes
-                    .filter((n): n is number => Boolean(n))
-                    .map((index): AxisSeries<number> => {
+                return ySeries
+                    .map((name): AxisSeries<number> | null => {
+                        if (!name) {
+                            return {
+                                column: {
+                                    name: 'None',
+                                    type: 'None',
+                                    label: 'None',
+                                    dataIndex: -1,
+                                },
+                                data: [],
+                            }
+                        }
+
+                        const column = columns.find((n) => n.name === name)
+                        if (!column) {
+                            return null
+                        }
+
                         return {
-                            name: columns[index],
+                            column,
                             data: data.map((n) => {
                                 try {
-                                    return parseInt(n[index], 10)
+                                    return parseInt(n[column.dataIndex], 10)
                                 } catch {
                                     return 0
                                 }
                             }),
                         }
                     })
+                    .filter((series): series is AxisSeries<number> => Boolean(series))
             },
         ],
         xData: [
-            (state) => [state.selectedXIndex, state.response],
-            (xIndex, response): null | string[] => {
-                if (!response || xIndex === null) {
-                    return null
+            (state) => [state.selectedXAxis, state.response, state.columns],
+            (xSeries, response, columns): AxisSeries<string> | null => {
+                if (!response || xSeries === null) {
+                    return {
+                        column: {
+                            name: 'None',
+                            type: 'None',
+                            label: 'None',
+                            dataIndex: -1,
+                        },
+                        data: [],
+                    }
                 }
 
                 const data: any[] = response?.['results'] ?? []
-                return data.map((n) => n[xIndex])
+
+                const column = columns.find((n) => n.name === xSeries)
+                if (!column) {
+                    return null
+                }
+
+                return {
+                    column,
+                    data: data.map((n) => n[column.dataIndex]),
+                }
             },
         ],
     }),
@@ -214,15 +271,15 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
         }
 
         if (props.query.chartSettings) {
-            const { xAxisIndex, yAxisIndex } = props.query.chartSettings
+            const { xAxis, yAxis } = props.query.chartSettings
 
-            if (xAxisIndex && xAxisIndex.length) {
-                actions.updateXSeries(xAxisIndex[0])
+            if (xAxis) {
+                actions.updateXSeries(xAxis.column)
             }
 
-            if (yAxisIndex && yAxisIndex.length) {
-                yAxisIndex.forEach((index) => {
-                    actions.addYSeries(index)
+            if (yAxis && yAxis.length) {
+                yAxis.forEach((axis) => {
+                    actions.addYSeries(axis.column)
                 })
             }
         }
@@ -236,40 +293,47 @@ export const dataVisualizationLogic = kea<dataVisualizationLogicType>([
             }
 
             // Set default axis values
-            if (values.response && values.selectedXIndex === null && values.selectedYIndexes === null) {
+            if (values.response && values.selectedXAxis === null && values.selectedYAxis === null) {
                 const types: string[][] = values.response['types']
-                const yAxisIndex = types.findIndex((n) => n[1].indexOf('Int') !== -1 || n[1].indexOf('Float') !== -1)
-                const xAxisIndex = types.findIndex((n) => n[1].indexOf('Date') !== -1)
+                const yAxisTypes = types.find((n) => n[1].indexOf('Int') !== -1 || n[1].indexOf('Float') !== -1)
+                const xAxisTypes = types.find((n) => n[1].indexOf('Date') !== -1)
 
-                if (yAxisIndex >= 0) {
-                    actions.addYSeries(yAxisIndex)
+                if (yAxisTypes) {
+                    actions.addYSeries(yAxisTypes[0])
                 }
 
-                if (xAxisIndex >= 0) {
-                    actions.updateXSeries(xAxisIndex)
+                if (xAxisTypes) {
+                    actions.updateXSeries(xAxisTypes[0])
                 }
             }
         },
-        selectedXIndex: (value: number | null) => {
+        selectedXAxis: (value: string | null) => {
             if (props.setQuery) {
+                const yColumns = values.selectedYAxis?.filter((n: string | null): n is string => Boolean(n)) ?? []
+                const xColumn: ChartAxis | undefined = value !== null ? { column: value } : undefined
+
                 props.setQuery({
                     ...props.query,
                     chartSettings: {
                         ...(props.query.chartSettings ?? {}),
-                        yAxisIndex: values.selectedYIndexes?.filter((n: number | null): n is number => Boolean(n)),
-                        xAxisIndex: value !== null ? [value] : undefined,
+                        yAxis: yColumns.map((n) => ({ column: n })),
+                        xAxis: xColumn,
                     },
                 })
             }
         },
-        selectedYIndexes: (value: (number | null)[] | null) => {
+        selectedYAxis: (value: (string | null)[] | null) => {
             if (props.setQuery) {
+                const yColumns = value?.filter((n: string | null): n is string => Boolean(n)) ?? []
+                const xColumn: ChartAxis | undefined =
+                    values.selectedXAxis !== null ? { column: values.selectedXAxis } : undefined
+
                 props.setQuery({
                     ...props.query,
                     chartSettings: {
                         ...(props.query.chartSettings ?? {}),
-                        yAxisIndex: value?.filter((n: number | null): n is number => Boolean(n)),
-                        xAxisIndex: values.selectedXIndex !== null ? [values.selectedXIndex] : undefined,
+                        yAxis: yColumns.map((n) => ({ column: n })),
+                        xAxis: xColumn,
                     },
                 })
             }
diff --git a/frontend/src/queries/nodes/DataVisualization/displayLogic.ts b/frontend/src/queries/nodes/DataVisualization/displayLogic.ts
new file mode 100644
index 0000000000000..0dd3fef0de781
--- /dev/null
+++ b/frontend/src/queries/nodes/DataVisualization/displayLogic.ts
@@ -0,0 +1,95 @@
+import * as d3 from 'd3'
+import { actions, afterMount, connect, kea, key, path, props, reducers } from 'kea'
+import { subscriptions } from 'kea-subscriptions'
+
+import { GoalLine } from '~/queries/schema'
+
+import { dataVisualizationLogic } from './dataVisualizationLogic'
+import type { displayLogicType } from './displayLogicType'
+
+export interface DisplayLogicProps {
+    key: string
+}
+
+export const displayLogic = kea<displayLogicType>([
+    key((props) => props.key),
+    path(['queries', 'nodes', 'DataVisualization', 'displayLogic']),
+    props({ key: '' } as DisplayLogicProps),
+    connect({
+        values: [dataVisualizationLogic, ['yData', 'query']],
+        actions: [dataVisualizationLogic, ['setQuery']],
+    }),
+    actions(({ values }) => ({
+        addGoalLine: () => ({ yData: values.yData }),
+        updateGoalLine: (goalLineIndex: number, key: string, value: string | number) => ({
+            goalLineIndex,
+            key,
+            value,
+        }),
+        removeGoalLine: (goalLineIndex: number) => ({ goalLineIndex }),
+        setGoalLines: (goalLines: GoalLine[]) => ({ goalLines }),
+    })),
+    reducers({
+        goalLines: [
+            [] as GoalLine[],
+            {
+                addGoalLine: (state, { yData }) => {
+                    const yDataFlat = yData?.flatMap((n) => n.data) ?? []
+                    const yDataAvg = Math.round(d3.mean(yDataFlat) ?? 0)
+
+                    return [
+                        ...state,
+                        {
+                            label: 'Q4 Goal',
+                            value: yDataAvg ?? 0,
+                        },
+                    ]
+                },
+                removeGoalLine: (state, { goalLineIndex }) => {
+                    const goalLines = [...state]
+
+                    goalLines.splice(goalLineIndex, 1)
+                    return goalLines
+                },
+                updateGoalLine: (state, { goalLineIndex, key, value }) => {
+                    const goalLines = [...state]
+
+                    if (key === 'value') {
+                        if (Number.isNaN(value)) {
+                            goalLines[goalLineIndex][key] = 0
+                        } else {
+                            goalLines[goalLineIndex][key] = parseInt(value.toString())
+                        }
+                    } else {
+                        goalLines[goalLineIndex][key] = value
+                    }
+
+                    return goalLines
+                },
+                setGoalLines: (_state, { goalLines }) => {
+                    return goalLines
+                },
+            },
+        ],
+    }),
+    afterMount(({ values, actions }) => {
+        const chartSettings = values.query.chartSettings
+
+        if (chartSettings?.goalLines) {
+            actions.setGoalLines(chartSettings.goalLines)
+        }
+    }),
+    subscriptions(({ values, actions }) => ({
+        goalLines: (value: GoalLine[]) => {
+            const goalLines = value.length > 0 ? value : undefined
+
+            actions.setQuery({
+                ...values.query,
+                chartSettings: {
+                    ...values.query.chartSettings,
+                    goalLines,
+                },
+            })
+        },
+    })),
+])
diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
index 3d4a37a0cfdf7..91c43c38ac0ee 100644
--- a/frontend/src/queries/schema.json
+++ b/frontend/src/queries/schema.json
@@ -284,6 +284,16 @@
             "enum": ["cohort", "person", "event", "group", "session", "hogql"],
             "type": "string"
         },
+        "ChartAxis": {
+            "additionalProperties": false,
+            "properties": {
+                "column": {
+                    "type": "string"
+                }
+            },
+            "required": ["column"],
+            "type": "object"
+        },
         "ChartDisplayType": {
             "enum": [
                 "ActionsLineGraph",
@@ -514,15 +524,18 @@
                 "chartSettings": {
                     "additionalProperties": false,
                     "properties": {
-                        "xAxisIndex": {
+                        "goalLines": {
                             "items": {
-                                "type": "number"
+                                "$ref": "#/definitions/GoalLine"
                             },
                             "type": "array"
                         },
-                        "yAxisIndex": {
+                        "xAxis": {
+                            "$ref": "#/definitions/ChartAxis"
+                        },
+                        "yAxis": {
                             "items": {
-                                "type": "number"
+                                "$ref": "#/definitions/ChartAxis"
                             },
                             "type": "array"
                         }
@@ -1353,6 +1366,19 @@
             "required": ["kind", "series"],
             "type": "object"
         },
+        "GoalLine": {
+            "additionalProperties": false,
+            "properties": {
+                "label": {
+                    "type": "string"
+                },
+                "value": {
+                    "type": "number"
+                }
+            },
+            "required": ["label", "value"],
+            "type": "object"
+        },
         "GroupMathType": {
             "const": "unique_group",
             "type": "string"
diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
index f005d289737f9..267b227a0625c 100644
--- a/frontend/src/queries/schema.ts
+++ b/frontend/src/queries/schema.ts
@@ -345,9 +345,19 @@ export interface DataTableNode extends Node, DataTableNodeViewProps {
     hiddenColumns?: HogQLExpression[]
 }
 
+export interface GoalLine {
+    label: string
+    value: number
+}
+
+export interface ChartAxis {
+    column: string
+}
+
 interface ChartSettings {
-    xAxisIndex?: number[]
-    yAxisIndex?: number[]
+    xAxis?: ChartAxis
+    yAxis?: ChartAxis[]
+    goalLines?: GoalLine[]
 }
 
 export interface DataVisualizationNode extends Node {
diff --git a/frontend/src/queries/utils.ts b/frontend/src/queries/utils.ts
index b7e230577785f..86e1697b4be95 100644
--- a/frontend/src/queries/utils.ts
+++ b/frontend/src/queries/utils.ts
@@ -16,6 +16,7 @@ import {
     InsightFilter,
     InsightFilterProperty,
     InsightNodeKind,
+    InsightPersonsQuery,
     InsightQueryNode,
     InsightVizNode,
     LifecycleQuery,
@@ -95,6 +96,10 @@ export function isPersonsQuery(node?: Node | null): node is PersonsQuery {
     return node?.kind === NodeKind.PersonsQuery
 }
 
+export function isInsightPersonsQuery(node?: Node | null): node is InsightPersonsQuery {
+    return node?.kind === NodeKind.InsightPersonsQuery
+}
+
 export function isDataTableNode(node?: Node | null): node is DataTableNode {
     return node?.kind === NodeKind.DataTableNode
 }
diff --git a/frontend/src/scenes/ResourcePermissionModal.tsx b/frontend/src/scenes/ResourcePermissionModal.tsx
index 4e81f46ccc99b..8c7209a5bc77a 100644
--- a/frontend/src/scenes/ResourcePermissionModal.tsx
+++ b/frontend/src/scenes/ResourcePermissionModal.tsx
@@ -183,7 +183,7 @@ export function ResourcePermission({
                 <>
                     <h5 className="mt-4">Roles</h5>
                     {roles.length > 0 ? (
-                        <div className="pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
+                        <div className="pb-2 rounded overflow-y-auto max-h-80">
                             {roles.map((role) => {
                                 return (
                                     <RoleRow
diff --git a/frontend/src/scenes/billing/Billing.stories.tsx b/frontend/src/scenes/billing/Billing.stories.tsx
index ab6cbae8ea895..29ba6cd7a444e 100644
--- a/frontend/src/scenes/billing/Billing.stories.tsx
+++ b/frontend/src/scenes/billing/Billing.stories.tsx
@@ -13,6 +13,7 @@ const meta: Meta = {
         layout: 'fullscreen',
         viewMode: 'story',
         mockDate: '2023-05-25',
+        testOptions: { include3000: true },
     },
     decorators: [
         mswDecorator({
diff --git a/frontend/src/scenes/billing/BillingGauge.scss b/frontend/src/scenes/billing/BillingGauge.scss
index a1ac810b41da5..d7c4bb59361fd 100644
--- a/frontend/src/scenes/billing/BillingGauge.scss
+++ b/frontend/src/scenes/billing/BillingGauge.scss
@@ -23,6 +23,43 @@
             z-index: 100;
         }
     }
+
+    &.BillingGaugeItem--free_tier {
+        background-color: var(--border-light-opaque);
+    }
+
+    &.BillingGaugeItem--billing_limit {
+        background-color: var(--border-light-opaque);
+    }
+
+    &.BillingGaugeItem--current_usage {
+        background: var(--danger);
+
+        &.BillingGaugeItem--within-usage-limit {
+            background: var(--brand-blue);
+        }
+    }
+
+    &.BillingGaugeItem--projected_usage {
+        background: repeating-linear-gradient(
+            -45deg,
+            var(--danger-3000-button-border-dark),
+            var(--danger-3000-button-border-dark) 0.5rem,
+            var(--danger-3000-button-border-hover-dark) 0.5rem,
+            var(--danger-3000-button-border-hover-dark) 1rem
+        );
+        opacity: 0.5;
+
+        &.BillingGaugeItem--within-usage-limit {
+            background: repeating-linear-gradient(
+                -45deg,
+                var(--data-color-1),
+                var(--data-color-1) 0.5rem,
+                var(--data-color-1-hover) 0.5rem,
+                var(--data-color-1-hover) 1rem
+            );
+        }
+    }
 }
 
 @keyframes BillingGaugeItem__expand {
diff --git a/frontend/src/scenes/billing/BillingGauge.tsx b/frontend/src/scenes/billing/BillingGauge.tsx
index cb0b5f480da50..5d9b563e0ec84 100644
--- a/frontend/src/scenes/billing/BillingGauge.tsx
+++ b/frontend/src/scenes/billing/BillingGauge.tsx
@@ -5,60 +5,119 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { compactNumber } from 'lib/utils'
 import { useMemo } from 'react'
 
+import { BillingProductV2Type } from '~/types'
+
+import { BillingGaugeItemKind, BillingGaugeItemType } from './types'
+
+/*
+ * Billing Gauge Item: Individual bars on the billing gauge.
+ */
 type BillingGaugeItemProps = {
-    width: string
-    className: string
-    tooltip: string | JSX.Element
-    top: boolean
-    value: number
+    item: BillingGaugeItemType
+    maxValue: number
+    isWithinUsageLimit: boolean
+}
+
+const getBgColorClassForItem = (item: BillingGaugeItemType, isWithinUsageLimit: boolean): string => {
+    if (item.type === BillingGaugeItemKind.FreeTier) {
+        return 'bg-success-light'
+    } else if (item.type === BillingGaugeItemKind.CurrentUsage) {
+        return isWithinUsageLimit ? 'bg-success' : 'bg-danger'
+    } else if (item.type === BillingGaugeItemKind.ProjectedUsage) {
+        return 'bg-border'
+    } else if (item.type === BillingGaugeItemKind.BillingLimit) {
+        return 'bg-primary-alt-light'
+    } else {
+        throw new Error(`Unknown type: ${item.type}`)
+    }
+}
+
+const BillingGaugeItem = ({ item, maxValue, isWithinUsageLimit }: BillingGaugeItemProps): JSX.Element => {
+    const width = `${(item.value / maxValue) * 100}%`
+    const bgColorClass = getBgColorClassForItem(item, isWithinUsageLimit)
+
+    return (
+        <div
+            className={`BillingGaugeItem absolute top-0 left-0 bottom-0 h-2 ${bgColorClass}`}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ '--billing-gauge-item-width': width } as React.CSSProperties}
+        >
+            <div className="absolute right-0 w-px h-full bg-bg-light" />
+            <Tooltip title={item.value.toLocaleString()} placement={'right'}>
+                <div
+                    className={clsx('BillingGaugeItem__info', {
+                        'BillingGaugeItem__info--bottom': !item.top,
+                    })}
+                >
+                    <b>{item.text}</b>
+                    <div>{compactNumber(item.value)}</div>
+                </div>
+            </Tooltip>
+        </div>
+    )
 }
 
-const BillingGaugeItem = ({ width, className, tooltip, top, value }: BillingGaugeItemProps): JSX.Element => {
+const BillingGaugeItem3000 = ({ item, maxValue, isWithinUsageLimit }: BillingGaugeItemProps): JSX.Element => {
+    const width = `${(item.value / maxValue) * 100}%`
+
     return (
         <div
-            className={`BillingGaugeItem absolute top-0 left-0 bottom-0 h-2 ${className}`}
+            className={clsx(
+                `BillingGaugeItem BillingGaugeItem--${item.type}`,
+                { 'BillingGaugeItem--within-usage-limit': isWithinUsageLimit },
+                'absolute top-0 left-0 bottom-0 h-2'
+            )}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{ '--billing-gauge-item-width': width } as React.CSSProperties}
         >
             <div className="absolute right-0 w-px h-full bg-bg-light" />
-            <Tooltip title={value.toLocaleString()} placement={'right'}>
+            <Tooltip title={item.value.toLocaleString()} placement={'right'}>
                 <div
                     className={clsx('BillingGaugeItem__info', {
-                        'BillingGaugeItem__info--bottom': !top,
+                        'BillingGaugeItem__info--bottom': !item.top,
                     })}
                 >
-                    {tooltip}
-                    <div>{compactNumber(value)}</div>
+                    <b>{item.text}</b>
+                    <div>{compactNumber(item.value)}</div>
                 </div>
             </Tooltip>
         </div>
     )
 }
 
+/*
+ * Billing Gauge.
+ */
 export type BillingGaugeProps = {
-    items: {
-        text: string | JSX.Element
-        color: string
-        value: number
-        top: boolean
-    }[]
+    items: BillingGaugeItemType[]
+    product: BillingProductV2Type
+}
+
+export function BillingGauge({ items, product }: BillingGaugeProps): JSX.Element {
+    const maxValue = useMemo(() => {
+        return Math.max(100, ...items.map((item) => item.value)) * 1.3
+    }, [items])
+    const isWithinUsageLimit = product.percentage_usage <= 1
+
+    return (
+        <div className="relative h-2 bg-border-light my-16">
+            {items.map((item, i) => (
+                <BillingGaugeItem key={i} item={item} maxValue={maxValue} isWithinUsageLimit={isWithinUsageLimit} />
+            ))}
+        </div>
+    )
 }
 
-export function BillingGauge({ items }: BillingGaugeProps): JSX.Element {
-    const maxScale = useMemo(() => {
+export function BillingGauge3000({ items, product }: BillingGaugeProps): JSX.Element {
+    const maxValue = useMemo(() => {
         return Math.max(100, ...items.map((item) => item.value)) * 1.3
     }, [items])
+    const isWithinUsageLimit = product.percentage_usage <= 1
 
     return (
         <div className="relative h-2 bg-border-light my-16">
             {items.map((item, i) => (
-                <BillingGaugeItem
-                    key={i}
-                    width={`${(item.value / maxScale) * 100}%`}
-                    className={`bg-${item.color}`}
-                    tooltip={<b>{item.text}</b>}
-                    top={item.top}
-                    value={item.value}
-                />
+                <BillingGaugeItem3000 key={i} item={item} maxValue={maxValue} isWithinUsageLimit={isWithinUsageLimit} />
             ))}
         </div>
     )
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index 35333fa65df2b..75bb4175e7d7c 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -1,6 +1,7 @@
 import { LemonButton, LemonSelectOptions, LemonTable, LemonTag, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import {
     IconArticle,
@@ -21,7 +22,7 @@ import { getProductIcon } from 'scenes/products/Products'
 import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
 
 import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
-import { BillingGauge } from './BillingGauge'
+import { BillingGauge, BillingGauge3000 } from './BillingGauge'
 import { BillingLimitInput } from './BillingLimitInput'
 import { billingLogic } from './billingLogic'
 import { billingProductLogic } from './billingProductLogic'
@@ -150,6 +151,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
         customLimitUsd,
         showTierBreakdown,
         billingGaugeItems,
+        billingGaugeItems3000,
         isPricingModalOpen,
         isPlanComparisonModalOpen,
         currentAndUpgradePlans,
@@ -164,6 +166,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
         setSurveyResponse,
     } = useActions(billingProductLogic({ product }))
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const showUpgradeCTA = !product.subscribed && !product.contact_support && product.plans?.length
     const upgradePlan = currentAndUpgradePlans?.upgradePlan
@@ -419,7 +422,11 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                                 />
                                             )}
                                             <div className="grow">
-                                                <BillingGauge items={billingGaugeItems} />
+                                                {is3000 ? (
+                                                    <BillingGauge3000 items={billingGaugeItems3000} product={product} />
+                                                ) : (
+                                                    <BillingGauge items={billingGaugeItems} product={product} />
+                                                )}
                                             </div>
                                             {product.current_amount_usd ? (
                                                 <div className="flex justify-end gap-8 flex-wrap items-end">
diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
index 56e279ac2a66b..bc0d986bc7f83 100644
--- a/frontend/src/scenes/billing/billingProductLogic.ts
+++ b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -7,6 +7,7 @@ import { BillingProductV2AddonType, BillingProductV2Type, BillingV2PlanType, Bil
 import { convertAmountToUsage } from './billing-utils'
 import { billingLogic } from './billingLogic'
 import type { billingProductLogicType } from './billingProductLogicType'
+import { BillingGaugeItemKind, BillingGaugeItemType } from './types'
 
 const DEFAULT_BILLING_LIMIT = 500
 
@@ -163,38 +164,34 @@ export const billingProductLogic = kea<billingProductLogicType>([
         ],
         billingGaugeItems: [
             (s, p) => [p.product, s.freeTier, s.billingLimitAsUsage],
-            (product, freeTier, billingLimitAsUsage) => {
+            (product, freeTier, billingLimitAsUsage): BillingGaugeItemType[] => {
                 return [
                     freeTier
                         ? {
+                              type: BillingGaugeItemKind.FreeTier,
                               text: 'Free tier limit',
-                              color: 'success-light',
                               value: freeTier,
                               top: true,
                           }
                         : undefined,
                     {
+                        type: BillingGaugeItemKind.CurrentUsage,
                         text: 'Current',
-                        color: product.percentage_usage
-                            ? product.percentage_usage <= 1
-                                ? 'success'
-                                : 'danger'
-                            : 'success',
                         value: product.current_usage || 0,
                         top: false,
                     },
                     product.projected_usage && product.projected_usage > (product.current_usage || 0)
                         ? {
+                              type: BillingGaugeItemKind.ProjectedUsage,
                               text: 'Projected',
-                              color: 'border',
                               value: product.projected_usage || 0,
                               top: false,
                           }
                         : undefined,
                     billingLimitAsUsage
                         ? {
+                              type: BillingGaugeItemKind.BillingLimit,
                               text: 'Billing limit',
-                              color: 'primary-alt-light',
                               top: true,
                               value: billingLimitAsUsage || 0,
                           }
@@ -202,6 +199,43 @@ export const billingProductLogic = kea<billingProductLogicType>([
                 ].filter(Boolean)
             },
         ],
+        billingGaugeItems3000: [
+            (s, p) => [p.product, s.freeTier, s.billingLimitAsUsage],
+            (product, freeTier, billingLimitAsUsage): BillingGaugeItemType[] => {
+                return [
+                    billingLimitAsUsage
+                        ? {
+                              type: BillingGaugeItemKind.BillingLimit,
+                              text: 'Billing limit',
+                              top: true,
+                              value: billingLimitAsUsage || 0,
+                          }
+                        : (undefined as any),
+                    freeTier
+                        ? {
+                              type: BillingGaugeItemKind.FreeTier,
+                              text: 'Free tier limit',
+                              value: freeTier,
+                              top: true,
+                          }
+                        : undefined,
+                    product.projected_usage && product.projected_usage > (product.current_usage || 0)
+                        ? {
+                              type: BillingGaugeItemKind.ProjectedUsage,
+                              text: 'Projected',
+                              value: product.projected_usage || 0,
+                              top: false,
+                          }
+                        : undefined,
+                    {
+                        type: BillingGaugeItemKind.CurrentUsage,
+                        text: 'Current',
+                        value: product.current_usage || 0,
+                        top: false,
+                    },
+                ].filter(Boolean)
+            },
+        ],
     })),
     listeners(({ actions, values, props }) => ({
         loadBillingSuccess: actions.billingLoaded,
diff --git a/frontend/src/scenes/billing/types.ts b/frontend/src/scenes/billing/types.ts
new file mode 100644
index 0000000000000..e1845afdd36a3
--- /dev/null
+++ b/frontend/src/scenes/billing/types.ts
@@ -0,0 +1,13 @@
+export enum BillingGaugeItemKind {
+    FreeTier = 'free_tier',
+    CurrentUsage = 'current_usage',
+    ProjectedUsage = 'projected_usage',
+    BillingLimit = 'billing_limit',
+}
+
+export type BillingGaugeItemType = {
+    type: BillingGaugeItemKind
+    text: string | JSX.Element
+    value: number
+    top: boolean
+}
diff --git a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
index 63e7c0547f504..3f43a36e43d42 100644
--- a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
+++ b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
@@ -90,7 +90,7 @@ export function DashboardCollaboration({ dashboardId }: { dashboardId: Dashboard
                                 </div>
                             )}
                             <h5 className="mt-4">Project members with access</h5>
-                            <div className="mt-2 pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
+                            <div className="mt-2 pb-2 rounded overflow-y-auto max-h-80">
                                 {allCollaborators.map((collaborator) => (
                                     <CollaboratorRow
                                         key={collaborator.user.uuid}
diff --git a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx
index 74396c36e63f7..1c5c75897b9b2 100644
--- a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx
+++ b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx
@@ -78,7 +78,7 @@ export function PropertyDefinitionsTable(): JSX.Element {
                     Click here!
                 </Link>
             </LemonBanner>
-            <div className="flex justify-between mb-4">
+            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                 <LemonInput
                     type="search"
                     placeholder="Search for properties"
diff --git a/frontend/src/scenes/early-access-features/InstructionsModal.tsx b/frontend/src/scenes/early-access-features/InstructionsModal.tsx
index d3cda50184d25..11ba9587a0c46 100644
--- a/frontend/src/scenes/early-access-features/InstructionsModal.tsx
+++ b/frontend/src/scenes/early-access-features/InstructionsModal.tsx
@@ -28,10 +28,7 @@ export function InstructionsModal({ onClose, visible, featureFlag }: Instruction
                             Give your users a{' '}
                             <Link to={'https://app.posthog.com/project/apps/574'}>prebuilt widget</Link> to opt-in to
                             features
-                            <img
-                                style={{ maxHeight: '100%', maxWidth: '100%', marginTop: 10 }}
-                                src={EarlyAccessFeatureImage}
-                            />
+                            <img className="max-h-full max-w-full mt-2.5" src={EarlyAccessFeatureImage} />
                         </div>
                     ),
                 },
diff --git a/frontend/src/scenes/events/Owner.tsx b/frontend/src/scenes/events/Owner.tsx
deleted file mode 100644
index 308912d41d455..0000000000000
--- a/frontend/src/scenes/events/Owner.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
-import { CSSProperties } from 'react'
-
-import { UserBasicType } from '~/types'
-
-export function Owner({ user, style = {} }: { user?: UserBasicType | null; style?: CSSProperties }): JSX.Element {
-    return (
-        <>
-            {user?.uuid ? (
-                <div className="flex items-center flex-row">
-                    <ProfilePicture name={user.first_name} email={user.email} size="sm" />
-                    <span className="pl-2" style={style}>
-                        {user.first_name}
-                    </span>
-                </div>
-            ) : (
-                <span className="text-muted italic" style={style}>
-                    No owner
-                </span>
-            )}
-        </>
-    )
-}
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
index 596aa0dcabf7e..d5e034407cd37 100644
--- a/frontend/src/scenes/experiments/Experiment.tsx
+++ b/frontend/src/scenes/experiments/Experiment.tsx
@@ -527,7 +527,6 @@ export function Experiment(): JSX.Element {
                 <div className="view-experiment">
                     <div className="draft-header">
                         <PageHeader
-                            style={{ paddingRight: 8 }}
                             title={
                                 <div className="flex items-center gap-2">
                                     <span>{experiment?.name}</span>
diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx
index 1a912cb6b240d..453e72ea4f2ea 100644
--- a/frontend/src/scenes/experiments/Experiments.tsx
+++ b/frontend/src/scenes/experiments/Experiments.tsx
@@ -204,7 +204,7 @@ export function Experiments(): JSX.Element {
                         ))}
                     {!shouldShowEmptyState && (
                         <>
-                            <div className="flex justify-between mb-4">
+                            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                                 <LemonInput
                                     type="search"
                                     placeholder="Search experiments"
diff --git a/frontend/src/scenes/experiments/SecondaryMetrics.tsx b/frontend/src/scenes/experiments/SecondaryMetrics.tsx
index b1c710dcb9da1..1c887ad10093d 100644
--- a/frontend/src/scenes/experiments/SecondaryMetrics.tsx
+++ b/frontend/src/scenes/experiments/SecondaryMetrics.tsx
@@ -55,14 +55,15 @@ export function SecondaryMetrics({
             render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
                 return (
                     <div
+                        className="flex items-center w-fit h-5 px-1 rounded text-white text-xs"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            color: getSeriesColor(
+                            background: getSeriesColor(
                                 getIndexForVariant(item.variant, experiment.filters?.insight || InsightType.TRENDS)
                             ),
                         }}
                     >
-                        <span className="text-sm">{capitalizeFirstLetter(item.variant)}</span>
+                        {capitalizeFirstLetter(item.variant)}
                     </div>
                 )
             },
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index fc133f316f7ad..3a212f4990141 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -323,9 +323,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                                 autoCorrect="off"
                                                 spellCheck={false}
                                             />
-                                            <span style={{ fontSize: 13 }} className="text-muted">
-                                                Feature flag keys must be unique
-                                            </span>
+                                            <span className="text-muted text-sm">Feature flag keys must be unique</span>
                                         </>
                                     )}
                                 </Field>
@@ -1017,7 +1015,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                     />
                                                     {filterGroups.filter((group) => group.variant === variant.key)
                                                         .length > 0 && (
-                                                        <span style={{ fontSize: 11 }} className="text-muted">
+                                                        <span className="text-muted text-xs">
                                                             Overridden by{' '}
                                                             <strong>
                                                                 {variantConcatWithPunctuation(
diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
index 5eff9ffc7b491..5d9733aec817e 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlags.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
@@ -258,7 +258,7 @@ export function OverViewTab({
             {!shouldShowEmptyState && (
                 <>
                     <div>
-                        <div className="flex justify-between mb-4">
+                        <div className="flex justify-between mb-4 gap-2 flex-wrap">
                             <LemonInput
                                 className="w-60"
                                 type="search"
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
index 7863e7770d3b3..6910e18a9a863 100644
--- a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
+++ b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
@@ -3,7 +3,7 @@ export function MetricRow({ title, value }: { title: string; value: string | num
         <div className="flex justify-between w-full">
             <div>{title}</div>
             <div>
-                <strong style={{ paddingLeft: 6 }}>{value}</strong>
+                <strong className="pl-1.5">{value}</strong>
             </div>
         </div>
     )
diff --git a/frontend/src/scenes/groups/GroupsIntroduction.tsx b/frontend/src/scenes/groups/GroupsIntroduction.tsx
index eb2bda5801ff9..21282119389a6 100644
--- a/frontend/src/scenes/groups/GroupsIntroduction.tsx
+++ b/frontend/src/scenes/groups/GroupsIntroduction.tsx
@@ -14,7 +14,7 @@ export function GroupsIntroduction({ access }: Props): JSX.Element {
     if (access === GroupsAccessStatus.NoAccess) {
         header = (
             <>
-                Introducing <span className="highlight">Group Analytics</span>!
+                Introducing <span className="highlight">Group&nbsp;Analytics</span>!
             </>
         )
         subtext = (
@@ -45,17 +45,17 @@ export function GroupsIntroduction({ access }: Props): JSX.Element {
 
 export function GroupIntroductionFooter({ needsUpgrade }: { needsUpgrade: boolean }): JSX.Element {
     return (
-        <div className="text-sm bg-mid rounded p-2" style={{ maxWidth: '15rem' }}>
+        <div className="text-sm bg-mid rounded p-2 max-w-60">
             {needsUpgrade ? (
                 <>
-                    Track usage of groups of users with Group Analytics.{' '}
+                    Track usage of groups of users with Group&nbsp;Analytics.{' '}
                     <Link
                         className="font-medium"
                         to="/organization/billing"
                         target="_blank"
                         data-attr="group-analytics-upgrade"
                     >
-                        Upgrade now
+                        Upgrade now
                     </Link>{' '}
                     or{' '}
                     <Link
diff --git a/frontend/src/scenes/insights/Insight.tsx b/frontend/src/scenes/insights/Insight.tsx
index bb3bbc8280f21..c6c8698f93d45 100644
--- a/frontend/src/scenes/insights/Insight.tsx
+++ b/frontend/src/scenes/insights/Insight.tsx
@@ -32,7 +32,7 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
     const { reportInsightViewedForRecentInsights } = useActions(logic)
 
     // insightDataLogic
-    const { query, isQueryBasedInsight, showQueryEditor } = useValues(insightDataLogic(insightProps))
+    const { query, showQueryEditor } = useValues(insightDataLogic(insightProps))
     const { setQuery: setInsightQuery } = useActions(insightDataLogic(insightProps))
 
     // other logics
@@ -48,9 +48,7 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
         return <InsightSkeleton />
     }
 
-    const actuallyShowQueryEditor =
-        insightMode === ItemMode.Edit &&
-        ((isQueryBasedInsight && !containsHogQLQuery(query)) || (!isQueryBasedInsight && showQueryEditor))
+    const actuallyShowQueryEditor = insightMode === ItemMode.Edit && showQueryEditor
 
     const setQuery = (query: Node): void => {
         if (!isInsightVizNode(query)) {
diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx
index c100746612e11..ac44020406634 100644
--- a/frontend/src/scenes/insights/InsightPageHeader.tsx
+++ b/frontend/src/scenes/insights/InsightPageHeader.tsx
@@ -33,7 +33,6 @@ import { cohortsModel } from '~/models/cohortsModel'
 import { groupsModel } from '~/models/groupsModel'
 import { tagsModel } from '~/models/tagsModel'
 import { DataTableNode, NodeKind } from '~/queries/schema'
-import { isInsightVizNode } from '~/queries/utils'
 import {
     AvailableFeature,
     ExporterFormat,
@@ -203,28 +202,26 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
                                             ) : null}
                                         </>
                                     )}
-                                    {isInsightVizNode(query) ? (
-                                        <LemonButton
-                                            data-attr={`${showQueryEditor ? 'hide' : 'show'}-insight-source`}
-                                            status="stealth"
-                                            onClick={() => {
-                                                // for an existing insight in view mode
-                                                if (hasDashboardItemId && insightMode !== ItemMode.Edit) {
-                                                    // enter edit mode
-                                                    setInsightMode(ItemMode.Edit, null)
+                                    <LemonButton
+                                        data-attr={`${showQueryEditor ? 'hide' : 'show'}-insight-source`}
+                                        status="stealth"
+                                        onClick={() => {
+                                            // for an existing insight in view mode
+                                            if (hasDashboardItemId && insightMode !== ItemMode.Edit) {
+                                                // enter edit mode
+                                                setInsightMode(ItemMode.Edit, null)
 
-                                                    // exit early if query editor doesn't need to be toggled
-                                                    if (showQueryEditor !== false) {
-                                                        return
-                                                    }
+                                                // exit early if query editor doesn't need to be toggled
+                                                if (showQueryEditor !== false) {
+                                                    return
                                                 }
-                                                toggleQueryEditorPanel()
-                                            }}
-                                            fullWidth
-                                        >
-                                            {showQueryEditor ? 'Hide source' : 'View source'}
-                                        </LemonButton>
-                                    ) : null}
+                                            }
+                                            toggleQueryEditorPanel()
+                                        }}
+                                        fullWidth
+                                    >
+                                        {showQueryEditor ? 'Hide source' : 'View source'}
+                                    </LemonButton>
                                     {hogQL && (
                                         <LemonButton
                                             data-attr={`edit-insight-sql`}
diff --git a/frontend/src/scenes/insights/InsightSkeleton.tsx b/frontend/src/scenes/insights/InsightSkeleton.tsx
index 1ee2f8c53ff97..27494e124029e 100644
--- a/frontend/src/scenes/insights/InsightSkeleton.tsx
+++ b/frontend/src/scenes/insights/InsightSkeleton.tsx
@@ -16,7 +16,7 @@ export function InsightSkeleton(): JSX.Element {
                         <LemonSkeleton.Row repeat={3} />
                     </div>
                 </div>
-                <div className="border rounded p-6" style={{ minHeight: 600 }} />
+                <div className="border rounded p-6 min-h-100" />
             </div>
         </>
     )
diff --git a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx
index af69bc1bf967e..a3507b4ed93c8 100644
--- a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx
+++ b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx
@@ -154,7 +154,7 @@ export function InWrapper(): JSX.Element {
     useMountedLogic(cohortsModel)
 
     return (
-        <div style={{ minHeight: 200 }}>
+        <div className="min-h-50">
             <div className="InsightTooltipWrapper">
                 <InsightTooltip
                     date={data.date}
diff --git a/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.tsx b/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.tsx
index 80dfb1d18c0df..1365bae97d48a 100644
--- a/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.tsx
+++ b/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.tsx
@@ -1,5 +1,6 @@
 import './LEGACY_InsightTooltip.scss'
 
+import clsx from 'clsx'
 import { DateDisplay } from 'lib/components/DateDisplay'
 import { IconHandClick } from 'lib/lemon-ui/icons'
 
@@ -32,7 +33,7 @@ export function LEGACY_InsightTooltip({
     hideHeader,
 }: InsightTooltipProps): JSX.Element {
     return (
-        <div className={`inner-tooltip${bodyLines.length > 1 ? ' multiple' : ''}`} style={{ maxWidth: 300 }}>
+        <div className={clsx('max-w-80', `inner-tooltip${bodyLines.length > 1 ? ' multiple' : ''}`)}>
             {!hideHeader && (
                 <header>
                     {referenceDate && interval && !preferAltTitle ? (
diff --git a/frontend/src/scenes/insights/summarizeInsight.ts b/frontend/src/scenes/insights/summarizeInsight.ts
index 4fcf69fb0924c..ef9e4834854c6 100644
--- a/frontend/src/scenes/insights/summarizeInsight.ts
+++ b/frontend/src/scenes/insights/summarizeInsight.ts
@@ -182,7 +182,7 @@ function summarizeInsightFilters(filters: AnyPartialFilterType, context: Summary
     return ''
 }
 
-function summarizeInsightQuery(query: InsightQueryNode, context: SummaryContext): string {
+export function summarizeInsightQuery(query: InsightQueryNode, context: SummaryContext): string {
     if (isTrendsQuery(query)) {
         let summary = query.series
             .map((s, index) => {
diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
index 4609d5241d0ef..a9a6350e74ba2 100644
--- a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -74,7 +74,7 @@ export function StaffUsersTab(): JSX.Element {
                                         {myself?.uuid === user.uuid ? (
                                             <>
                                                 Please confirm you want to <b>remove yourself</b> as a staff user.
-                                                <div className="font-normal" style={{ color: 'var(--muted-alt)' }}>
+                                                <div className="font-normal text-muted-alt">
                                                     Only another staff user will be able to add you again.
                                                 </div>
                                             </>
diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
index d2c96c06ee054..aa76ffcc7d941 100644
--- a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
@@ -17,7 +17,7 @@ import {
     IconUnfoldLess,
     IconUnfoldMore,
 } from 'lib/lemon-ui/icons'
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonMenu, LemonMenuItems } from '@posthog/lemon-ui'
 import './NodeWrapper.scss'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { BindLogic, BuiltLogic, useActions, useMountedLogic, useValues } from 'kea'
@@ -40,7 +40,7 @@ import { notebookNodeLogicType } from './notebookNodeLogicType'
 import { SlashCommandsPopover } from '../Notebook/SlashCommands'
 import posthog from 'posthog-js'
 import { NotebookNodeContext } from './NotebookNodeContext'
-import { IconGear } from '@posthog/icons'
+import { IconCopy, IconEllipsis, IconGear } from '@posthog/icons'
 
 function NodeWrapper<T extends CustomNotebookNodeAttributes>(props: NodeWrapperProps<T>): JSX.Element {
     const {
@@ -75,7 +75,16 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>(props: NodeWrapperP
     // nodeId can start null, but should then immediately be generated
     const nodeLogic = useMountedLogic(notebookNodeLogic(logicProps))
     const { resizeable, expanded, actions, nodeId } = useValues(nodeLogic)
-    const { setRef, setExpanded, deleteNode, toggleEditing, insertOrSelectNextLine } = useActions(nodeLogic)
+    const {
+        setRef,
+        setExpanded,
+        deleteNode,
+        toggleEditing,
+        insertOrSelectNextLine,
+        toggleEditingTitle,
+        copyToClipboard,
+        convertToBacklink,
+    } = useActions(nodeLogic)
 
     const { ref: inViewRef, inView } = useInView({ triggerOnce: true })
 
@@ -140,6 +149,36 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>(props: NodeWrapperP
     const isResizeable = resizeable && (!expandable || expanded)
     const isDraggable = !!(isEditable && getPos)
 
+    const menuItems: LemonMenuItems = [
+        {
+            label: 'Copy',
+            onClick: () => copyToClipboard(),
+            sideIcon: <IconCopy />,
+        },
+        isEditable && isResizeable
+            ? {
+                  label: 'Reset height to default',
+                  onClick: () => {
+                      updateAttributes({
+                          height: null,
+                      } as any)
+                  },
+              }
+            : null,
+        isEditable && parsedHref
+            ? {
+                  label: 'Convert to inline link',
+                  onClick: () => convertToBacklink(parsedHref),
+                  sideIcon: <IconLink />,
+              }
+            : null,
+
+        isEditable ? { label: 'Edit title', onClick: () => toggleEditingTitle(true) } : null,
+        isEditable ? { label: 'Remove', onClick: () => deleteNode(), sideIcon: <IconClose />, status: 'danger' } : null,
+    ]
+
+    const hasMenu = menuItems.some((x) => !!x)
+
     return (
         <NotebookNodeContext.Provider value={nodeLogic}>
             <BindLogic logic={notebookNodeLogic} props={logicProps}>
@@ -157,10 +196,13 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>(props: NodeWrapperP
                             <ErrorBoundary>
                                 {!inView ? (
                                     <>
-                                        <div className="h-10" /> {/* Placeholder for the drag handle */}
+                                        <div className="h-10 p-2 flex justify-between">
+                                            <LemonSkeleton className="w-1/4" />
+                                            <LemonSkeleton className="w-20" />
+                                        </div>
                                         {/* eslint-disable-next-line react/forbid-dom-props */}
-                                        <div style={{ height: heightEstimate }}>
-                                            <LemonSkeleton className="h-full" />
+                                        <div className="flex items-center p-2" style={{ height: heightEstimate }}>
+                                            <LemonSkeleton className="w-full h-full" />
                                         </div>
                                     </>
                                 ) : (
@@ -206,14 +248,17 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>(props: NodeWrapperP
                                                                 active={editingNodeId === nodeId}
                                                             />
                                                         ) : null}
+                                                    </>
+                                                ) : null}
 
+                                                {hasMenu ? (
+                                                    <LemonMenu items={menuItems} placement="bottom-end">
                                                         <LemonButton
-                                                            onClick={() => deleteNode()}
+                                                            icon={<IconEllipsis />}
+                                                            status="stealth"
                                                             size="small"
-                                                            status="danger"
-                                                            icon={<IconClose />}
                                                         />
-                                                    </>
+                                                    </LemonMenu>
                                                 ) : null}
                                             </div>
                                         </div>
@@ -373,7 +418,20 @@ export function createPostHogWidgetNode<T extends CustomNotebookNodeAttributes>(
         },
 
         renderHTML({ HTMLAttributes }) {
-            return [wrapperProps.nodeType, mergeAttributes(HTMLAttributes)]
+            // We want to stringify all object attributes so that we can use them in the serializedText
+            const sanitizedAttributes = Object.fromEntries(
+                Object.entries(HTMLAttributes).map(([key, value]) => {
+                    if (Array.isArray(value) || typeof value === 'object') {
+                        return [key, JSON.stringify(value)]
+                    }
+                    return [key, value]
+                })
+            )
+
+            // This method is primarily used by copy and paste so we can remove the nodeID, assuming we don't want duplicates
+            delete sanitizedAttributes['nodeId']
+
+            return [wrapperProps.nodeType, mergeAttributes(sanitizedAttributes)]
         },
 
         addNodeView() {
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
index 2490bbea971c9..6a34c08235f49 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
@@ -2,8 +2,7 @@ import { mergeAttributes, Node, NodeViewProps } from '@tiptap/core'
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
 import { InsightModel, NotebookNodeType, NotebookTarget } from '~/types'
 import { Link } from '@posthog/lemon-ui'
-import { IconGauge, IconBarChart, IconFlag, IconExperiment, IconLive, IconPerson, IconCohort } from 'lib/lemon-ui/icons'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { IconBarChart, IconFlag, IconExperiment, IconLive, IconPerson, IconCohort } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 import clsx from 'clsx'
 import { router } from 'kea-router'
@@ -14,67 +13,158 @@ import { notebookLogic } from '../Notebook/notebookLogic'
 
 import { openNotebook } from '~/models/notebooksModel'
 import { IconNotebook } from '../IconNotebook'
+import { IconChat, IconDashboard, IconLogomark, IconRewindPlay } from '@posthog/icons'
+import { useEffect } from 'react'
 
-const ICON_MAP = {
-    dashboards: <IconGauge />,
-    insights: <IconBarChart />,
-    feature_flags: <IconFlag />,
-    experiments: <IconExperiment />,
-    events: <IconLive width="1em" height="1em" />,
-    persons: <IconPerson />,
-    cohorts: <IconCohort />,
-    notebooks: <IconNotebook />,
+type BackLinkMapper = {
+    regex: string
+    type: string
+    icon: JSX.Element
+    getTitle: (match: string) => Promise<string>
 }
 
+const BACKLINK_MAP: BackLinkMapper[] = [
+    {
+        type: 'dashboards',
+        regex: urls.dashboard('(.+)'),
+        icon: <IconDashboard />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const dashboard = await api.dashboards.get(Number(id))
+            return dashboard.name ?? ''
+        },
+    },
+    {
+        type: 'insights',
+        regex: urls.insightView('(.+)' as InsightModel['short_id']),
+        icon: <IconBarChart />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const insight = await api.insights.loadInsight(id as InsightModel['short_id'])
+            return insight.results[0]?.name ?? ''
+        },
+    },
+    {
+        type: 'feature_flags',
+        regex: urls.featureFlag('(.+)'),
+        icon: <IconFlag />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const flag = await api.featureFlags.get(Number(id))
+            return flag.name ?? ''
+        },
+    },
+    {
+        type: 'experiments',
+        regex: urls.experiment('(.+)'),
+        icon: <IconExperiment />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const experiment = await api.experiments.get(Number(id))
+            return experiment.name ?? ''
+        },
+    },
+    {
+        type: 'surveys',
+        regex: urls.survey('(.+)'),
+        icon: <IconChat />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const survey = await api.surveys.get(id)
+            return survey.name ?? ''
+        },
+    },
+    {
+        type: 'events',
+        regex: urls.eventDefinition('(.+)'),
+        icon: <IconLive width="1em" height="1em" />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[3]
+            const event = await api.eventDefinitions.get({ eventDefinitionId: id })
+            return event.name ?? ''
+        },
+    },
+    {
+        type: 'persons',
+        regex: urls.personByDistinctId('(.+)'),
+        icon: <IconPerson />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const response = await api.persons.list({ distinct_id: id })
+            return response.results[0]?.name ?? ''
+        },
+    },
+    {
+        type: 'cohorts',
+        regex: urls.cohort('(.+)'),
+        icon: <IconCohort />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const cohort = await api.cohorts.get(Number(id))
+            return cohort.name ?? ''
+        },
+    },
+    {
+        type: 'replay',
+        regex: urls.replaySingle('(.+)'),
+        icon: <IconRewindPlay />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            return id
+        },
+    },
+    {
+        type: 'notebooks',
+        regex: urls.notebook('(.+)'),
+        icon: <IconNotebook />,
+        getTitle: async (path: string) => {
+            const id = path.split('/')[2]
+            const notebook = await api.notebooks.get(id)
+            return notebook.title ?? ''
+        },
+    },
+]
+
 const Component = (props: NodeViewProps): JSX.Element => {
     const { shortId } = useValues(notebookLogic)
+    const { location } = useValues(router)
+
+    const href: string = props.node.attrs.href ?? ''
 
-    const type: TaxonomicFilterGroupType = props.node.attrs.type
-    const title: string = props.node.attrs.title
-    const id: string = props.node.attrs.id
-    const href = backlinkHref(id, type)
+    const backLinkConfig = BACKLINK_MAP.find((config) => href.match(config.regex))
+    const derivedText: string = props.node.attrs.title || props.node.attrs.href
+    const isViewing = location.pathname === href
 
-    const isViewing = router.values.location.pathname === href
+    useEffect(() => {
+        if (props.node.attrs.title || !backLinkConfig) {
+            return
+        }
+
+        void backLinkConfig
+            .getTitle(href)
+            .then((title) => {
+                props.updateAttributes({
+                    title,
+                })
+            })
+            .catch((e) => {
+                console.error(e)
+            })
+    }, [props.node.attrs.title])
 
     return (
         <NodeViewWrapper
             as="span"
             className={clsx('Backlink', isViewing && 'Backlink--active', props.selected && 'Backlink--selected')}
         >
-            <Link
-                to={href}
-                onClick={() => void openNotebook(shortId, NotebookTarget.Popover)}
-                target={undefined}
-                className="space-x-1"
-            >
-                <span>{ICON_MAP[type]}</span>
-                <span className="Backlink__label">{title}</span>
+            <Link to={href} onClick={() => void openNotebook(shortId, NotebookTarget.Popover)} className="space-x-1">
+                <span>{backLinkConfig?.icon || <IconLogomark />}</span>
+                <span className="Backlink__label">{derivedText}</span>
             </Link>
         </NodeViewWrapper>
     )
 }
 
-function backlinkHref(id: string, type: TaxonomicFilterGroupType): string {
-    if (type === TaxonomicFilterGroupType.Events) {
-        return urls.eventDefinition(id)
-    } else if (type === TaxonomicFilterGroupType.Cohorts) {
-        return urls.cohort(id)
-    } else if (type === TaxonomicFilterGroupType.Persons) {
-        return urls.personByDistinctId(id)
-    } else if (type === TaxonomicFilterGroupType.Insights) {
-        return urls.insightView(id as InsightModel['short_id'])
-    } else if (type === TaxonomicFilterGroupType.FeatureFlags) {
-        return urls.featureFlag(id)
-    } else if (type === TaxonomicFilterGroupType.Experiments) {
-        return urls.experiment(id)
-    } else if (type === TaxonomicFilterGroupType.Dashboards) {
-        return urls.dashboard(id)
-    } else if (type === TaxonomicFilterGroupType.Notebooks) {
-        return urls.notebook(id)
-    }
-    return ''
-}
-
 export const NotebookNodeBacklink = Node.create({
     name: NotebookNodeType.Backlink,
     inline: true,
@@ -83,9 +173,9 @@ export const NotebookNodeBacklink = Node.create({
 
     addAttributes() {
         return {
-            id: { default: '' },
-            type: { default: '' },
-            title: { default: '' },
+            href: { default: '' },
+            type: {},
+            title: {},
         }
     },
 
@@ -104,53 +194,11 @@ export const NotebookNodeBacklink = Node.create({
     addPasteRules() {
         return [
             posthogNodePasteRule({
-                find: urls.eventDefinition('(.+)'),
-                editor: this.editor,
-                type: this.type,
-                getAttributes: async (match) => {
-                    const id = match[1]
-                    const event = await api.eventDefinitions.get({ eventDefinitionId: id })
-                    return { id: id, type: TaxonomicFilterGroupType.Events, title: event.name }
-                },
-            }),
-            posthogNodePasteRule({
-                find: urls.cohort('(.+)'),
-                editor: this.editor,
-                type: this.type,
-                getAttributes: async (match) => {
-                    const id = match[1]
-                    const event = await api.cohorts.get(Number(id))
-                    return { id: id, type: TaxonomicFilterGroupType.Cohorts, title: event.name }
-                },
-            }),
-            posthogNodePasteRule({
-                find: urls.experiment('(.+)'),
-                editor: this.editor,
-                type: this.type,
-                getAttributes: async (match) => {
-                    const id = match[1]
-                    const experiment = await api.experiments.get(Number(id))
-                    return { id: id, type: TaxonomicFilterGroupType.Experiments, title: experiment.name }
-                },
-            }),
-            posthogNodePasteRule({
-                find: urls.dashboard('(.+)'),
-                editor: this.editor,
-                type: this.type,
-                getAttributes: async (match) => {
-                    const id = match[1]
-                    const dashboard = await api.dashboards.get(Number(id))
-                    return { id: id, type: TaxonomicFilterGroupType.Dashboards, title: dashboard.name }
-                },
-            }),
-            posthogNodePasteRule({
-                find: urls.notebook('(.+)'),
+                find: '(.+)',
                 editor: this.editor,
                 type: this.type,
                 getAttributes: async (match) => {
-                    const id = match[1]
-                    const notebook = await api.notebooks.get(id)
-                    return { id: id, type: TaxonomicFilterGroupType.Notebooks, title: notebook.title }
+                    return { href: match[1] }
                 },
             }),
         ]
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeImage.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeImage.tsx
index 7af4f1e7e956f..84c3329b48118 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeImage.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeImage.tsx
@@ -59,7 +59,11 @@ const Component = ({ attributes, updateAttributes }: NotebookNodeProps<NotebookN
     }
 
     if (error) {
-        return <LemonBanner type="error">{error}</LemonBanner>
+        return (
+            <div className="flex flex-1 items-center justify-center">
+                <LemonBanner type="error">{error}</LemonBanner>
+            </div>
+        )
     }
 
     return (
diff --git a/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx b/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx
index 33a473a06edea..e05835a7d7603 100644
--- a/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx
@@ -9,14 +9,13 @@ import { notebookNodeLogic } from '../notebookNodeLogic'
 
 export function NotebookNodeTitle(): JSX.Element {
     const { isEditable } = useValues(notebookLogic)
-    const { nodeAttributes, title, titlePlaceholder } = useValues(notebookNodeLogic)
-    const { updateAttributes } = useActions(notebookNodeLogic)
-    const [editing, setEditing] = useState(false)
+    const { nodeAttributes, title, titlePlaceholder, isEditingTitle } = useValues(notebookNodeLogic)
+    const { updateAttributes, toggleEditingTitle } = useActions(notebookNodeLogic)
     const [newValue, setNewValue] = useState('')
 
     useEffect(() => {
         setNewValue(nodeAttributes.title ?? '')
-    }, [editing])
+    }, [isEditingTitle])
 
     const commitEdit = (): void => {
         updateAttributes({
@@ -27,13 +26,13 @@ export function NotebookNodeTitle(): JSX.Element {
             posthog.capture('notebook node title updated')
         }
 
-        setEditing(false)
+        toggleEditingTitle(false)
     }
 
     const onKeyUp = (e: KeyboardEvent<HTMLInputElement>): void => {
         // Esc cancels, enter commits
         if (e.key === 'Escape') {
-            setEditing(false)
+            toggleEditingTitle(false)
         } else if (e.key === 'Enter') {
             commitEdit()
         }
@@ -43,13 +42,13 @@ export function NotebookNodeTitle(): JSX.Element {
         <span title={title} className="NotebookNodeTitle">
             {title}
         </span>
-    ) : !editing ? (
+    ) : !isEditingTitle ? (
         <Tooltip title={'Double click to edit title'}>
             <span
                 title={title}
                 className="NotebookNodeTitle NotebookNodeTitle--editable"
                 onDoubleClick={() => {
-                    setEditing(true)
+                    toggleEditingTitle(true)
                     posthog.capture('notebook editing node title')
                 }}
             >
diff --git a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
index e49cd38e1042d..4f2de7954b1f4 100644
--- a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
+++ b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
@@ -64,6 +64,9 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
         setMessageListeners: (listeners: NotebookNodeMessagesListeners) => ({ listeners }),
         setTitlePlaceholder: (titlePlaceholder: string) => ({ titlePlaceholder }),
         setRef: (ref: HTMLElement | null) => ({ ref }),
+        toggleEditingTitle: (editing?: boolean) => ({ editing }),
+        copyToClipboard: true,
+        convertToBacklink: (href: string) => ({ href }),
     }),
 
     connect((props: NotebookNodeLogicProps) => ({
@@ -121,6 +124,12 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
                 setTitlePlaceholder: (_, { titlePlaceholder }) => titlePlaceholder,
             },
         ],
+        isEditingTitle: [
+            false,
+            {
+                toggleEditingTitle: (state, { editing }) => (typeof editing === 'boolean' ? editing : !state),
+            },
+        ],
     })),
 
     selectors({
@@ -272,11 +281,56 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
                 props.updateAttributes({ __init: null })
             }
         },
+
+        copyToClipboard: async () => {
+            const { nodeAttributes } = values
+
+            const htmlAttributesString = Object.entries(nodeAttributes)
+                .map(([key, value]) => {
+                    if (key === 'nodeId' || key.startsWith('__')) {
+                        return ''
+                    }
+
+                    if (value === null || value === undefined) {
+                        return ''
+                    }
+
+                    return `${key}='${JSON.stringify(value)}'`
+                })
+                .filter((x) => !!x)
+                .join(' ')
+
+            const html = `<${props.nodeType} ${htmlAttributesString} data-pm-slice="0 0 []"></${props.nodeType}>`
+
+            const type = 'text/html'
+            const blob = new Blob([html], { type })
+            const data = [new ClipboardItem({ [type]: blob })]
+
+            await window.navigator.clipboard.write(data)
+        },
+        convertToBacklink: ({ href }) => {
+            const editor = values.notebookLogic.values.editor
+            if (!props.getPos || !editor) {
+                return
+            }
+
+            editor.insertContentAfterNode(props.getPos(), {
+                type: NotebookNodeType.Backlink,
+                attrs: {
+                    href,
+                },
+            })
+            actions.deleteNode()
+        },
     })),
 
     afterMount((logic) => {
         const { props, actions, values } = logic
-        props.notebookLogic.actions.registerNodeLogic(values.nodeId, logic as any)
+
+        // The node logic is mounted after the editor is mounted, so we need to wait a tick before we can register it
+        queueMicrotask(() => {
+            props.notebookLogic.actions.registerNodeLogic(values.nodeId, logic as any)
+        })
 
         const isResizeable =
             typeof props.resizeable === 'function' ? props.resizeable(props.attributes) : props.resizeable ?? true
diff --git a/frontend/src/scenes/notebooks/Nodes/utils.tsx b/frontend/src/scenes/notebooks/Nodes/utils.tsx
index d60eb6ac8e827..114c52ec0fb69 100644
--- a/frontend/src/scenes/notebooks/Nodes/utils.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/utils.tsx
@@ -68,32 +68,6 @@ export function linkPasteRule(): PasteRule {
     })
 }
 
-export function selectFile(options: { contentType: string; multiple: boolean }): Promise<File[]> {
-    return new Promise((resolve, reject) => {
-        const input = document.createElement('input')
-        input.type = 'file'
-        input.multiple = options.multiple
-        input.accept = options.contentType
-
-        input.onchange = () => {
-            if (!input.files) {
-                return resolve([])
-            }
-            const files = Array.from(input.files)
-            resolve(files)
-        }
-
-        input.oncancel = () => {
-            resolve([])
-        }
-        input.onerror = () => {
-            reject(new Error('Error selecting file'))
-        }
-
-        input.click()
-    })
-}
-
 export function useSyncedAttributes<T extends CustomNotebookNodeAttributes>(
     props: NodeViewProps
 ): [NotebookNodeAttributes<T>, (attrs: Partial<NotebookNodeAttributes<T>>) => void] {
diff --git a/frontend/src/scenes/notebooks/Notebook/Editor.tsx b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
index c7121327108f6..af543133528a8 100644
--- a/frontend/src/scenes/notebooks/Notebook/Editor.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
@@ -159,17 +159,7 @@ export function Editor(): JSX.Element {
                         return true
                     }
 
-                    if (!moved && event.dataTransfer.files && event.dataTransfer.files[0]) {
-                        // if dropping external files
-                        const file = event.dataTransfer.files[0] // the dropped file
-
-                        posthog.capture('notebook file dropped', { file_type: file.type })
-
-                        if (!file.type.startsWith('image/')) {
-                            lemonToast.warning('Only images can be added to Notebooks at this time.')
-                            return true
-                        }
-
+                    if (!moved && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
                         const coordinates = view.posAtCoords({
                             left: event.clientX,
                             top: event.clientY,
@@ -180,15 +170,24 @@ export function Editor(): JSX.Element {
                             return true
                         }
 
-                        editor
-                            .chain()
-                            .focus()
-                            .setTextSelection(coordinates.pos)
-                            .insertContent({
-                                type: NotebookNodeType.Image,
-                                attrs: { file },
-                            })
-                            .run()
+                        // if dropping external files
+                        const fileList = Array.from(event.dataTransfer.files)
+                        const contentToAdd: any[] = []
+                        for (const file of fileList) {
+                            if (file.type.startsWith('image/')) {
+                                contentToAdd.push({
+                                    type: NotebookNodeType.Image,
+                                    attrs: { file },
+                                })
+                            } else {
+                                lemonToast.warning('Only images can be added to Notebooks at this time.')
+                            }
+                        }
+
+                        editor.chain().focus().setTextSelection(coordinates.pos).insertContent(contentToAdd).run()
+                        posthog.capture('notebook files dropped', {
+                            file_types: fileList.map((x) => x.type),
+                        })
 
                         return true
                     }
@@ -196,6 +195,36 @@ export function Editor(): JSX.Element {
 
                 return false
             },
+            handlePaste: (_view, event) => {
+                const editor = editorRef.current
+                if (!editor) {
+                    return false
+                }
+
+                // Special handling for pasting files such as images
+                if (event.clipboardData && event.clipboardData.files?.length > 0) {
+                    // iterate over the clipboard files and add any supported file types
+                    const fileList = Array.from(event.clipboardData.files)
+                    const contentToAdd: any[] = []
+                    for (const file of fileList) {
+                        if (file.type.startsWith('image/')) {
+                            contentToAdd.push({
+                                type: NotebookNodeType.Image,
+                                attrs: { file },
+                            })
+                        } else {
+                            lemonToast.warning('Only images can be added to Notebooks at this time.')
+                        }
+                    }
+
+                    editor.chain().focus().insertContent(contentToAdd).run()
+                    posthog.capture('notebook files pasted', {
+                        file_types: fileList.map((x) => x.type),
+                    })
+
+                    return true
+                }
+            },
         },
         onCreate: ({ editor }) => {
             editorRef.current = editor
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index 6b0881bd281a7..d2a228a9829ea 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -4,6 +4,12 @@
     flex-direction: column;
     width: 100%;
 
+    // overriding ::selection is necessary here because
+    // antd makes it invisible otherwise
+    span::selection {
+        color: var(--primary-3000);
+    }
+
     .NotebookEditor {
         position: relative;
         flex: 1;
@@ -117,7 +123,7 @@
 
         .Backlink {
             padding: 0.125rem 0.25rem;
-            background-color: var(--white);
+            background-color: var(--bg-light);
             border: 1px solid var(--border);
             border-radius: var(--radius);
 
@@ -126,12 +132,11 @@
             }
 
             & svg {
-                color: var(--muted-dark);
+                color: var(--text-3000);
             }
 
             &.Backlink--selected {
-                outline-style: solid;
-                outline-color: var(--primary-bg-active);
+                border-color: var(--primary-3000);
             }
 
             &.Backlink--active {
@@ -143,6 +148,10 @@
                 & svg {
                     color: var(--white);
                 }
+
+                span::selection {
+                    color: var(--white);
+                }
             }
         }
 
@@ -277,12 +286,6 @@
         max-height: 22px;
     }
 
-    // overriding ::selection is necessary here because
-    // antd makes it invisible otherwise
-    span::selection {
-        color: var(--primary-3000);
-    }
-
     // Overrides for insight controls
 
     .InsightVizDisplay {
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx
index 5658ddbf7e5cb..d9bc8e6e5b9d8 100644
--- a/frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx
@@ -1,18 +1,26 @@
 import { LemonBanner, LemonButton, LemonDivider } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
 import { combineUrl } from 'kea-router'
 import { IconCopy } from 'lib/lemon-ui/icons'
 import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
+import { base64Encode } from 'lib/utils'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import posthog from 'posthog-js'
 import { useState } from 'react'
 import { urls } from 'scenes/urls'
 
+import { notebookLogic } from './notebookLogic'
+
 export type NotebookShareProps = {
     shortId: string
 }
 export function NotebookShare({ shortId }: NotebookShareProps): JSX.Element {
+    const { content, isLocalOnly } = useValues(notebookLogic({ shortId }))
     const url = combineUrl(`${window.location.origin}${urls.notebook(shortId)}`).url
 
+    const canvasUrl =
+        combineUrl(`${window.location.origin}${urls.canvas()}`).url + `#🦔=${base64Encode(JSON.stringify(content))}`
+
     const [interestTracked, setInterestTracked] = useState(false)
 
     const trackInterest = (): void => {
@@ -22,19 +30,45 @@ export function NotebookShare({ shortId }: NotebookShareProps): JSX.Element {
     return (
         <div className="space-y-2">
             <h3>Internal Link</h3>
+            {!isLocalOnly ? (
+                <>
+                    <p>
+                        <b>Click the button below</b> to copy a direct link to this Notebook. Make sure the person you
+                        share it with has access to this PostHog project.
+                    </p>
+                    <LemonButton
+                        type="secondary"
+                        fullWidth
+                        center
+                        sideIcon={<IconCopy />}
+                        onClick={() => void copyToClipboard(url, 'notebook link')}
+                        title={url}
+                    >
+                        <span className="truncate">{url}</span>
+                    </LemonButton>
+
+                    <LemonDivider className="my-4" />
+                </>
+            ) : (
+                <LemonBanner type="info">
+                    <p>This Notebook cannot be shared directly with others as it is only visible to you.</p>
+                </LemonBanner>
+            )}
+
+            <h3>Template Link</h3>
             <p>
-                <b>Click the button below</b> to copy a direct link to this Notebook. Make sure the person you share it
-                with has access to this PostHog project.
+                The link below will open a Canvas with the contents of this Notebook, allowing the receiver to view it,
+                edit it or create their own Notebook without affecting this one.
             </p>
             <LemonButton
                 type="secondary"
                 fullWidth
                 center
                 sideIcon={<IconCopy />}
-                onClick={() => void copyToClipboard(url, 'notebook link')}
+                onClick={() => void copyToClipboard(canvasUrl, 'canvas link')}
                 title={url}
             >
-                <span className="truncate">{url}</span>
+                <span className="truncate">{canvasUrl}</span>
             </LemonButton>
 
             <LemonDivider className="my-4" />
diff --git a/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx b/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
index 0a7bf012d8e19..16244003b558e 100644
--- a/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
@@ -20,6 +20,7 @@ import Fuse from 'fuse.js'
 import { useValues } from 'kea'
 import { IconBold, IconItalic } from 'lib/lemon-ui/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
+import { selectFiles } from 'lib/utils/file-utils'
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
 
 import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
@@ -29,7 +30,6 @@ import { BaseMathType, ChartDisplayType, FunnelVizType, NotebookNodeType, PathTy
 
 import { buildNodeEmbed } from '../Nodes/NotebookNodeEmbed'
 import { buildInsightVizQueryContent, buildNodeQueryContent } from '../Nodes/NotebookNodeQuery'
-import { selectFile } from '../Nodes/utils'
 import NotebookIconHeading from './NotebookIconHeading'
 import { notebookLogic } from './notebookLogic'
 import { EditorCommands, EditorRange } from './utils'
@@ -313,7 +313,7 @@ order by count() desc
         command: async (chain, pos) => {
             // Trigger upload followed by insert
             try {
-                const files = await selectFile({ contentType: 'image/*', multiple: false })
+                const files = await selectFiles({ contentType: 'image/*', multiple: false })
 
                 if (files.length) {
                     return chain.insertContentAt(pos, { type: NotebookNodeType.Image, attrs: { file: files[0] } })
diff --git a/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts b/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts
index 0ace283e8b22c..8bff3a9590f0a 100644
--- a/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts
+++ b/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts
@@ -4,7 +4,7 @@ import { loaders } from 'kea-loaders'
 import { router, urlToAction } from 'kea-router'
 import { subscriptions } from 'kea-subscriptions'
 import api from 'lib/api'
-import { downloadFile, slugify } from 'lib/utils'
+import { base64Decode, base64Encode, downloadFile, slugify } from 'lib/utils'
 import posthog from 'posthog-js'
 import {
     buildTimestampCommentContent,
@@ -500,7 +500,7 @@ export const notebookLogic = kea<notebookLogicType>([
 
             if (values.mode === 'canvas') {
                 // TODO: We probably want this to be configurable
-                cache.lastState = btoa(JSON.stringify(jsonContent))
+                cache.lastState = base64Encode(JSON.stringify(jsonContent))
                 router.actions.replace(
                     router.values.currentLocation.pathname,
                     router.values.currentLocation.searchParams,
@@ -582,6 +582,9 @@ export const notebookLogic = kea<notebookLogicType>([
         },
 
         scheduleNotebookRefresh: () => {
+            if (values.mode !== 'notebook') {
+                return
+            }
             clearTimeout(cache.refreshTimeout)
             cache.refreshTimeout = setTimeout(() => {
                 actions.loadNotebook()
@@ -607,7 +610,7 @@ export const notebookLogic = kea<notebookLogicType>([
                     return
                 }
 
-                actions.setLocalContent(JSON.parse(atob(hashParams['🦔'])))
+                actions.setLocalContent(JSON.parse(base64Decode(hashParams['🦔'])))
             }
         },
     })),
diff --git a/frontend/src/scenes/notebooks/Notebook/utils.ts b/frontend/src/scenes/notebooks/Notebook/utils.ts
index 74d0f0282ea96..7a8e74902a99b 100644
--- a/frontend/src/scenes/notebooks/Notebook/utils.ts
+++ b/frontend/src/scenes/notebooks/Notebook/utils.ts
@@ -15,7 +15,7 @@ import { Node as PMNode } from '@tiptap/pm/model'
 
 import { NotebookNodeResource, NotebookNodeType } from '~/types'
 
-import { NotebookNodeLogicProps } from '../Nodes/notebookNodeLogic'
+import type { NotebookNodeLogicProps } from '../Nodes/notebookNodeLogic'
 
 // TODO: fix the typing of string to NotebookNodeType
 export const KNOWN_NODES: Record<string, CreatePostHogWidgetNodeOptions<any>> = {}
diff --git a/frontend/src/scenes/notebooks/NotebookCanvasScene.tsx b/frontend/src/scenes/notebooks/NotebookCanvasScene.tsx
index b0a9b56f8fa4d..4b5f0936dee63 100644
--- a/frontend/src/scenes/notebooks/NotebookCanvasScene.tsx
+++ b/frontend/src/scenes/notebooks/NotebookCanvasScene.tsx
@@ -1,10 +1,13 @@
 import './NotebookScene.scss'
 
-import { LemonBanner } from '@posthog/lemon-ui'
+import { IconEllipsis } from '@posthog/icons'
+import { LemonBanner, LemonButton, LemonMenu, lemonToast } from '@posthog/lemon-ui'
 import { useActions } from 'kea'
 import { NotFound } from 'lib/components/NotFound'
+import { PageHeader } from 'lib/components/PageHeader'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { uuid } from 'lib/utils'
+import { getTextFromFile, selectFiles } from 'lib/utils/file-utils'
 import { useMemo } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
@@ -23,7 +26,7 @@ export function NotebookCanvas(): JSX.Element {
         mode: 'canvas',
     }
 
-    const { duplicateNotebook } = useActions(notebookLogic(logicProps))
+    const { duplicateNotebook, exportJSON, setLocalContent } = useActions(notebookLogic(logicProps))
 
     const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
@@ -34,23 +37,63 @@ export function NotebookCanvas(): JSX.Element {
     // TODO: The absolute positioning doesn't work so well in non-3000 mode
 
     return (
-        <div className="flex flex-col flex-1">
-            <LemonBanner
-                type="info"
-                action={{
-                    onClick: duplicateNotebook,
-                    children: 'Save as Notebook',
-                }}
-                className="mx-2 mt-2"
-            >
-                <b>This is a canvas.</b> You can change anything you like and it is persisted to the URL for easy
-                sharing.
-            </LemonBanner>
-            <div className="relative flex-1">
-                <div className="absolute inset-0 p-3 flex flex-column overflow-y-auto">
-                    <Notebook {...logicProps} />
+        <>
+            <PageHeader
+                title="Canvas"
+                buttons={
+                    <>
+                        <LemonMenu
+                            items={[
+                                {
+                                    label: 'Clear canvas',
+                                    onClick: () => setLocalContent({ type: 'doc', content: [] }, true),
+                                },
+                                {
+                                    label: 'Export as JSON',
+                                    onClick: () => exportJSON(),
+                                },
+                                {
+                                    label: 'Load from JSON',
+                                    onClick: () => {
+                                        void selectFiles({
+                                            contentType: 'application/json',
+                                            multiple: false,
+                                        })
+                                            .then((files) => getTextFromFile(files[0]))
+                                            .then((text) => {
+                                                const data = JSON.parse(text)
+                                                if (data.type !== 'doc') {
+                                                    throw new Error('Not a notebook')
+                                                }
+                                                // Looks like a notebook
+                                                setLocalContent(data, true)
+                                            })
+                                            .catch((e) => {
+                                                lemonToast.error(e.message)
+                                            })
+                                    },
+                                },
+                            ]}
+                        >
+                            <LemonButton icon={<IconEllipsis />} status="stealth" size="small" />
+                        </LemonMenu>
+                        <LemonButton type="primary" onClick={duplicateNotebook}>
+                            Save as Notebook
+                        </LemonButton>
+                    </>
+                }
+            />
+            <div className="flex flex-col flex-1">
+                <div className="relative flex-1">
+                    <div className="absolute inset-0 p-3 flex flex-col overflow-y-auto">
+                        <LemonBanner type="info" className="mb-4">
+                            <b>This is a canvas.</b> You can change anything you like and it is persisted to the URL for
+                            easy sharing.
+                        </LemonBanner>
+                        <Notebook {...logicProps} />
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
     )
 }
diff --git a/frontend/src/scenes/notebooks/NotebookMenu.tsx b/frontend/src/scenes/notebooks/NotebookMenu.tsx
index b604271643f1a..1b830564f8277 100644
--- a/frontend/src/scenes/notebooks/NotebookMenu.tsx
+++ b/frontend/src/scenes/notebooks/NotebookMenu.tsx
@@ -31,7 +31,7 @@ export function NotebookMenu({ shortId }: NotebookLogicProps): JSX.Element {
                             icon: <IconNotification />,
                             onClick: () => setShowHistory(!showHistory),
                         },
-                        !isLocalOnly && {
+                        {
                             label: 'Share',
                             icon: <IconShare />,
                             onClick: () => openNotebookShareDialog({ shortId }),
diff --git a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx
index 5571c5cb6f083..4bee840f00ea0 100644
--- a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx
+++ b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx
@@ -42,6 +42,7 @@ export function NotebookPanel(): JSX.Element | null {
                                 selectNotebook(notebook.short_id)
                             }}
                         />
+                        <div className="flex-1" />
                         {selectedNotebook && <NotebookSyncInfo shortId={selectedNotebook} />}
 
                         <LemonButton
diff --git a/frontend/src/scenes/notebooks/NotebookPanel/notebookPanelLogic.ts b/frontend/src/scenes/notebooks/NotebookPanel/notebookPanelLogic.ts
index 98bc881454e75..54dc2b51e5b90 100644
--- a/frontend/src/scenes/notebooks/NotebookPanel/notebookPanelLogic.ts
+++ b/frontend/src/scenes/notebooks/NotebookPanel/notebookPanelLogic.ts
@@ -29,7 +29,10 @@ export const notebookPanelLogic = kea<notebookPanelLogicType>([
         ],
     }),
     actions({
-        selectNotebook: (id: string, autofocus: EditorFocusPosition | undefined = undefined) => ({ id, autofocus }),
+        selectNotebook: (id: string, options: { autofocus?: EditorFocusPosition; silent?: boolean } = {}) => ({
+            id,
+            ...options,
+        }),
         startDropMode: true,
         endDropMode: true,
         setDroppedResource: (resource: NotebookNodeResource | string | null) => ({ resource }),
@@ -108,6 +111,9 @@ export const notebookPanelLogic = kea<notebookPanelLogicType>([
 
     listeners(({ cache, actions, values }) => ({
         selectNotebook: (options) => {
+            if (options.silent) {
+                return
+            }
             if (!values.is3000) {
                 actions.setPopoverVisibility('visible')
                 notebookPopoverLogic.actions.selectNotebook(options.id, options.autofocus)
diff --git a/frontend/src/scenes/notebooks/NotebookScene.tsx b/frontend/src/scenes/notebooks/NotebookScene.tsx
index e97761af1b97b..312ea603d001a 100644
--- a/frontend/src/scenes/notebooks/NotebookScene.tsx
+++ b/frontend/src/scenes/notebooks/NotebookScene.tsx
@@ -7,6 +7,7 @@ import { NotFound } from 'lib/components/NotFound'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { useEffect } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
 import { NotebookTarget } from '~/types'
@@ -34,6 +35,7 @@ export const scene: SceneExport = {
 
 export function NotebookScene(): JSX.Element {
     const { notebookId, loading } = useValues(notebookSceneLogic)
+    const { createNotebook } = useActions(notebookSceneLogic)
     const { notebook, conflictWarningVisible } = useValues(
         notebookLogic({ shortId: notebookId, target: NotebookTarget.Scene })
     )
@@ -43,6 +45,13 @@ export function NotebookScene(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
     const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? 'small' : 'medium'
 
+    useEffect(() => {
+        if (notebookId === 'new') {
+            // NOTE: We don't do this in the logic afterMount as the logic can get cached by the router
+            createNotebook(NotebookTarget.Scene)
+        }
+    }, [notebookId])
+
     if (!notebook && !loading && !conflictWarningVisible) {
         return <NotFound object="notebook" />
     }
diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.stories.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.stories.tsx
index d7bf1039a7f9a..4ac6210642710 100644
--- a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.stories.tsx
+++ b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.stories.tsx
@@ -90,22 +90,6 @@ WithSlowNetworkResponse.args = {
     resource: { type: NotebookNodeType.Recording, attrs: { id: 'very_slow' } },
     visible: true,
 }
-WithSlowNetworkResponse.parameters = {
-    testOptions: {
-        waitForLoadersToDisappear: false,
-    },
-}
-
-export const WithSlowNetworkResponseClosedPopover = Template.bind({})
-WithSlowNetworkResponseClosedPopover.args = {
-    resource: { type: NotebookNodeType.Recording, attrs: { id: 'very_slow' } },
-    visible: false,
-}
-WithSlowNetworkResponseClosedPopover.parameters = {
-    testOptions: {
-        waitForLoadersToDisappear: false,
-    },
-}
 
 export const WithNoExistingContainingNotebooks = Template.bind({})
 WithNoExistingContainingNotebooks.args = {
diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
index c4091682c3938..1673babd2851e 100644
--- a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
+++ b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
@@ -1,4 +1,4 @@
-import { LemonDivider, ProfilePicture } from '@posthog/lemon-ui'
+import { LemonDivider, LemonDropdown, ProfilePicture } from '@posthog/lemon-ui'
 import { BuiltLogic, useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
@@ -6,8 +6,8 @@ import { dayjs } from 'lib/dayjs'
 import { IconPlus, IconWithCount } from 'lib/lemon-ui/icons'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
-import { Popover, PopoverProps } from 'lib/lemon-ui/Popover'
-import { ReactChild, useEffect } from 'react'
+import { PopoverProps } from 'lib/lemon-ui/Popover'
+import { ReactChild, ReactElement, useEffect } from 'react'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import {
     notebookSelectButtonLogic,
@@ -30,8 +30,8 @@ export type NotebookSelectProps = NotebookSelectButtonLogicProps & {
 }
 
 export type NotebookSelectPopoverProps = NotebookSelectProps &
-    Partial<PopoverProps> & {
-        children?: ReactChild
+    Partial<Omit<PopoverProps, 'children'>> & {
+        children: ReactElement
     }
 
 export type NotebookSelectButtonProps = NotebookSelectProps &
@@ -204,29 +204,27 @@ export function NotebookSelectPopover({
     const { setShowPopover } = useActions(logic)
 
     return (
-        <Popover
-            visible={!!showPopover}
-            onClickOutside={() => setShowPopover(false)}
-            actionable
+        <LemonDropdown
             overlay={
                 <div className="max-w-160">
                     <NotebookSelectList {...props} />
                 </div>
             }
-            {...props}
+            sameWidth={false}
+            actionable
+            visible={!!showPopover}
+            onVisibilityChange={(visible) => setShowPopover(visible)}
         >
-            <span className="flex flex-1 overflow-hidden" onClick={() => setShowPopover(!showPopover)}>
-                {children}
-            </span>
-        </Popover>
+            {children}
+        </LemonDropdown>
     )
 }
 
-export function NotebookSelectButton({ children, ...props }: NotebookSelectButtonProps): JSX.Element {
+export function NotebookSelectButton({ children, onNotebookOpened, ...props }: NotebookSelectButtonProps): JSX.Element {
     // if nodeLogic is available then the button is on a resource that _is already and currently in a notebook_
     const nodeLogic = useNotebookNode()
-    const logic = notebookSelectButtonLogic({ ...props })
-    const { showPopover, notebooksLoading, notebooksContainingResource } = useValues(logic)
+    const logic = notebookSelectButtonLogic({ ...props, onNotebookOpened })
+    const { showPopover, notebooksContainingResource } = useValues(logic)
     const { loadNotebooksContainingResource } = useActions(logic)
 
     useEffect(() => {
@@ -246,12 +244,11 @@ export function NotebookSelectButton({ children, ...props }: NotebookSelectButto
             sideIcon={null}
             {...props}
             active={showPopover}
-            loading={notebooksLoading}
             onClick={() => {
                 props.onClick?.()
                 if (nodeLogic) {
                     // If we are in a Notebook then we just call the callback directly
-                    props.onNotebookOpened?.(nodeLogic.props.notebookLogic, nodeLogic)
+                    onNotebookOpened?.(nodeLogic.props.notebookLogic, nodeLogic)
                 }
             }}
         >
diff --git a/frontend/src/scenes/notebooks/NotebooksScene.tsx b/frontend/src/scenes/notebooks/NotebooksScene.tsx
index df4360e389353..a95fa87a93263 100644
--- a/frontend/src/scenes/notebooks/NotebooksScene.tsx
+++ b/frontend/src/scenes/notebooks/NotebooksScene.tsx
@@ -1,7 +1,12 @@
 import './NotebookScene.scss'
 
-import { LemonButton, LemonTag } from '@posthog/lemon-ui'
+import { IconEllipsis } from '@posthog/icons'
+import { LemonButton, LemonMenu, LemonTag, lemonToast } from '@posthog/lemon-ui'
+import { router } from 'kea-router'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { PageHeader } from 'lib/components/PageHeader'
+import { base64Encode } from 'lib/utils'
+import { getTextFromFile, selectFiles } from 'lib/utils/file-utils'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
@@ -24,9 +29,47 @@ export function NotebooksScene(): JSX.Element {
                     </div>
                 }
                 buttons={
-                    <LemonButton data-attr={'new-notebook'} to={urls.notebook('new')} type="primary">
-                        New notebook
-                    </LemonButton>
+                    <>
+                        <FlaggedFeature flag="posthog-3000" match="test">
+                            <LemonMenu
+                                items={[
+                                    {
+                                        label: 'Load from JSON',
+                                        onClick: () => {
+                                            void selectFiles({
+                                                contentType: 'application/json',
+                                                multiple: false,
+                                            })
+                                                .then((files) => getTextFromFile(files[0]))
+                                                .then((text) => {
+                                                    const data = JSON.parse(text)
+                                                    if (data.type !== 'doc') {
+                                                        throw new Error('Not a notebook')
+                                                    }
+
+                                                    // Looks like a notebook
+                                                    router.actions.push(
+                                                        urls.canvas(),
+                                                        {},
+                                                        {
+                                                            '🦔': base64Encode(text),
+                                                        }
+                                                    )
+                                                })
+                                                .catch((e) => {
+                                                    lemonToast.error(e.message)
+                                                })
+                                        },
+                                    },
+                                ]}
+                            >
+                                <LemonButton icon={<IconEllipsis />} status="stealth" size="small" />
+                            </LemonMenu>
+                        </FlaggedFeature>
+                        <LemonButton data-attr={'new-notebook'} to={urls.notebook('new')} type="primary">
+                            New notebook
+                        </LemonButton>
+                    </>
                 }
             />
 
diff --git a/frontend/src/scenes/notebooks/notebookSceneLogic.ts b/frontend/src/scenes/notebooks/notebookSceneLogic.ts
index 8d71c0f9f93db..19061b7208bea 100644
--- a/frontend/src/scenes/notebooks/notebookSceneLogic.ts
+++ b/frontend/src/scenes/notebooks/notebookSceneLogic.ts
@@ -3,7 +3,7 @@ import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
 import { notebooksModel } from '~/models/notebooksModel'
-import { Breadcrumb, NotebookTarget } from '~/types'
+import { Breadcrumb } from '~/types'
 
 import { notebookLogic } from './Notebook/notebookLogic'
 import type { notebookSceneLogicType } from './notebookSceneLogicType'
@@ -44,9 +44,7 @@ export const notebookSceneLogic = kea<notebookSceneLogicType>([
     })),
 
     afterMount(({ actions, props }) => {
-        if (props.shortId === 'new') {
-            actions.createNotebook(NotebookTarget.Scene)
-        } else {
+        if (props.shortId !== 'new') {
             actions.loadNotebook()
         }
     }),
diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx
index e2d3bcb0829c1..656435991ab62 100644
--- a/frontend/src/scenes/onboarding/Onboarding.tsx
+++ b/frontend/src/scenes/onboarding/Onboarding.tsx
@@ -8,6 +8,7 @@ import { teamLogic } from 'scenes/teamLogic'
 import { ProductKey } from '~/types'
 
 import { OnboardingBillingStep } from './OnboardingBillingStep'
+import { OnboardingInviteTeammates } from './OnboardingInviteTeammates'
 import { onboardingLogic, OnboardingStepKey } from './onboardingLogic'
 import { OnboardingOtherProductsStep } from './OnboardingOtherProductsStep'
 import { OnboardingProductConfiguration } from './OnboardingProductConfiguration'
@@ -25,12 +26,13 @@ export const scene: SceneExport = {
 }
 
 /**
- * Wrapper for custom onboarding content. This automatically includes the product intro and billing step.
+ * Wrapper for custom onboarding content. This automatically includes billing, other products, and invite steps.
  */
 const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
     const { currentOnboardingStep, shouldShowBillingStep, shouldShowOtherProductsStep } = useValues(onboardingLogic)
     const { setAllOnboardingSteps } = useActions(onboardingLogic)
     const { product } = useValues(onboardingLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
     const [allSteps, setAllSteps] = useState<JSX.Element[]>([])
 
     useEffect(() => {
@@ -63,6 +65,10 @@ const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Ele
             const OtherProductsStep = <OnboardingOtherProductsStep stepKey={OnboardingStepKey.OTHER_PRODUCTS} />
             steps = [...steps, OtherProductsStep]
         }
+        if (featureFlags[FEATURE_FLAGS.INVITE_TEAM_MEMBER_ONBOARDING] == 'test') {
+            const inviteTeammatesStep = <OnboardingInviteTeammates stepKey={OnboardingStepKey.INVITE_TEAMMATES} />
+            steps = [...steps, inviteTeammatesStep]
+        }
         setAllSteps(steps)
     }
 
diff --git a/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx b/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx
new file mode 100644
index 0000000000000..e7a6c45bdd892
--- /dev/null
+++ b/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx
@@ -0,0 +1,76 @@
+import { useActions, useValues } from 'kea'
+import { PhonePairHogs } from 'lib/components/hedgehogs'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
+import { InviteTeamMatesComponent } from 'scenes/settings/organization/InviteModal'
+
+import { ProductKey } from '~/types'
+
+import { onboardingLogic, OnboardingStepKey } from './onboardingLogic'
+import { OnboardingStep } from './OnboardingStep'
+
+export const OnboardingInviteTeammates = ({ stepKey }: { stepKey: OnboardingStepKey }): JSX.Element => {
+    const { preflight } = useValues(preflightLogic)
+    const { product } = useValues(onboardingLogic)
+    const { inviteTeamMembers } = useActions(inviteLogic)
+
+    const titlePrefix = (): string => {
+        switch (product?.type) {
+            case ProductKey.PRODUCT_ANALYTICS:
+                return 'Analytics are'
+            case ProductKey.SESSION_REPLAY:
+                return 'Replays are'
+            case ProductKey.FEATURE_FLAGS:
+                return 'Feature flags are'
+            case ProductKey.SURVEYS:
+                return 'Surveys are'
+            default:
+                return 'PostHog is'
+        }
+    }
+
+    const likeTo = (): string => {
+        switch (product?.type) {
+            case ProductKey.PRODUCT_ANALYTICS:
+                return 'dig into the data'
+            case ProductKey.SESSION_REPLAY:
+                return 'see how people use your product'
+            case ProductKey.FEATURE_FLAGS:
+                return 'customize user experiences'
+            case ProductKey.SURVEYS:
+                return 'ask all the questions'
+            default:
+                return 'dig into the data'
+        }
+    }
+
+    return (
+        <OnboardingStep
+            title={`${titlePrefix()} better with friends.`}
+            stepKey={stepKey}
+            hedgehog={<PhonePairHogs height={120} width={288} />}
+            continueAction={() => preflight?.email_service_available && inviteTeamMembers()}
+        >
+            <div className="mb-6">
+                <p>
+                    ...or maybe even just coworkers. Ya know the ones who like to {likeTo()}?{' '}
+                    {preflight?.email_service_available && (
+                        <span>
+                            Enter their email below and we'll send them a custom invite link. Invites expire after 3
+                            days.
+                        </span>
+                    )}
+                </p>
+                {!preflight?.email_service_available && (
+                    <p>
+                        This PostHog instance isn't configured to send emails. In the meantime, enter your teammates'
+                        emails below to generate their custom invite links.{' '}
+                        <strong>You'll need to share the links with your project members manually</strong>. You can
+                        invite more people later.
+                    </p>
+                )}
+            </div>
+            <InviteTeamMatesComponent />
+        </OnboardingStep>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
index 2617df2f59132..c4972fee9cb09 100644
--- a/frontend/src/scenes/onboarding/OnboardingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -2,7 +2,9 @@ import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { PhonePairHogs } from 'lib/components/hedgehogs'
 import { IconArrowLeft, IconArrowRight } from 'lib/lemon-ui/icons'
+import React from 'react'
 import { urls } from 'scenes/urls'
 
 import { onboardingLogic, OnboardingStepKey } from './onboardingLogic'
@@ -17,6 +19,7 @@ export const OnboardingStep = ({
     continueAction,
     continueOverride,
     backActionOverride,
+    hedgehog,
 }: {
     stepKey: OnboardingStepKey
     title: string
@@ -27,9 +30,15 @@ export const OnboardingStep = ({
     continueAction?: () => void
     continueOverride?: JSX.Element
     backActionOverride?: () => void
+    hedgehog?: JSX.Element
 }): JSX.Element => {
     const { hasNextStep, hasPreviousStep } = useValues(onboardingLogic)
     const { completeOnboarding, goToNextStep, goToPreviousStep } = useActions(onboardingLogic)
+
+    const hedgehogToRender = React.cloneElement(hedgehog || <PhonePairHogs />, {
+        className: 'h-full w-full',
+    })
+
     if (!stepKey) {
         throw new Error('stepKey is required in any OnboardingStep')
     }
@@ -58,6 +67,8 @@ export const OnboardingStep = ({
             }
         >
             <div className="max-w-md">
+                {hedgehog && <div className="-mt-20 absolute right-4 h-16">{hedgehogToRender}</div>}
+
                 <h1 className="font-bold">{title}</h1>
                 <p>{subtitle}</p>
                 {children}
diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
index 4735a06277e40..2b37a54db2329 100644
--- a/frontend/src/scenes/onboarding/onboardingLogic.tsx
+++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -20,6 +20,7 @@ export enum OnboardingStepKey {
     OTHER_PRODUCTS = 'other_products',
     VERIFY = 'verify',
     PRODUCT_CONFIGURATION = 'configure',
+    INVITE_TEAMMATES = 'invite_teammates',
 }
 
 // These types have to be set like this, so that kea typegen is happy
diff --git a/frontend/src/scenes/onboarding/sdks/SDKs.tsx b/frontend/src/scenes/onboarding/sdks/SDKs.tsx
index 0627a11bac8ea..95a16ffe7c853 100644
--- a/frontend/src/scenes/onboarding/sdks/SDKs.tsx
+++ b/frontend/src/scenes/onboarding/sdks/SDKs.tsx
@@ -1,6 +1,7 @@
 import { IconArrowLeft } from '@posthog/icons'
 import { LemonButton, LemonCard, LemonDivider, LemonSelect } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { LaptopHog1 } from 'lib/components/hedgehogs'
 import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { useEffect } from 'react'
 import React from 'react'
@@ -47,6 +48,7 @@ export function SDKs({
             stepKey={stepKey}
             continueOverride={!showSideBySide && panel === 'options' ? <></> : undefined}
             backActionOverride={!showSideBySide && panel === 'instructions' ? () => setPanel('options') : undefined}
+            hedgehog={<LaptopHog1 />}
         >
             <LemonDivider className="my-8" />
             <div className="flex gap-x-8 mt-8">
diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
index c641a38c478a2..b0d73e786b74f 100644
--- a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
+++ b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
@@ -82,7 +82,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
             width: 150,
             render: function Render(_, featureFlag: RelatedFeatureFlag) {
                 return (
-                    <div style={{ wordBreak: 'break-word' }}>
+                    <div className="break-words">
                         {featureFlag.active && featureFlag.value
                             ? capitalizeFirstLetter(featureFlag.value.toString())
                             : 'False'}
@@ -101,7 +101,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                         {featureFlag.active ? <>{featureFlagMatchMapping[featureFlag.evaluation.reason]}</> : '--'}
 
                         {matchesSet && (
-                            <span className="simple-tag ml-2" style={{ background: 'var(--primary-highlight)' }}>
+                            <span className="simple-tag ml-2 bg-primary-highlight">
                                 Set {(featureFlag.evaluation.condition_index ?? 0) + 1}
                             </span>
                         )}
@@ -131,7 +131,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
 
     return (
         <>
-            <div className="flex justify-between mb-4">
+            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                 <LemonInput
                     type="search"
                     placeholder="Search for feature flags"
diff --git a/frontend/src/scenes/persons/person-utils.ts b/frontend/src/scenes/persons/person-utils.ts
index a91a1a08e029b..44c331e4a2768 100644
--- a/frontend/src/scenes/persons/person-utils.ts
+++ b/frontend/src/scenes/persons/person-utils.ts
@@ -56,7 +56,7 @@ export function asDisplay(person: PersonPropType | null | undefined, maxLength?:
             : undefined)
     )?.trim()
 
-    return display ? midEllipsis(display, maxLength || 40) : 'Person without ID'
+    return display ? midEllipsis(display, maxLength || 40) : 'Person without distinct_id'
 }
 
 export const asLink = (person?: PersonPropType | null): string | undefined =>
diff --git a/frontend/src/scenes/pipeline/Transformations.tsx b/frontend/src/scenes/pipeline/Transformations.tsx
index f5649c27ea781..ccf1c0b7ae7d6 100644
--- a/frontend/src/scenes/pipeline/Transformations.tsx
+++ b/frontend/src/scenes/pipeline/Transformations.tsx
@@ -365,6 +365,7 @@ const MinimalAppView = ({ pluginConfig, order }: { pluginConfig: PluginConfigTyp
         <div
             ref={setNodeRef}
             className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 transform: CSS.Transform.toString(transform),
diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
index da45be1bfb44a..1f7a7ada109b8 100644
--- a/frontend/src/scenes/saved-insights/SavedInsights.tsx
+++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -555,7 +555,7 @@ export function SavedInsights(): JSX.Element {
                 <>
                     <SavedInsightsFilters />
                     <LemonDivider className="my-4" />
-                    <div className="flex justify-between mb-4 mt-2 items-center">
+                    <div className="flex justify-between mb-4 gap-2 flex-wrap mt-2 items-center">
                         <span className="text-muted-alt">
                             {count
                                 ? `${startCount}${endCount - startCount > 1 ? '-' + endCount : ''} of ${count} insight${
diff --git a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts b/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts
index 8126bf6a97c35..652053e746dda 100644
--- a/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts
+++ b/frontend/src/scenes/session-recordings/file-playback/sessionRecordingFilePlaybackLogic.ts
@@ -3,7 +3,9 @@ import { eventWithTime } from '@rrweb/types'
 import { BuiltLogic, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { beforeUnload } from 'kea-router'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { uuid } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { Scene } from 'scenes/sceneTypes'
@@ -11,7 +13,11 @@ import { urls } from 'scenes/urls'
 
 import { Breadcrumb, PersonType, RecordingSnapshot, ReplayTabs, SessionRecordingType } from '~/types'
 
-import { prepareRecordingSnapshots, sessionRecordingDataLogic } from '../player/sessionRecordingDataLogic'
+import {
+    parseEncodedSnapshots,
+    prepareRecordingSnapshots,
+    sessionRecordingDataLogic,
+} from '../player/sessionRecordingDataLogic'
 import type { sessionRecordingDataLogicType } from '../player/sessionRecordingDataLogicType'
 import type { sessionRecordingFilePlaybackLogicType } from './sessionRecordingFilePlaybackLogicType'
 
@@ -33,7 +39,9 @@ export type ExportedSessionRecordingFileV2 = {
 }
 
 export const createExportedSessionRecording = (
-    logic: BuiltLogic<sessionRecordingDataLogicType>
+    logic: BuiltLogic<sessionRecordingDataLogicType>,
+    // DEBUG signal only, to be removed before release
+    exportUntransformedMobileSnapshotData: boolean
 ): ExportedSessionRecordingFileV2 => {
     const { sessionPlayerMetaData, sessionPlayerSnapshotData } = logic.values
 
@@ -42,7 +50,9 @@ export const createExportedSessionRecording = (
         data: {
             id: sessionPlayerMetaData?.id ?? '',
             person: sessionPlayerMetaData?.person,
-            snapshots: sessionPlayerSnapshotData?.snapshots || [],
+            snapshots: exportUntransformedMobileSnapshotData
+                ? sessionPlayerSnapshotData?.untransformed_snapshots || []
+                : sessionPlayerSnapshotData?.snapshots || [],
         },
     }
 }
@@ -115,6 +125,7 @@ export const sessionRecordingFilePlaybackLogic = kea<sessionRecordingFilePlaybac
     path(['scenes', 'session-recordings', 'detail', 'sessionRecordingDetailLogic']),
     connect({
         actions: [eventUsageLogic, ['reportRecordingLoadedFromFile']],
+        values: [featureFlagLogic, ['featureFlags']],
     }),
 
     loaders(({ actions }) => ({
@@ -166,7 +177,13 @@ export const sessionRecordingFilePlaybackLogic = kea<sessionRecordingFilePlaybac
                 return
             }
 
-            const snapshots = prepareRecordingSnapshots(values.sessionRecording.snapshots)
+            const snapshots = prepareRecordingSnapshots(
+                await parseEncodedSnapshots(
+                    values.sessionRecording.snapshots,
+                    values.sessionRecording.id,
+                    !!values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
+                )
+            )
 
             dataLogic.actions.loadRecordingSnapshotsSuccess({
                 snapshots,
diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
index 465fe05a39377..c0bb442cde79f 100644
--- a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
+++ b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -1,5 +1,7 @@
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { IconExport, IconFullScreen, IconMagnifier, IconPause, IconPlay, IconSkipInactivity } from 'lib/lemon-ui/icons'
 import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
@@ -126,6 +128,18 @@ export function PlayerController(): JSX.Element {
                                         Export to file
                                     </LemonButton>
 
+                                    <FlaggedFeature flag={FEATURE_FLAGS.SESSION_REPLAY_EXPORT_MOBILE_DATA} match={true}>
+                                        <LemonButton
+                                            status="stealth"
+                                            onClick={() => exportRecordingToFile(true)}
+                                            fullWidth
+                                            sideIcon={<IconExport />}
+                                            tooltip="DEBUG ONLY - Export untransformed recording to a file. This can be loaded later into PostHog for playback."
+                                        >
+                                            DEBUG Export mobile replay to file DEBUG
+                                        </LemonButton>
+                                    </FlaggedFeature>
+
                                     <LemonButton
                                         status="stealth"
                                         onClick={() => openExplorer()}
diff --git a/frontend/src/scenes/session-recordings/player/icons.tsx b/frontend/src/scenes/session-recordings/player/icons.tsx
index fa8a79d631150..14d5f6c6164d4 100644
--- a/frontend/src/scenes/session-recordings/player/icons.tsx
+++ b/frontend/src/scenes/session-recordings/player/icons.tsx
@@ -10,6 +10,7 @@ export function IconWindowOld({ value, className = '', size = 'medium' }: IconWi
     const shortValue = typeof value === 'number' ? value : String(value).charAt(0)
     return (
         <div className={clsx('flex justify-center items-center relative shrink-0', className)}>
+            {/* eslint-disable-next-line react/forbid-dom-props */}
             <span className="absolute font-semibold mt-0.5" style={{ fontSize: size === 'medium' ? 8 : 6 }}>
                 {shortValue}
             </span>
diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
index 0f6b87d473200..b66cb79125742 100644
--- a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -6,7 +6,7 @@ import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { Dayjs, dayjs } from 'lib/dayjs'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { featureFlagLogic, FeatureFlagsSet } from 'lib/logic/featureFlagLogic'
 import { toParams } from 'lib/utils'
 import { chainToElements } from 'lib/utils/elements-chain'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
@@ -41,8 +41,12 @@ const BUFFER_MS = 60000 // +- before and after start and end of a recording to q
 
 let postHogEEModule: PostHogEE
 
-const parseEncodedSnapshots = async (
-    items: (EncodedRecordingSnapshot | string)[],
+function isRecordingSnapshot(x: unknown): x is RecordingSnapshot {
+    return typeof x === 'object' && x !== null && 'type' in x && 'timestamp' in x
+}
+
+export const parseEncodedSnapshots = async (
+    items: (RecordingSnapshot | EncodedRecordingSnapshot | string)[],
     sessionId: string,
     withMobileTransformer: boolean
 ): Promise<RecordingSnapshot[]> => {
@@ -50,15 +54,24 @@ const parseEncodedSnapshots = async (
         postHogEEModule = await posthogEE()
     }
     return items.flatMap((l) => {
+        if (!l) {
+            // blob files have an empty line at the end
+            return []
+        }
         try {
             const snapshotLine = typeof l === 'string' ? (JSON.parse(l) as EncodedRecordingSnapshot) : l
-            const snapshotData = snapshotLine['data']
+            const snapshotData = isRecordingSnapshot(snapshotLine) ? [snapshotLine] : snapshotLine['data']
 
-            // TODO can we type this better and still have mobileEventWithTime in ee folder?
             return snapshotData.map((d: unknown) => {
-                const snap = postHogEEModule?.mobileReplay?.transformEventToWeb(d) || (d as eventWithTime)
+                const snap = withMobileTransformer
+                    ? postHogEEModule?.mobileReplay?.transformEventToWeb(d) || (d as eventWithTime)
+                    : (d as eventWithTime)
                 return {
-                    windowId: snapshotLine['window_id'],
+                    // this handles parsing data that was loaded from blob storage "window_id"
+                    // and data that was exported from the front-end "windowId"
+                    // we have more than one format of data that we store/pass around
+                    // but only one that we play back
+                    windowId: snapshotLine['window_id'] || snapshotLine['windowId'],
                     ...(snap || (d as eventWithTime)),
                 }
             })
@@ -164,6 +177,37 @@ function makeEventsQuery(
     })
 }
 
+async function processEncodedResponse(
+    encodedResponse: (EncodedRecordingSnapshot | string)[],
+    props: SessionRecordingDataLogicProps,
+    existingData: SessionPlayerSnapshotData | null,
+    featureFlags: FeatureFlagsSet
+): Promise<{ transformed: RecordingSnapshot[]; untransformed: RecordingSnapshot[] | null }> {
+    let untransformed: RecordingSnapshot[] | null = null
+
+    const transformed = prepareRecordingSnapshots(
+        await parseEncodedSnapshots(
+            encodedResponse,
+            props.sessionRecordingId,
+            !!featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
+        ),
+        existingData?.snapshots ?? []
+    )
+
+    if (featureFlags[FEATURE_FLAGS.SESSION_REPLAY_EXPORT_MOBILE_DATA]) {
+        untransformed = prepareRecordingSnapshots(
+            await parseEncodedSnapshots(
+                encodedResponse,
+                props.sessionRecordingId,
+                false // don't transform mobile data
+            ),
+            existingData?.untransformed_snapshots ?? []
+        )
+    }
+
+    return { transformed, untransformed }
+}
+
 export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
     path((key) => ['scenes', 'session-recordings', 'sessionRecordingDataLogic', key]),
     props({} as SessionRecordingDataLogicProps),
@@ -345,14 +389,14 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                             source.blob_key
                         )
 
-                        data.snapshots = prepareRecordingSnapshots(
-                            await parseEncodedSnapshots(
-                                encodedResponse,
-                                props.sessionRecordingId,
-                                !!values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
-                            ),
-                            values.sessionPlayerSnapshotData?.snapshots ?? []
+                        const { transformed, untransformed } = await processEncodedResponse(
+                            encodedResponse,
+                            props,
+                            values.sessionPlayerSnapshotData,
+                            values.featureFlags
                         )
+                        data.snapshots = transformed
+                        data.untransformed_snapshots = untransformed ?? undefined
                     } else {
                         const params = toParams({
                             source: source?.source,
@@ -361,14 +405,14 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                         })
                         const response = await api.recordings.listSnapshots(props.sessionRecordingId, params)
                         if (response.snapshots) {
-                            data.snapshots = prepareRecordingSnapshots(
-                                await parseEncodedSnapshots(
-                                    response.snapshots,
-                                    props.sessionRecordingId,
-                                    !!values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
-                                ),
-                                values.sessionPlayerSnapshotData?.snapshots ?? []
+                            const { transformed, untransformed } = await processEncodedResponse(
+                                response.snapshots,
+                                props,
+                                values.sessionPlayerSnapshotData,
+                                values.featureFlags
                             )
+                            data.snapshots = transformed
+                            data.untransformed_snapshots = untransformed ?? undefined
                         }
 
                         if (response.sources) {
diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
index 5d865c9dda4c8..fcbadb8f175ac 100644
--- a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts
@@ -170,7 +170,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
         incrementErrorCount: true,
         incrementWarningCount: (count: number = 1) => ({ count }),
         updateFromMetadata: true,
-        exportRecordingToFile: true,
+        exportRecordingToFile: (exportUntransformedMobileData?: boolean) => ({ exportUntransformedMobileData }),
         deleteRecording: true,
         openExplorer: true,
         closeExplorer: true,
@@ -881,7 +881,7 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
             cache.pausedMediaElements = []
         },
 
-        exportRecordingToFile: async () => {
+        exportRecordingToFile: async ({ exportUntransformedMobileData }) => {
             if (!values.sessionPlayerData) {
                 return
             }
@@ -906,11 +906,16 @@ export const sessionRecordingPlayerLogic = kea<sessionRecordingPlayerLogicType>(
                     await delay(delayTime)
                 }
 
-                const payload = createExportedSessionRecording(sessionRecordingDataLogic(props))
+                const payload = createExportedSessionRecording(
+                    sessionRecordingDataLogic(props),
+                    !!exportUntransformedMobileData
+                )
 
                 const recordingFile = new File(
                     [JSON.stringify(payload, null, 2)],
-                    `export-${props.sessionRecordingId}.ph-recording.json`,
+                    `export-${props.sessionRecordingId}.${
+                        exportUntransformedMobileData ? 'mobile.' : ''
+                    }ph-recording.json`,
                     { type: 'application/json' }
                 )
 
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
index 7c74657f483ba..b98688c75dc2c 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
@@ -6,6 +6,7 @@ import { IconAutocapture, IconKeyboard, IconPinFilled, IconSchedule } from 'lib/
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { colonDelimitedDuration } from 'lib/utils'
+import { Fragment } from 'react'
 import { DraggableToNotebook } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 import { asDisplay } from 'scenes/persons/person-utils'
 import { playerSettingsLogic } from 'scenes/session-recordings/player/playerSettingsLogic'
@@ -119,9 +120,8 @@ export function PropertyIcons({
             ) : (
                 recordingProperties.map(({ property, value, tooltipValue, label }) => {
                     return (
-                        <>
+                        <Fragment key={property}>
                             <PropertyIcon
-                                key={property}
                                 onClick={(e) => {
                                     if (e.altKey) {
                                         e.stopPropagation()
@@ -141,7 +141,7 @@ export function PropertyIcons({
                                 )}
                             />
                             {showLabel?.(property) && <span className="text-xs text-muted-alt">{label || value}</span>}
-                        </>
+                        </Fragment>
                     )
                 })
             )}
diff --git a/frontend/src/scenes/settings/SettingsMap.tsx b/frontend/src/scenes/settings/SettingsMap.tsx
index e64b368496d5a..f34a3ccab77e5 100644
--- a/frontend/src/scenes/settings/SettingsMap.tsx
+++ b/frontend/src/scenes/settings/SettingsMap.tsx
@@ -101,7 +101,7 @@ export const SettingsMap: SettingSection[] = [
             },
             {
                 id: 'internal-user-filtering',
-                title: 'Filter our internal and test users',
+                title: 'Filter out internal and test users',
                 component: <ProjectAccountFiltersSetting />,
             },
             {
diff --git a/frontend/src/scenes/settings/organization/InviteModal.tsx b/frontend/src/scenes/settings/organization/InviteModal.tsx
index d0c719a294d5d..7565bd941e03b 100644
--- a/frontend/src/scenes/settings/organization/InviteModal.tsx
+++ b/frontend/src/scenes/settings/organization/InviteModal.tsx
@@ -20,7 +20,7 @@ import { inviteLogic } from './inviteLogic'
 const PLACEHOLDER_NAMES: string[] = [...Array(10).fill('Jane'), ...Array(10).fill('John'), 'Sonic'].sort(
     () => Math.random() - 0.5
 )
-const MAX_INVITES_AT_ONCE = 20
+export const MAX_INVITES_AT_ONCE = 20
 
 export function EmailUnavailableMessage(): JSX.Element {
     return (
@@ -37,7 +37,7 @@ export function EmailUnavailableMessage(): JSX.Element {
     )
 }
 
-function InviteRow({ index, isDeletable }: { index: number; isDeletable: boolean }): JSX.Element {
+export function InviteRow({ index, isDeletable }: { index: number; isDeletable: boolean }): JSX.Element {
     const name = PLACEHOLDER_NAMES[index % PLACEHOLDER_NAMES.length]
 
     const { invitesToSend } = useValues(inviteLogic)
@@ -105,15 +105,122 @@ function InviteRow({ index, isDeletable }: { index: number; isDeletable: boolean
     )
 }
 
-export function InviteModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }): JSX.Element {
-    const { user } = useValues(userLogic)
+export function InviteTeamMatesComponent(): JSX.Element {
     const { preflight } = useValues(preflightLogic)
-    const { invitesToSend, canSubmit, invites } = useValues(inviteLogic)
-    const { appendInviteRow, resetInviteRows, inviteTeamMembers, deleteInvite, updateMessage } = useActions(inviteLogic)
+    const { invitesToSend, invites } = useValues(inviteLogic)
+    const { appendInviteRow, deleteInvite, updateMessage } = useActions(inviteLogic)
 
     const invitesReversed = invites.slice().reverse()
     const areInvitesCreatable = invitesToSend.length + 1 < MAX_INVITES_AT_ONCE
     const areInvitesDeletable = invitesToSend.length > 1
+
+    return (
+        <>
+            {preflight?.licensed_users_available === 0 && (
+                <LemonBanner type="warning">
+                    You've hit the limit of team members you can invite to your PostHog instance given your license.
+                    Please contact <Link to="mailto:sales@posthog.com">sales@posthog.com</Link> to upgrade your license.
+                </LemonBanner>
+            )}
+            <div className="space-y-2">
+                <div className="flex gap-2">
+                    <b className="flex-1">Email address</b>
+                    <b className="flex-1">{preflight?.email_service_available ? 'Name (optional)' : 'Invite link'}</b>
+                </div>
+
+                {invitesReversed.map((invite: OrganizationInviteType) => {
+                    return (
+                        <div className="flex gap-2 items-start" key={invite.id}>
+                            <div className="flex-1">
+                                <div className="flex-1 rounded border p-2">{invite.target_email} </div>
+                            </div>
+
+                            <div className="flex-1 flex gap-2 overflow-hidden">
+                                {invite.is_expired ? (
+                                    <b>Expired – please recreate</b>
+                                ) : (
+                                    <>
+                                        {preflight?.email_service_available ? (
+                                            <div className="flex-1 border rounded p-2"> {invite.first_name} </div>
+                                        ) : (
+                                            <CopyToClipboardInline
+                                                data-attr="invite-link"
+                                                explicitValue={new URL(`/signup/${invite.id}`, document.baseURI).href}
+                                                description="invite link"
+                                                style={{
+                                                    color: 'var(--primary)',
+                                                    background: 'var(--side)',
+                                                    borderRadius: 4,
+                                                    padding: '0.5rem',
+                                                }}
+                                            >
+                                                <div className="InviteModal__share_link">
+                                                    {new URL(`/signup/${invite.id}`, document.baseURI).href}
+                                                </div>
+                                            </CopyToClipboardInline>
+                                        )}
+                                    </>
+                                )}
+                                <LemonButton
+                                    title="Cancel the invite"
+                                    data-attr="invite-delete"
+                                    icon={<IconDelete />}
+                                    status="danger"
+                                    onClick={() => {
+                                        invite.is_expired
+                                            ? deleteInvite(invite)
+                                            : LemonDialog.open({
+                                                  title: `Do you want to cancel the invite for ${invite.target_email}?`,
+                                                  primaryButton: {
+                                                      children: 'Yes, cancel invite',
+                                                      status: 'danger',
+                                                      onClick: () => deleteInvite(invite),
+                                                  },
+                                                  secondaryButton: {
+                                                      children: 'No, keep invite',
+                                                  },
+                                              })
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )
+                })}
+
+                {invitesToSend.map((_, index) => (
+                    <InviteRow index={index} key={index.toString()} isDeletable={areInvitesDeletable} />
+                ))}
+
+                <div className="mt-2">
+                    {areInvitesCreatable && (
+                        <LemonButton type="secondary" icon={<IconPlus />} onClick={appendInviteRow} fullWidth center>
+                            Add email address
+                        </LemonButton>
+                    )}
+                </div>
+            </div>
+            {preflight?.email_service_available && (
+                <div className="mt-4">
+                    <div className="mb-2">
+                        <b>Message (optional)</b>
+                    </div>
+                    <LemonTextArea
+                        data-attr="invite-optional-message"
+                        placeholder="Tell your teammates why you're inviting them to PostHog"
+                        onChange={(e) => updateMessage(e)}
+                    />
+                </div>
+            )}
+        </>
+    )
+}
+
+export function InviteModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }): JSX.Element {
+    const { user } = useValues(userLogic)
+    const { preflight } = useValues(preflightLogic)
+    const { invitesToSend, canSubmit } = useValues(inviteLogic)
+    const { resetInviteRows, inviteTeamMembers } = useActions(inviteLogic)
+
     const validInvitesCount = invitesToSend.filter((invite) => invite.isValid && invite.target_email).length
 
     return (
@@ -173,112 +280,7 @@ export function InviteModal({ isOpen, onClose }: { isOpen: boolean; onClose: ()
                     </>
                 }
             >
-                {preflight?.licensed_users_available === 0 && (
-                    <LemonBanner type="warning">
-                        You've hit the limit of team members you can invite to your PostHog instance given your license.
-                        Please contact <Link to="mailto:sales@posthog.com">sales@posthog.com</Link> to upgrade your
-                        license.
-                    </LemonBanner>
-                )}
-                <div className="space-y-2">
-                    <div className="flex gap-2">
-                        <b className="flex-1">Email address</b>
-                        <b className="flex-1">
-                            {preflight?.email_service_available ? 'Name (optional)' : 'Invite link'}
-                        </b>
-                    </div>
-
-                    {invitesReversed.map((invite: OrganizationInviteType) => {
-                        return (
-                            <div className="flex gap-2 items-start" key={invite.id}>
-                                <div className="flex-1">
-                                    <div className="flex-1 rounded border p-2">{invite.target_email} </div>
-                                </div>
-
-                                <div className="flex-1 flex gap-2 overflow-hidden">
-                                    {invite.is_expired ? (
-                                        <b>Expired – please recreate</b>
-                                    ) : (
-                                        <>
-                                            {preflight?.email_service_available ? (
-                                                <div className="flex-1 border rounded p-2"> {invite.first_name} </div>
-                                            ) : (
-                                                <CopyToClipboardInline
-                                                    data-attr="invite-link"
-                                                    explicitValue={
-                                                        new URL(`/signup/${invite.id}`, document.baseURI).href
-                                                    }
-                                                    description="invite link"
-                                                    style={{
-                                                        color: 'var(--primary)',
-                                                        background: 'var(--side)',
-                                                        borderRadius: 4,
-                                                        padding: '0.5rem',
-                                                    }}
-                                                >
-                                                    <div className="InviteModal__share_link">
-                                                        {new URL(`/signup/${invite.id}`, document.baseURI).href}
-                                                    </div>
-                                                </CopyToClipboardInline>
-                                            )}
-                                        </>
-                                    )}
-                                    <LemonButton
-                                        title="Cancel the invite"
-                                        data-attr="invite-delete"
-                                        icon={<IconDelete />}
-                                        status="danger"
-                                        onClick={() => {
-                                            invite.is_expired
-                                                ? deleteInvite(invite)
-                                                : LemonDialog.open({
-                                                      title: `Do you want to cancel the invite for ${invite.target_email}?`,
-                                                      primaryButton: {
-                                                          children: 'Yes, cancel invite',
-                                                          status: 'danger',
-                                                          onClick: () => deleteInvite(invite),
-                                                      },
-                                                      secondaryButton: {
-                                                          children: 'No, keep invite',
-                                                      },
-                                                  })
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                        )
-                    })}
-
-                    {invitesToSend.map((_, index) => (
-                        <InviteRow index={index} key={index.toString()} isDeletable={areInvitesDeletable} />
-                    ))}
-
-                    <div className="mt-2">
-                        {areInvitesCreatable && (
-                            <LemonButton
-                                type="secondary"
-                                icon={<IconPlus />}
-                                onClick={appendInviteRow}
-                                fullWidth
-                                center
-                            >
-                                Add email address
-                            </LemonButton>
-                        )}
-                    </div>
-                </div>
-                {preflight?.email_service_available && (
-                    <div className="mt-4">
-                        <div className="mb-2">
-                            <b>Message (optional)</b>
-                        </div>
-                        <LemonTextArea
-                            data-attr="invite-optional-message"
-                            placeholder="Tell your teammates why you're inviting them to PostHog"
-                            onChange={(e) => updateMessage(e)}
-                        />
-                    </div>
-                )}
+                <InviteTeamMatesComponent />
             </LemonModal>
         </div>
     )
diff --git a/frontend/src/scenes/settings/organization/Permissions/Roles/CreateRoleModal.tsx b/frontend/src/scenes/settings/organization/Permissions/Roles/CreateRoleModal.tsx
index a0b97bb94302b..3311cc1833117 100644
--- a/frontend/src/scenes/settings/organization/Permissions/Roles/CreateRoleModal.tsx
+++ b/frontend/src/scenes/settings/organization/Permissions/Roles/CreateRoleModal.tsx
@@ -120,12 +120,7 @@ export function CreateRoleModal(): JSX.Element {
                 <>
                     <h5>Role Members</h5>
                     {roleMembersInFocus.length > 0 ? (
-                        <div
-                            className="mt-2 pb-2 rounded overflow-y-auto"
-                            style={{
-                                maxHeight: 300,
-                            }}
-                        >
+                        <div className="mt-2 pb-2 rounded overflow-y-auto max-h-80">
                             {roleMembersInFocus.map((member) => {
                                 return (
                                     <MemberRow
diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/SSOSelect.stories.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/SSOSelect.stories.tsx
index 4b668f60c47a0..c1a74dbf37fb5 100644
--- a/frontend/src/scenes/settings/organization/VerifiedDomains/SSOSelect.stories.tsx
+++ b/frontend/src/scenes/settings/organization/VerifiedDomains/SSOSelect.stories.tsx
@@ -32,7 +32,7 @@ const Template: StoryFn<typeof SSOSelect> = (args) => {
         },
     })
     return (
-        <div style={{ maxWidth: 600 }}>
+        <div className="max-h-140">
             <SSOSelect {...args} value={value} onChange={(val) => setValue(val)} />
         </div>
     )
diff --git a/frontend/src/scenes/settings/project/ProjectSettings.tsx b/frontend/src/scenes/settings/project/ProjectSettings.tsx
index 9bb788431fa31..77ace6cdb4675 100644
--- a/frontend/src/scenes/settings/project/ProjectSettings.tsx
+++ b/frontend/src/scenes/settings/project/ProjectSettings.tsx
@@ -29,7 +29,7 @@ export function ProjectDisplayName(): JSX.Element {
     }
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={name} onChange={setName} disabled={currentTeamLoading} />
             <LemonButton
                 type="primary"
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index 03db58da54852..c04148201e062 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -83,6 +83,7 @@ const Button = ({
                 link && type === SurveyQuestionType.Link ? window.open(link) : null
                 onSubmit()
             }}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{ color: textColor, backgroundColor: appearance.submitButtonColor }}
             {...other}
         >
@@ -298,6 +299,7 @@ export function BaseAppearance({
         <form
             ref={ref}
             className={`survey-form ${isWidgetSurvey ? 'widget-survey' : ''}`}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 backgroundColor: appearance.backgroundColor,
                 border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
@@ -307,6 +309,7 @@ export function BaseAppearance({
             <div className="survey-box">
                 {!preview && (
                     <div
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{
                             border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                         }}
@@ -334,6 +337,7 @@ export function BaseAppearance({
                     {question.type === SurveyQuestionType.Open && (
                         <textarea
                             {...(preview ? { tabIndex: -1 } : null)}
+                            // eslint-disable-next-line react/forbid-dom-props
                             style={{
                                 border: `1px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                             }}
@@ -399,6 +403,7 @@ const RatingButton = ({
             className="ratings-number"
             type="button"
             onClick={() => setActiveNumber(num)}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 color: textColor,
                 backgroundColor: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor,
@@ -424,6 +429,7 @@ const NumberRating = ({
     const totalNumbers = ratingSurveyQuestion.scale === 10 ? 11 : ratingSurveyQuestion.scale
     return (
         <div
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                 gridTemplateColumns: `repeat(${totalNumbers}, minmax(0, 1fr))`,
@@ -472,6 +478,7 @@ const EmojiRating = ({
                         className="ratings-emoji"
                         type="button"
                         key={idx}
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{ fill: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor }}
                         onClick={() => setActiveIndex(idx)}
                     >
@@ -510,6 +517,7 @@ export function SurveyRatingAppearance({
         <form
             ref={ref}
             className={`survey-form ${isWidgetSurvey ? 'widget-survey' : ''}`}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 backgroundColor: appearance.backgroundColor,
                 border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
@@ -519,6 +527,7 @@ export function SurveyRatingAppearance({
             <div className="survey-box">
                 {!preview && (
                     <div
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{
                             border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                         }}
@@ -672,6 +681,7 @@ export function SurveyMultipleChoiceAppearance({
         <form
             ref={ref}
             className={`survey-form ${isWidgetSurvey ? 'widget-survey' : ''}`}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 backgroundColor: appearance.backgroundColor,
                 border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
@@ -681,6 +691,7 @@ export function SurveyMultipleChoiceAppearance({
             <div className="survey-box">
                 {!preview && (
                     <div
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{
                             border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
                         }}
@@ -759,6 +770,7 @@ export function SurveyThankYou({ appearance }: { appearance: SurveyAppearanceTyp
         <div
             ref={ref}
             className="thank-you-message"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 backgroundColor: appearance.backgroundColor,
                 border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
@@ -767,6 +779,7 @@ export function SurveyThankYou({ appearance }: { appearance: SurveyAppearanceTyp
         >
             <div className="thank-you-message-container">
                 <div
+                    // eslint-disable-next-line react/forbid-dom-props
                     style={{ border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}` }}
                     className="cancel-btn-wrapper"
                 >
@@ -832,6 +845,7 @@ export function SurveyWidgetAppearance({
         <>
             <div
                 className="ph-survey-widget-tab auto-text-color"
+                // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     backgroundColor: appearance.widgetColor || '#e0a045',
                     color: textColor,
diff --git a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
index c15e880bf1d42..36ab91e0ed681 100644
--- a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
@@ -57,6 +57,7 @@ export const posthogLogoSVG = (
         <g clipPath="url(#clip0_2415_6911)">
             <mask
                 id="mask0_2415_6911"
+                // eslint-disable-next-line react/forbid-dom-props
                 style={{ maskType: 'luminance' }}
                 maskUnits="userSpaceOnUse"
                 x="0"
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index 18f2548393b8c..9634386914767 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -94,6 +94,7 @@ export default function SurveyEdit(): JSX.Element {
                                                     value={SurveyType.Popover}
                                                 >
                                                     <div
+                                                        // eslint-disable-next-line react/forbid-dom-props
                                                         style={{
                                                             transform: 'scale(.8)',
                                                             position: 'absolute',
@@ -121,7 +122,11 @@ export default function SurveyEdit(): JSX.Element {
                                                     description="Use the PostHog API to show/hide your survey programmatically"
                                                     value={SurveyType.API}
                                                 >
-                                                    <div className="absolute left-4" style={{ width: 350 }}>
+                                                    <div
+                                                        className="absolute left-4"
+                                                        // eslint-disable-next-line react/forbid-dom-props
+                                                        style={{ width: 350 }}
+                                                    >
                                                         <SurveyAPIEditor survey={survey} />
                                                     </div>
                                                 </PresentationTypeCard>
diff --git a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
index f6b87eecd20c0..ba218b39df190 100644
--- a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
+++ b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
@@ -48,6 +48,7 @@ export function SurveyEditQuestionHeader({
             className="flex flex-row w-full items-center justify-between"
             ref={setNodeRef}
             {...attributes}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 zIndex: isDragging ? 1 : undefined,
diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx
index d295dcfdc5114..52b79940c00b8 100644
--- a/frontend/src/scenes/surveys/Surveys.tsx
+++ b/frontend/src/scenes/surveys/Surveys.tsx
@@ -154,7 +154,7 @@ export function Surveys(): JSX.Element {
                 {!shouldShowEmptyState && (
                     <>
                         <div>
-                            <div className="flex justify-between mb-4">
+                            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                                 <LemonInput
                                     type="search"
                                     placeholder="Search for surveys"
diff --git a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
index 4b7db367d18d0..bce7f2176b9db 100644
--- a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
+++ b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
@@ -34,7 +34,7 @@ import {
     SessionRecordingType,
 } from '~/types'
 
-import { personsModalLogic, wrapInsightsPersonsQuery } from './personsModalLogic'
+import { personsModalLogic } from './personsModalLogic'
 import { SaveCohortModal } from './SaveCohortModal'
 
 export interface PersonsModalProps extends Pick<LemonModalProps, 'inline'> {
@@ -76,6 +76,8 @@ export function PersonsModal({
         isModalOpen,
         missingActorsCount,
         propertiesTimelineFilterFromUrl,
+        exploreUrl,
+        personsQuery,
     } = useValues(logic)
     const { setSearchTerm, saveAsCohort, setIsCohortModalOpen, closeModal, loadNextActors } = useActions(logic)
     const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
@@ -181,36 +183,47 @@ export function PersonsModal({
                     </div>
                 </div>
                 <LemonModal.Footer>
-                    <div className="flex-1">
-                        <LemonButton
-                            type="secondary"
-                            onClick={() => {
-                                void triggerExport({
-                                    export_format: ExporterFormat.CSV,
-                                    export_context: query
-                                        ? { source: wrapInsightsPersonsQuery(query) as Record<string, any> }
-                                        : { path: originalUrl },
-                                })
-                            }}
-                            data-attr="person-modal-download-csv"
-                            disabled={!actors.length}
-                        >
-                            Download CSV
-                        </LemonButton>
+                    <div className="flex justify-between gap-2 w-full">
+                        <div className="flex gap-2">
+                            <LemonButton
+                                type="secondary"
+                                onClick={() => {
+                                    void triggerExport({
+                                        export_format: ExporterFormat.CSV,
+                                        export_context: query
+                                            ? { source: personsQuery as Record<string, any> }
+                                            : { path: originalUrl },
+                                    })
+                                }}
+                                data-attr="person-modal-download-csv"
+                                disabled={!actors.length}
+                            >
+                                Download CSV
+                            </LemonButton>
+                            {actors && actors.length > 0 && !isGroupType(actors[0]) && (
+                                <LemonButton
+                                    onClick={() => setIsCohortModalOpen(true)}
+                                    type="secondary"
+                                    data-attr="person-modal-save-as-cohort"
+                                    disabled={!actors.length}
+                                >
+                                    Save as cohort
+                                </LemonButton>
+                            )}
+                        </div>
+                        {exploreUrl && (
+                            <LemonButton
+                                type="primary"
+                                to={exploreUrl}
+                                data-attr="person-modal-new-insight"
+                                onClick={() => {
+                                    closeModal()
+                                }}
+                            >
+                                Explore
+                            </LemonButton>
+                        )}
                     </div>
-                    <LemonButton type="secondary" onClick={closeModal}>
-                        Close
-                    </LemonButton>
-                    {actors && actors.length > 0 && !isGroupType(actors[0]) && (
-                        <LemonButton
-                            onClick={() => setIsCohortModalOpen(true)}
-                            type="primary"
-                            data-attr="person-modal-save-as-cohort"
-                            disabled={!actors.length}
-                        >
-                            Save as cohort
-                        </LemonButton>
-                    )}
                 </LemonModal.Footer>
             </LemonModal>
             <SaveCohortModal
diff --git a/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts b/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
index 9a45b2806ec7a..c7358c996a2b7 100644
--- a/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
+++ b/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
@@ -11,7 +11,7 @@ import { urls } from 'scenes/urls'
 import { cohortsModel } from '~/models/cohortsModel'
 import { groupsModel } from '~/models/groupsModel'
 import { query as performQuery } from '~/queries/query'
-import { InsightPersonsQuery, NodeKind, PersonsQuery } from '~/queries/schema'
+import { DataTableNode, InsightPersonsQuery, NodeKind, PersonsQuery } from '~/queries/schema'
 import {
     ActorType,
     BreakdownType,
@@ -40,23 +40,6 @@ export interface ListActorsResponse {
     next_offset?: number
 }
 
-export function wrapInsightsPersonsQuery(
-    query: InsightPersonsQuery,
-    search?: string,
-    limit = RESULTS_PER_PAGE,
-    offset = 0
-): PersonsQuery {
-    return {
-        kind: NodeKind.PersonsQuery,
-        source: query,
-        select: ['person', 'groupArray(3)(pdi.distinct_id)'],
-        orderBy: ['created_at DESC'],
-        search,
-        limit,
-        offset,
-    }
-}
-
 export const personsModalLogic = kea<personsModalLogicType>([
     path(['scenes', 'trends', 'personsModalLogic']),
     props({} as PersonModalLogicProps),
@@ -71,12 +54,12 @@ export const personsModalLogic = kea<personsModalLogicType>([
             query,
             clear,
             offset,
-        }): {
+        }: {
             url?: string | null
             query?: InsightPersonsQuery | null
             clear?: boolean
             offset?: number
-        } => ({
+        }) => ({
             url,
             query,
             clear,
@@ -108,13 +91,11 @@ export const personsModalLogic = kea<personsModalLogicType>([
                         }
                         return res
                     } else if (query) {
-                        const personsQuery = wrapInsightsPersonsQuery(
-                            query,
-                            values.searchTerm,
-                            RESULTS_PER_PAGE + 1,
-                            offset || 0
-                        )
-                        const response = await performQuery(personsQuery)
+                        const response = await performQuery({
+                            ...values.personsQuery,
+                            limit: RESULTS_PER_PAGE + 1,
+                            offset: offset || 0,
+                        } as PersonsQuery)
                         const newResponse: ListActorsResponse = {
                             results: [
                                 {
@@ -124,7 +105,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
                                             type: 'person',
                                             id: result[0].id,
                                             uuid: result[0].id,
-                                            distinct_ids: result[1],
+                                            distinct_ids: result[0].distinct_ids,
                                             is_identified: result[0].is_identified,
                                             properties: result[0].properties,
                                             created_at: result[0].created_at,
@@ -199,13 +180,8 @@ export const personsModalLogic = kea<personsModalLogicType>([
                 is_static: true,
                 name: cohortName,
             }
-            if (props.query) {
-                const {
-                    limit: _,
-                    offset: __,
-                    ...personsQuery
-                } = wrapInsightsPersonsQuery(props.query, values.searchTerm)
-                const cohort = await api.create('api/cohort', { ...cohortParams, query: personsQuery })
+            if (values.personsQuery) {
+                const cohort = await api.create('api/cohort', { ...cohortParams, query: values.personsQuery })
                 cohortsModel.actions.cohortCreated(cohort)
                 lemonToast.success('Cohort saved', {
                     toastId: `cohort-saved-${cohort.id}`,
@@ -280,6 +256,36 @@ export const personsModalLogic = kea<personsModalLogicType>([
                 return cleanFilters(filter)
             },
         ],
+        personsQuery: [
+            (s) => [(_, p) => p.query, s.searchTerm],
+            (query, searchTerm): PersonsQuery | null => {
+                if (!query) {
+                    return null
+                }
+                return {
+                    kind: NodeKind.PersonsQuery,
+                    source: query,
+                    select: ['person', 'created_at'],
+                    orderBy: ['created_at DESC'],
+                    search: searchTerm,
+                }
+            },
+        ],
+        exploreUrl: [
+            (s) => [s.personsQuery],
+            (personsQuery): string | null => {
+                if (!personsQuery) {
+                    return null
+                }
+                const { select: _select, ...source } = personsQuery
+                const query: DataTableNode = {
+                    kind: NodeKind.DataTableNode,
+                    source,
+                    full: true,
+                }
+                return urls.insightNew(undefined, undefined, JSON.stringify(query))
+            },
+        ],
     }),
 
     afterMount(({ actions, props }) => {
diff --git a/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx b/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx
index be8037ad6218d..ba25a3ec372ae 100644
--- a/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx
+++ b/frontend/src/scenes/web-analytics/WebAnalyticsTile.tsx
@@ -252,13 +252,7 @@ export const WebStatsTrendTile = ({
     }, [onWorldMapClick])
 
     return (
-        <div
-            className={'border'}
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{
-                borderRadius: 'var(--radius)',
-            }}
-        >
+        <div className="border rounded bg-bg-light">
             {showIntervalTile && (
                 <div className="flex flex-row items-center justify-end m-2 mr-4">
                     <div className="flex flex-row items-center">
diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
index 944a1c08cb932..789be7d2ba939 100644
--- a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
+++ b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
@@ -263,6 +263,8 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                     date_from: dateFrom,
                     date_to: dateTo,
                 }
+                const compare = !!dateRange.date_from
+
                 const tiles: (WebDashboardTile | null)[] = [
                     {
                         layout: {
@@ -300,7 +302,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                             },
                                         ],
                                         trendsFilter: {
-                                            compare: true,
+                                            compare,
                                             display: ChartDisplayType.ActionsLineGraph,
                                         },
                                         filterTestAccounts: true,
@@ -330,7 +332,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                             },
                                         ],
                                         trendsFilter: {
-                                            compare: true,
+                                            compare,
                                             display: ChartDisplayType.ActionsLineGraph,
                                         },
                                         filterTestAccounts: true,
@@ -360,7 +362,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                             },
                                         ],
                                         trendsFilter: {
-                                            compare: true,
+                                            compare,
                                             display: ChartDisplayType.ActionsLineGraph,
                                         },
                                         filterTestAccounts: true,
@@ -394,6 +396,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         breakdownBy: WebStatsBreakdown.Page,
                                         dateRange,
                                     },
+                                    embedded: false,
                                 },
                             },
                             {
@@ -409,6 +412,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         breakdownBy: WebStatsBreakdown.InitialPage,
                                         dateRange,
                                     },
+                                    embedded: false,
                                 },
                             },
                         ],
@@ -505,6 +509,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                             hideAggregation: true,
                                         },
                                     },
+                                    embedded: true,
                                 },
                             },
                             {
@@ -520,6 +525,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         breakdownBy: WebStatsBreakdown.Browser,
                                         dateRange,
                                     },
+                                    embedded: false,
                                 },
                             },
                             {
@@ -535,6 +541,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                         breakdownBy: WebStatsBreakdown.OS,
                                         dateRange,
                                     },
+                                    embedded: false,
                                 },
                             },
                         ],
@@ -565,6 +572,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                     useSmallLayout: !isGreaterThanMd,
                                 },
                             },
+                            embedded: true,
                         },
                     },
                     shouldShowGeographyTile
@@ -602,6 +610,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                               properties: webAnalyticsFilters,
                                           },
                                           hidePersonsModal: true,
+                                          embedded: true,
                                       },
                                   },
                                   {
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index e72a2fc3cc1c7..f69621e9149ef 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -176,6 +176,10 @@ input::-ms-clear {
     border-radius: var(--radius);
     box-shadow: var(--shadow-elevation);
     opacity: 1 !important;
+
+    .posthog-3000 & {
+        border-color: var(--secondary-3000-button-border);
+    }
 }
 
 .Toastify__toast-container {
@@ -595,7 +599,8 @@ body {
         h1,
         h2,
         h3,
-        h4 {
+        h4,
+        h5 {
             font-family: var(--font-title);
         }
 
@@ -616,7 +621,7 @@ body {
         line-height: 1.5rem;
         color: var(--muted-alt);
         text-transform: uppercase;
-        letter-spacing: 0.5px;
+        letter-spacing: 0.075em;
     }
 
     pre,
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
index 9a8c5b7a7570e..096baebf9b890 100644
--- a/frontend/src/styles/vars.scss
+++ b/frontend/src/styles/vars.scss
@@ -334,14 +334,15 @@ $_lifecycle_dormant: $_danger;
     --toastify-color-success: var(--success);
     --toastify-color-warning: var(--warning);
     --toastify-color-error: var(--danger);
+    --toastify-color-progress-info: var(--toastify-color-info);
+    --toastify-color-progress-success: var(--toastify-color-success);
+    --toastify-color-progress-warning: var(--toastify-color-warning);
+    --toastify-color-progress-error: var(--toastify-color-error);
     --toastify-toast-background: var(--bg-light);
     --toastify-toast-width: 26rem;
     --toastify-toast-min-height: 3.5rem;
     --toastify-toast-max-height: 16rem;
     --toastify-text-color-light: #757575;
-    --toastify-color-progress-success: var(--toastify-color-success);
-    --toastify-color-progress-warning: var(--toastify-color-warning);
-    --toastify-color-progress-error: var(--toastify-color-error);
 
     // In-app prompts
     --in-app-prompts-width: 26rem;
@@ -397,6 +398,7 @@ $_lifecycle_dormant: $_danger;
     --accent-3000: var(--accent-3000-light);
     --bg-3000: var(--bg-3000-light);
     --border-3000: var(--border-3000-light);
+    --border-light-opaque: #eee;
     --border-bold-3000: var(--border-bold-3000-light);
     --glass-bg-3000: var(--glass-bg-3000-light);
     --glass-border-3000: var(--glass-border-3000-light);
@@ -434,6 +436,7 @@ $_lifecycle_dormant: $_danger;
     --accent-3000: var(--accent-3000-dark);
     --bg-3000: var(--bg-3000-dark);
     --border-3000: var(--border-3000-dark);
+    --border-light-opaque: #1e2028;
     --border-bold-3000: var(--border-bold-3000-dark);
     --glass-bg-3000: var(--glass-bg-3000-dark);
     --glass-border-3000: var(--glass-border-3000-dark);
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index fbc301945be16..b636d32f9c273 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -702,6 +702,9 @@ export interface SessionPlayerSnapshotData {
     snapshots?: RecordingSnapshot[]
     sources?: SessionRecordingSnapshotSource[]
     blob_keys?: string[]
+    // used for a debug signal only for PostHog team, controlled by a feature flag
+    // DO NOT RELY ON THIS FOR NON DEBUG PURPOSES
+    untransformed_snapshots?: RecordingSnapshot[]
 }
 
 export interface SessionPlayerData {
diff --git a/latest_migrations.manifest b/latest_migrations.manifest
index 63de359ece6e8..26b4b9ff9ae93 100644
--- a/latest_migrations.manifest
+++ b/latest_migrations.manifest
@@ -5,7 +5,7 @@ contenttypes: 0002_remove_content_type_name
 ee: 0015_add_verified_properties
 otp_static: 0002_throttling
 otp_totp: 0002_auto_20190420_0723
-posthog: 0374_alter_survey_type
+posthog: 0374_scheduled_change
 sessions: 0001_initial
 social_django: 0010_uid_db_index
 two_factor: 0007_auto_20201201_1019
diff --git a/package.json b/package.json
index 5dda490a5e6f4..6f5260e3f5456 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
         "babel-preset-nano-react-app": "^0.1.0",
         "chart.js": "^3.9.1",
         "chartjs-adapter-dayjs-3": "^1.2.3",
+        "chartjs-plugin-annotation": "2.2.1",
         "chartjs-plugin-crosshair": "^1.2.0",
         "chartjs-plugin-datalabels": "^2.2.0",
         "chartjs-plugin-stacked100": "^1.4.0",
@@ -140,7 +141,7 @@
         "monaco-editor": "^0.39.0",
         "papaparse": "^5.4.1",
         "pmtiles": "^2.11.0",
-        "posthog-js": "1.93.6",
+        "posthog-js": "1.94.4",
         "posthog-js-lite": "2.0.0-alpha5",
         "prettier": "^2.8.8",
         "prop-types": "^15.7.2",
@@ -188,22 +189,22 @@
         "@cypress/webpack-preprocessor": "^5.17.1",
         "@playwright/test": "1.32.2",
         "@sentry/types": "7.22.0",
-        "@storybook/addon-a11y": "^7.5.1",
-        "@storybook/addon-actions": "^7.5.1",
-        "@storybook/addon-essentials": "^7.5.1",
-        "@storybook/addon-links": "^7.5.1",
-        "@storybook/addon-storysource": "^7.5.1",
-        "@storybook/addons": "^7.5.1",
-        "@storybook/api": "^7.5.1",
-        "@storybook/blocks": "^7.5.1",
-        "@storybook/components": "^7.5.1",
-        "@storybook/core-events": "^7.5.1",
-        "@storybook/csf": "^0.1.1",
-        "@storybook/react": "^7.5.1",
-        "@storybook/react-webpack5": "^7.5.1",
-        "@storybook/test-runner": "^0.15.2",
-        "@storybook/theming": "^7.5.1",
-        "@storybook/types": "^7.5.1",
+        "@storybook/addon-a11y": "^7.6.4",
+        "@storybook/addon-actions": "^7.6.4",
+        "@storybook/addon-essentials": "^7.6.4",
+        "@storybook/addon-links": "^7.6.4",
+        "@storybook/addon-storysource": "^7.6.4",
+        "@storybook/addons": "^7.6.4",
+        "@storybook/api": "^7.6.4",
+        "@storybook/blocks": "^7.6.4",
+        "@storybook/components": "^7.6.4",
+        "@storybook/core-events": "^7.6.4",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/react": "^7.6.4",
+        "@storybook/react-webpack5": "^7.6.4",
+        "@storybook/test-runner": "^0.16.0",
+        "@storybook/theming": "^7.6.4",
+        "@storybook/types": "^7.6.4",
         "@sucrase/jest-plugin": "^3.0.0",
         "@testing-library/dom": ">=7.21.4",
         "@testing-library/jest-dom": "^5.16.2",
@@ -282,7 +283,7 @@
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "sass-loader": "^10.0.1",
-        "storybook": "^7.5.1",
+        "storybook": "^7.6.4",
         "storybook-addon-pseudo-states": "2.1.2",
         "style-loader": "^2.0.0",
         "stylelint": "^15.11.0",
diff --git a/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-1-chromium-linux.png b/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-1-chromium-linux.png
index 58e5d8b1cdfe1..30c88843accca 100644
Binary files a/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-1-chromium-linux.png and b/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-1-chromium-linux.png differ
diff --git a/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-2-chromium-linux.png b/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-2-chromium-linux.png
index db6cf0ab68e0f..b8269a281f7f6 100644
Binary files a/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-2-chromium-linux.png and b/playwright/e2e-vrt/scenes-app/PersonsModal.spec.ts-snapshots/Persons-Modal-displays-list-correctly-2-chromium-linux.png differ
diff --git a/plugin-server/package.json b/plugin-server/package.json
index 7876a953def8d..7c0b46cc9283a 100644
--- a/plugin-server/package.json
+++ b/plugin-server/package.json
@@ -131,7 +131,6 @@
     },
     "pnpm": {
         "patchedDependencies": {
-            "pg@8.10.0": "patches/pg@8.10.0.patch",
             "node-rdkafka@2.17.0": "patches/node-rdkafka@2.17.0.patch"
         }
     }
diff --git a/plugin-server/patches/pg@8.10.0.patch b/plugin-server/patches/pg@8.10.0.patch
deleted file mode 100644
index 7b03feb266bb8..0000000000000
--- a/plugin-server/patches/pg@8.10.0.patch
+++ /dev/null
@@ -1,35 +0,0 @@
-diff --git a/lib/connection.js b/lib/connection.js
-index 9e24391b6bdcfd8677a6d0dd51481c1231990159..058109c8c0f04980f45402cdb2e3a6ca5a981ee9 100644
---- a/lib/connection.js
-+++ b/lib/connection.js
-@@ -83,19 +83,18 @@ class Connection extends EventEmitter {
-       const options = {
-         socket: self.stream,
-       }
--
--      if (self.ssl !== true) {
--        Object.assign(options, self.ssl)
--
--        if ('key' in self.ssl) {
--          options.key = self.ssl.key
--        }
--      }
--
--      if (net.isIP(host) === 0) {
--        options.servername = host
--      }
-       try {
-+        if (self.ssl !== true) {
-+          Object.assign(options, self.ssl)
-+  
-+          if ('key' in self.ssl) {
-+            options.key = self.ssl.key
-+          }
-+        }
-+  
-+        if (net.isIP(host) === 0) {
-+          options.servername = host
-+        }
-         self.stream = tls.connect(options)
-       } catch (err) {
-         return self.emit('error', err)
\ No newline at end of file
diff --git a/plugin-server/pnpm-lock.yaml b/plugin-server/pnpm-lock.yaml
index 6407f25be359e..b6e4ff292cea8 100644
--- a/plugin-server/pnpm-lock.yaml
+++ b/plugin-server/pnpm-lock.yaml
@@ -8,9 +8,6 @@ patchedDependencies:
   node-rdkafka@2.17.0:
     hash: p4aetcvho53cvjti6c3zi7tfaq
     path: patches/node-rdkafka@2.17.0.patch
-  pg@8.10.0:
-    hash: ju7a73s3qkmrf666u3aacfrooi
-    path: patches/pg@8.10.0.patch
 
 dependencies:
   '@aws-sdk/client-s3':
@@ -117,7 +114,7 @@ dependencies:
     version: 2.1.1
   pg:
     specifier: ^8.6.0
-    version: 8.10.0(patch_hash=ju7a73s3qkmrf666u3aacfrooi)
+    version: 8.10.0
   pino:
     specifier: ^8.6.0
     version: 8.11.0
@@ -6361,7 +6358,7 @@ packages:
       chokidar: 3.5.3
       cosmiconfig: 7.1.0
       json5: 2.2.3
-      pg: 8.10.0(patch_hash=ju7a73s3qkmrf666u3aacfrooi)
+      pg: 8.10.0
       tslib: 2.5.0
       yargs: 16.2.0
     transitivePeerDependencies:
@@ -8516,7 +8513,7 @@ packages:
     peerDependencies:
       pg: '>=8.0'
     dependencies:
-      pg: 8.10.0(patch_hash=ju7a73s3qkmrf666u3aacfrooi)
+      pg: 8.10.0
     dev: false
 
   /pg-protocol@1.6.0:
@@ -8532,7 +8529,7 @@ packages:
       postgres-date: 1.0.7
       postgres-interval: 1.2.0
 
-  /pg@8.10.0(patch_hash=ju7a73s3qkmrf666u3aacfrooi):
+  /pg@8.10.0:
     resolution: {integrity: sha512-ke7o7qSTMb47iwzOSaZMfeR7xToFdkE71ifIipOAAaLIM0DYzfOAXlgFFmYUIE2BcJtvnVlGCID84ZzCegE8CQ==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
@@ -8549,7 +8546,6 @@ packages:
       pg-types: 2.2.0
       pgpass: 1.0.5
     dev: false
-    patched: true
 
   /pgpass@1.0.5:
     resolution: {integrity: sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==}
diff --git a/plugin-server/src/config/config.ts b/plugin-server/src/config/config.ts
index 38304a712568c..40afd2c248481 100644
--- a/plugin-server/src/config/config.ts
+++ b/plugin-server/src/config/config.ts
@@ -131,6 +131,8 @@ export function getDefaultConfig(): PluginsServerConfig {
         POE_DEFERRED_WRITES_ENABLED: false,
         POE_EMBRACE_JOIN_FOR_TEAMS: '',
         RELOAD_PLUGIN_JITTER_MAX_MS: 60000,
+        RUSTY_HOOK_FOR_TEAMS: '',
+        RUSTY_HOOK_URL: '',
 
         STARTUP_PROFILE_DURATION_SECONDS: 300, // 5 minutes
         STARTUP_PROFILE_CPU: false,
diff --git a/plugin-server/src/main/ingestion-queues/session-recording/session-recordings-consumer.ts b/plugin-server/src/main/ingestion-queues/session-recording/session-recordings-consumer.ts
index 46f78c84705e8..d0d3d58da7f07 100644
--- a/plugin-server/src/main/ingestion-queues/session-recording/session-recordings-consumer.ts
+++ b/plugin-server/src/main/ingestion-queues/session-recording/session-recordings-consumer.ts
@@ -128,6 +128,9 @@ export class SessionRecordingIngester {
         private objectStorage: ObjectStorage
     ) {
         this.debugPartition = globalServerConfig.SESSION_RECORDING_DEBUG_PARTITION
+            ? parseInt(globalServerConfig.SESSION_RECORDING_DEBUG_PARTITION)
+            : undefined
+
         // NOTE: globalServerConfig contains the default pluginServer values, typically not pointing at dedicated resources like kafka or redis
         // We still connect to some of the non-dedicated resources such as postgres or the Replay events kafka.
         this.config = sessionRecordingConsumerConfig(globalServerConfig)
diff --git a/plugin-server/src/types.ts b/plugin-server/src/types.ts
index f6f3bec5e811f..062735c2525b2 100644
--- a/plugin-server/src/types.ts
+++ b/plugin-server/src/types.ts
@@ -201,6 +201,8 @@ export interface PluginsServerConfig {
     POE_EMBRACE_JOIN_FOR_TEAMS: string
     POE_DEFERRED_WRITES_ENABLED: boolean
     RELOAD_PLUGIN_JITTER_MAX_MS: number
+    RUSTY_HOOK_FOR_TEAMS: string
+    RUSTY_HOOK_URL: string
     SKIP_UPDATE_EVENT_AND_PROPERTIES_STEP: boolean
 
     // dump profiles to disk, covering the first N seconds of runtime
@@ -223,7 +225,7 @@ export interface PluginsServerConfig {
     SESSION_RECORDING_CONSOLE_LOGS_INGESTION_ENABLED: boolean
     // a single partition which will output many more log messages to the console
     // useful when that partition is lagging unexpectedly
-    SESSION_RECORDING_DEBUG_PARTITION: number | undefined
+    SESSION_RECORDING_DEBUG_PARTITION: string | undefined
 
     // Dedicated infra values
     SESSION_RECORDING_KAFKA_HOSTS: string | undefined
@@ -276,6 +278,7 @@ export interface Hub extends PluginsServerConfig {
     // ValueMatchers used for various opt-in/out features
     pluginConfigsToSkipElementsParsing: ValueMatcher<number>
     poeEmbraceJoinForTeams: ValueMatcher<number>
+    rustyHookForTeams: ValueMatcher<number>
     // lookups
     eventsToDropByToken: Map<string, string[]>
 }
diff --git a/plugin-server/src/utils/db/hub.ts b/plugin-server/src/utils/db/hub.ts
index 9298403b02a6d..75f15be3897b7 100644
--- a/plugin-server/src/utils/db/hub.ts
+++ b/plugin-server/src/utils/db/hub.ts
@@ -188,6 +188,7 @@ export async function createHub(
         conversionBufferEnabledTeams,
         pluginConfigsToSkipElementsParsing: buildIntegerMatcher(process.env.SKIP_ELEMENTS_PARSING_PLUGINS, true),
         poeEmbraceJoinForTeams: buildIntegerMatcher(process.env.POE_EMBRACE_JOIN_FOR_TEAMS, true),
+        rustyHookForTeams: buildIntegerMatcher(process.env.RUSTY_HOOK_FOR_TEAMS, true),
         eventsToDropByToken: createEventsToDropByToken(process.env.DROP_EVENTS_BY_TOKEN_DISTINCT_ID),
     }
 
diff --git a/plugin-server/src/worker/plugins/run.ts b/plugin-server/src/worker/plugins/run.ts
index 239b270cc1b37..13df2873fae43 100644
--- a/plugin-server/src/worker/plugins/run.ts
+++ b/plugin-server/src/worker/plugins/run.ts
@@ -1,11 +1,13 @@
 import { PluginEvent, PostHogEvent, ProcessedPluginEvent, Webhook } from '@posthog/plugin-scaffold'
+import * as Sentry from '@sentry/node'
+import fetch from 'node-fetch'
 import { Summary } from 'prom-client'
 
 import { Hub, PluginConfig, PluginTaskType, VMMethods } from '../../types'
 import { processError } from '../../utils/db/error'
 import { trackedFetch } from '../../utils/fetch'
 import { status } from '../../utils/status'
-import { IllegalOperationError } from '../../utils/utils'
+import { IllegalOperationError, sleep } from '../../utils/utils'
 
 const pluginActionMsSummary = new Summary({
     name: 'plugin_action_ms',
@@ -71,6 +73,72 @@ export async function runOnEvent(hub: Hub, event: ProcessedPluginEvent): Promise
     )
 }
 
+const RUSTY_HOOK_BASE_DELAY_MS = 100
+const MAX_RUSTY_HOOK_DELAY_MS = 30_000
+
+interface RustyWebhookPayload extends Webhook {
+    team_id: number
+    plugin_id: number
+    plugin_config_id: number
+}
+
+async function enqueueInRustyHook(hub: Hub, webhook: Webhook, pluginConfig: PluginConfig) {
+    webhook.method ??= 'POST'
+    webhook.headers ??= {}
+
+    const rustyWebhookPayload: RustyWebhookPayload = {
+        ...webhook,
+        team_id: pluginConfig.team_id,
+        plugin_id: pluginConfig.plugin_id,
+        plugin_config_id: pluginConfig.id,
+    }
+    const body = JSON.stringify(rustyWebhookPayload, undefined, 4)
+
+    // We attempt to enqueue into the rusty-hook service until we succeed. This is deliberatly
+    // designed to block up the consumer if rusty-hook is down or if we deploy code that
+    // sends malformed requests. The entire purpose of rusty-hook is to reliably deliver webhooks,
+    // so we'd rather leave items in the Kafka topic until we manage to get them into rusty-hook.
+    let attempt = 0
+    while (true) {
+        const timer = new Date()
+        try {
+            attempt += 1
+            const response = await fetch(hub.RUSTY_HOOK_URL, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body,
+
+                // Sure, it's not an external request, but we should have a timeout and this is as
+                // good as any.
+                timeout: hub.EXTERNAL_REQUEST_TIMEOUT_MS,
+            })
+
+            if (response.ok) {
+                // Success, exit the loop.
+                pluginActionMsSummary
+                    .labels(pluginConfig.plugin_id.toString(), 'enqueueRustyHook', 'success')
+                    .observe(new Date().getTime() - timer.getTime())
+
+                break
+            }
+
+            // Throw to unify error handling below.
+            throw new Error(`rusty-hook returned ${response.status} ${response.statusText}: ${await response.text()}`)
+        } catch (error) {
+            pluginActionMsSummary
+                .labels(pluginConfig.plugin_id.toString(), 'enqueueRustyHook', 'error')
+                .observe(new Date().getTime() - timer.getTime())
+
+            const redactedWebhook = { ...rustyWebhookPayload, body: '<redacted>' }
+            status.error('🔴', 'Webhook enqueue to rusty-hook failed', { error, redactedWebhook, attempt })
+            Sentry.captureException(error, { extra: { redactedWebhook } })
+        }
+
+        const delayMs = Math.min(2 ** (attempt - 1) * RUSTY_HOOK_BASE_DELAY_MS, MAX_RUSTY_HOOK_DELAY_MS)
+        await sleep(delayMs)
+    }
+}
+
 async function runSingleTeamPluginComposeWebhook(
     hub: Hub,
     event: PostHogEvent,
@@ -98,6 +166,11 @@ async function runSingleTeamPluginComposeWebhook(
                 })
                 return
             }
+
+            if (hub.rustyHookForTeams?.(event.team_id)) {
+                return await enqueueInRustyHook(hub, webhook, pluginConfig)
+            }
+
             const request = await trackedFetch(webhook.url, {
                 method: webhook.method || 'POST',
                 body: JSON.stringify(webhook.body, undefined, 4),
diff --git a/plugin-server/src/worker/vm/imports.ts b/plugin-server/src/worker/vm/imports.ts
index e3d5c0d506583..16931020d0167 100644
--- a/plugin-server/src/worker/vm/imports.ts
+++ b/plugin-server/src/worker/vm/imports.ts
@@ -4,7 +4,6 @@ import * as scaffold from '@posthog/plugin-scaffold'
 import * as AWS from 'aws-sdk'
 import crypto from 'crypto'
 import * as genericPool from 'generic-pool'
-import * as pg from 'pg'
 import { PassThrough } from 'stream'
 import * as url from 'url'
 
@@ -25,7 +24,6 @@ export const AVAILABLE_IMPORTS = {
     'generic-pool': genericPool,
     'node-fetch': trackedFetch,
     crypto: crypto,
-    pg: pg,
     stream: { PassThrough },
     url: url,
 }
diff --git a/plugin-server/tests/main/ingestion-queues/session-recording/session-recordings-consumer.test.ts b/plugin-server/tests/main/ingestion-queues/session-recording/session-recordings-consumer.test.ts
index 508e85faa7ebf..467a2cbe6da89 100644
--- a/plugin-server/tests/main/ingestion-queues/session-recording/session-recordings-consumer.test.ts
+++ b/plugin-server/tests/main/ingestion-queues/session-recording/session-recordings-consumer.test.ts
@@ -142,6 +142,22 @@ describe('ingester', () => {
         )
     }
 
+    it('can parse debug partition config', () => {
+        const config = {
+            SESSION_RECORDING_DEBUG_PARTITION: '103',
+        } satisfies Partial<PluginsServerConfig> as PluginsServerConfig
+
+        const ingester = new SessionRecordingIngester(config, hub.postgres, hub.objectStorage)
+        expect(ingester['debugPartition']).toEqual(103)
+    })
+
+    it('can parse absence of debug partition config', () => {
+        const config = {} satisfies Partial<PluginsServerConfig> as PluginsServerConfig
+
+        const ingester = new SessionRecordingIngester(config, hub.postgres, hub.objectStorage)
+        expect(ingester['debugPartition']).toBeUndefined()
+    })
+
     it('creates a new session manager if needed', async () => {
         const event = createIncomingRecordingMessage()
         await ingester.consume(event)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c197b0fc76021..3dd101427aa06 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,6 +113,9 @@ dependencies:
   chartjs-adapter-dayjs-3:
     specifier: ^1.2.3
     version: 1.2.3(chart.js@3.9.1)(dayjs@1.11.6)
+  chartjs-plugin-annotation:
+    specifier: 2.2.1
+    version: 2.2.1(chart.js@3.9.1)
   chartjs-plugin-crosshair:
     specifier: ^1.2.0
     version: 1.2.0(chart.js@3.9.1)
@@ -222,8 +225,8 @@ dependencies:
     specifier: ^2.11.0
     version: 2.11.0
   posthog-js:
-    specifier: 1.93.6
-    version: 1.93.6
+    specifier: 1.94.4
+    version: 1.94.4
   posthog-js-lite:
     specifier: 2.0.0-alpha5
     version: 2.0.0-alpha5
@@ -367,53 +370,53 @@ devDependencies:
     specifier: 7.22.0
     version: 7.22.0
   '@storybook/addon-a11y':
-    specifier: ^7.5.1
-    version: 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4
   '@storybook/addon-actions':
-    specifier: ^7.5.1
-    version: 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4
   '@storybook/addon-essentials':
-    specifier: ^7.5.1
-    version: 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
   '@storybook/addon-links':
-    specifier: ^7.5.1
-    version: 7.5.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(react@18.2.0)
   '@storybook/addon-storysource':
-    specifier: ^7.5.1
-    version: 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4
   '@storybook/addons':
-    specifier: ^7.5.1
-    version: 7.5.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(react-dom@18.2.0)(react@18.2.0)
   '@storybook/api':
-    specifier: ^7.5.1
-    version: 7.5.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(react-dom@18.2.0)(react@18.2.0)
   '@storybook/blocks':
-    specifier: ^7.5.1
-    version: 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
   '@storybook/components':
-    specifier: ^7.5.1
-    version: 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
   '@storybook/core-events':
-    specifier: ^7.5.1
-    version: 7.5.1
+    specifier: ^7.6.4
+    version: 7.6.4
   '@storybook/csf':
-    specifier: ^0.1.1
-    version: 0.1.1
+    specifier: ^0.1.2
+    version: 0.1.2
   '@storybook/react':
-    specifier: ^7.5.1
-    version: 7.5.1(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+    specifier: ^7.6.4
+    version: 7.6.4(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
   '@storybook/react-webpack5':
-    specifier: ^7.5.1
-    version: 7.5.1(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4)
+    specifier: ^7.6.4
+    version: 7.6.4(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4)
   '@storybook/test-runner':
-    specifier: ^0.15.2
-    version: 0.15.2(@types/node@18.11.9)(ts-node@10.9.1)
+    specifier: ^0.16.0
+    version: 0.16.0(@types/node@18.11.9)(ts-node@10.9.1)
   '@storybook/theming':
-    specifier: ^7.5.1
-    version: 7.5.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.4
+    version: 7.6.4(react-dom@18.2.0)(react@18.2.0)
   '@storybook/types':
-    specifier: ^7.5.1
-    version: 7.5.1
+    specifier: ^7.6.4
+    version: 7.6.4
   '@sucrase/jest-plugin':
     specifier: ^3.0.0
     version: 3.0.0(jest@29.7.0)(sucrase@3.29.0)
@@ -640,11 +643,11 @@ devDependencies:
     specifier: ^10.0.1
     version: 10.3.1(sass@1.56.0)(webpack@5.88.2)
   storybook:
-    specifier: ^7.5.1
-    version: 7.5.1
+    specifier: ^7.6.4
+    version: 7.6.4
   storybook-addon-pseudo-states:
     specifier: 2.1.2
-    version: 2.1.2(@storybook/components@7.5.1)(@storybook/core-events@7.5.1)(@storybook/manager-api@7.6.3)(@storybook/preview-api@7.6.3)(@storybook/theming@7.5.1)(react-dom@18.2.0)(react@18.2.0)
+    version: 2.1.2(@storybook/components@7.6.4)(@storybook/core-events@7.6.4)(@storybook/manager-api@7.6.4)(@storybook/preview-api@7.6.4)(@storybook/theming@7.6.4)(react-dom@18.2.0)(react@18.2.0)
   style-loader:
     specifier: ^2.0.0
     version: 2.0.0(webpack@5.88.2)
@@ -763,10 +766,23 @@ packages:
       '@babel/highlight': 7.22.20
       chalk: 2.4.2
 
+  /@babel/code-frame@7.23.5:
+    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.23.4
+      chalk: 2.4.2
+    dev: true
+
   /@babel/compat-data@7.22.9:
     resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/compat-data@7.23.5:
+    resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/core@7.22.10:
     resolution: {integrity: sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==}
     engines: {node: '>=6.9.0'}
@@ -789,6 +805,29 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/core@7.23.5:
+    resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.5
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
+      '@babel/helpers': 7.23.5
+      '@babel/parser': 7.23.5
+      '@babel/template': 7.22.15
+      '@babel/traverse': 7.23.5
+      '@babel/types': 7.23.5
+      convert-source-map: 2.0.0
+      debug: 4.3.4(supports-color@8.1.1)
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/generator@7.22.10:
     resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==}
     engines: {node: '>=6.9.0'}
@@ -802,10 +841,20 @@ packages:
     resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
+      '@jridgewell/gen-mapping': 0.3.2
+      '@jridgewell/trace-mapping': 0.3.20
+      jsesc: 2.5.2
+
+  /@babel/generator@7.23.5:
+    resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.5
       '@jridgewell/gen-mapping': 0.3.2
       '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
+    dev: true
 
   /@babel/helper-annotate-as-pure@7.22.5:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
@@ -820,6 +869,13 @@ packages:
       '@babel/types': 7.23.4
     dev: true
 
+  /@babel/helper-builder-binary-assignment-operator-visitor@7.22.15:
+    resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.5
+    dev: true
+
   /@babel/helper-compilation-targets@7.22.10:
     resolution: {integrity: sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==}
     engines: {node: '>=6.9.0'}
@@ -830,6 +886,17 @@ packages:
       lru-cache: 5.1.1
       semver: 6.3.1
 
+  /@babel/helper-compilation-targets@7.22.15:
+    resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.22.9
+      '@babel/helper-validator-option': 7.23.5
+      browserslist: 4.21.10
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: true
+
   /@babel/helper-create-class-features-plugin@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==}
     engines: {node: '>=6.9.0'}
@@ -847,6 +914,54 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       semver: 6.3.1
 
+  /@babel/helper-create-class-features-plugin@7.22.10(@babel/core@7.23.5):
+    resolution: {integrity: sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.22.5
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.22.9(@babel/core@7.23.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.5):
+    resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      regexpu-core: 5.3.2
+      semver: 6.3.1
+    dev: true
+
   /@babel/helper-create-regexp-features-plugin@7.22.9(@babel/core@7.22.10):
     resolution: {integrity: sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==}
     engines: {node: '>=6.9.0'}
@@ -859,6 +974,18 @@ packages:
       semver: 6.3.1
     dev: true
 
+  /@babel/helper-create-regexp-features-plugin@7.22.9(@babel/core@7.23.5):
+    resolution: {integrity: sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      regexpu-core: 5.3.2
+      semver: 6.3.1
+    dev: true
+
   /@babel/helper-define-polyfill-provider@0.4.2(@babel/core@7.22.10):
     resolution: {integrity: sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==}
     peerDependencies:
@@ -873,6 +1000,21 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/helper-define-polyfill-provider@0.4.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      debug: 4.3.4(supports-color@8.1.1)
+      lodash.debounce: 4.0.8
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
     engines: {node: '>=6.9.0'}
@@ -896,6 +1038,20 @@ packages:
     dependencies:
       '@babel/types': 7.23.4
 
+  /@babel/helper-member-expression-to-functions@7.23.0:
+    resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.5
+    dev: true
+
+  /@babel/helper-module-imports@7.22.15:
+    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.5
+    dev: true
+
   /@babel/helper-module-imports@7.22.5:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
     engines: {node: '>=6.9.0'}
@@ -915,6 +1071,20 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/helper-validator-identifier': 7.22.20
 
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.20
+    dev: true
+
   /@babel/helper-optimise-call-expression@7.22.5:
     resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
     engines: {node: '>=6.9.0'}
@@ -925,6 +1095,18 @@ packages:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.5):
+    resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-wrap-function': 7.22.20
+    dev: true
+
   /@babel/helper-remap-async-to-generator@7.22.9(@babel/core@7.22.10):
     resolution: {integrity: sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==}
     engines: {node: '>=6.9.0'}
@@ -937,6 +1119,18 @@ packages:
       '@babel/helper-wrap-function': 7.22.10
     dev: true
 
+  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.5):
+    resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+    dev: true
+
   /@babel/helper-replace-supers@7.22.9(@babel/core@7.22.10):
     resolution: {integrity: sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==}
     engines: {node: '>=6.9.0'}
@@ -948,6 +1142,18 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.22.5
       '@babel/helper-optimise-call-expression': 7.22.5
 
+  /@babel/helper-replace-supers@7.22.9(@babel/core@7.23.5):
+    resolution: {integrity: sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.22.5
+      '@babel/helper-optimise-call-expression': 7.22.5
+    dev: true
+
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
@@ -982,6 +1188,11 @@ packages:
     resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-validator-option@7.23.5:
+    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-wrap-function@7.22.10:
     resolution: {integrity: sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==}
     engines: {node: '>=6.9.0'}
@@ -991,6 +1202,15 @@ packages:
       '@babel/types': 7.23.4
     dev: true
 
+  /@babel/helper-wrap-function@7.22.20:
+    resolution: {integrity: sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-function-name': 7.23.0
+      '@babel/template': 7.22.15
+      '@babel/types': 7.23.5
+    dev: true
+
   /@babel/helpers@7.22.10:
     resolution: {integrity: sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==}
     engines: {node: '>=6.9.0'}
@@ -1001,6 +1221,17 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/helpers@7.23.5:
+    resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.15
+      '@babel/traverse': 7.23.5
+      '@babel/types': 7.23.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/highlight@7.22.20:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
@@ -1009,6 +1240,15 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
+  /@babel/highlight@7.23.4:
+    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
   /@babel/parser@7.23.0:
     resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
     engines: {node: '>=6.0.0'}
@@ -1021,7 +1261,8 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
+    dev: true
 
   /@babel/parser@7.23.5:
     resolution: {integrity: sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==}
@@ -1029,7 +1270,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.23.5
-    dev: true
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
@@ -1041,6 +1281,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==}
     engines: {node: '>=6.9.0'}
@@ -1053,6 +1303,29 @@ packages:
       '@babel/plugin-transform-optional-chaining': 7.22.10(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.5)
+    dev: true
+
+  /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.10):
     resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
     engines: {node: '>=6.9.0'}
@@ -1076,26 +1349,22 @@ packages:
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.10)
     dev: true
 
-  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.22.10):
-    resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
+  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.22.10):
+    resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.10)
     dev: true
 
-  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.22.10):
+  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.5):
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
     dev: true
 
   /@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.22.10):
@@ -1121,6 +1390,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
     peerDependencies:
@@ -1139,6 +1417,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.5):
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
     engines: {node: '>=6.9.0'}
@@ -1149,6 +1436,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
@@ -1158,6 +1455,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
@@ -1167,18 +1473,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-flow@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==}
+  /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1187,18 +1492,19 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==}
+  /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.22.10):
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+  /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.22.10):
+    resolution: {integrity: sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -1206,12 +1512,69 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+  /@babel/plugin-syntax-import-assertions@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.22.10):
+    resolution: {integrity: sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.22.10):
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
@@ -1225,6 +1588,26 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.22.10):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1234,6 +1617,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
@@ -1243,6 +1635,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.22.10):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
@@ -1252,6 +1653,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
@@ -1261,6 +1671,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
@@ -1270,6 +1689,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
@@ -1279,6 +1707,15 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
     engines: {node: '>=6.9.0'}
@@ -1289,6 +1726,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
     engines: {node: '>=6.9.0'}
@@ -1299,6 +1746,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
     engines: {node: '>=6.9.0'}
@@ -1309,6 +1766,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.22.10):
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
@@ -1320,6 +1787,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.5):
+    resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==}
     engines: {node: '>=6.9.0'}
@@ -1330,6 +1808,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-arrow-functions@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-async-generator-functions@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==}
     engines: {node: '>=6.9.0'}
@@ -1343,6 +1831,19 @@ packages:
       '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-async-generator-functions@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-efdkfPhHYTtn0G6n2ddrESE91fgXxjlqLsnUtPWnJs4a4mZIbUaK7ffqKIIUKXSHwcDvaCVX6GXkaJJFqtX7jw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.5)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==}
     engines: {node: '>=6.9.0'}
@@ -1355,6 +1856,18 @@ packages:
       '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-async-to-generator@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==}
     engines: {node: '>=6.9.0'}
@@ -1365,6 +1878,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-block-scoped-functions@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-block-scoping@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-1+kVpGAOOI1Albt6Vse7c8pHzcZQdQKW+wJH+g8mCaszOdDVwRXa/slHPqIw+oJAJANTKDMuM2cBdV0Dg618Vg==}
     engines: {node: '>=6.9.0'}
@@ -1375,6 +1898,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-block-scoping@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==}
     engines: {node: '>=6.9.0'}
@@ -1386,6 +1919,28 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-class-features-plugin': 7.22.10(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-class-static-block@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==}
     engines: {node: '>=6.9.0'}
@@ -1398,6 +1953,18 @@ packages:
       '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-class-static-block@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-classes@7.22.6(@babel/core@7.22.10):
     resolution: {integrity: sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==}
     engines: {node: '>=6.9.0'}
@@ -1416,6 +1983,24 @@ packages:
       globals: 11.12.0
     dev: true
 
+  /@babel/plugin-transform-classes@7.23.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5)
+      '@babel/helper-split-export-declaration': 7.22.6
+      globals: 11.12.0
+    dev: true
+
   /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==}
     engines: {node: '>=6.9.0'}
@@ -1427,6 +2012,17 @@ packages:
       '@babel/template': 7.22.15
     dev: true
 
+  /@babel/plugin-transform-computed-properties@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/template': 7.22.15
+    dev: true
+
   /@babel/plugin-transform-destructuring@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-dPJrL0VOyxqLM9sritNbMSGx/teueHF/htMKrPT7DNxccXxRDPYqlgPFFdr8u+F+qUZOkZoXue/6rL5O5GduEw==}
     engines: {node: '>=6.9.0'}
@@ -1437,6 +2033,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-destructuring@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==}
     engines: {node: '>=6.9.0'}
@@ -1448,6 +2054,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==}
     engines: {node: '>=6.9.0'}
@@ -1458,6 +2075,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-duplicate-keys@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-dynamic-import@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==}
     engines: {node: '>=6.9.0'}
@@ -1469,6 +2096,17 @@ packages:
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-dynamic-import@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==}
     engines: {node: '>=6.9.0'}
@@ -1480,6 +2118,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-exponentiation-operator@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-export-namespace-from@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==}
     engines: {node: '>=6.9.0'}
@@ -1491,15 +2140,37 @@ packages:
       '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.10)
     dev: true
 
-  /@babel/plugin-transform-flow-strip-types@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==}
+  /@babel/plugin-transform-export-namespace-from@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.5)
+    dev: true
+
+  /@babel/plugin-transform-flow-strip-types@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-flow': 7.22.5(@babel/core@7.22.10)
+      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.22.10)
+    dev: true
+
+  /@babel/plugin-transform-flow-strip-types@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.5)
     dev: true
 
   /@babel/plugin-transform-for-of@7.22.5(@babel/core@7.22.10):
@@ -1512,6 +2183,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-for-of@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-function-name@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==}
     engines: {node: '>=6.9.0'}
@@ -1524,6 +2205,18 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-function-name@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-json-strings@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==}
     engines: {node: '>=6.9.0'}
@@ -1535,6 +2228,17 @@ packages:
       '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-json-strings@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-literals@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==}
     engines: {node: '>=6.9.0'}
@@ -1545,6 +2249,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-literals@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-logical-assignment-operators@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==}
     engines: {node: '>=6.9.0'}
@@ -1556,6 +2270,17 @@ packages:
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-logical-assignment-operators@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==}
     engines: {node: '>=6.9.0'}
@@ -1566,6 +2291,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-member-expression-literals@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-modules-amd@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==}
     engines: {node: '>=6.9.0'}
@@ -1577,14 +2312,37 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==}
+  /@babel/plugin-transform-modules-amd@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.22.10):
+    resolution: {integrity: sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
+    dev: true
+
+  /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
+      '@babel/core': 7.23.5
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-simple-access': 7.22.5
     dev: true
@@ -1602,6 +2360,19 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
     dev: true
 
+  /@babel/plugin-transform-modules-systemjs@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
+    dev: true
+
   /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==}
     engines: {node: '>=6.9.0'}
@@ -1613,6 +2384,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==}
     engines: {node: '>=6.9.0'}
@@ -1624,6 +2406,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.9(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-new-target@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==}
     engines: {node: '>=6.9.0'}
@@ -1634,6 +2427,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-new-target@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-nullish-coalescing-operator@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==}
     engines: {node: '>=6.9.0'}
@@ -1645,6 +2448,17 @@ packages:
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-nullish-coalescing-operator@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-numeric-separator@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==}
     engines: {node: '>=6.9.0'}
@@ -1656,6 +2470,17 @@ packages:
       '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-numeric-separator@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-object-rest-spread@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==}
     engines: {node: '>=6.9.0'}
@@ -1670,6 +2495,20 @@ packages:
       '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-object-rest-spread@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.23.5
+      '@babel/core': 7.23.5
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-object-super@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==}
     engines: {node: '>=6.9.0'}
@@ -1681,6 +2520,17 @@ packages:
       '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-object-super@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-optional-catch-binding@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==}
     engines: {node: '>=6.9.0'}
@@ -1692,6 +2542,17 @@ packages:
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-optional-catch-binding@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-optional-chaining@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==}
     engines: {node: '>=6.9.0'}
@@ -1704,6 +2565,18 @@ packages:
       '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-optional-chaining@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==}
     engines: {node: '>=6.9.0'}
@@ -1714,6 +2587,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-parameters@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==}
     engines: {node: '>=6.9.0'}
@@ -1725,6 +2608,28 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-class-features-plugin': 7.22.10(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-transform-private-methods@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-private-property-in-object@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==}
     engines: {node: '>=6.9.0'}
@@ -1738,6 +2643,19 @@ packages:
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-private-property-in-object@7.23.4(@babel/core@7.23.5):
+    resolution: {integrity: sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==}
     engines: {node: '>=6.9.0'}
@@ -1748,6 +2666,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-property-literals@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-react-display-name@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==}
     engines: {node: '>=6.9.0'}
@@ -1758,6 +2686,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-react-display-name@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==}
     engines: {node: '>=6.9.0'}
@@ -1782,6 +2720,20 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
+  /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.22.10):
+    resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.22.10)
+      '@babel/types': 7.23.5
+    dev: true
+
   /@babel/plugin-transform-react-pure-annotations@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==}
     engines: {node: '>=6.9.0'}
@@ -1793,6 +2745,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-react-pure-annotations@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-regenerator@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw==}
     engines: {node: '>=6.9.0'}
@@ -1804,6 +2767,17 @@ packages:
       regenerator-transform: 0.15.2
     dev: true
 
+  /@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      regenerator-transform: 0.15.2
+    dev: true
+
   /@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==}
     engines: {node: '>=6.9.0'}
@@ -1814,6 +2788,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-runtime@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-RchI7HePu1eu0CYNKHHHQdfenZcM4nz8rew5B1VWqeRKdcwW5aQ5HeG9eTUbWiAS1UrmHVLmoxTWHt3iLD/NhA==}
     engines: {node: '>=6.9.0'}
@@ -1840,6 +2824,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-spread@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==}
     engines: {node: '>=6.9.0'}
@@ -1851,6 +2845,17 @@ packages:
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-spread@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==}
     engines: {node: '>=6.9.0'}
@@ -1861,6 +2866,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-sticky-regex@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==}
     engines: {node: '>=6.9.0'}
@@ -1871,6 +2886,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==}
     engines: {node: '>=6.9.0'}
@@ -1881,6 +2906,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-typescript@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-7++c8I/ymsDo4QQBAgbraXLzIM6jmfao11KgIBEYZRReWzNWH9NtNgJcyrZiXsOPh523FQm6LfpLyy/U5fn46A==}
     engines: {node: '>=6.9.0'}
@@ -1894,6 +2929,19 @@ packages:
       '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10)
     dev: true
 
+  /@babel/plugin-transform-typescript@7.23.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.5)
+    dev: true
+
   /@babel/plugin-transform-unicode-escapes@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg==}
     engines: {node: '>=6.9.0'}
@@ -1904,6 +2952,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==}
     engines: {node: '>=6.9.0'}
@@ -1915,6 +2973,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-unicode-property-regex@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==}
     engines: {node: '>=6.9.0'}
@@ -1926,6 +2995,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-unicode-regex@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==}
     engines: {node: '>=6.9.0'}
@@ -1937,6 +3017,17 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-unicode-sets-regex@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/preset-env@7.22.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==}
     engines: {node: '>=6.9.0'}
@@ -2028,24 +3119,138 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/preset-flow@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-ta2qZ+LSiGCrP5pgcGt8xMnnkXQrq8Sa4Ulhy06BOlF5QbLw9q5hIx7bn5MrsvyTGAfh6kTOo07Q+Pfld/8Y5Q==}
+  /@babel/preset-env@7.23.5(@babel/core@7.23.5):
+    resolution: {integrity: sha512-0d/uxVD6tFGWXGDSfyMD1p2otoaKmu6+GD+NfAx0tMaH+dxORnp7T9TaVQ6mKyya7iBtCIVxHjWT7MuzzM9z+A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.23.5
+      '@babel/core': 7.23.5
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.23.5
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.5)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.5)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.5)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-import-assertions': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.5)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.5)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.5)
+      '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-async-generator-functions': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-block-scoped-functions': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-class-static-block': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-classes': 7.23.5(@babel/core@7.23.5)
+      '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-dotall-regex': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-duplicate-keys': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-dynamic-import': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-exponentiation-operator': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-export-namespace-from': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-for-of': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-json-strings': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-logical-assignment-operators': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-member-expression-literals': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-modules-amd': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-modules-systemjs': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-modules-umd': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.5)
+      '@babel/plugin-transform-new-target': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-numeric-separator': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-object-rest-spread': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-object-super': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-optional-catch-binding': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-property-literals': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-regenerator': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-reserved-words': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-typeof-symbol': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-unicode-escapes': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-unicode-property-regex': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-unicode-sets-regex': 7.23.3(@babel/core@7.23.5)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.23.5)
+      babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.23.5)
+      babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.23.5)
+      babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.23.5)
+      core-js-compat: 3.32.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/preset-flow@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-7yn6hl8RIv+KNk6iIrGZ+D06VhVY35wLVf23Cz/mMu1zOr7u4MMP4j0nZ9tLf8+4ZFpnib8cFYgB/oYg9hfswA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.23.5
+      '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.22.10)
+    dev: true
+
+  /@babel/preset-flow@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-7yn6hl8RIv+KNk6iIrGZ+D06VhVY35wLVf23Cz/mMu1zOr7u4MMP4j0nZ9tLf8+4ZFpnib8cFYgB/oYg9hfswA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.23.5
+      '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.5)
+    dev: true
+
+  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.22.10):
+    resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
     dependencies:
       '@babel/core': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-option': 7.22.5
-      '@babel/plugin-transform-flow-strip-types': 7.22.5(@babel/core@7.22.10)
+      '@babel/types': 7.23.0
+      esutils: 2.0.3
     dev: true
 
-  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.22.10):
+  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.23.5):
     resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/types': 7.23.0
       esutils: 2.0.3
@@ -2066,6 +3271,21 @@ packages:
       '@babel/plugin-transform-react-pure-annotations': 7.22.5(@babel/core@7.22.10)
     dev: true
 
+  /@babel/preset-react@7.23.3(@babel/core@7.22.10):
+    resolution: {integrity: sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.10
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.23.5
+      '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.22.10)
+      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.22.10)
+      '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.22.10)
+      '@babel/plugin-transform-react-pure-annotations': 7.23.3(@babel/core@7.22.10)
+    dev: true
+
   /@babel/preset-typescript@7.22.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==}
     engines: {node: '>=6.9.0'}
@@ -2080,13 +3300,27 @@ packages:
       '@babel/plugin-transform-typescript': 7.22.10(@babel/core@7.22.10)
     dev: true
 
-  /@babel/register@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-vV6pm/4CijSQ8Y47RH5SopXzursN35RQINfGJkmOlcpAtGuf94miFvIPhCKGQN7WGIcsgG1BHEX2KVdTYwTwUQ==}
+  /@babel/preset-typescript@7.23.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.23.5
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
+    dev: true
+
+  /@babel/register@7.22.15(@babel/core@7.23.5):
+    resolution: {integrity: sha512-V3Q3EqoQdn65RCgTLwauZaTfd1ShhwPmbBv+1dkZV/HpCGMKVyn6oFcRlI7RaKqiDQjX2Qd3AuoEguBgdjIKlg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
@@ -2109,8 +3343,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
 
   /@babel/template@7.22.5:
     resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
@@ -2137,6 +3371,24 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/traverse@7.23.5:
+    resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
+      debug: 4.3.4(supports-color@8.1.1)
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/types@7.23.0:
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
@@ -2160,7 +3412,6 @@ packages:
       '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
 
   /@base2/pretty-print-object@1.0.1:
     resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
@@ -3089,29 +4340,6 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@jest/transform@29.3.1:
-    resolution: {integrity: sha512-8wmCFBTVGYqFNLWfcOWoVuMuKYPUBTnTMDkdvFtAYELwDOl9RGwOsvQWGPFxDJ8AWY9xM/8xCXdqmPK3+Q5Lug==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@babel/core': 7.22.10
-      '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.20
-      babel-plugin-istanbul: 6.1.1
-      chalk: 4.1.2
-      convert-source-map: 2.0.0
-      fast-json-stable-stringify: 2.1.0
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.3.1
-      jest-regex-util: 29.2.0
-      jest-util: 29.3.1
-      micromatch: 4.0.5
-      pirates: 4.0.5
-      slash: 3.0.0
-      write-file-atomic: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@jest/transform@29.7.0:
     resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3203,6 +4431,10 @@ packages:
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
 
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
   /@jridgewell/trace-mapping@0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
     dependencies:
@@ -3439,7 +4671,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /@pmmmwh/react-refresh-webpack-plugin@0.5.11(react-refresh@0.11.0)(webpack@5.88.2):
+  /@pmmmwh/react-refresh-webpack-plugin@0.5.11(react-refresh@0.14.0)(webpack@5.88.2):
     resolution: {integrity: sha512-7j/6vdTym0+qZ6u4XbSAxrWBGYSdCfTzySkj7WAFgDLmSyWlOrWvpyzxlFh5jtw9dn0oL/jtW+06XfFiisN3JQ==}
     engines: {node: '>= 10.13'}
     peerDependencies:
@@ -3472,7 +4704,7 @@ packages:
       find-up: 5.0.0
       html-entities: 2.4.0
       loader-utils: 2.0.4
-      react-refresh: 0.11.0
+      react-refresh: 0.14.0
       schema-utils: 3.3.0
       source-map: 0.7.4
       webpack: 5.88.2(@swc/core@1.3.93)(esbuild@0.19.8)(webpack-cli@5.1.4)
@@ -4225,152 +5457,68 @@ packages:
       '@sinonjs/commons': 1.8.4
     dev: true
 
-  /@storybook/addon-a11y@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-BzmSIhgqR+WSS5gqSOyzFACs20Nv0Wk9b4lpUWw5zEqZkXy1PFAUyRQ65kD9Tdjc1O2KL2Zi1h/gi0O6dWldMg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-a11y@7.6.4:
+    resolution: {integrity: sha512-NwROJMes3D1WVPSmASVnHtDCIFQCF3DoPJEpzpnUYFxCR2IQzqPSlf9jptRkot6XjL5XwVX5mV2KxC2lKA1cfg==}
     dependencies:
-      '@storybook/addon-highlight': 7.5.1
-      '@storybook/channels': 7.5.1
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@storybook/addon-highlight': 7.6.4
       axe-core: 4.5.1
-      lodash: 4.17.21
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-resize-detector: 7.1.2(react-dom@18.2.0)(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-actions@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-GieD3ru6EslKvwol1cE4lvszQCLB/AkQdnLofnqy1nnYso+hRxmPAw9/O+pWfpUBFdjXsQ7GX09+wEUpOJzepw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-actions@7.6.4:
+    resolution: {integrity: sha512-91UD5KPDik74VKVioPMcbwwvDXN/non8p1wArYAHCHCmd/Pts5MJRiFueSdfomSpNjUtjtn6eSXtwpIL3XVOfQ==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
+      '@storybook/core-events': 7.6.4
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@types/uuid': 9.0.7
       dequal: 2.0.3
-      lodash: 4.17.21
       polished: 4.2.2
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-inspector: 6.0.2(react@18.2.0)
-      telejson: 7.2.0
-      ts-dedent: 2.2.0
       uuid: 9.0.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-backgrounds@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-XZoyJw/WoUlVvQHPTbSAZjKy2SEUjaSmAWgcRync25vp+q0obthjx6UnZHEUuH8Ud07HA3FYzlFtMicH5y/OIQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-backgrounds@7.6.4:
+    resolution: {integrity: sha512-gNy3kIkHSr+Lg/jVDHwbZjIe1po5SDGZNVe39vrJwnqGz8T1clWes9WHCL6zk/uaCDA3yUna2Nt/KlOFAWDSoQ==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
       memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-controls@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Xag1e7TZo04LjUenfobkShpKMxTtwa4xM4bXQA8LjaAGZQ7jipbQ4PE73a17K59S2vqq89VAhkuMJWiyaOFqpw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-controls@7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k4AtZfazmD/nL3JAtLGAB7raPhkhUo0jWnaZWrahd9h1Fm13mBU/RW+JzTRhCw3Mp2HPERD7NI5Qcd2fUP6WDA==}
     dependencies:
-      '@storybook/blocks': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-common': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/node-logger': 7.5.1
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@storybook/blocks': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
       lodash: 4.17.21
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
       - encoding
+      - react
+      - react-dom
       - supports-color
     dev: true
 
-  /@storybook/addon-docs@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+wE67oWIhGK9+kv2sxoY2KDXm3v62RfEgxiksdhtffTP/joOK3p88S0lO+8g0G4xfNGUnBhPtzGMuUxWwaH2Pw==}
+  /@storybook/addon-docs@7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-PbFMbvC9sK3sGdMhwmagXs9TqopTp9FySji+L8O7W9SHRC6wSmdwoWWPWybkOYxr/z/wXi7EM0azSAX7yQxLbw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@jest/transform': 29.3.1
+      '@jest/transform': 29.7.0
       '@mdx-js/react': 2.3.0(react@18.2.0)
-      '@storybook/blocks': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/csf-plugin': 7.5.1
-      '@storybook/csf-tools': 7.5.1
+      '@storybook/blocks': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/client-logger': 7.6.4
+      '@storybook/components': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/csf-plugin': 7.6.4
+      '@storybook/csf-tools': 7.6.4
       '@storybook/global': 5.0.0
       '@storybook/mdx2-csf': 1.1.0
-      '@storybook/node-logger': 7.5.1
-      '@storybook/postinstall': 7.5.1
-      '@storybook/preview-api': 7.5.1
-      '@storybook/react-dom-shim': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@storybook/node-logger': 7.6.4
+      '@storybook/postinstall': 7.6.4
+      '@storybook/preview-api': 7.6.4
+      '@storybook/react-dom-shim': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/theming': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.4
       fs-extra: 11.1.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -4384,25 +5532,25 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-essentials@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-/jaUZXV+mE/2G5PgEpFKm4lFEHluWn6GFR/pg+hphvHOzBGA3Y75JMgUfJ5CDYHB1dAVSf9JrPOd8Eb1tpESfA==}
+  /@storybook/addon-essentials@7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-J+zPmP4pbuuFxQ3pjLRYQRnxEtp7jF3xRXGFO8brVnEqtqoxwJ6j3euUrRLe0rpGAU3AD7dYfaaFjd3xkENgTw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@storybook/addon-actions': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-backgrounds': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-controls': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-docs': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-highlight': 7.5.1
-      '@storybook/addon-measure': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-outline': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-toolbars': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-viewport': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-common': 7.5.1
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/node-logger': 7.5.1
-      '@storybook/preview-api': 7.5.1
+      '@storybook/addon-actions': 7.6.4
+      '@storybook/addon-backgrounds': 7.6.4
+      '@storybook/addon-controls': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-docs': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-highlight': 7.6.4
+      '@storybook/addon-measure': 7.6.4
+      '@storybook/addon-outline': 7.6.4
+      '@storybook/addon-toolbars': 7.6.4
+      '@storybook/addon-viewport': 7.6.4
+      '@storybook/core-common': 7.6.4
+      '@storybook/manager-api': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/node-logger': 7.6.4
+      '@storybook/preview-api': 7.6.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       ts-dedent: 2.2.0
@@ -4413,217 +5561,96 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-highlight@7.5.1:
-    resolution: {integrity: sha512-js9OV17kpjRowuaGAPfI9aOn/zzt8P589ACZE+/eYBO9jT65CADwAUxg//Uq0/he+Ac9495pcK3BcYyDeym7/g==}
+  /@storybook/addon-highlight@7.6.4:
+    resolution: {integrity: sha512-0kvjDzquoPwWWU61QYmEtcSGWXufnV7Z/bfBTYh132uxvV/X9YzDFcXXrxGL7sBJkK32gNUUBDuiTOxs5NxyOQ==}
     dependencies:
-      '@storybook/core-events': 7.5.1
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 7.5.1
     dev: true
 
-  /@storybook/addon-links@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-KDiQYAVNXxuVTB3QLFZxHlfT8q4KnlNKY+0OODvgD5o1FqFpIyUiR5mIBL4SZMRj2EtwrR3KmZ2UPccFZdu9vw==}
+  /@storybook/addon-links@7.6.4(react@18.2.0):
+    resolution: {integrity: sha512-TEhxYdMhJO28gD84ej1FCwLv9oLuCPt77bRXip9ndaNPRTdHYdWv6IP94dhbuDi8eHux7Z4A/mllciFuDFrnCw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       react:
         optional: true
-      react-dom:
-        optional: true
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/csf': 0.1.1
+      '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/router': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
-      prop-types: 15.8.1
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-measure@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yR6oELJe0UHYxRijd1YMuGaQRlZ3uABjmrXaFCPnd6agahgTwIJLiK4XamtkVur//LaiJMvtmM2XXrkJ1BvNJw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-measure@7.6.4:
+    resolution: {integrity: sha512-73wsJ8PALsgWniR3MA/cmxcFuU6cRruWdIyYzOMgM8ife2Jm3xSkV7cTTXAqXt2H9Uuki4PGnuMHWWFLpPeyVA==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/types': 7.5.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       tiny-invariant: 1.3.1
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-outline@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-IMi5Bo34/Q5YUG5uD8ZUTBwlpGrkDIV+PUgkyNIbmn9OgozoCH80Fs7YlGluRFODQISpHwio9qvSFRGdSNT56A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-outline@7.6.4:
+    resolution: {integrity: sha512-CFxGASRse/qeFocetDKFNeWZ3Aa2wapVtRciDNa4Zx7k1wCnTjEsPIm54waOuCaNVcrvO+nJUAZG5WyiorQvcg==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/types': 7.5.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-storysource@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-B+g0n7Ysk1ldeVyey/vfVyGHmcD5p+/49rWMVp39O8xx/nQMYl0UWSHBcqh6AouNx6GVn+J9wmN0LhP2AOFHxA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-storysource@7.6.4:
+    resolution: {integrity: sha512-D63IB8bkqn5ZDq4yjvkcLVfGz3OcAQUohlxSFR1e7COo8jMSTiQWjN7xaVPNOnVJRCj6GrlRlto/hqGl+F+WiQ==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/router': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/source-loader': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/source-loader': 7.6.4
       estraverse: 5.3.0
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-syntax-highlighter: 15.5.0(react@18.2.0)
       tiny-invariant: 1.3.1
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-toolbars@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-T88hEEQicV6eCovr5TN2nFgKt7wU0o7pAunP5cU01iiVRj63+oQiVIBB8Xtm4tN+/DsqtyP0BTa6rFwt2ULy8A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-    dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
+  /@storybook/addon-toolbars@7.6.4:
+    resolution: {integrity: sha512-ENMQJgU4sRCLLDVXYfa+P3cQVV9PC0ZxwVAKeM3NPYPNH/ODoryGNtq+Q68LwHlM4ObCE2oc9MzaQqPxloFcCw==}
     dev: true
 
-  /@storybook/addon-viewport@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-L57lOGB3LfKgAdLinaZojRQ9W9w2RC0iP9bVaXwrRVeJdpNayfuW4Kh1C8dmacZroB4Zp2U/nEjkSmdcp6uUWg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/addon-viewport@7.6.4:
+    resolution: {integrity: sha512-SoTcHIoqybhYD28v7QExF1EZnl7FfxuP74VDhtze5LyMd2CbqmVnUfwewLCz/3IvCNce0GqdNyg1m6QJ7Eq1uw==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
       memoizerific: 1.11.3
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
     dev: true
 
-  /@storybook/addons@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-/AdQYqZ1aHHmMrJL68suo1IdyQzRQX7W1sQ3o40juqr/REIpiSZMMSuBcQ6wKXP1NxHMJXEDdb/iSN31Z6DiLg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  /@storybook/addons@7.6.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-YnmLyR/ciALtzoi9HEu+Y+NJWeOVEBo9PRgQaG7zGiNDvOrLY69uU3Ej0+TZlrTqBqce42bRCrDINJfnk0Mfsg==}
     dependencies:
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/types': 7.5.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@storybook/manager-api': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/preview-api': 7.6.4
+      '@storybook/types': 7.6.4
+    transitivePeerDependencies:
+      - react
+      - react-dom
     dev: true
 
-  /@storybook/api@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-z5HrwXnBdfr8q5CO3E9oL0H+joixyuQ2nod+UPqd5QYE/GzpyWHTzpW6CxSCDX2wL60KEsfc/7T0CE12Gx4XMA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  /@storybook/api@7.6.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-iY/ZejLmVHctT6WcCiVCXBY84g/wMP7Amb+J3xTBM6jZHAJoHpM3ZeYlR5eZu4QfbGZh608TQDTmdQ7irDo3ZA==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@storybook/client-logger': 7.6.4
+      '@storybook/manager-api': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - react
+      - react-dom
     dev: true
 
-  /@storybook/blocks@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-7b69p6kDdgmlejEMM2mW6/Lz4OmU/R3Qr+TpKnPcV5iS7ADxRQEQCTEMoQ5RyLJf0vDRh/7Ljn/RMo8Ux3X7JA==}
+  /@storybook/blocks@7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-iXinXXhTUBtReREP1Jifpu35DnGg7FidehjvCM8sM4E4aymfb8czdg9DdvG46T2UFUPUct36nnjIdMLWOya8Bw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@storybook/channels': 7.5.1
-      '@storybook/client-logger': 7.5.1
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
-      '@storybook/csf': 0.1.1
-      '@storybook/docs-tools': 7.5.1
+      '@storybook/channels': 7.6.4
+      '@storybook/client-logger': 7.6.4
+      '@storybook/components': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/core-events': 7.6.4
+      '@storybook/csf': 0.1.2
+      '@storybook/docs-tools': 7.6.4
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.5.1
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@storybook/manager-api': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/preview-api': 7.6.4
+      '@storybook/theming': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.4
       '@types/lodash': 4.14.188
       color-convert: 2.0.1
       dequal: 2.0.3
@@ -4645,13 +5672,13 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-manager@7.5.1:
-    resolution: {integrity: sha512-a02kg/DCcYgiTz+7rw4KdvQzif+2lZ+NIFF5U5u8SDoCQuoe3wRT6QBrFYQTxJexA4WfO6cpyRLDJ1rx6NLo8A==}
+  /@storybook/builder-manager@7.6.4:
+    resolution: {integrity: sha512-k5+D3fXw7LdMOWd5tF7cIq8L3irrdW6/vmcEHLaJj1EXZ+DvsNCH9xSsLS+6zfrUcxug4oSfRqvF87w6Oz3DtA==}
     dependencies:
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@storybook/core-common': 7.5.1
-      '@storybook/manager': 7.5.1
-      '@storybook/node-logger': 7.5.1
+      '@storybook/core-common': 7.6.4
+      '@storybook/manager': 7.6.4
+      '@storybook/node-logger': 7.6.4
       '@types/ejs': 3.1.2
       '@types/find-cache-dir': 3.2.1
       '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.18.20)
@@ -4669,36 +5696,37 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-webpack5@7.5.1(esbuild@0.19.8)(typescript@4.9.5)(webpack-cli@5.1.4):
-    resolution: {integrity: sha512-klZ2Q1lESt4o9HhofsD1cEPFd8T9FCWkMCNVYmPoGepmyVwuibLCJ/U6k4noQ8Wow5SEexKSq2gU7ir7cKcXwA==}
+  /@storybook/builder-webpack5@7.6.4(esbuild@0.19.8)(typescript@4.9.5)(webpack-cli@5.1.4):
+    resolution: {integrity: sha512-J5wzPn/rsowlur5A7W9pAfN3a5fMapOoHaZsDKUklGRud/JUeabAIVdL1P/eX+yE3xaJk9auYivEWbglSx2Kpg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@babel/core': 7.22.10
-      '@storybook/channels': 7.5.1
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-common': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/core-webpack': 7.5.1
-      '@storybook/node-logger': 7.5.1
-      '@storybook/preview': 7.5.1
-      '@storybook/preview-api': 7.5.1
+      '@babel/core': 7.23.5
+      '@storybook/channels': 7.6.4
+      '@storybook/client-logger': 7.6.4
+      '@storybook/core-common': 7.6.4
+      '@storybook/core-events': 7.6.4
+      '@storybook/core-webpack': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/preview': 7.6.4
+      '@storybook/preview-api': 7.6.4
       '@swc/core': 1.3.93
       '@types/node': 18.18.4
       '@types/semver': 7.5.0
-      babel-loader: 9.1.3(@babel/core@7.22.10)(webpack@5.88.2)
-      babel-plugin-named-exports-order: 0.0.2
+      babel-loader: 9.1.3(@babel/core@7.23.5)(webpack@5.88.2)
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
       constants-browserify: 1.0.0
       css-loader: 6.8.1(webpack@5.88.2)
+      es-module-lexer: 1.4.1
       express: 4.18.2
       fork-ts-checker-webpack-plugin: 8.0.0(typescript@4.9.5)(webpack@5.88.2)
       fs-extra: 11.1.1
       html-webpack-plugin: 5.5.3(webpack@5.88.2)
+      magic-string: 0.30.5
       path-browserify: 1.0.1
       process: 0.11.10
       semver: 7.5.4
@@ -4734,44 +5762,44 @@ packages:
       tiny-invariant: 1.3.1
     dev: true
 
-  /@storybook/channels@7.5.3:
-    resolution: {integrity: sha512-dhWuV2o2lmxH0RKuzND8jxYzvSQTSmpE13P0IT/k8+I1up/rSNYOBQJT6SalakcNWXFAMXguo/8E7ApmnKKcEw==}
+  /@storybook/channels@7.6.3:
+    resolution: {integrity: sha512-o9J0TBbFon16tUlU5V6kJgzAlsloJcS1cTHWqh3VWczohbRm+X1PLNUihJ7Q8kBWXAuuJkgBu7RQH7Ib46WyYg==}
     dependencies:
-      '@storybook/client-logger': 7.5.3
-      '@storybook/core-events': 7.5.3
+      '@storybook/client-logger': 7.6.3
+      '@storybook/core-events': 7.6.3
       '@storybook/global': 5.0.0
       qs: 6.11.2
       telejson: 7.2.0
       tiny-invariant: 1.3.1
     dev: true
 
-  /@storybook/channels@7.6.3:
-    resolution: {integrity: sha512-o9J0TBbFon16tUlU5V6kJgzAlsloJcS1cTHWqh3VWczohbRm+X1PLNUihJ7Q8kBWXAuuJkgBu7RQH7Ib46WyYg==}
+  /@storybook/channels@7.6.4:
+    resolution: {integrity: sha512-Z4PY09/Czl70ap4ObmZ4bgin+EQhPaA3HdrEDNwpnH7A9ttfEO5u5KThytIjMq6kApCCihmEPDaYltoVrfYJJA==}
     dependencies:
-      '@storybook/client-logger': 7.6.3
-      '@storybook/core-events': 7.6.3
+      '@storybook/client-logger': 7.6.4
+      '@storybook/core-events': 7.6.4
       '@storybook/global': 5.0.0
       qs: 6.11.2
       telejson: 7.2.0
       tiny-invariant: 1.3.1
     dev: true
 
-  /@storybook/cli@7.5.1:
-    resolution: {integrity: sha512-qKIJs8gqXTy0eSEbt0OW5nsJqiV/2+N1eWoiBiIxoZ+8b0ACXIAUcE/N6AsEDUqIq8AMK7lebqjEfIAt2Sp7Mg==}
+  /@storybook/cli@7.6.4:
+    resolution: {integrity: sha512-GqvaFdkkBMJOdnrVe82XY0V3b+qFMhRNyVoTv2nqB87iMUXZHqh4Pu4LqwaJBsBpuNregvCvVOPe9LGgoOzy4A==}
     hasBin: true
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/preset-env': 7.22.10(@babel/core@7.22.10)
-      '@babel/types': 7.23.0
+      '@babel/core': 7.23.5
+      '@babel/preset-env': 7.23.5(@babel/core@7.23.5)
+      '@babel/types': 7.23.5
       '@ndelangen/get-tarball': 3.0.9
-      '@storybook/codemod': 7.5.1
-      '@storybook/core-common': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/core-server': 7.5.1
-      '@storybook/csf-tools': 7.5.1
-      '@storybook/node-logger': 7.5.1
-      '@storybook/telemetry': 7.5.1
-      '@storybook/types': 7.5.1
+      '@storybook/codemod': 7.6.4
+      '@storybook/core-common': 7.6.4
+      '@storybook/core-events': 7.6.4
+      '@storybook/core-server': 7.6.4
+      '@storybook/csf-tools': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/telemetry': 7.6.4
+      '@storybook/types': 7.6.4
       '@types/semver': 7.5.0
       '@yarnpkg/fslib': 2.10.3
       '@yarnpkg/libzip': 2.3.0
@@ -4788,7 +5816,7 @@ packages:
       get-port: 5.1.1
       giget: 1.1.2
       globby: 11.1.0
-      jscodeshift: 0.14.0(@babel/preset-env@7.22.10)
+      jscodeshift: 0.15.1(@babel/preset-env@7.23.5)
       leven: 3.1.0
       ora: 5.4.1
       prettier: 2.8.8
@@ -4814,32 +5842,32 @@ packages:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/client-logger@7.5.3:
-    resolution: {integrity: sha512-vUFYALypjix5FoJ5M/XUP6KmyTnQJNW1poHdW7WXUVSg+lBM6E5eAtjTm0hdxNNDH8KSrdy24nCLra5h0X0BWg==}
+  /@storybook/client-logger@7.6.3:
+    resolution: {integrity: sha512-BpsCnefrBFdxD6ukMjAblm1D6zB4U5HR1I85VWw6LOqZrfzA6l/1uBxItz0XG96HTjngbvAabWf5k7ZFCx5UCg==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/client-logger@7.6.3:
-    resolution: {integrity: sha512-BpsCnefrBFdxD6ukMjAblm1D6zB4U5HR1I85VWw6LOqZrfzA6l/1uBxItz0XG96HTjngbvAabWf5k7ZFCx5UCg==}
+  /@storybook/client-logger@7.6.4:
+    resolution: {integrity: sha512-vJwMShC98tcoFruRVQ4FphmFqvAZX1FqZqjFyk6IxtFumPKTVSnXJjlU1SnUIkSK2x97rgdUMqkdI+wAv/tugQ==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/codemod@7.5.1:
-    resolution: {integrity: sha512-PqHGOz/CZnRG9pWgshezCacu524CrXOJrCOwMUP9OMpH0Jk/NhBkHaBZrB8wMjn5hekTj0UmRa/EN8wJm9CCUQ==}
+  /@storybook/codemod@7.6.4:
+    resolution: {integrity: sha512-q4rZVOfozxzbDRH/LzuFDoIGBdXs+orAm18fi6iAx8PeMHe8J/MOXKccNV1zdkm/h7mTQowuRo45KwJHw8vX+g==}
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/preset-env': 7.22.10(@babel/core@7.22.10)
-      '@babel/types': 7.23.4
-      '@storybook/csf': 0.1.1
-      '@storybook/csf-tools': 7.5.1
-      '@storybook/node-logger': 7.5.1
-      '@storybook/types': 7.5.1
+      '@babel/core': 7.23.5
+      '@babel/preset-env': 7.23.5(@babel/core@7.23.5)
+      '@babel/types': 7.23.5
+      '@storybook/csf': 0.1.2
+      '@storybook/csf-tools': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/types': 7.6.4
       '@types/cross-spawn': 6.0.2
       cross-spawn: 7.0.3
       globby: 11.1.0
-      jscodeshift: 0.14.0(@babel/preset-env@7.22.10)
+      jscodeshift: 0.15.1(@babel/preset-env@7.23.5)
       lodash: 4.17.21
       prettier: 2.8.8
       recast: 0.23.4
@@ -4847,19 +5875,19 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/components@7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-fdzzxGBV/Fj9pYwfYL3RZsVUHeBqlfLMBP/L6mPmjaZSwHFqkaRZZUajZc57lCtI+TOy2gY6WH3cPavEtqtgLw==}
+  /@storybook/components@7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-K5RvEObJAnX+SbGJbkM1qrZEk+VR2cUhRCSrFnlfMwsn8/60T3qoH7U8bCXf8krDgbquhMwqev5WzDB+T1VV8g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-toolbar': 1.0.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.5.1
-      '@storybook/csf': 0.1.1
+      '@storybook/client-logger': 7.6.4
+      '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@storybook/theming': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.4
       memoizerific: 1.11.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -4870,11 +5898,11 @@ packages:
       - '@types/react-dom'
     dev: true
 
-  /@storybook/core-client@7.5.1:
-    resolution: {integrity: sha512-K651UnNKkW8U078CH5rcUqf0siGcfEhwya2yQN5RBb/H78HSLBLdYgzKqxaKtmz+S8DFyWhrgbXZLdBjavozJg==}
+  /@storybook/core-client@7.6.4:
+    resolution: {integrity: sha512-0msqdGd+VYD1dRgAJ2StTu4d543Wveb7LVVujX3PwD/QCxmCaVUHuAoZrekM/H7jZLw546ZIbLZo0xWrADAUMw==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/preview-api': 7.5.1
+      '@storybook/client-logger': 7.6.4
+      '@storybook/preview-api': 7.6.4
     dev: true
 
   /@storybook/core-common@7.5.1:
@@ -4908,14 +5936,39 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/core-events@7.5.1:
-    resolution: {integrity: sha512-2eyaUhTfmEEqOEZVoCXVITCBn6N7QuZCG2UNxv0l//ED+7MuMiFhVw7kS7H3WOVk65R7gb8qbKFTNX8HFTgBHg==}
+  /@storybook/core-common@7.6.4:
+    resolution: {integrity: sha512-qes4+mXqINu0kCgSMFjk++GZokmYjb71esId0zyJsk0pcIPkAiEjnhbSEQkMhbUfcvO1lztoaQTBW2P7Rd1tag==}
     dependencies:
+      '@storybook/core-events': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/types': 7.6.4
+      '@types/find-cache-dir': 3.2.1
+      '@types/node': 18.18.4
+      '@types/node-fetch': 2.6.4
+      '@types/pretty-hrtime': 1.0.1
+      chalk: 4.1.2
+      esbuild: 0.18.20
+      esbuild-register: 3.5.0(esbuild@0.18.20)
+      file-system-cache: 2.3.0
+      find-cache-dir: 3.3.2
+      find-up: 5.0.0
+      fs-extra: 11.1.1
+      glob: 10.3.3
+      handlebars: 4.7.7
+      lazy-universal-dotenv: 4.0.0
+      node-fetch: 2.6.7
+      picomatch: 2.3.1
+      pkg-dir: 5.0.0
+      pretty-hrtime: 1.0.3
+      resolve-from: 5.0.0
       ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
     dev: true
 
-  /@storybook/core-events@7.5.3:
-    resolution: {integrity: sha512-DFOpyQ22JD5C1oeOFzL8wlqSWZzrqgDfDbUGP8xdO4wJu+FVTxnnWN6ZYLdTPB1u27DOhd7TzjQMfLDHLu7kbQ==}
+  /@storybook/core-events@7.5.1:
+    resolution: {integrity: sha512-2eyaUhTfmEEqOEZVoCXVITCBn6N7QuZCG2UNxv0l//ED+7MuMiFhVw7kS7H3WOVk65R7gb8qbKFTNX8HFTgBHg==}
     dependencies:
       ts-dedent: 2.2.0
     dev: true
@@ -4926,24 +5979,30 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/core-server@7.5.1:
-    resolution: {integrity: sha512-DD4BXCH91aZJoFuu0cQwG1ZUmE59kG5pazuE3S89zH1GwKS1jWyeAv4EwEfvynT5Ah1ctd8QdCZCSXVzjq0qcw==}
+  /@storybook/core-events@7.6.4:
+    resolution: {integrity: sha512-i3xzcJ19ILSy4oJL5Dz9y0IlyApynn5RsGhAMIsW+mcfri+hGfeakq1stNCo0o7jW4Y3A7oluFTtIoK8DOxQdQ==}
+    dependencies:
+      ts-dedent: 2.2.0
+    dev: true
+
+  /@storybook/core-server@7.6.4:
+    resolution: {integrity: sha512-mXxZMpCwOhjEPPRjqrTHdiCpFdkc47f46vlgTj02SX+9xKHxslmZ2D3JG/8O4Ab9tG+bBl6lBm3RIrIzaiCu9Q==}
     dependencies:
       '@aw-web-design/x-default-browser': 1.4.126
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-manager': 7.5.1
-      '@storybook/channels': 7.5.1
-      '@storybook/core-common': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/csf': 0.1.1
-      '@storybook/csf-tools': 7.5.1
+      '@storybook/builder-manager': 7.6.4
+      '@storybook/channels': 7.6.4
+      '@storybook/core-common': 7.6.4
+      '@storybook/core-events': 7.6.4
+      '@storybook/csf': 0.1.2
+      '@storybook/csf-tools': 7.6.4
       '@storybook/docs-mdx': 0.1.0
       '@storybook/global': 5.0.0
-      '@storybook/manager': 7.5.1
-      '@storybook/node-logger': 7.5.1
-      '@storybook/preview-api': 7.5.1
-      '@storybook/telemetry': 7.5.1
-      '@storybook/types': 7.5.1
+      '@storybook/manager': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/preview-api': 7.6.4
+      '@storybook/telemetry': 7.6.4
+      '@storybook/types': 7.6.4
       '@types/detect-port': 1.3.3
       '@types/node': 18.18.4
       '@types/pretty-hrtime': 1.0.1
@@ -4977,12 +6036,12 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@storybook/core-webpack@7.5.1:
-    resolution: {integrity: sha512-FlXj6GCXG0evCC5s7LNcu1uxRC9fG856HQe4PzEk7jDSQdWQRX8Olpo4IOHB1WObuvYqw6Gf0OD6TB5uhnKXmg==}
+  /@storybook/core-webpack@7.6.4:
+    resolution: {integrity: sha512-+C2YddhOhO0Lp9KngzX9XYJZKzCzo4vjXA3IMXxSA7Vo7gFhaa8uQTAXnUx7xCrvFXM/iiHUY1SN+VppB0eBdA==}
     dependencies:
-      '@storybook/core-common': 7.5.1
-      '@storybook/node-logger': 7.5.1
-      '@storybook/types': 7.5.1
+      '@storybook/core-common': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/types': 7.6.4
       '@types/node': 18.18.4
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -4990,10 +6049,10 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/csf-plugin@7.5.1:
-    resolution: {integrity: sha512-jhV2aCZhSIXUiQDcHtuCg3dyYMzjYHTwLb4cJtkNw4sXqQoTGydTSWYwWigcHFfKGoyQp82rSgE1hE4YYx6iew==}
+  /@storybook/csf-plugin@7.6.4:
+    resolution: {integrity: sha512-7g9p8s2ITX+Z9iThK5CehPhJOcusVN7JcUEEW+gVF5PlYT+uk/x+66gmQno+scQuNkV9+8UJD6RLFjP+zg2uCA==}
     dependencies:
-      '@storybook/csf-tools': 7.5.1
+      '@storybook/csf-tools': 7.6.4
       unplugin: 1.4.0
     transitivePeerDependencies:
       - supports-color
@@ -5003,10 +6062,10 @@ packages:
     resolution: {integrity: sha512-YChGbT1/odLS4RLb2HtK7ixM7mH5s7G5nOsWGKXalbza4SFKZIU2UzllEUsA+X8YfxMHnCD5TC3xLfK0ByxmzQ==}
     dependencies:
       '@babel/generator': 7.23.0
-      '@babel/parser': 7.23.4
+      '@babel/parser': 7.23.5
       '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.4
-      '@storybook/csf': 0.1.1
+      '@babel/types': 7.23.5
+      '@storybook/csf': 0.1.2
       '@storybook/types': 7.5.1
       fs-extra: 11.1.1
       recast: 0.23.4
@@ -5015,16 +6074,26 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/csf@0.0.1:
-    resolution: {integrity: sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==}
+  /@storybook/csf-tools@7.6.4:
+    resolution: {integrity: sha512-6sLayuhgReIK3/QauNj5BW4o4ZfEMJmKf+EWANPEM/xEOXXqrog6Un8sjtBuJS9N1DwyhHY6xfkEiPAwdttwqw==}
     dependencies:
-      lodash: 4.17.21
+      '@babel/generator': 7.23.0
+      '@babel/parser': 7.23.5
+      '@babel/traverse': 7.23.2
+      '@babel/types': 7.23.5
+      '@storybook/csf': 0.1.2
+      '@storybook/types': 7.6.4
+      fs-extra: 11.1.1
+      recast: 0.23.4
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@storybook/csf@0.1.1:
-    resolution: {integrity: sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==}
+  /@storybook/csf@0.0.1:
+    resolution: {integrity: sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==}
     dependencies:
-      type-fest: 2.19.0
+      lodash: 4.17.21
     dev: true
 
   /@storybook/csf@0.1.2:
@@ -5037,13 +6106,14 @@ packages:
     resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==}
     dev: true
 
-  /@storybook/docs-tools@7.5.1:
-    resolution: {integrity: sha512-tDtQGeKU5Kc2XoqZ5vpeGQrOkRg2UoDiSRS6cLy+M/sMB03Annq0ZngnJXaMiv0DLi2zpWSgWqPgYA3TJTZHBw==}
+  /@storybook/docs-tools@7.6.4:
+    resolution: {integrity: sha512-2eGam43aD7O3cocA72Z63kRi7t/ziMSpst0qB218QwBWAeZjT4EYDh8V6j/Xhv6zVQL3msW7AglrQP5kCKPvPA==}
     dependencies:
-      '@storybook/core-common': 7.5.1
-      '@storybook/preview-api': 7.5.1
-      '@storybook/types': 7.5.1
+      '@storybook/core-common': 7.6.4
+      '@storybook/preview-api': 7.6.4
+      '@storybook/types': 7.6.4
       '@types/doctrine': 0.0.3
+      assert: 2.1.0
       doctrine: 3.0.0
       lodash: 4.17.21
     transitivePeerDependencies:
@@ -5055,42 +6125,17 @@ packages:
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
     dev: true
 
-  /@storybook/manager-api@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ygwJywluhhE1dpA0jC2D/3NFhMXzFCt+iW4m3cOwexYTuiDWF66AbGOFBx9peE7Wk/Z9doKkf9E3v11enwaidA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@storybook/channels': 7.5.1
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/csf': 0.1.1
-      '@storybook/global': 5.0.0
-      '@storybook/router': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
-      dequal: 2.0.3
-      lodash: 4.17.21
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      semver: 7.5.4
-      store2: 2.14.2
-      telejson: 7.2.0
-      ts-dedent: 2.2.0
-    dev: true
-
-  /@storybook/manager-api@7.6.3(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-soDH7GZuukkhYRGzlw4jhCm5EzjfkuIAtb37/DFplqxuVbvlyJEVzkMUM2KQO7kq0/8GlWPiZ5mn56wagYyhKQ==}
+  /@storybook/manager-api@7.6.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-RFb/iaBJfXygSgXkINPRq8dXu7AxBicTGX7MxqKXbz5FU7ANwV7abH6ONBYURkSDOH9//TQhRlVkF5u8zWg3bw==}
     dependencies:
-      '@storybook/channels': 7.6.3
-      '@storybook/client-logger': 7.6.3
-      '@storybook/core-events': 7.6.3
+      '@storybook/channels': 7.6.4
+      '@storybook/client-logger': 7.6.4
+      '@storybook/core-events': 7.6.4
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/router': 7.6.3
-      '@storybook/theming': 7.6.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.3
+      '@storybook/router': 7.6.4
+      '@storybook/theming': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.4
       dequal: 2.0.3
       lodash: 4.17.21
       memoizerific: 1.11.3
@@ -5103,8 +6148,8 @@ packages:
       - react-dom
     dev: true
 
-  /@storybook/manager@7.5.1:
-    resolution: {integrity: sha512-Jo83sj7KvsZ78vvqjH72ErmQ31Frx6GBLbpeYXZtbAXWl0/LHsxAEVz0Mke+DixzWDyP0/cn+Nw8QUfA+Oz1fg==}
+  /@storybook/manager@7.6.4:
+    resolution: {integrity: sha512-Ug2ejfKgKre8h/RJbkumukwAA44TbvTPEjDcJmyFdAI+kHYhOYdKPEC2UNmVYz8/4HjwMTJQ3M7t/esK8HHY4A==}
     dev: true
 
   /@storybook/mdx2-csf@1.1.0:
@@ -5115,12 +6160,16 @@ packages:
     resolution: {integrity: sha512-xRMdL5YPe8C9sgJ1R0QD3YbiLjDGrfQk91+GplRD8N9FVCT5dki55Bv5Kp0FpemLYYg6uxAZL5nHmsZHKDKQoA==}
     dev: true
 
-  /@storybook/postinstall@7.5.1:
-    resolution: {integrity: sha512-+LFUe2nNbmmLPKNt34RXSSC1r40yGGOoP/qlaPFwNOgQN2AZUrfqk6ZYnw6LjmcuHpQInZ4y4WDgbzg6QQL3+w==}
+  /@storybook/node-logger@7.6.4:
+    resolution: {integrity: sha512-GDkEnnDj4Op+PExs8ZY/P6ox3wg453CdEIaR8PR9TxF/H/T2fBL6puzma3hN2CMam6yzfAL8U+VeIIDLQ5BZdQ==}
     dev: true
 
-  /@storybook/preset-react-webpack@7.5.1(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4):
-    resolution: {integrity: sha512-Dt6Na7YyxBHUoo2PJ73epLfGA3HlXMoF8MdtysQM5Pv6ZNcC3QmqoOnR0lQDMw0SzAcreRnY68Gu7xi+zTnlEw==}
+  /@storybook/postinstall@7.6.4:
+    resolution: {integrity: sha512-7uoB82hSzlFSdDMS3hKQD+AaeSvPit/fAMvXCBxn0/D0UGJUZcq4M9JcKBwEHkZJcbuDROgOTJ6TUeXi/FWO0w==}
+    dev: true
+
+  /@storybook/preset-react-webpack@7.6.4(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4):
+    resolution: {integrity: sha512-rQ3hqehGUvmbwUosNdh1jnXevaHQ9ezqc4v8YlX5TELp1oz+qhRe0gnQOdsQ98SsdjA24EHfgc331dp9F3up6Q==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       '@babel/core': ^7.22.0
@@ -5134,22 +6183,23 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/preset-flow': 7.22.5(@babel/core@7.22.10)
-      '@babel/preset-react': 7.22.5(@babel/core@7.22.10)
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.11(react-refresh@0.11.0)(webpack@5.88.2)
-      '@storybook/core-webpack': 7.5.1
-      '@storybook/docs-tools': 7.5.1
-      '@storybook/node-logger': 7.5.1
-      '@storybook/react': 7.5.1(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+      '@babel/preset-flow': 7.23.3(@babel/core@7.22.10)
+      '@babel/preset-react': 7.23.3(@babel/core@7.22.10)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.11(react-refresh@0.14.0)(webpack@5.88.2)
+      '@storybook/core-webpack': 7.6.4
+      '@storybook/docs-tools': 7.6.4
+      '@storybook/node-logger': 7.6.4
+      '@storybook/react': 7.6.4(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
       '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@4.9.5)(webpack@5.88.2)
       '@types/node': 18.18.4
       '@types/semver': 7.5.0
       babel-plugin-add-react-displayname: 0.0.5
-      babel-plugin-react-docgen: 4.2.1
       fs-extra: 11.1.1
+      magic-string: 0.30.5
       react: 18.2.0
+      react-docgen: 7.0.1
       react-dom: 18.2.0(react@18.2.0)
-      react-refresh: 0.11.0
+      react-refresh: 0.14.0
       semver: 7.5.4
       typescript: 4.9.5
       webpack: 5.88.2(@swc/core@1.3.93)(esbuild@0.19.8)(webpack-cli@5.1.4)
@@ -5168,34 +6218,15 @@ packages:
       - webpack-plugin-serve
     dev: true
 
-  /@storybook/preview-api@7.5.1:
-    resolution: {integrity: sha512-8xjUbuGmHLmw8tfTUCjXSvMM9r96JaexPFmHdwW6XLe71KKdWp8u96vRDRE5648cd+/of15OjaRtakRKqluA/A==}
-    dependencies:
-      '@storybook/channels': 7.5.1
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/csf': 0.1.1
-      '@storybook/global': 5.0.0
-      '@storybook/types': 7.5.1
-      '@types/qs': 6.9.9
-      dequal: 2.0.3
-      lodash: 4.17.21
-      memoizerific: 1.11.3
-      qs: 6.11.2
-      synchronous-promise: 2.0.17
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-    dev: true
-
-  /@storybook/preview-api@7.5.3:
-    resolution: {integrity: sha512-LNmEf7oBRnZ1wG3bQ+P+TO29+NN5pSDJiAA6FabZBrtIVm+psc2lxBCDQvFYyAFzQSlt60toGKNW8+RfFNdR5Q==}
+  /@storybook/preview-api@7.6.3:
+    resolution: {integrity: sha512-uPaK7yLE1P++F+IOb/1j9pgdCwfMYZrUPHogF/Mf9r4cfEjDCcIeKgGMcsbU1KnkzNQQGPh8JRzRr/iYnLjswg==}
     dependencies:
-      '@storybook/channels': 7.5.3
-      '@storybook/client-logger': 7.5.3
-      '@storybook/core-events': 7.5.3
-      '@storybook/csf': 0.1.1
+      '@storybook/channels': 7.6.3
+      '@storybook/client-logger': 7.6.3
+      '@storybook/core-events': 7.6.3
+      '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/types': 7.5.3
+      '@storybook/types': 7.6.3
       '@types/qs': 6.9.10
       dequal: 2.0.3
       lodash: 4.17.21
@@ -5206,15 +6237,15 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /@storybook/preview-api@7.6.3:
-    resolution: {integrity: sha512-uPaK7yLE1P++F+IOb/1j9pgdCwfMYZrUPHogF/Mf9r4cfEjDCcIeKgGMcsbU1KnkzNQQGPh8JRzRr/iYnLjswg==}
+  /@storybook/preview-api@7.6.4:
+    resolution: {integrity: sha512-KhisNdQX5NdfAln+spLU4B82d804GJQp/CnI5M1mm/taTnjvMgs/wTH9AmR89OPoq+tFZVW0vhy2zgPS3ar71A==}
     dependencies:
-      '@storybook/channels': 7.6.3
-      '@storybook/client-logger': 7.6.3
-      '@storybook/core-events': 7.6.3
+      '@storybook/channels': 7.6.4
+      '@storybook/client-logger': 7.6.4
+      '@storybook/core-events': 7.6.4
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/types': 7.6.3
+      '@storybook/types': 7.6.4
       '@types/qs': 6.9.10
       dequal: 2.0.3
       lodash: 4.17.21
@@ -5225,8 +6256,8 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /@storybook/preview@7.5.1:
-    resolution: {integrity: sha512-nfZC103z9Cy27FrJKUr2IjDuVt8Mvn1Z5gZ0TtJihoK7sfLTv29nd/XU9zzrb/epM3o8UEzc63xZZsMaToDbAw==}
+  /@storybook/preview@7.6.4:
+    resolution: {integrity: sha512-p9xIvNkgXgTpSRphOMV9KpIiNdkymH61jBg3B0XyoF6IfM1S2/mQGvC89lCVz1dMGk2SrH4g87/WcOapkU5ArA==}
     dev: true
 
   /@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@4.9.5)(webpack@5.88.2):
@@ -5248,8 +6279,8 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/react-dom-shim@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-bzTIfLm91O9h3rPYJLtRbmsPARerY3z7MoyvadGp8TikvIvf+WyT/vHujw+20SxnqiZVq5Jv65FFlxc46GGB1Q==}
+  /@storybook/react-dom-shim@7.6.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wGJfomlDEBnowNmhmumWDu/AcUInxSoPqUUJPgk2f5oL0EW17fR9fDP/juG3XOEdieMDM0jDX48GML7lyvL2fg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5258,8 +6289,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/react-webpack5@7.5.1(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4):
-    resolution: {integrity: sha512-iH1y35LjnAmyMA0QhZHiYyGrQYelY0Lds0K+cDZlFDDi7W4YiunULAyakZTje0LctJTLWcR7pWyp3dv2EYHb4g==}
+  /@storybook/react-webpack5@7.6.4(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4):
+    resolution: {integrity: sha512-uUucaHG67Yu2WrHigJzMbbYg6vbehHDUC6HsORcfwdC9y/VhR47ORU6UkVQNZ/K4WLNe4HbyGGKGRUght5UtbQ==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       '@babel/core': ^7.22.0
@@ -5273,9 +6304,9 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.22.10
-      '@storybook/builder-webpack5': 7.5.1(esbuild@0.19.8)(typescript@4.9.5)(webpack-cli@5.1.4)
-      '@storybook/preset-react-webpack': 7.5.1(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4)
-      '@storybook/react': 7.5.1(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+      '@storybook/builder-webpack5': 7.6.4(esbuild@0.19.8)(typescript@4.9.5)(webpack-cli@5.1.4)
+      '@storybook/preset-react-webpack': 7.6.4(@babel/core@7.22.10)(@swc/core@1.3.93)(esbuild@0.19.8)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(webpack-cli@5.1.4)
+      '@storybook/react': 7.6.4(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
       '@types/node': 18.18.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -5296,8 +6327,8 @@ packages:
       - webpack-plugin-serve
     dev: true
 
-  /@storybook/react@7.5.1(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-IG97c30fFSmPyGpJ1awHC/+9XnCTqleeOQwROXjroMHSm8m/JTWpHMVLyM1x7b6VAnBhNHWJ+oXLZe/hXkXfpA==}
+  /@storybook/react@7.6.4(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-XYRP+eylH3JqkCuziwtQGY5vOCeDreOibRYJmj5na6k4QbURjGVB44WCIW04gWVlmBXM9SqLAmserUi3HP890Q==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5307,13 +6338,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-client': 7.5.1
-      '@storybook/docs-tools': 7.5.1
+      '@storybook/client-logger': 7.6.4
+      '@storybook/core-client': 7.6.4
+      '@storybook/docs-tools': 7.6.4
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 7.5.1
-      '@storybook/react-dom-shim': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
+      '@storybook/preview-api': 7.6.4
+      '@storybook/react-dom-shim': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.4
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
       '@types/node': 18.18.4
@@ -5321,7 +6352,7 @@ packages:
       acorn-jsx: 5.3.2(acorn@7.4.1)
       acorn-walk: 7.2.0
       escodegen: 2.1.0
-      html-tags: 3.2.0
+      html-tags: 3.3.1
       lodash: 4.17.21
       prop-types: 15.8.1
       react: 18.2.0
@@ -5336,48 +6367,30 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/router@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-BvKo+IxWwo3dfIG1+vLtZLT4qqkNHL5GTIozTyX04uqt9ByYZL6SJEzxEa1Xn6Qq/fbdQwzCanNHbTlwiTMf7Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@storybook/client-logger': 7.5.1
-      memoizerific: 1.11.3
-      qs: 6.11.2
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
-  /@storybook/router@7.6.3:
-    resolution: {integrity: sha512-NZfhJqsXYca9mZCL/LGx6FmZDbrxX2S4ImW7Tqdtcc/sSlZ0BpCDkNUTesCA287cmoKMhXZRh/+bU+C2h2a+bw==}
+  /@storybook/router@7.6.4:
+    resolution: {integrity: sha512-5MQ7Z4D7XNPN2yhFgjey7hXOYd6s8CggUqeAwhzGTex90SMCkKHSz1hfkcXn1ZqBPaall2b53uK553OvPLp9KQ==}
     dependencies:
-      '@storybook/client-logger': 7.6.3
+      '@storybook/client-logger': 7.6.4
       memoizerific: 1.11.3
       qs: 6.11.2
     dev: true
 
-  /@storybook/source-loader@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-bJLhUxOwnlodZVOkOt/2swW1e0qCvJxrPdPNHj/81jh0kSfJnLWH+QnwOgdIwPG4qW73nlH5BuSUAlGMVPpS8w==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  /@storybook/source-loader@7.6.4:
+    resolution: {integrity: sha512-1wb/3bVpJZ/3r3qUrLK8jb0kLuvwjNi5T1kci5huREdc1TrIxZXoPw9EiyjcMCZzCURkoj7euNLrLHGyzdBTLg==}
     dependencies:
-      '@storybook/csf': 0.1.1
-      '@storybook/types': 7.5.1
+      '@storybook/csf': 0.1.2
+      '@storybook/types': 7.6.4
       estraverse: 5.3.0
       lodash: 4.17.21
       prettier: 2.8.8
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/telemetry@7.5.1:
-    resolution: {integrity: sha512-z9PGouNqvZ2F7vD79qDF4PN7iW3kE3MO7YX0iKTmzgLi4ImKuXIJRF04GRH8r+WYghnbomAyA4o6z9YJMdNuVw==}
+  /@storybook/telemetry@7.6.4:
+    resolution: {integrity: sha512-Q4QpvcgloHUEqC9PGo7tgqkUH91/PjX+74/0Hi9orLo8QmLMgdYS5fweFwgSKoTwDGNg2PaHp/jqvhhw7UmnJA==}
     dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-common': 7.5.1
-      '@storybook/csf-tools': 7.5.1
+      '@storybook/client-logger': 7.6.4
+      '@storybook/core-common': 7.6.4
+      '@storybook/csf-tools': 7.6.4
       chalk: 4.1.2
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
@@ -5388,19 +6401,20 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/test-runner@0.15.2(@types/node@18.11.9)(ts-node@10.9.1):
-    resolution: {integrity: sha512-nHwThLvxho9wNAVxtESoAcrQD7UolOAJISwcG9uz3bmtTIm7h5DMlpfX+2DKbJyq5REg8nhcauZv5iFvwBdn1Q==}
+  /@storybook/test-runner@0.16.0(@types/node@18.11.9)(ts-node@10.9.1):
+    resolution: {integrity: sha512-LDmNbKFoEDW/VS9o6KR8e1r5MnbCc5ZojUfi5yqLdq80gFD7BvilgKgV0lUh/xWHryzoy+Ids5LYgrPJZmU2dQ==}
     engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
       '@babel/core': 7.22.10
       '@babel/generator': 7.23.0
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
+      '@jest/types': 29.6.3
       '@storybook/core-common': 7.5.1
-      '@storybook/csf': 0.1.1
+      '@storybook/csf': 0.1.2
       '@storybook/csf-tools': 7.5.1
-      '@storybook/preview-api': 7.5.3
+      '@storybook/preview-api': 7.6.3
       '@swc/core': 1.3.93
       '@swc/jest': 0.2.29(@swc/core@1.3.93)
       can-bind-to-host: 1.1.2
@@ -5411,7 +6425,7 @@ packages:
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
       jest-junit: 16.0.0
-      jest-playwright-preset: 3.0.1(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0)
+      jest-playwright-preset: 4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0)
       jest-runner: 29.7.0
       jest-serializer-html: 7.1.0
       jest-watch-typeahead: 2.2.2(jest@29.7.0)
@@ -5431,28 +6445,14 @@ packages:
       - ts-node
     dev: true
 
-  /@storybook/theming@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ETLAOn10hI4Mkmjsr0HGcM6HbzaURrrPBYmfXOrdbrzEVN+AHW4FlvP9d8fYyP1gdjPE1F39XvF0jYgt1zXiHQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 7.5.1
-      '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
-  /@storybook/theming@7.6.3(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9ToNU2LM6a2kVBjOXitXEeEOuMurVLhn+uaZO1dJjv8NGnJVYiLwNPwrLsImiUD8/XXNuil972aanBR6+Aj9jw==}
+  /@storybook/theming@7.6.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Z/dcC5EpkIXelYCkt9ojnX6D7qGOng8YHxV/OWlVE9TrEGYVGPOEfwQryR0RhmGpDha1TYESLYrsDb4A8nJ1EA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 7.6.3
+      '@storybook/client-logger': 7.6.4
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
       react: 18.2.0
@@ -5463,24 +6463,24 @@ packages:
     resolution: {integrity: sha512-ZcMSaqFNx1E+G00nRDUi8kKL7gxJVlnCvbKLNj3V85guy4DkIYAZr31yDqze07gDWbjvKoHIp3tKpgE+2i8upQ==}
     dependencies:
       '@storybook/channels': 7.5.1
-      '@types/babel__core': 7.20.3
-      '@types/express': 4.17.20
+      '@types/babel__core': 7.20.5
+      '@types/express': 4.17.21
       file-system-cache: 2.3.0
     dev: true
 
-  /@storybook/types@7.5.3:
-    resolution: {integrity: sha512-iu5W0Kdd6nysN5CPkY4GRl+0BpxRTdSfBIJak7mb6xCIHSB5t1tw4BOuqMQ5EgpikRY3MWJ4gY647QkWBX3MNQ==}
+  /@storybook/types@7.6.3:
+    resolution: {integrity: sha512-vj9Jzg5eR52l8O9512QywbQpNdo67Z6BQWR8QoZRcG+/Bhzt08YI8IZMPQLFMKzcmWDPK0blQ4GfyKDYplMjPA==}
     dependencies:
-      '@storybook/channels': 7.5.3
-      '@types/babel__core': 7.20.4
+      '@storybook/channels': 7.6.3
+      '@types/babel__core': 7.20.5
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
     dev: true
 
-  /@storybook/types@7.6.3:
-    resolution: {integrity: sha512-vj9Jzg5eR52l8O9512QywbQpNdo67Z6BQWR8QoZRcG+/Bhzt08YI8IZMPQLFMKzcmWDPK0blQ4GfyKDYplMjPA==}
+  /@storybook/types@7.6.4:
+    resolution: {integrity: sha512-qyiiXPCvol5uVgfubcIMzJBA0awAyFPU+TyUP1mkPYyiTHnsHYel/mKlSdPjc8a97N3SlJXHOCx41Hde4IyJgg==}
     dependencies:
-      '@storybook/channels': 7.6.3
+      '@storybook/channels': 7.6.4
       '@types/babel__core': 7.20.5
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
@@ -6016,26 +7016,6 @@ packages:
   /@types/aria-query@4.2.2:
     resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==}
 
-  /@types/babel__core@7.20.3:
-    resolution: {integrity: sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==}
-    dependencies:
-      '@babel/parser': 7.23.0
-      '@babel/types': 7.23.0
-      '@types/babel__generator': 7.6.6
-      '@types/babel__template': 7.4.3
-      '@types/babel__traverse': 7.20.3
-    dev: true
-
-  /@types/babel__core@7.20.4:
-    resolution: {integrity: sha512-mLnSC22IC4vcWiuObSRjrLd9XcBTGf59vUSoq2jkQDJ/QQ8PMI9rSuzE+aEV8karUMbskw07bKYoUJCKTUaygg==}
-    dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
-      '@types/babel__generator': 7.6.7
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.4
-    dev: true
-
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
@@ -6046,49 +7026,23 @@ packages:
       '@types/babel__traverse': 7.20.4
     dev: true
 
-  /@types/babel__generator@7.6.6:
-    resolution: {integrity: sha512-66BXMKb/sUWbMdBNdMvajU7i/44RkrA3z/Yt1c7R5xejt8qh84iU54yUWCtm0QwGJlDcf/gg4zd/x4mpLAlb/w==}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
   /@types/babel__generator@7.6.7:
     resolution: {integrity: sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==}
     dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@types/babel__template@7.4.3:
-    resolution: {integrity: sha512-ciwyCLeuRfxboZ4isgdNZi/tkt06m8Tw6uGbBSBgWrnnZGNXiEyM27xc/PjXGQLqlZ6ylbgHMnm7ccF9tCkOeQ==}
-    dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
   /@types/babel__template@7.4.4:
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@types/babel__traverse@7.20.3:
-    resolution: {integrity: sha512-Lsh766rGEFbaxMIDH7Qa+Yha8cMVI3qAK6CHt3OR0YfxOIn5Z54iHiyDRycHrBqeIiqGa20Kpsv1cavfBKkRSw==}
-    dependencies:
-      '@babel/types': 7.23.4
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
     dev: true
 
   /@types/babel__traverse@7.20.4:
-    resolution: {integrity: sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==}
-    dependencies:
-      '@babel/types': 7.23.4
-    dev: true
-
-  /@types/body-parser@1.19.4:
-    resolution: {integrity: sha512-N7UDG0/xiPQa2D/XrVJXjkWbpqHCd2sBaB32ggRF2l83RhPfamgKGF8gwwqyksS95qUS5ZYF9aF+lLPRlwI2UA==}
+    resolution: {integrity: sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==}
     dependencies:
-      '@types/connect': 3.4.37
-      '@types/node': 18.18.4
+      '@babel/types': 7.23.5
     dev: true
 
   /@types/body-parser@1.19.5:
@@ -6114,12 +7068,6 @@ packages:
     resolution: {integrity: sha512-BZIU34bSYye0j/BFcPraiDZ5ka6MJADjcDVELGf7glr9K+iE8NYVjFslJFVWzskSxkLLyCrSPScE82/UUoBSvg==}
     dev: true
 
-  /@types/connect@3.4.37:
-    resolution: {integrity: sha512-zBUSRqkfZ59OcwXon4HVxhx5oWCJmc0OtBTK05M+p0dYjgN6iTwIL2T/WbsQZrEsdnwaF9cWQ+azOnpPvIqY3Q==}
-    dependencies:
-      '@types/node': 18.18.4
-    dev: true
-
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
@@ -6349,6 +7297,10 @@ packages:
     resolution: {integrity: sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==}
     dev: true
 
+  /@types/doctrine@0.0.9:
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+    dev: true
+
   /@types/dompurify@3.0.3:
     resolution: {integrity: sha512-odiGr/9/qMqjcBOe5UhcNLOFHSYmKFOyr+bJ/Xu3Qp4k1pNPAlNLUVNNLcLfjQI7+W7ObX58EdD3H+3p3voOvA==}
     dependencies:
@@ -6389,15 +7341,6 @@ packages:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
     dev: true
 
-  /@types/express-serve-static-core@4.17.38:
-    resolution: {integrity: sha512-hXOtc0tuDHZPFwwhuBJXPbjemWtXnJjbvuuyNH2Y5Z6in+iXc63c4eXYDc7GGGqHy+iwYqAJMdaItqdnbcBKmg==}
-    dependencies:
-      '@types/node': 18.18.4
-      '@types/qs': 6.9.9
-      '@types/range-parser': 1.2.6
-      '@types/send': 0.17.3
-    dev: true
-
   /@types/express-serve-static-core@4.17.41:
     resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==}
     dependencies:
@@ -6407,15 +7350,6 @@ packages:
       '@types/send': 0.17.4
     dev: true
 
-  /@types/express@4.17.20:
-    resolution: {integrity: sha512-rOaqlkgEvOW495xErXMsmyX3WKBInbhG5eqojXYi3cGUaLoRDlXa5d52fkfWZT963AZ3v2eZ4MbKE6WpDAGVsw==}
-    dependencies:
-      '@types/body-parser': 1.19.4
-      '@types/express-serve-static-core': 4.17.38
-      '@types/qs': 6.9.9
-      '@types/serve-static': 1.15.4
-    dev: true
-
   /@types/express@4.17.21:
     resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
     dependencies:
@@ -6447,15 +7381,12 @@ packages:
     resolution: {integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==}
     dependencies:
       '@types/unist': 2.0.6
+    dev: false
 
   /@types/html-minifier-terser@6.1.0:
     resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==}
     dev: true
 
-  /@types/http-errors@2.0.3:
-    resolution: {integrity: sha512-pP0P/9BnCj1OVvQR2lF41EkDG/lWWnDyA203b/4Fmi2eTyORnBtcDoKDwjWQthELrBvWkMOrvSOnZ8OVlW6tXA==}
-    dev: true
-
   /@types/http-errors@2.0.4:
     resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
     dev: true
@@ -6555,18 +7486,10 @@ packages:
     resolution: {integrity: sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==}
     dev: true
 
-  /@types/mime@1.3.4:
-    resolution: {integrity: sha512-1Gjee59G25MrQGk8bsNvC6fxNiRgUlGn2wlhGf95a59DrprnnHk80FIMMFG9XHMdrfsuA119ht06QPDXA1Z7tw==}
-    dev: true
-
   /@types/mime@1.3.5:
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
     dev: true
 
-  /@types/mime@3.0.3:
-    resolution: {integrity: sha512-i8MBln35l856k5iOhKk2XJ4SeAWg75mLIpZB4v6imOagKL6twsukBZGDMNhdOVk7yRFTMPpfILocMos59Q1otQ==}
-    dev: true
-
   /@types/mime@3.0.4:
     resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
     dev: true
@@ -6651,18 +7574,10 @@ packages:
     resolution: {integrity: sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw==}
     dev: true
 
-  /@types/qs@6.9.9:
-    resolution: {integrity: sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg==}
-    dev: true
-
   /@types/query-selector-shadow-dom@1.0.0:
     resolution: {integrity: sha512-cTGo8ZxW0WXFDV7gvL/XCq4213t6S/yWaSGqscnXUTNDWqwnsYKegB/VAzQDwzmACoLzIbGbYXdjJOgfPLu7Ig==}
     dev: true
 
-  /@types/range-parser@1.2.6:
-    resolution: {integrity: sha512-+0autS93xyXizIYiyL02FCY8N+KkKPhILhcUSA276HxzreZ16kl+cmwvV2qAM/PuCCwPXzOXOWhiPcw20uSFcA==}
-    dev: true
-
   /@types/range-parser@1.2.7:
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
     dev: true
@@ -6717,6 +7632,10 @@ packages:
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
 
+  /@types/resolve@1.20.6:
+    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
+    dev: true
+
   /@types/scheduler@0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
 
@@ -6724,13 +7643,6 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
-  /@types/send@0.17.3:
-    resolution: {integrity: sha512-/7fKxvKUoETxjFUsuFlPB9YndePpxxRAOfGC/yJdc9kTjTeP5kRCTzfnE8kPUKCeyiyIZu0YQ76s50hCedI1ug==}
-    dependencies:
-      '@types/mime': 1.3.4
-      '@types/node': 18.18.4
-    dev: true
-
   /@types/send@0.17.4:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
@@ -6738,14 +7650,6 @@ packages:
       '@types/node': 18.18.4
     dev: true
 
-  /@types/serve-static@1.15.4:
-    resolution: {integrity: sha512-aqqNfs1XTF0HDrFdlY//+SGUxmdSUbjeRXb5iaZc3x0/vMbYmdw9qvOgHWOyyLFxSSRnUuP5+724zBgfw8/WAw==}
-    dependencies:
-      '@types/http-errors': 2.0.3
-      '@types/mime': 3.0.3
-      '@types/node': 18.18.4
-    dev: true
-
   /@types/serve-static@1.15.5:
     resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
     dependencies:
@@ -6799,6 +7703,10 @@ packages:
   /@types/unist@2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
 
+  /@types/uuid@9.0.7:
+    resolution: {integrity: sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==}
+    dev: true
+
   /@types/wait-on@5.3.1:
     resolution: {integrity: sha512-2FFOKCF/YydrMUaqg+fkk49qf0e5rDgwt6aQsMzFQzbS419h2gNOXyiwp/o2yYy27bi/C1z+HgfncryjGzlvgQ==}
     dependencies:
@@ -7693,6 +8601,16 @@ packages:
       util: 0.12.5
     dev: true
 
+  /assert@2.1.0:
+    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
+    dependencies:
+      call-bind: 1.0.5
+      is-nan: 1.3.2
+      object-is: 1.1.5
+      object.assign: 4.1.4
+      util: 0.12.5
+    dev: true
+
   /assign-symbols@1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
@@ -7704,20 +8622,6 @@ packages:
       '@mdn/browser-compat-data': 5.3.16
     dev: true
 
-  /ast-types@0.14.2:
-    resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
-    engines: {node: '>=4'}
-    dependencies:
-      tslib: 2.6.2
-    dev: true
-
-  /ast-types@0.15.2:
-    resolution: {integrity: sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==}
-    engines: {node: '>=4'}
-    dependencies:
-      tslib: 2.6.2
-    dev: true
-
   /ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
@@ -7790,20 +8694,22 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /axios@0.21.4:
-    resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
+  /axios@1.6.2:
+    resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
     dependencies:
       follow-redirects: 1.15.2
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
     dev: true
 
-  /babel-core@7.0.0-bridge.0(@babel/core@7.22.10):
+  /babel-core@7.0.0-bridge.0(@babel/core@7.23.5):
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
     dev: true
 
   /babel-jest@29.7.0(@babel/core@7.22.10):
@@ -7814,7 +8720,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.10
       '@jest/transform': 29.7.0
-      '@types/babel__core': 7.20.4
+      '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
       babel-preset-jest: 29.6.3(@babel/core@7.22.10)
       chalk: 4.1.2
@@ -7839,14 +8745,14 @@ packages:
       webpack: 5.88.2(@swc/core@1.3.93)(esbuild@0.19.8)(webpack-cli@5.1.4)
     dev: true
 
-  /babel-loader@9.1.3(@babel/core@7.22.10)(webpack@5.88.2):
+  /babel-loader@9.1.3(@babel/core@7.23.5)(webpack@5.88.2):
     resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
       webpack: '>=5'
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       find-cache-dir: 4.0.0
       schema-utils: 4.2.0
       webpack: 5.88.2(@swc/core@1.3.93)(esbuild@0.19.8)(webpack-cli@5.1.4)
@@ -7880,15 +8786,11 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.4
-      '@types/babel__core': 7.20.4
+      '@babel/types': 7.23.5
+      '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.20.4
     dev: true
 
-  /babel-plugin-named-exports-order@0.0.2:
-    resolution: {integrity: sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==}
-    dev: true
-
   /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==}
     peerDependencies:
@@ -7901,6 +8803,19 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /babel-plugin-polyfill-corejs2@0.4.6(@babel/core@7.23.5):
+    resolution: {integrity: sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/compat-data': 7.23.5
+      '@babel/core': 7.23.5
+      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.5)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-plugin-polyfill-corejs3@0.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==}
     peerDependencies:
@@ -7912,6 +8827,18 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /babel-plugin-polyfill-corejs3@0.8.6(@babel/core@7.23.5):
+    resolution: {integrity: sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.5)
+      core-js-compat: 3.34.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-plugin-polyfill-regenerator@0.5.2(@babel/core@7.22.10):
     resolution: {integrity: sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==}
     peerDependencies:
@@ -7922,12 +8849,13 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /babel-plugin-react-docgen@4.2.1:
-    resolution: {integrity: sha512-UQ0NmGHj/HAqi5Bew8WvNfCk8wSsmdgNd8ZdMjBCICtyCJCq9LiqgqvjCYe570/Wg7AQArSq1VQ60Dd/CHN7mQ==}
+  /babel-plugin-polyfill-regenerator@0.5.3(@babel/core@7.23.5):
+    resolution: {integrity: sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
-      ast-types: 0.14.2
-      lodash: 4.17.21
-      react-docgen: 5.4.3
+      '@babel/core': 7.23.5
+      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8113,6 +9041,17 @@ packages:
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
 
+  /browserslist@4.22.2:
+    resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001568
+      electron-to-chromium: 1.4.609
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.22.2)
+    dev: true
+
   /bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
     dependencies:
@@ -8163,25 +9102,6 @@ packages:
       typewise: 1.0.3
     dev: false
 
-  /c8@7.14.0:
-    resolution: {integrity: sha512-i04rtkkcNcCf7zsQcSv/T9EbUn4RXQ6mropeMcjFOsQXQ0iGLAr/xT6TImQg4+U9hmNpN9XdvPkjUL1IzbgxJw==}
-    engines: {node: '>=10.12.0'}
-    hasBin: true
-    dependencies:
-      '@bcoe/v8-coverage': 0.2.3
-      '@istanbuljs/schema': 0.1.3
-      find-up: 5.0.0
-      foreground-child: 2.0.0
-      istanbul-lib-coverage: 3.2.0
-      istanbul-lib-report: 3.0.0
-      istanbul-reports: 3.1.5
-      rimraf: 3.0.2
-      test-exclude: 6.0.0
-      v8-to-istanbul: 9.0.1
-      yargs: 16.2.0
-      yargs-parser: 20.2.9
-    dev: true
-
   /cachedir@2.3.0:
     resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==}
     engines: {node: '>=6'}
@@ -8276,6 +9196,10 @@ packages:
   /caniuse-lite@1.0.30001538:
     resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
 
+  /caniuse-lite@1.0.30001568:
+    resolution: {integrity: sha512-vSUkH84HontZJ88MiNrOau1EBrCqEQYgkC5gIySiDlpsm8sGVrhU7Kx4V6h0tnqaHzIHZv08HlJIwPbL4XL9+A==}
+    dev: true
+
   /case-anything@2.1.10:
     resolution: {integrity: sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==}
     engines: {node: '>=12.13'}
@@ -8338,12 +9262,15 @@ packages:
 
   /character-entities-legacy@1.1.4:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+    dev: false
 
   /character-entities@1.2.4:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+    dev: false
 
   /character-reference-invalid@1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+    dev: false
 
   /chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
@@ -8368,6 +9295,14 @@ packages:
       dayjs: 1.11.6
     dev: false
 
+  /chartjs-plugin-annotation@2.2.1(chart.js@3.9.1):
+    resolution: {integrity: sha512-RL9UtrFr2SXd7C47zD0MZqn6ZLgrcRt3ySC6cYal2amBdANcYB1QcwFXcpKWAYnO4SGJYRok7P5rKDDNgJMA/w==}
+    peerDependencies:
+      chart.js: '>=3.7.0'
+    dependencies:
+      chart.js: 3.9.1
+    dev: false
+
   /chartjs-plugin-crosshair@1.2.0(chart.js@3.9.1):
     resolution: {integrity: sha512-yohsbME+wT1ODBdErBzWnC6xUDcn2tLeWmGjGDTykjpiT7+FMgibffajxqaCVmdzselxNPirpt76vx33EewSSQ==}
     peerDependencies:
@@ -8601,6 +9536,7 @@ packages:
 
   /comma-separated-tokens@1.0.8:
     resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+    dev: false
 
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
@@ -8778,6 +9714,12 @@ packages:
     dependencies:
       browserslist: 4.21.10
 
+  /core-js-compat@3.34.0:
+    resolution: {integrity: sha512-4ZIyeNbW/Cn1wkMMDy+mvrRUxrwFNjKwbhCfQpDd+eLgYipDqp8oGFGtLmhh18EDPKA0g3VUBYOxQGGwvWLVpA==}
+    dependencies:
+      browserslist: 4.22.2
+    dev: true
+
   /core-js-pure@3.32.0:
     resolution: {integrity: sha512-qsev1H+dTNYpDUEURRuOXMvpdtAnNEvQWS/FMJ2Vb5AY8ZP4rAPQldkE27joykZPJTe0+IVgHZYh1P5Xu1/i1g==}
     requiresBuild: true
@@ -9510,6 +10452,7 @@ packages:
     dependencies:
       ms: 2.1.3
       supports-color: 8.1.1
+    dev: true
 
   /debug@4.3.4(supports-color@8.1.1):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -9931,6 +10874,10 @@ packages:
   /electron-to-chromium@1.4.492:
     resolution: {integrity: sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ==}
 
+  /electron-to-chromium@1.4.609:
+    resolution: {integrity: sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw==}
+    dev: true
+
   /emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -10143,6 +11090,10 @@ packages:
     resolution: {integrity: sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==}
     dev: true
 
+  /es-module-lexer@1.4.1:
+    resolution: {integrity: sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==}
+    dev: true
+
   /es-set-tostringtag@2.0.2:
     resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==}
     engines: {node: '>= 0.4'}
@@ -10187,8 +11138,6 @@ packages:
       '@types/less': 3.0.6
       esbuild: 0.19.8
       less: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /esbuild-register@3.5.0(esbuild@0.18.20):
@@ -10626,17 +11575,6 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
-  /estree-to-babel@3.2.1:
-    resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==}
-    engines: {node: '>=8.3.0'}
-    dependencies:
-      '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.4
-      c8: 7.14.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -10893,6 +11831,7 @@ packages:
     resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
     dependencies:
       format: 0.2.2
+    dev: false
 
   /fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
@@ -11214,6 +12153,7 @@ packages:
   /format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
+    dev: false
 
   /forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
@@ -11686,6 +12626,7 @@ packages:
 
   /hast-util-parse-selector@2.2.5:
     resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+    dev: false
 
   /hastscript@6.0.0:
     resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
@@ -11695,6 +12636,7 @@ packages:
       hast-util-parse-selector: 2.2.5
       property-information: 5.6.0
       space-separated-tokens: 1.1.5
+    dev: false
 
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
@@ -11716,6 +12658,7 @@ packages:
 
   /highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: false
 
   /history@5.3.0:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
@@ -11784,11 +12727,6 @@ packages:
       terser: 5.19.1
     dev: true
 
-  /html-tags@3.2.0:
-    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
-    engines: {node: '>=8'}
-    dev: true
-
   /html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
@@ -12131,12 +13069,14 @@ packages:
 
   /is-alphabetical@1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+    dev: false
 
   /is-alphanumerical@1.0.4:
     resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
     dependencies:
       is-alphabetical: 1.0.4
       is-decimal: 1.0.4
+    dev: false
 
   /is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
@@ -12235,6 +13175,7 @@ packages:
 
   /is-decimal@1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+    dev: false
 
   /is-deflate@1.0.0:
     resolution: {integrity: sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==}
@@ -12314,6 +13255,7 @@ packages:
 
   /is-hexadecimal@1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+    dev: false
 
   /is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
@@ -12566,7 +13508,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/parser': 7.23.4
+      '@babel/parser': 7.23.5
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -12895,25 +13837,6 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dev: true
 
-  /jest-haste-map@29.3.1:
-    resolution: {integrity: sha512-/FFtvoG1xjbbPXQLFef+WSU4yrc0fc0Dds6aRPBojUid7qlPqZvxdUBA03HW0fnVHXVCnCdkuoghYItKNzc/0A==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/graceful-fs': 4.1.5
-      '@types/node': 18.18.4
-      anymatch: 3.1.2
-      fb-watchman: 2.0.2
-      graceful-fs: 4.2.11
-      jest-regex-util: 29.6.3
-      jest-util: 29.7.0
-      jest-worker: 29.3.1
-      micromatch: 4.0.5
-      walker: 1.0.8
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
   /jest-haste-map@29.7.0:
     resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13037,8 +13960,8 @@ packages:
       jest-util: 29.7.0
     dev: true
 
-  /jest-playwright-preset@3.0.1(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0):
-    resolution: {integrity: sha512-tHqv+JUmheNMZpmH7XyT5CAMHr3ExTUIY9baMPzcJiLYPvCaPTwig9YvuGGnXV2n+Epmch0Ld4429g6py0nq0w==}
+  /jest-playwright-preset@4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0):
+    resolution: {integrity: sha512-+dGZ1X2KqtwXaabVjTGxy0a3VzYfvYsWaRcuO8vMhyclHSOpGSI1+5cmlqzzCwQ3+fv0EjkTc7I5aV9lo08dYw==}
     peerDependencies:
       jest: ^29.3.1
       jest-circus: ^29.3.1
@@ -13049,7 +13972,7 @@ packages:
       jest: 29.7.0(@types/node@18.11.9)(ts-node@10.9.1)
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
-      jest-process-manager: 0.3.1
+      jest-process-manager: 0.4.0
       jest-runner: 29.7.0
       nyc: 15.1.0
       playwright-core: 1.32.2
@@ -13072,8 +13995,8 @@ packages:
       jest-resolve: 29.7.0
     dev: true
 
-  /jest-process-manager@0.3.1:
-    resolution: {integrity: sha512-x9W54UgZ7IkzUHgXtnI1x4GKOVjxtwW0CA/7yGbTHtT/YhENO0Lic2yfVyC/gekn7OIEMcQmy0L1r9WLQABfqw==}
+  /jest-process-manager@0.4.0:
+    resolution: {integrity: sha512-80Y6snDyb0p8GG83pDxGI/kQzwVTkCxc7ep5FPe/F6JYdvRDhwr6RzRmPSP7SEwuLhxo80lBS/NqOdUIbHIfhw==}
     dependencies:
       '@types/wait-on': 5.3.1
       chalk: 4.1.2
@@ -13084,17 +14007,12 @@ packages:
       signal-exit: 3.0.7
       spawnd: 5.0.0
       tree-kill: 1.2.2
-      wait-on: 5.3.0
+      wait-on: 7.2.0
     transitivePeerDependencies:
       - debug
       - supports-color
     dev: true
 
-  /jest-regex-util@29.2.0:
-    resolution: {integrity: sha512-6yXn0kg2JXzH30cr2NlThF+70iuO/3irbaB4mh5WyqNIvLLP+B6sFdluO1/1RJmslyh/f9osnefECflHvTbwVA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dev: true
-
   /jest-regex-util@29.6.3:
     resolution: {integrity: sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13293,16 +14211,6 @@ packages:
       supports-color: 8.1.1
     dev: true
 
-  /jest-worker@29.3.1:
-    resolution: {integrity: sha512-lY4AnnmsEWeiXirAIA0c9SDPbuCBq8IYuDVL8PMm0MZ2PEs2yPvRA/J64QBXuZp7CYKrDM/rmNrc9/i3KJQncw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@types/node': 18.18.4
-      jest-util: 29.7.0
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-    dev: true
-
   /jest-worker@29.7.0:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13334,8 +14242,8 @@ packages:
       - ts-node
     dev: true
 
-  /joi@17.7.0:
-    resolution: {integrity: sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg==}
+  /joi@17.11.0:
+    resolution: {integrity: sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==}
     dependencies:
       '@hapi/hoek': 9.3.0
       '@hapi/topo': 5.1.0
@@ -13371,30 +14279,34 @@ packages:
     resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}
     dev: true
 
-  /jscodeshift@0.14.0(@babel/preset-env@7.22.10):
-    resolution: {integrity: sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==}
+  /jscodeshift@0.15.1(@babel/preset-env@7.23.5):
+    resolution: {integrity: sha512-hIJfxUy8Rt4HkJn/zZPU9ChKfKZM1342waJ1QC2e2YsPcWhM+3BJ4dcfQCzArTrk1jJeNLB341H+qOcEHRxJZg==}
     hasBin: true
     peerDependencies:
       '@babel/preset-env': ^7.1.6
+    peerDependenciesMeta:
+      '@babel/preset-env':
+        optional: true
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/parser': 7.23.4
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.22.10)
-      '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.10)
-      '@babel/preset-env': 7.22.10(@babel/core@7.22.10)
-      '@babel/preset-flow': 7.22.5(@babel/core@7.22.10)
-      '@babel/preset-typescript': 7.22.5(@babel/core@7.22.10)
-      '@babel/register': 7.22.5(@babel/core@7.22.10)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.22.10)
+      '@babel/core': 7.23.5
+      '@babel/parser': 7.23.5
+      '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.23.5)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.23.5)
+      '@babel/preset-env': 7.23.5(@babel/core@7.23.5)
+      '@babel/preset-flow': 7.23.3(@babel/core@7.23.5)
+      '@babel/preset-typescript': 7.23.3(@babel/core@7.23.5)
+      '@babel/register': 7.22.15(@babel/core@7.23.5)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.23.5)
       chalk: 4.1.2
       flow-parser: 0.214.0
       graceful-fs: 4.2.11
       micromatch: 4.0.5
       neo-async: 2.6.2
       node-dir: 0.1.17
-      recast: 0.21.5
+      recast: 0.23.4
       temp: 0.8.4
       write-file-atomic: 2.4.3
     transitivePeerDependencies:
@@ -13721,10 +14633,8 @@ packages:
       image-size: 0.5.5
       make-dir: 2.1.0
       mime: 1.6.0
-      needle: 3.2.0
+      needle: 3.3.1
       source-map: 0.6.1
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /leven@3.1.0:
@@ -13947,6 +14857,7 @@ packages:
     dependencies:
       fault: 1.0.4
       highlight.js: 10.7.3
+    dev: false
 
   /lru-cache@10.0.1:
     resolution: {integrity: sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==}
@@ -13969,6 +14880,13 @@ packages:
     resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
     hasBin: true
 
+  /magic-string@0.30.5:
+    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
@@ -14428,17 +15346,14 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /needle@3.2.0:
-    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+  /needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
     engines: {node: '>= 4.4.x'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
       iconv-lite: 0.6.3
       sax: 1.2.4
-    transitivePeerDependencies:
-      - supports-color
     dev: false
     optional: true
 
@@ -14497,6 +15412,10 @@ packages:
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
+  /node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+    dev: true
+
   /normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
@@ -14924,6 +15843,7 @@ packages:
       is-alphanumerical: 1.0.4
       is-decimal: 1.0.4
       is-hexadecimal: 1.0.4
+    dev: false
 
   /parse-json@4.0.0:
     resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
@@ -15588,8 +16508,8 @@ packages:
     resolution: {integrity: sha512-tlkBdypJuvK/s00n4EiQjwYVfuuZv6vt8BF3g1ooIQa2Gz9Vz80p8q3qsPLZ0V5ErGRy6i3Q4fWC9TDzR7GNRQ==}
     dev: false
 
-  /posthog-js@1.93.6:
-    resolution: {integrity: sha512-Jou2awqQH5PDtDe9hZxpe9PO4D0uUOU7eA1lGni4pBxJckeA94P7WF3ieQj355xY96ZcXVQmGJykypO/FyBvpQ==}
+  /posthog-js@1.94.4:
+    resolution: {integrity: sha512-1usqOEkGE0ntit99G4TM1iPoq4QBbd5KcuovWroTy0PRJU8cOAfAT3FaJu+lX4B7izWo4DFjvesM/MOaJzLW/Q==}
     dependencies:
       fflate: 0.4.8
     dev: false
@@ -15661,10 +16581,12 @@ packages:
   /prismjs@1.27.0:
     resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
     engines: {node: '>=6'}
+    dev: false
 
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
+    dev: false
 
   /process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
@@ -15712,6 +16634,7 @@ packages:
     resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
     dependencies:
       xtend: 4.0.2
+    dev: false
 
   /prosemirror-changeset@2.2.0:
     resolution: {integrity: sha512-QM7ohGtkpVpwVGmFb8wqVhaz9+6IUXcIQBGZ81YNAKYuHiFJ1ShvSzab4pKqTinJhwciZbrtBEk/2WsqSt2PYg==}
@@ -15875,6 +16798,10 @@ packages:
     resolution: {integrity: sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==}
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: true
+
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     requiresBuild: true
@@ -16555,21 +17482,20 @@ packages:
       typescript: 4.9.5
     dev: true
 
-  /react-docgen@5.4.3:
-    resolution: {integrity: sha512-xlLJyOlnfr8lLEEeaDZ+X2J/KJoe6Nr9AzxnkdQWush5hz2ZSu66w6iLMOScMmxoSHWpWMn+k3v5ZiyCfcWsOA==}
-    engines: {node: '>=8.10.0'}
-    hasBin: true
+  /react-docgen@7.0.1:
+    resolution: {integrity: sha512-rCz0HBIT0LWbIM+///LfRrJoTKftIzzwsYDf0ns5KwaEjejMHQRtphcns+IXFHDNY9pnz6G8l/JbbI6pD4EAIA==}
+    engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/generator': 7.23.0
-      '@babel/runtime': 7.22.10
-      ast-types: 0.14.2
-      commander: 2.20.3
+      '@babel/traverse': 7.23.2
+      '@babel/types': 7.23.5
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.20.4
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
       doctrine: 3.0.0
-      estree-to-babel: 3.2.1
-      neo-async: 2.6.2
-      node-dir: 0.1.17
-      strip-indent: 3.0.0
+      resolve: 1.22.8
+      strip-indent: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -16633,14 +17559,6 @@ packages:
       react-resizable: 3.0.5(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
-  /react-inspector@6.0.2(react@18.2.0):
-    resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==}
-    peerDependencies:
-      react: ^16.8.4 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: true
-
   /react-intersection-observer@9.5.3(react@18.2.0):
     resolution: {integrity: sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==}
     peerDependencies:
@@ -16704,8 +17622,8 @@ packages:
       warning: 4.0.3
     dev: false
 
-  /react-refresh@0.11.0:
-    resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
+  /react-refresh@0.14.0:
+    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
     dev: true
 
@@ -16756,17 +17674,6 @@ packages:
       - react-dom
     dev: false
 
-  /react-resize-detector@7.1.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      lodash: 4.17.21
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /react-shadow@20.4.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-sirvAmFja7Ss6MoyQbKWxaQ5IDTAW3Za3Tvegylfr5jXnwKZObHRIyiatefeNlskoGKfuPaZ8DNT052T0SUGcg==}
     peerDependencies:
@@ -16808,6 +17715,7 @@ packages:
       prismjs: 1.29.0
       react: 18.2.0
       refractor: 3.6.0
+    dev: false
 
   /react-textarea-autosize@8.3.4(@types/react@17.0.52)(react@18.2.0):
     resolution: {integrity: sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==}
@@ -16944,16 +17852,6 @@ packages:
     dependencies:
       picomatch: 2.3.1
 
-  /recast@0.21.5:
-    resolution: {integrity: sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==}
-    engines: {node: '>= 4'}
-    dependencies:
-      ast-types: 0.15.2
-      esprima: 4.0.1
-      source-map: 0.6.1
-      tslib: 2.6.2
-    dev: true
-
   /recast@0.23.4:
     resolution: {integrity: sha512-qtEDqIZGVcSZCHniWwZWbRy79Dc6Wp3kT/UmDA2RJKBPg7+7k51aQBZirHmUGn5uvHf2rg8DkjizrN26k61ATw==}
     engines: {node: '>= 4'}
@@ -17012,6 +17910,7 @@ packages:
       hastscript: 6.0.0
       parse-entities: 2.0.0
       prismjs: 1.27.0
+    dev: false
 
   /regenerate-unicode-properties@10.1.0:
     resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==}
@@ -17331,6 +18230,12 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+    dependencies:
+      tslib: 2.6.2
+    dev: true
+
   /safe-array-concat@1.0.1:
     resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
     engines: {node: '>=0.4'}
@@ -17791,7 +18696,7 @@ packages:
     resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==}
     dev: true
 
-  /storybook-addon-pseudo-states@2.1.2(@storybook/components@7.5.1)(@storybook/core-events@7.5.1)(@storybook/manager-api@7.6.3)(@storybook/preview-api@7.6.3)(@storybook/theming@7.5.1)(react-dom@18.2.0)(react@18.2.0):
+  /storybook-addon-pseudo-states@2.1.2(@storybook/components@7.6.4)(@storybook/core-events@7.6.4)(@storybook/manager-api@7.6.4)(@storybook/preview-api@7.6.4)(@storybook/theming@7.6.4)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-AHv6q1JiQEUnMyZE3729iV6cNmBW7bueeytc4Lga4+8W1En8YNea5VjqAdrDNJhXVU0QEEIGtxkD3EoC9aVWLw==}
     peerDependencies:
       '@storybook/components': ^7.4.6
@@ -17807,20 +18712,20 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@storybook/components': 7.5.1(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.5.1
-      '@storybook/manager-api': 7.6.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.6.3
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.6.4(@types/react-dom@18.2.14)(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/core-events': 7.6.4
+      '@storybook/manager-api': 7.6.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/preview-api': 7.6.4
+      '@storybook/theming': 7.6.4(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /storybook@7.5.1:
-    resolution: {integrity: sha512-Wg3j3z5H03PYnEcmlnhf6bls0OtjmsNPsQ93dTV8F4AweqBECwzjf94Wj++NrP3X+WbfMoCbBU6LRFuEyzCCxw==}
+  /storybook@7.6.4:
+    resolution: {integrity: sha512-nQhs9XkrroxjqMoBnnToyc6M8ndbmpkOb1qmULO4chtfMy4k0p9Un3K4TJvDaP8c3wPUFGd4ZaJ1hZNVmIl56Q==}
     hasBin: true
     dependencies:
-      '@storybook/cli': 7.5.1
+      '@storybook/cli': 7.6.4
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -18963,6 +19868,17 @@ packages:
       escalade: 3.1.1
       picocolors: 1.0.0
 
+  /update-browserslist-db@1.0.13(browserslist@4.22.2):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.22.2
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -19204,16 +20120,16 @@ packages:
       xml-name-validator: 4.0.0
     dev: true
 
-  /wait-on@5.3.0:
-    resolution: {integrity: sha512-DwrHrnTK+/0QFaB9a8Ol5Lna3k7WvUR4jzSKmz0YaPBpuN2sACyiPVKVfj6ejnjcajAcvn3wlbTyMIn9AZouOg==}
-    engines: {node: '>=8.9.0'}
+  /wait-on@7.2.0:
+    resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==}
+    engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
-      axios: 0.21.4
-      joi: 17.7.0
+      axios: 1.6.2
+      joi: 17.11.0
       lodash: 4.17.21
       minimist: 1.2.8
-      rxjs: 6.6.7
+      rxjs: 7.8.1
     transitivePeerDependencies:
       - debug
     dev: true
diff --git a/posthog/api/__init__.py b/posthog/api/__init__.py
index 36f89c740a888..5f576a0be4bef 100644
--- a/posthog/api/__init__.py
+++ b/posthog/api/__init__.py
@@ -34,6 +34,7 @@
     property_definition,
     query,
     search,
+    scheduled_change,
     sharing,
     survey,
     tagged_item,
@@ -129,6 +130,13 @@ def api_not_found(request):
     ["team_id"],
 )
 
+projects_router.register(
+    r"scheduled_changes",
+    scheduled_change.ScheduledChangeViewSet,
+    "scheduled_changes",
+    ["team_id"],
+)
+
 app_metrics_router = projects_router.register(r"app_metrics", app_metrics.AppMetricsViewSet, "app_metrics", ["team_id"])
 app_metrics_router.register(
     r"historical_exports",
diff --git a/posthog/api/capture.py b/posthog/api/capture.py
index ac954a3b8d6d2..383e0b012e28a 100644
--- a/posthog/api/capture.py
+++ b/posthog/api/capture.py
@@ -32,7 +32,7 @@
     KAFKA_SESSION_RECORDING_SNAPSHOT_ITEM_EVENTS,
 )
 from posthog.logging.timing import timed
-from posthog.metrics import LABEL_RESOURCE_TYPE
+from posthog.metrics import LABEL_RESOURCE_TYPE, KLUDGES_COUNTER
 from posthog.models.utils import UUIDT
 from posthog.session_recordings.session_recording_helpers import (
     preprocess_replay_events_for_blob_ingestion,
@@ -75,7 +75,6 @@
     labelnames=[LABEL_RESOURCE_TYPE, "token"],
 )
 
-
 PARTITION_KEY_CAPACITY_EXCEEDED_COUNTER = Counter(
     "capture_partition_key_capacity_exceeded_total",
     "Indicates that automatic partition override is active for a given key. Value incremented once a minute.",
@@ -183,6 +182,7 @@ def _datetime_from_seconds_or_millis(timestamp: str) -> datetime:
         timestamp_number = float(timestamp) / 1000
     else:
         timestamp_number = int(timestamp)
+        KLUDGES_COUNTER.labels(kludge="sent_at_seconds_timestamp").inc()
 
     return datetime.fromtimestamp(timestamp_number, timezone.utc)
 
@@ -195,12 +195,15 @@ def _get_sent_at(data, request) -> Tuple[Optional[datetime], Any]:
             sent_at = data["sent_at"]
         elif request.POST.get("sent_at"):  # when urlencoded body and not JSON (in some test)
             sent_at = request.POST["sent_at"]
+            if sent_at:
+                KLUDGES_COUNTER.labels(kludge="sent_at_post_field").inc()
         else:
             return None, None
 
         if re.match(r"^\d+(?:\.\d+)?$", sent_at):
             return _datetime_from_seconds_or_millis(sent_at), None
 
+        KLUDGES_COUNTER.labels(kludge="sent_at_not_timestamp").inc()
         return parser.isoparse(sent_at), None
     except Exception as error:
         statsd.incr("capture_endpoint_invalid_sent_at")
@@ -358,6 +361,7 @@ def get_event(request):
             if data.get("batch"):  # posthog-python and posthog-ruby
                 data = data["batch"]
                 assert data is not None
+                KLUDGES_COUNTER.labels(kludge="data_is_batch_field").inc()
             elif "engage" in request.path_info:  # JS identify call
                 data["event"] = "$identify"  # make sure it has an event name
 
diff --git a/posthog/api/organization.py b/posthog/api/organization.py
index b0de79ff52297..38e387e1eee2f 100644
--- a/posthog/api/organization.py
+++ b/posthog/api/organization.py
@@ -114,12 +114,8 @@ def get_membership_level(self, organization: Organization) -> Optional[Organizat
         return membership.level if membership is not None else None
 
     def get_teams(self, instance: Organization) -> List[Dict[str, Any]]:
-        teams = cast(
-            List[Dict[str, Any]],
-            TeamBasicSerializer(instance.teams.all(), context=self.context, many=True).data,
-        )
-        visible_team_ids = set(self.user_permissions.team_ids_visible_for_user)
-        return [team for team in teams if team["id"] in visible_team_ids]
+        visible_teams = instance.teams.filter(id__in=self.user_permissions.team_ids_visible_for_user)
+        return TeamBasicSerializer(visible_teams, context=self.context, many=True).data  # type: ignore
 
     def get_metadata(self, instance: Organization) -> Dict[str, Union[str, int, object]]:
         return {
diff --git a/posthog/api/scheduled_change.py b/posthog/api/scheduled_change.py
new file mode 100644
index 0000000000000..a5de1d433aa45
--- /dev/null
+++ b/posthog/api/scheduled_change.py
@@ -0,0 +1,77 @@
+from typing import Any, Dict
+from rest_framework import (
+    authentication,
+    serializers,
+    viewsets,
+)
+
+from rest_framework.permissions import IsAuthenticated
+from posthog.api.routing import StructuredViewSetMixin
+from posthog.api.shared import UserBasicSerializer
+from posthog.auth import PersonalAPIKeyAuthentication
+from posthog.models import ScheduledChange
+from posthog.permissions import (
+    ProjectMembershipNecessaryPermissions,
+    TeamMemberAccessPermission,
+)
+
+
+class ScheduledChangeSerializer(serializers.ModelSerializer):
+    created_by = UserBasicSerializer(read_only=True)
+
+    class Meta:
+        model = ScheduledChange
+        fields = [
+            "id",
+            "team_id",
+            "record_id",
+            "model_name",
+            "payload",
+            "scheduled_at",
+            "executed_at",
+            "failure_reason",
+            "created_at",
+            "created_by",
+            "updated_at",
+        ]
+        read_only_fields = ["id", "created_at", "created_by", "updated_at"]
+
+    def create(self, validated_data: Dict, *args: Any, **kwargs: Any) -> ScheduledChange:
+        request = self.context["request"]
+        validated_data["created_by"] = request.user
+        validated_data["team_id"] = self.context["team_id"]
+
+        return super().create(validated_data)
+
+
+class ScheduledChangeViewSet(StructuredViewSetMixin, viewsets.ModelViewSet):
+    """
+    Create, read, update and delete scheduled changes.
+    """
+
+    queryset = ScheduledChange.objects.all()
+
+    def get_queryset(self):
+        queryset = ScheduledChange.objects.all()
+
+        model_name = self.request.query_params.get("model_name")
+        record_id = self.request.query_params.get("record_id")
+
+        if model_name is not None:
+            queryset = queryset.filter(model_name=model_name)
+        if record_id is not None:
+            queryset = queryset.filter(record_id=record_id)
+
+        return queryset
+
+    serializer_class = ScheduledChangeSerializer
+    permission_classes = [
+        IsAuthenticated,
+        ProjectMembershipNecessaryPermissions,
+        TeamMemberAccessPermission,
+    ]
+    authentication_classes = [
+        PersonalAPIKeyAuthentication,
+        authentication.SessionAuthentication,
+        authentication.BasicAuthentication,
+    ]
diff --git a/posthog/api/test/test_scheduled_change.py b/posthog/api/test/test_scheduled_change.py
new file mode 100644
index 0000000000000..f7ec88f204c82
--- /dev/null
+++ b/posthog/api/test/test_scheduled_change.py
@@ -0,0 +1,32 @@
+from rest_framework import status
+from posthog.test.base import (
+    APIBaseTest,
+)
+from posthog.models import ScheduledChange
+
+
+class TestScheduledChange(APIBaseTest):
+    def test_can_create_flag_change(self):
+        payload = {"field": "active", "value": "false"}
+
+        response = self.client.post(
+            f"/api/projects/{self.team.id}/scheduled_changes/",
+            data={
+                "id": 6,
+                "record_id": 119,
+                "model_name": "FeatureFlag",
+                "payload": payload,
+                "scheduled_at": "2023-12-08T12:00:00Z",
+                "executed_at": None,
+                "failure_reason": "",
+            },
+        )
+
+        response_data = response.json()
+
+        assert response.status_code == status.HTTP_201_CREATED, response_data
+        assert ScheduledChange.objects.filter(id=response_data["id"]).exists()
+        assert response_data["model_name"] == "FeatureFlag"
+        assert response_data["record_id"] == 119
+        assert response_data["payload"] == payload
+        assert response_data["created_by"]["id"] == self.user.id
diff --git a/posthog/hogql/database/models.py b/posthog/hogql/database/models.py
index b669a279b5975..9754ea299e3ab 100644
--- a/posthog/hogql/database/models.py
+++ b/posthog/hogql/database/models.py
@@ -95,10 +95,15 @@ def get_asterisk(self):
         for key, field in self.fields.items():
             if key in fields_to_avoid:
                 continue
-            if isinstance(field, DatabaseField):
+            if (
+                isinstance(field, Table)
+                or isinstance(field, LazyJoin)
+                or isinstance(field, FieldTraverser)
+                or isinstance(field, ExpressionField)
+            ):
+                pass  # ignore virtual tables and columns for now
+            elif isinstance(field, DatabaseField):
                 asterisk[key] = field
-            elif isinstance(field, Table) or isinstance(field, LazyJoin) or isinstance(field, FieldTraverser):
-                pass  # ignore virtual tables for now
             else:
                 raise HogQLException(f"Unknown field type {type(field).__name__} for asterisk")
         return asterisk
diff --git a/posthog/hogql/database/test/test_database.py b/posthog/hogql/database/test/test_database.py
index c14d39fbe54bc..0657779b15b87 100644
--- a/posthog/hogql/database/test/test_database.py
+++ b/posthog/hogql/database/test/test_database.py
@@ -110,9 +110,7 @@ def test_database_expression_fields(self):
             == "SELECT double FROM (SELECT multiply(numbers.number, 2) AS double FROM numbers(2) AS numbers) LIMIT 10000"
         ), query
 
-        sql = "select double from (select * from numbers(2))"
+        # expression fields are not included in select *
+        sql = "select * from (select * from numbers(2))"
         query = print_ast(parse_select(sql), context, dialect="clickhouse")
-        assert (
-            query
-            == "SELECT double FROM (SELECT numbers.number, plus(1, 1) AS expression, multiply(numbers.number, 2) AS double FROM numbers(2) AS numbers) LIMIT 10000"
-        ), query
+        assert query == "SELECT number FROM (SELECT numbers.number FROM numbers(2) AS numbers) LIMIT 10000", query
diff --git a/posthog/hogql_queries/persons_query_runner.py b/posthog/hogql_queries/persons_query_runner.py
index cd1cf612dee96..a5a638c21f903 100644
--- a/posthog/hogql_queries/persons_query_runner.py
+++ b/posthog/hogql_queries/persons_query_runner.py
@@ -1,6 +1,6 @@
-import json
 from datetime import timedelta
-from typing import List, cast, Literal
+from typing import List, cast, Literal, Dict, Any
+from django.db.models.query import Prefetch
 
 from posthog.hogql import ast
 from posthog.hogql.constants import get_max_limit_for_context, get_default_limit_for_context
@@ -9,8 +9,7 @@
 from posthog.hogql.query import execute_hogql_query
 from posthog.hogql_queries.query_runner import QueryRunner, get_query_runner
 from posthog.schema import PersonsQuery, PersonsQueryResponse
-
-PERSON_FULL_TUPLE = ["id", "properties", "created_at", "is_identified"]
+from posthog.models.person import Person
 
 
 class PersonsQueryRunner(QueryRunner):
@@ -28,11 +27,24 @@ def calculate(self) -> PersonsQueryResponse:
         input_columns = self.input_columns()
         if "person" in input_columns:
             person_column_index = input_columns.index("person")
+            person_ids = [str(result[person_column_index]) for result in response.results]
+            pg_persons = {
+                str(p.uuid): p
+                for p in Person.objects.filter(team_id=self.team.pk, persondistinctid__team_id=self.team.pk)
+                .filter(uuid__in=person_ids)
+                .prefetch_related(Prefetch("persondistinctid_set", to_attr="distinct_ids_cache"))
+            }
+
             for index, result in enumerate(response.results):
                 response.results[index] = list(result)
-                select = result[person_column_index]
-                new_result = dict(zip(PERSON_FULL_TUPLE, select))
-                new_result["properties"] = json.loads(new_result["properties"])
+                person_id = str(result[person_column_index])
+                new_result: Dict[str, Any] = {"id": person_id}
+                person = pg_persons.get(person_id)
+                if person:
+                    new_result["distinct_ids"] = person.distinct_ids
+                    new_result["properties"] = person.properties
+                    new_result["created_at"] = person.created_at
+                    new_result["is_identified"] = person.is_identified
                 response.results[index][person_column_index] = new_result
 
         has_more = len(response.results) > self.query_limit()
@@ -114,24 +126,16 @@ def to_query(self) -> ast.SelectQuery:
             aggregations = []
             for expr in self.input_columns():
                 if expr == "person.$delete":
-                    columns.append(ast.Constant(value=1))
+                    column = ast.Constant(value=1)
                 elif expr == "person":
-                    tuple_exprs = []
-                    for field in PERSON_FULL_TUPLE:
-                        column = ast.Field(chain=[field])
-                        tuple_exprs.append(column)
-                        if has_aggregation(column):
-                            aggregations.append(column)
-                        elif not isinstance(column, ast.Constant):
-                            group_by.append(column)
-                    columns.append(ast.Tuple(exprs=tuple_exprs))
+                    column = ast.Field(chain=["id"])
                 else:
                     column = parse_expr(expr)
-                    columns.append(parse_expr(expr))
-                    if has_aggregation(column):
-                        aggregations.append(column)
-                    elif not isinstance(column, ast.Constant):
-                        group_by.append(column)
+                columns.append(column)
+                if has_aggregation(column):
+                    aggregations.append(column)
+                elif not isinstance(column, ast.Constant):
+                    group_by.append(column)
             has_any_aggregation = len(aggregations) > 0
 
         with self.timings.measure("filters"):
diff --git a/posthog/hogql_queries/test/test_persons_query_runner.py b/posthog/hogql_queries/test/test_persons_query_runner.py
index a5f09e3c6619f..6163293d74f3a 100644
--- a/posthog/hogql_queries/test/test_persons_query_runner.py
+++ b/posthog/hogql_queries/test/test_persons_query_runner.py
@@ -65,14 +65,7 @@ def test_default_persons_query(self):
         query = clear_locations(query)
         expected = ast.SelectQuery(
             select=[
-                ast.Tuple(
-                    exprs=[
-                        ast.Field(chain=["id"]),
-                        ast.Field(chain=["properties"]),
-                        ast.Field(chain=["created_at"]),
-                        ast.Field(chain=["is_identified"]),
-                    ]
-                ),
+                ast.Field(chain=["id"]),
                 ast.Field(chain=["id"]),
                 ast.Field(chain=["created_at"]),
                 ast.Constant(value=1),
@@ -83,9 +76,13 @@ def test_default_persons_query(self):
             offset=ast.Constant(value=0),
             order_by=[ast.OrderExpr(expr=ast.Field(chain=["created_at"]), order="DESC")],
         )
-        self.assertEqual(clear_locations(query), expected)
+        assert clear_locations(query) == expected
         response = runner.calculate()
-        self.assertEqual(len(response.results), 10)
+        assert len(response.results) == 10
+
+        assert set(response.results[0][0].keys()) == {"id", "created_at", "distinct_ids", "properties", "is_identified"}
+        assert response.results[0][0].get("properties").get("random_uuid") == self.random_uuid
+        assert len(response.results[0][0].get("distinct_ids")) > 0
 
     def test_persons_query_properties(self):
         self.random_uuid = self._create_random_persons()
diff --git a/posthog/metrics.py b/posthog/metrics.py
index 13b3e0fa5d085..5c5aef2c977fe 100644
--- a/posthog/metrics.py
+++ b/posthog/metrics.py
@@ -3,7 +3,7 @@
 
 import structlog
 from django.conf import settings
-from prometheus_client import CollectorRegistry, push_to_gateway
+from prometheus_client import CollectorRegistry, Counter, push_to_gateway
 from sentry_sdk import capture_exception
 
 logger = structlog.get_logger(__name__)
@@ -21,6 +21,12 @@
 LABEL_RESOURCE_TYPE = "resource_type"
 LABEL_TEAM_ID = "team_id"
 
+KLUDGES_COUNTER = Counter(
+    "posthog_kludges_total",
+    "Tracking code paths eligible for deletion if they are not used.",
+    labelnames=["kludge"],
+)
+
 
 def _push(settings, job, registry):
     push_to_gateway(settings, job, registry)
diff --git a/posthog/middleware.py b/posthog/middleware.py
index b480580afad40..f6cf39d7176ab 100644
--- a/posthog/middleware.py
+++ b/posthog/middleware.py
@@ -31,7 +31,6 @@
 from posthog.models import Action, Cohort, Dashboard, FeatureFlag, Insight, Team, User
 from posthog.rate_limit import DecideRateThrottle
 from posthog.settings import SITE_URL, DEBUG
-from posthog.settings.statsd import STATSD_HOST
 from posthog.user_permissions import UserPermissions
 from .auth import PersonalAPIKeyAuthentication
 from .utils_cors import cors_response
@@ -369,13 +368,6 @@ def __init__(self, get_response):
         # List of middlewares we want to run, that would've been shortcircuited otherwise
         self.CAPTURE_MIDDLEWARE = middlewares
 
-        if STATSD_HOST is not None:
-            # import here to avoid log-spew about failure to connect to statsd,
-            # as this connection is created on import
-            from django_statsd.middleware import StatsdMiddlewareTimer
-
-            self.CAPTURE_MIDDLEWARE.append(StatsdMiddlewareTimer())
-
     def __call__(self, request: HttpRequest):
         if request.path in (
             "/e",
diff --git a/posthog/migrations/0374_scheduled_change.py b/posthog/migrations/0374_scheduled_change.py
new file mode 100644
index 0000000000000..57cc1d46cd394
--- /dev/null
+++ b/posthog/migrations/0374_scheduled_change.py
@@ -0,0 +1,36 @@
+# Generated by Django 3.2.19 on 2023-12-12 21:45
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("posthog", "0373_externaldataschema"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ScheduledChange",
+            fields=[
+                ("id", models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name="ID")),
+                ("record_id", models.IntegerField()),
+                ("model_name", models.CharField(choices=[("FeatureFlag", "feature flag")], max_length=100)),
+                ("payload", models.JSONField(default=dict)),
+                ("scheduled_at", models.DateTimeField(default=django.utils.timezone.now)),
+                ("executed_at", models.DateTimeField(blank=True, null=True)),
+                ("failure_reason", models.CharField(blank=True, max_length=400, null=True)),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("updated_at", models.DateTimeField(auto_now_add=True)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL
+                    ),
+                ),
+                ("team", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to="posthog.team")),
+            ],
+        ),
+    ]
diff --git a/posthog/models/__init__.py b/posthog/models/__init__.py
index aca29218312cd..d0fc43534b77f 100644
--- a/posthog/models/__init__.py
+++ b/posthog/models/__init__.py
@@ -33,6 +33,7 @@
 from .experiment import Experiment
 from .exported_asset import ExportedAsset
 from .feature_flag import FeatureFlag
+from .scheduled_change import ScheduledChange
 from .feedback.survey import Survey
 from .filters import Filter, RetentionFilter
 from .group import Group
@@ -140,4 +141,5 @@
     "UserManager",
     "UserPromptState",
     "DataWarehouseTable",
+    "ScheduledChange",
 ]
diff --git a/posthog/models/scheduled_change.py b/posthog/models/scheduled_change.py
new file mode 100644
index 0000000000000..2fea198fd3ba0
--- /dev/null
+++ b/posthog/models/scheduled_change.py
@@ -0,0 +1,20 @@
+from django.db import models
+from django.utils import timezone
+
+
+class ScheduledChange(models.Model):
+    class AllowedModels(models.TextChoices):
+        FEATURE_FLAG = "FeatureFlag", "feature flag"
+
+    id = models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name="ID")
+    record_id = models.IntegerField()
+    model_name: models.CharField = models.CharField(max_length=100, choices=AllowedModels.choices)
+    payload: models.JSONField = models.JSONField(default=dict)
+    scheduled_at: models.DateTimeField = models.DateTimeField(default=timezone.now)
+    executed_at: models.DateTimeField = models.DateTimeField(null=True, blank=True)
+    failure_reason = models.CharField(max_length=400, null=True, blank=True)
+
+    team: models.ForeignKey = models.ForeignKey("Team", on_delete=models.CASCADE)
+    created_at: models.DateTimeField = models.DateTimeField(auto_now_add=True)
+    created_by: models.ForeignKey = models.ForeignKey("User", on_delete=models.SET_NULL, null=True)
+    updated_at: models.DateTimeField = models.DateTimeField(auto_now_add=True)
diff --git a/posthog/schema.py b/posthog/schema.py
index 6dc3b2942eeae..89d3e70a56a8d 100644
--- a/posthog/schema.py
+++ b/posthog/schema.py
@@ -55,6 +55,13 @@ class BreakdownType(str, Enum):
     hogql = "hogql"
 
 
+class ChartAxis(BaseModel):
+    model_config = ConfigDict(
+        extra="forbid",
+    )
+    column: str
+
+
 class ChartDisplayType(str, Enum):
     ActionsLineGraph = "ActionsLineGraph"
     ActionsLineGraphCumulative = "ActionsLineGraphCumulative"
@@ -87,14 +94,6 @@ class CountPerActorMathType(str, Enum):
     p99_count_per_actor = "p99_count_per_actor"
 
 
-class ChartSettings(BaseModel):
-    model_config = ConfigDict(
-        extra="forbid",
-    )
-    xAxisIndex: Optional[List[float]] = None
-    yAxisIndex: Optional[List[float]] = None
-
-
 class DatabaseSchemaQueryResponseField(BaseModel):
     model_config = ConfigDict(
         extra="forbid",
@@ -249,6 +248,14 @@ class FunnelVizType(str, Enum):
     trends = "trends"
 
 
+class GoalLine(BaseModel):
+    model_config = ConfigDict(
+        extra="forbid",
+    )
+    label: str
+    value: float
+
+
 class HogQLNotice(BaseModel):
     model_config = ConfigDict(
         extra="forbid",
@@ -762,6 +769,15 @@ class DataNode(BaseModel):
     response: Optional[Dict[str, Any]] = Field(default=None, description="Cached query response")
 
 
+class ChartSettings(BaseModel):
+    model_config = ConfigDict(
+        extra="forbid",
+    )
+    goalLines: Optional[List[GoalLine]] = None
+    xAxis: Optional[ChartAxis] = None
+    yAxis: Optional[List[ChartAxis]] = None
+
+
 class ElementPropertyFilter(BaseModel):
     model_config = ConfigDict(
         extra="forbid",
diff --git a/posthog/settings/web.py b/posthog/settings/web.py
index b846a2486c5df..36309548bb4a4 100644
--- a/posthog/settings/web.py
+++ b/posthog/settings/web.py
@@ -6,7 +6,6 @@
 from corsheaders.defaults import default_headers
 
 from posthog.settings.base_variables import BASE_DIR, DEBUG, TEST
-from posthog.settings.statsd import STATSD_HOST
 from posthog.settings.utils import get_from_env, get_list, str_to_bool
 from posthog.utils_cors import CORS_ALLOWED_TRACING_HEADERS
 
@@ -107,11 +106,6 @@
     "posthog.middleware.PostHogTokenCookieMiddleware",
 ]
 
-
-if STATSD_HOST is not None:
-    MIDDLEWARE.insert(0, "django_statsd.middleware.StatsdMiddleware")
-    MIDDLEWARE.append("django_statsd.middleware.StatsdMiddlewareTimer")
-
 if DEBUG:
     # Used on local devenv to reverse-proxy all of /i/* to capture-rs on port 3000
     INSTALLED_APPS.append("revproxy")
diff --git a/posthog/temporal/data_imports/pipelines/stripe/helpers.py b/posthog/temporal/data_imports/pipelines/stripe/helpers.py
index 501aa976fbf2f..4f5ee99b40d9a 100644
--- a/posthog/temporal/data_imports/pipelines/stripe/helpers.py
+++ b/posthog/temporal/data_imports/pipelines/stripe/helpers.py
@@ -1,16 +1,26 @@
 """Stripe analytics source helpers"""
 
-from typing import Any, Dict, Optional, Union
+from typing import Any, Dict, Optional, Union, Iterable
 
 import stripe
+import dlt
 from dlt.common import pendulum
+from dlt.sources import DltResource
 from pendulum import DateTime
-from asgiref.sync import sync_to_async
 
 stripe.api_version = "2022-11-15"
 
 
-async def stripe_pagination(
+def transform_date(date: Union[str, DateTime, int]) -> int:
+    if isinstance(date, str):
+        date = pendulum.from_format(date, "%Y-%m-%dT%H:%M:%SZ")
+    if isinstance(date, DateTime):
+        # convert to unix timestamp
+        date = int(date.timestamp())
+    return date
+
+
+def stripe_pagination(
     api_key: str,
     endpoint: str,
     start_date: Optional[Any] = None,
@@ -28,52 +38,70 @@ async def stripe_pagination(
     Returns:
         Iterable[TDataItem]: Data items retrieved from the endpoint.
     """
-    while True:
-        response = await stripe_get_data(
-            api_key,
-            endpoint,
-            start_date=start_date,
-            end_date=end_date,
-            starting_after=starting_after,
+
+    should_continue = True
+
+    def stripe_get_data(
+        api_key: str,
+        resource: str,
+        start_date: Optional[Any] = None,
+        end_date: Optional[Any] = None,
+        **kwargs: Any,
+    ) -> Dict[Any, Any]:
+        nonlocal should_continue
+        nonlocal starting_after
+
+        if start_date:
+            start_date = transform_date(start_date)
+        if end_date:
+            end_date = transform_date(end_date)
+
+        if resource == "Subscription":
+            kwargs.update({"status": "all"})
+
+        _resource = getattr(stripe, resource)
+        resource_dict = _resource.list(
+            api_key=api_key,
+            created={"gte": start_date, "lt": end_date},
+            limit=100,
+            **kwargs,
         )
+        response = dict(resource_dict)
+
+        if not response["has_more"]:
+            should_continue = False
 
         if len(response["data"]) > 0:
             starting_after = response["data"][-1]["id"]
-        yield response["data"], starting_after
 
-        if not response["has_more"]:
-            break
+        return response["data"]
 
-
-def transform_date(date: Union[str, DateTime, int]) -> int:
-    if isinstance(date, str):
-        date = pendulum.from_format(date, "%Y-%m-%dT%H:%M:%SZ")
-    if isinstance(date, DateTime):
-        # convert to unix timestamp
-        date = int(date.timestamp())
-    return date
+    while should_continue:
+        yield stripe_get_data(
+            api_key,
+            endpoint,
+            start_date=start_date,
+            end_date=end_date,
+            starting_after=starting_after,
+        )
 
 
-async def stripe_get_data(
+@dlt.source
+def stripe_source(
     api_key: str,
-    resource: str,
+    endpoint: str,
     start_date: Optional[Any] = None,
     end_date: Optional[Any] = None,
-    **kwargs: Any,
-) -> Dict[Any, Any]:
-    if start_date:
-        start_date = transform_date(start_date)
-    if end_date:
-        end_date = transform_date(end_date)
-
-    if resource == "Subscription":
-        kwargs.update({"status": "all"})
-
-    _resource = getattr(stripe, resource)
-    resource_dict = await sync_to_async(_resource.list)(
+    starting_after: Optional[str] = None,
+) -> Iterable[DltResource]:
+    return dlt.resource(
+        stripe_pagination,
+        name=endpoint,
+        write_disposition="append",
+    )(
         api_key=api_key,
-        created={"gte": start_date, "lt": end_date},
-        limit=100,
-        **kwargs,  # type: ignore
+        endpoint=endpoint,
+        start_date=start_date,
+        end_date=end_date,
+        starting_after=starting_after,
     )
-    return dict(resource_dict)
diff --git a/posthog/temporal/data_imports/pipelines/stripe/stripe_pipeline.py b/posthog/temporal/data_imports/pipelines/stripe/stripe_pipeline.py
index 6b83e6ee07886..95217b810298b 100644
--- a/posthog/temporal/data_imports/pipelines/stripe/stripe_pipeline.py
+++ b/posthog/temporal/data_imports/pipelines/stripe/stripe_pipeline.py
@@ -7,7 +7,7 @@
 from dlt.pipeline.exceptions import PipelineStepFailed
 
 from posthog.warehouse.models import ExternalDataSource
-from posthog.temporal.data_imports.pipelines.stripe.helpers import stripe_pagination
+from posthog.temporal.data_imports.pipelines.stripe.helpers import stripe_source
 from posthog.temporal.data_imports.pipelines.stripe.settings import ENDPOINTS
 from posthog.temporal.common.logger import bind_temporal_worker_logger
 
@@ -95,19 +95,13 @@ async def worker_shutdown_handler():
         else:
             starting_after = None
 
-        async for item, cursor in stripe_pagination(inputs.stripe_secret_key, endpoint, starting_after=starting_after):
-            try:
-                # init pipeline and run data import
-                pipeline = create_pipeline(inputs)
-                pipeline.run(item, table_name=endpoint.lower(), loader_file_format="parquet")
-
-                # clear everything from pipeline
-                pipeline.drop()
-                pipeline.deactivate()
-                activity.heartbeat(endpoint, cursor)
-            except PipelineStepFailed:
-                logger.error(f"Data import failed for endpoint {endpoint} with cursor {cursor}")
-                raise
+        pipeline = create_pipeline(inputs)
+        try:
+            source = stripe_source(inputs.stripe_secret_key, endpoint, starting_after=starting_after)
+            pipeline.run(source, table_name=endpoint.lower(), loader_file_format="parquet")
+        except PipelineStepFailed:
+            logger.error(f"Data import failed for endpoint {endpoint} with cursor {cursor}")
+            raise
 
 
 PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING = {ExternalDataSource.Type.STRIPE: ENDPOINTS}
diff --git a/posthog/temporal/tests/test_external_data_job.py b/posthog/temporal/tests/test_external_data_job.py
index 780d942f43ca4..44d153967cd7d 100644
--- a/posthog/temporal/tests/test_external_data_job.py
+++ b/posthog/temporal/tests/test_external_data_job.py
@@ -172,16 +172,9 @@ async def test_run_stripe_job(activity_environment, team, **kwargs):
 
     with mock.patch(
         "posthog.temporal.data_imports.pipelines.stripe.stripe_pipeline.create_pipeline",
-    ) as mock_create_pipeline, mock.patch(
-        "posthog.temporal.data_imports.pipelines.stripe.helpers.stripe_get_data"
-    ) as mock_stripe_get_data:  # noqa: B015
-        mock_stripe_get_data.return_value = {
-            "data": [{"id": "test-id", "object": "test-object"}],
-            "has_more": False,
-        }
+    ) as mock_create_pipeline:  # noqa: B015
         await activity_environment.run(run_external_data_job, inputs)
 
-        assert mock_stripe_get_data.call_count == 5
         assert mock_create_pipeline.call_count == 5
 
         mock_create_pipeline.assert_called_with(
diff --git a/posthog/test/test_user_permissions.py b/posthog/test/test_user_permissions.py
index b0562dbca57af..4d074d0a26446 100644
--- a/posthog/test/test_user_permissions.py
+++ b/posthog/test/test_user_permissions.py
@@ -45,6 +45,22 @@ def test_team_effective_membership_level_does_not_belong(self):
         with self.assertNumQueries(1):
             assert permissions.team(self.team).effective_membership_level is None
 
+    def test_team_effective_membership_level_membership_isolation(self):
+        self.team.access_control = True
+        self.team.save()
+        ExplicitTeamMembership.objects.create(
+            team=self.team,
+            parent_membership=self.organization_membership,
+        )
+        forbidden_team = Team.objects.create(
+            organization=self.organization,
+            name="FORBIDDEN",
+            access_control=True,
+        )
+        permissions = UserPermissions(user=self.user)
+        with self.assertNumQueries(2):
+            assert permissions.team(forbidden_team).effective_membership_level is None
+
     def test_team_effective_membership_level_with_explicit_membership_returns_current_level(self):
         self.team.access_control = True
         self.team.save()
diff --git a/posthog/user_permissions.py b/posthog/user_permissions.py
index 4d1a13fa76815..6630cded58038 100644
--- a/posthog/user_permissions.py
+++ b/posthog/user_permissions.py
@@ -72,7 +72,6 @@ def team_ids_visible_for_user(self) -> List[int]:
         candidate_teams = Team.objects.filter(organization_id__in=self.organizations.keys()).only(
             "pk", "organization_id", "access_control"
         )
-
         return [team.pk for team in candidate_teams if self.team(team).effective_membership_level is not None]
 
     # Cached properties/functions for efficient lookups in other classes
@@ -96,7 +95,7 @@ def organization_memberships(self) -> Dict[UUID, OrganizationMembership]:
         return {membership.organization_id: membership for membership in memberships}
 
     @cached_property
-    def explicit_team_memberships(self) -> Dict[UUID, Any]:
+    def explicit_team_memberships(self) -> Dict[int, Any]:
         try:
             from ee.models import ExplicitTeamMembership
         except ImportError:
@@ -104,8 +103,8 @@ def explicit_team_memberships(self) -> Dict[UUID, Any]:
 
         memberships = ExplicitTeamMembership.objects.filter(
             parent_membership_id__in=[membership.pk for membership in self.organization_memberships.values()]
-        ).only("parent_membership_id", "level")
-        return {membership.parent_membership_id: membership.level for membership in memberships}
+        ).only("parent_membership_id", "level", "team_id")
+        return {membership.team_id: membership.level for membership in memberships}
 
     @cached_property
     def dashboard_privileges(self) -> Dict[int, Dashboard.PrivilegeLevel]:
@@ -168,7 +167,7 @@ def effective_membership_level_for_parent_membership(
         ):
             return organization_membership.level
 
-        explicit_membership_level = self.p.explicit_team_memberships.get(organization_membership.pk)
+        explicit_membership_level = self.p.explicit_team_memberships.get(self.team.id)
         if explicit_membership_level is not None:
             return max(explicit_membership_level, organization_membership.level)
         # Only organizations admins and above get implicit project membership
diff --git a/posthog/utils.py b/posthog/utils.py
index 9f556550faa21..278d47f5acf39 100644
--- a/posthog/utils.py
+++ b/posthog/utils.py
@@ -53,6 +53,7 @@
 from posthog.cloud_utils import get_cached_instance_license, is_cloud
 from posthog.constants import AvailableFeature
 from posthog.exceptions import RequestParsingError
+from posthog.metrics import KLUDGES_COUNTER
 from posthog.redis import get_client
 
 if TYPE_CHECKING:
@@ -631,6 +632,7 @@ def decompress(data: Any, compression: str):
             raise RequestParsingError("Failed to decompress data. %s" % (str(error)))
 
     if compression == "lz64":
+        KLUDGES_COUNTER.labels(kludge="lz64_compression").inc()
         if not isinstance(data, str):
             data = data.decode()
         data = data.replace(" ", "+")
@@ -645,6 +647,7 @@ def decompress(data: Any, compression: str):
     base64_decoded = None
     try:
         base64_decoded = base64_decode(data)
+        KLUDGES_COUNTER.labels(kludge="base64_after_decompression_" + compression).inc()
     except Exception:
         pass
 
@@ -659,7 +662,9 @@ def decompress(data: Any, compression: str):
     except (json.JSONDecodeError, UnicodeDecodeError) as error_main:
         if compression == "":
             try:
-                return decompress(data, "gzip")
+                fallback = decompress(data, "gzip")
+                KLUDGES_COUNTER.labels(kludge="unspecified_gzip_fallback").inc()
+                return fallback
             except Exception as inner:
                 # re-trying with compression set didn't succeed, throw original error
                 raise RequestParsingError("Invalid JSON: %s" % (str(error_main))) from inner
@@ -679,6 +684,8 @@ def load_data_from_request(request):
             data = request.POST.get("data")
     else:
         data = request.GET.get("data")
+        if data:
+            KLUDGES_COUNTER.labels(kludge="data_in_get_param").inc()
 
     # add the data in sentry's scope in case there's an exception
     with configure_scope() as scope:
diff --git a/posthog/warehouse/data_load/validate_schema.py b/posthog/warehouse/data_load/validate_schema.py
index d588e189427f7..1e2cd7467712d 100644
--- a/posthog/warehouse/data_load/validate_schema.py
+++ b/posthog/warehouse/data_load/validate_schema.py
@@ -71,7 +71,7 @@ def validate_schema_and_update_table(run_id: str, team_id: int, schemas: list[st
         except ServerException as err:
             if err.code == 636:
                 logger.exception(
-                    f"Data Warehouse: No data for schema for external data job {job.pk}",
+                    f"Data Warehouse: No data for schema {_schema_name} for external data job {job.pk}",
                     exc_info=err,
                 )
             continue
diff --git a/posthog/year_in_posthog/2023.html b/posthog/year_in_posthog/2023.html
index c3e8b75aeb4c7..bdce0e0e20269 100644
--- a/posthog/year_in_posthog/2023.html
+++ b/posthog/year_in_posthog/2023.html
@@ -3,7 +3,7 @@
 <head>
     {% load static %}
     <meta charset="utf-8">
-    <title>My year in PostHog</title>
+    <title>PostHog Unwrapped</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png?v=2021-04-29">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png?v=2021-04-29">
@@ -13,8 +13,10 @@
     {% else %}
         <link rel="shortcut icon" href="/static/icons/favicon-dev.ico?v=2021-04-29">
     {% endif %}
-    <link rel="preload" href="{% static 'Inter.woff2' %}" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="{% static 'Inter.woff' %}" as="font" type="font/woff" crossorigin>
+{#    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2" as="font" type="font/woff2"#}
+{#          crossorigin="anonymous">#}
+{#    <link rel="preload" href="https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2" as="font" type="font/woff2"#}
+{#          crossorigin="anonymous">#}
     <link rel="preload" href="{% static image_webp %}" as="image">
     <link rel="preload" href="{% static 'year_in_hog/background.png' %}" as="image">
     <script>
@@ -49,46 +51,52 @@
             }
         })
     </script>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/microtip@0.2.2/microtip.css">
+    {# can defer loading of the tooltip css #}
+    <link rel="preload" href="https://unpkg.com/microtip@0.2.2/microtip.css" as="style"
+          onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://unpkg.com/microtip@0.2.2/microtip.css">
+    </noscript>
     <style>
-        /* Inter; bold (700); latin */
+        /* Matter; bold (800); latin */
         @font-face {
-            font-family: 'Inter';
+            font-family: MatterSQ;
             font-style: normal;
-            font-weight: 700;
+            font-weight: 800;
+
+            src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Bold.woff2') format('woff2'),
+            url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Bold.woff') format('woff');
             font-display: swap;
-            src: url('{% static 'Inter.woff2' %}') format('woff2'), url('{% static 'Inter.woff' %}') format('woff');
-            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-            U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
         }
 
+        /* Matter; bold (700); latin */
         @font-face {
-            font-family: 'Inter';
+            font-family: MatterSQ;
             font-style: normal;
-            font-weight: 500;
+            font-weight: 700;
+
+            src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2') format('woff2'),
+            url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff') format('woff');
             font-display: swap;
-            src: url('{% static 'Inter.woff2' %}') format('woff2'), url('{% static 'Inter.woff' %}') format('woff');
-            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-            U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
         }
 
-        /* Inter; normal (400); latin */
+        /* Matter; medium (500); latin */
         @font-face {
-            font-family: 'Inter';
+            font-family: MatterSQ;
             font-style: normal;
-            font-weight: 400;
+            font-weight: 500;
+
+            src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2') format('woff2'),
+            url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff') format('woff');
             font-display: swap;
-            src: url('{% static 'Inter.woff2' %}') format('woff2'), url('{% static 'Inter.woff' %}') format('woff');
-            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-            U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
         }
 
         html {
-            font-family: "Inter", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica, sans-serif;
+            font-family: "MatterSQ", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica, sans-serif;
         }
 
         body {
-            background-color: #2D2D2D;
+            background-color: #35373e;
             color: #fff;
             height: 100vh;
             width: 100vw;
@@ -156,12 +164,6 @@
             gap: 2rem;
         }
 
-        @media only screen and (min-width: 650px) {
-            main {
-                flex-direction: row;
-            }
-        }
-
         .column {
             width: 90vw;
             display: flex;
@@ -179,22 +181,11 @@
             align-items: start;
         }
 
-        @media only screen and (min-width: 650px) {
-            .column.left {
-                width: 45%;
-                margin: 0;
-            }
-
-            .column.right {
-                width: 55%;
-            }
-        }
-
         .footer {
             flex-shrink: 0;
             height: 4rem;
-            background-color: #EEEFE9;
-            color: #000;
+            background-color: #f3f4ef;
+            color: #35373e;
             width: 100vw;
             display: flex;
             flex-direction: row;
@@ -202,6 +193,14 @@
             align-items: center;
         }
 
+        .footer a {
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            color: #35373e;
+            cursor: pointer;
+        }
+
         .highlight {
             color: {{ highlight_color }};
         }
@@ -250,11 +249,8 @@
             margin-bottom: 1rem;
         }
 
-        @media only screen and (min-width: 650px) {
-            .my-8 {
-                margin-top: 2rem;
-                margin-bottom: 2rem;
-            }
+        .p-1 {
+            padding: 0.25rem;
         }
 
         .px-1 {
@@ -279,20 +275,6 @@
             padding-left: 2rem;
         }
 
-        .stats {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            width: 100%;
-        }
-
-        .stat {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 100%;
-        }
-
-
         .achievements-wrapper {
             display: flex;
             flex-direction: column;
@@ -300,48 +282,14 @@
             width: 100%;
         }
 
-        .achievements {
+        .grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
-            gap: 10px; /* Adjust the gap between grid items as needed */
-            width: 100%;
-        }
-
-        .badge {
-            width: 326px;
-            height: 326px;
+            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Change to 1 column */
         }
 
         .badge.mini {
-            width: 100px;
-            height: 100px;
-        }
-
-        @media screen and (max-width: 980px) {
-            .achievements {
-                grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
-            }
-        }
-
-        @media screen and (max-width: 790px) {
-            .achievements {
-                grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
-            }
-        }
-
-        @media screen and (max-width: 400px) {
-            .achievements {
-                grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Change to 1 column */
-            }
-
-            .badge.mini {
-                width: 250px;
-                height: 250px;
-            }
-        }
-
-        .achievements > * + * {
-            margin-left: 0.5rem;
+            width: 250px;
+            height: 250px;
         }
 
         .achievement {
@@ -374,7 +322,50 @@
             display: none;
         }
 
-        @media only screen and (min-width: 650px) {
+        :root {
+            --microtip-font-size: 15px;
+        }
+
+        @media (min-width: 600px) {
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
+                gap: 10px; /* Adjust the gap between grid items as needed */
+                width: 100%;
+            }
+
+            .badge.mini {
+                width: 100px;
+                height: 100px;
+            }
+        }
+
+        @media (min-width: 769px) {
+            main {
+                flex-direction: row;
+            }
+
+            .column.left {
+                width: 45%;
+                margin: 0;
+            }
+
+            .column.right {
+                width: 55%;
+            }
+
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
+                gap: 10px; /* Adjust the gap between grid items as needed */
+                width: 100%;
+            }
+
+            .badge.mini {
+                width: 100px;
+                height: 100px;
+            }
+
             .right .sharing {
                 display: none;
             }
@@ -405,21 +396,35 @@
             }
         }
 
-        :root {
-         --microtip-font-size: 15px;
+        @media (min-width: 1024px) {
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+                gap: 10px; /* Adjust the gap between grid items as needed */
+                width: 100%;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
+                gap: 10px; /* Adjust the gap between grid items as needed */
+                width: 100%;
+            }
         }
     </style>
     <meta name="description" content="{{ explanation }}">
     <meta name="image" content="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% static opengraph_image %}">
     <meta property="og:url" content="{{ page_url }}">
-    <meta property="og:title" content="My year in PostHog">
+    <meta property="og:title" content="PostHog Unwrapped">
     <meta property="og:description"
           content="No hedgehogs were harmed in the course of this year on @posthog. {{ explanation }}">
     <meta property="og:image" content="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% static opengraph_image %}">
 
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:creator" content="@PostHog">
-    <meta name="twitter:title" content="My year in PostHog">
+    <meta name="twitter:title" content="PostHog Unwrapped">
     <meta name="twitter:description"
           content="{{ explanation }}">
     <meta name="twitter:image"
@@ -433,7 +438,7 @@
 <body>
 <main class="px-4 pb-4" role="main">
     <div class="left column">
-        <div>This year, You're {% if badge == "astronaut" %}an{% else %}a{% endif %}</div>
+        <div>This year, you're {% if badge == "astronaut" %}an{% else %}a{% endif %}</div>
 
         <picture class="badge my-8">
             <source type="image/webp" srcset="{% static image_webp %}" width="326" height="326">
@@ -447,9 +452,9 @@ <h1 class="highlight text-3xl">{{ human_badge }}</h1>
     <div class="right column">
         <div class="muted">You earned this badge because...</div>
         <div class="highlight text-2xl my-4">{{ explanation }}</div>
-        <div class="stats pt-2">
+        <div class="stats grid pt-2">
             {% for stat in stats %}
-                <div class="stat px-1">
+                <div class="stat p-1">
                     <div class="highlight text-3xl">{{ stat.count }}</div>
                     <div>{{ stat.description }}</div>
                 </div>
@@ -458,13 +463,15 @@ <h1 class="highlight text-3xl">{{ human_badge }}</h1>
         {% if badges %}
             <div class="achievements-wrapper pt-2">
                 <h2 class="highlight text-xl">Achievements unlocked {{ achievements_count }}/7</h2>
-                <div class="achievements">
+                <div class="achievements grid">
                     {% for _, b in badges.items %}
-                        <div class="achievement text-sm" aria-label="{{ b.explanation }}" role="tooltip" data-microtip-position="top-left" data-microtip-size="medium">
+                        <div class="achievement text-sm" aria-label="{{ b.explanation }}" role="tooltip"
+                             data-microtip-position="top-left" data-microtip-size="medium">
                             <picture class="badge mini">
                                 <source type="image/webp" srcset="{% static b.image_webp %}" width="100" height="100">
                                 <source type="image/png" srcset="{% static b.image_png %}" width="100" height="100">
                                 <img class="badge mini" src="{% static b.image_png %}" width="100" height="100"
+                                     loading="lazy"
                                      alt="An illustration of a hedgehog who is a {{ b.human_badge }}">
                             </picture>
                             <div class="my-4 text-center highlight {{ b.badge }}">{{ b.human_badge }}</div>
@@ -479,8 +486,14 @@ <h2 class="highlight text-xl">Achievements unlocked {{ achievements_count }}/7</
 </main>
 <footer class="footer" role="contentinfo">
     <div class="pl-8 text-xl grow items-center flex">
-           <svg fill="black" width="3.5rem" height="3.5rem" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.751 14.926a.44.44 0 0 0-.751.31v2.017c0 .243.197.44.44.44h2.016a.44.44 0 0 0 .311-.751l-2.016-2.016Zm-.622-1.502A.44.44 0 0 1 2 13.113v-2.274a.44.44 0 0 1 .751-.311l6.414 6.414a.44.44 0 0 1-.31.75H6.58a.44.44 0 0 1-.31-.128l-4.141-4.14Zm0-4.398A.44.44 0 0 1 2 8.715V6.44a.44.44 0 0 1 .751-.311l10.812 10.812a.44.44 0 0 1-.31.75h-2.275a.44.44 0 0 1-.311-.128L2.129 9.026Zm4.398 0a.44.44 0 0 1-.13-.311V6.44a.44.44 0 0 1 .752-.311l7.916 7.916a.44.44 0 0 1 .129.31v2.275a.44.44 0 0 1-.751.31L6.527 9.027Zm4.269-2.585a.44.44 0 0 1 .75-.311l3.519 3.518a.44.44 0 0 1 .129.31v2.275a.44.44 0 0 1-.751.311l-3.518-3.518a.44.44 0 0 1-.13-.311V6.44Zm5.77 4.709 4.142 4.14c.532.533 1.224.87 1.963.967.241.031.439.226.439.468v.528a.44.44 0 0 1-.44.44h-6.414a.44.44 0 0 1-.44-.44v-5.792a.44.44 0 0 1 .75-.311Zm.657 4.432a.704.704 0 1 0 1.408 0 .704.704 0 0 0-1.408 0Z" clip-rule="evenodd"></path></svg>
-                <span>PostHog Unwrapped</span>
+        <a href="https://posthog.com">
+            <svg fill="#35373e" width="3.5rem" height="3.5rem" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                      d="M2.751 14.926a.44.44 0 0 0-.751.31v2.017c0 .243.197.44.44.44h2.016a.44.44 0 0 0 .311-.751l-2.016-2.016Zm-.622-1.502A.44.44 0 0 1 2 13.113v-2.274a.44.44 0 0 1 .751-.311l6.414 6.414a.44.44 0 0 1-.31.75H6.58a.44.44 0 0 1-.31-.128l-4.141-4.14Zm0-4.398A.44.44 0 0 1 2 8.715V6.44a.44.44 0 0 1 .751-.311l10.812 10.812a.44.44 0 0 1-.31.75h-2.275a.44.44 0 0 1-.311-.128L2.129 9.026Zm4.398 0a.44.44 0 0 1-.13-.311V6.44a.44.44 0 0 1 .752-.311l7.916 7.916a.44.44 0 0 1 .129.31v2.275a.44.44 0 0 1-.751.31L6.527 9.027Zm4.269-2.585a.44.44 0 0 1 .75-.311l3.519 3.518a.44.44 0 0 1 .129.31v2.275a.44.44 0 0 1-.751.311l-3.518-3.518a.44.44 0 0 1-.13-.311V6.44Zm5.77 4.709 4.142 4.14c.532.533 1.224.87 1.963.967.241.031.439.226.439.468v.528a.44.44 0 0 1-.44.44h-6.414a.44.44 0 0 1-.44-.44v-5.792a.44.44 0 0 1 .75-.311Zm.657 4.432a.704.704 0 1 0 1.408 0 .704.704 0 0 0-1.408 0Z"
+                      clip-rule="evenodd"></path>
+            </svg>
+            <span>&nbsp;PostHog Unwrapped</span>
+        </a>
     </div>
     <div>
         <div class="sharing">{% include "sharing-buttons.html" %}</div>