diff --git a/.env.example b/.env.example
index 5df5a8df0d..a2f969f036 100644
--- a/.env.example
+++ b/.env.example
@@ -11,8 +11,6 @@ ASSET_PREFIX=
 
 INKEEP_CHAT_ENABLED=
 INKEEP_CHAT_API_KEY=
-INKEEP_CHAT_INTEGRATION_ID=
-INKEEP_CHAT_ORGANIZATION_ID=
 
 INSIGHTS_ENABLED=false
 INSIGHTS_DEBUG=true
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3607502668..b7af73e6ec 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -340,3 +340,153 @@ API references make use of [partials](content/partials/) where content is reused
 The Control API is a REST API and the spec can be found in [`static/open-specs/control-v1.yaml](static/open-specs/control-v1.yaml).
 
 This is then referenced in [`src/pages/api/control-api.tsx](src/pages/api/control-api.tsx) for rendering.
+
+### Contributing to Examples
+
+The `examples` directory contains feature-specific demonstrations of how to use Ably in different environments, organized by framework. Each example resides in a structured path like `/examples/<feature>/react` or `/examples/<feature>/javascript`, showcasing practical implementations for various use cases.
+
+#### Example file structure
+
+1. Create a new directory for your example under `/examples`, this should be named after the feature/example you're building, e.g. `chat-typing-indicator`.
+2. Inside this directory, create a subdirectory named after the language or framework (e.g., `javascript`, `react`). You can have both `javascript` and `react` subdirectories within the same example directory.
+
+Currently, we support Javascript (Typescript) and React, both using Vite.
+
+#### Create the project
+
+To create a new project using Vite, follow the instructions below for either JavaScript/TypeScript or React.
+
+##### JavaScript/TypeScript
+
+1. Open your terminal.
+2. Navigate to the directory where you want to create your project.
+3. Run the following command to create a new Vite project:
+
+```sh
+npm create vite@latest javascript -- --template vanilla
+```
+
+4. Navigate into your project directory:
+
+```sh
+cd javascript
+```
+
+##### React
+
+1. Open your terminal.
+2. Navigate to the directory where you want to create your project.
+3. Run the following command to create a new Vite project with React template:
+
+```sh
+npm create vite@latest react -- --template react
+```
+
+4. Navigate into your project directory:
+
+```sh
+cd react
+```
+
+After following these steps, you will have a Vite project set up with JavaScript/TypeScript or React, ready for further development.
+
+#### README.md
+
+Each example must include a `README.md` file with instructions to get the developer running the example locally as quick as possible. These instructions should follow the structure below:
+
+- **Introduction**: Describe the Ably features used, what problem is this solving for the intended audience?
+- **Resources**: List components and functions from the Ably SDKs and their purposes.
+- **Getting started**: Provide step-by-step instructions:
+  1. Clone the docs repository.
+  2. Navigate to the examples directory.
+  3. Rename environment variable files. (`.env.example` -> `.env.local`)
+  4. Update environment variables.
+  5. Install dependencies with `yarn install`.
+  6. Run the project.
+- **Opening in CodeSandbox**: Instructions for opening the example in CodeSandbox. (At this moment, this heading contains the renaming of the environment variables)
+
+#### NPM Workspaces
+
+Add entries for each example to the `/examples/package.json` file under `workspaces` and `scripts`, an example of this is shown below:
+
+```json
+"workspaces": [
+  "chat-typing-indicator/react",
+  "chat-typing-indicator/javascript",
+],
+"scripts": {
+  "chat-typing-indicator-javascript": "yarn workspace chat-typing-indicator-javascript dev",
+  "chat-typing-indicator-react": "yarn workspace chat-typing-indicator-react dev",
+},
+```
+
+The intention of the scripts entries is to make the command simpler for the developer to run locally.
+
+#### Shared configurations
+
+All examples use config from the examples root directory. Update these files inside your project directory:
+
+- `vite.config.ts`:
+
+  ```typescript
+  import { defineConfig } from 'vite';
+  import baseConfig from '../../vite.config';
+
+  export default defineConfig({
+    ...baseConfig,
+    envDir: '../../',
+  });
+  ```
+
+- `tailwind.config.ts`:
+
+  ```typescript
+  import baseConfig from '../../tailwind.config';
+  import type { Config } from 'tailwindcss';
+
+  const config: Config = {
+    ...baseConfig,
+    content: ['./src/**/*.{js,ts,tsx}', './index.html'],
+  };
+
+  export default config;
+  ```
+
+- `tsconfig.json`:
+
+  ```json
+  {
+    "extends": "../../tsconfig.json"
+  }
+  ```
+
+- `vite-env.d.ts` (Javascript only):
+
+  ```typescript
+  interface ImportMetaEnv {
+    readonly VITE_ABLY_KEY: string;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+  ```
+
+
+#### Styling consistency
+
+For styling consistency purposes, each example will need to use [Franken-ui](https://franken-ui.dev/) for components, and any other styling to use tailwindcss. Some examples for this are the button and input components below:
+
+**Button:**
+
+```html
+<button class="uk-btn uk-btn-md uk-btn-primary py-2 rounded">
+  Submit
+</button>
+```
+
+**Input:**
+
+```html
+<input type="text" class="uk-input uk-width-1-1 uk-border-rounded-left">
+```
diff --git a/content/account/control-api.textile b/content/account/control-api.textile
index 4140dd0e5f..c07e6c3d84 100644
--- a/content/account/control-api.textile
+++ b/content/account/control-api.textile
@@ -169,13 +169,10 @@ The only operation available at the account-level is to retrieve account-wide st
 To retrieve account-level statistics:
 
 ```[sh]
-curl --location --request POST 'https://control.ably.net/v1/accounts/${ACCOUNT_ID}/stats' \
---header 'Content-Type: application/json' \
---header 'Authorization: Bearer ${ACCESS_TOKEN}' \
---data-raw '{
-    "unit": "minute",
-    "limit": 2
-}'
+curl --request GET \
+  --url 'https://control.ably.net/v1/accounts/${ACCOUNT_ID}/stats?unit=minute&limit=2' \
+  --header 'Authorization: Bearer ${ACCESS_TOKEN}' \
+  --header 'Content-Type: application/json'
 ```
 
 See the "API reference":/docs/api/control-api#tag/accounts/paths/~1accounts~1{account_id}~1stats/get for information on the request body.
diff --git a/content/api/rest-api.textile b/content/api/rest-api.textile
index 17debdb98c..08f2f56387 100644
--- a/content/api/rest-api.textile
+++ b/content/api/rest-api.textile
@@ -29,6 +29,7 @@ jump_to:
     - list channel subscriptions#list-channel-subscriptions
     - list channels#list-channels
     - publish directly to device#push-publish
+    - publish via batch push API#push-publish-batch
   Authentication API:
     - requestToken#request-token
     - revokeTokens#revoke-tokens
@@ -1152,6 +1153,56 @@ A successful request returns an empty response.
 
 An unsuccessful request returns an error.
 
+h3(#push-publish-batch). Publish via batch push API
+
+Convenience endpoint to deliver multiple push notification payloads to multiple devices or browsers in a single request by specifying a list of recipients and corresponding payloads.
+Currently, the batch push endpoint allows a maximum of 10,000 notifications per request (note that each recipient for a given payload counts as a separate notification).
+
+h6. POST rest.ably.io/push/batch/publish
+
+The request body is an array of objects of the form:
+
+bc[json]. {
+  recipient: <recipient object or array of recipient objects>
+  payload: <object>
+}
+
+Where the recipient and payload fields are the same as those used in the "Publish a push notification to a single device":#push-publish endpoint.
+
+Example request:
+
+bc[sh]. curl -X POST https://rest.ably.io/push/admin/batch/publish \
+ -u "{{API_KEY}}" \
+ -H "Content-Type: application/json" \
+ --data \
+ '
+[
+  {
+    "recipient": {
+      "deviceId": "01ARZ3NDEKTSV4RRFFQ69G5FAV"
+    },
+    "payload": {
+      "notification": {
+        "title": "Message 1",
+        "body": "Example push notification from Ably."
+      }
+    }
+  },
+  {
+    "recipient": {
+      "clientId": "myClientId"
+    },
+    "payload": {
+      "notification": {
+        "title": "Message 2",
+        "body": "Example push notification from Ably."
+      }
+    }
+  }
+]
+'
+
+
 h2(#authentication). Authentication
 
 h3(#request-token). Request an access token
diff --git a/content/chat/connect.textile b/content/chat/connect.textile
index c2036095c0..8ff0618cc2 100644
--- a/content/chat/connect.textile
+++ b/content/chat/connect.textile
@@ -50,7 +50,7 @@ const MyComponent = () => {
 ```
 
 ```[swift]
-let status = await chatClient.connection.status
+let status = chatClient.connection.status
 ```
 
 ```[kotlin]
diff --git a/content/chat/index.textile b/content/chat/index.textile
index 8e749a5c9b..86d1ec266a 100644
--- a/content/chat/index.textile
+++ b/content/chat/index.textile
@@ -1,6 +1,7 @@
 ---
 title: About Chat
 meta_description: "Learn more about Ably Chat and the features that enable you to quickly build functionality into new and existing applications."
+product: chat
 redirect_from: /docs/products/chat
 ---
 
diff --git a/content/chat/rooms/index.textile b/content/chat/rooms/index.textile
index 794656727e..f872101c62 100644
--- a/content/chat/rooms/index.textile
+++ b/content/chat/rooms/index.textile
@@ -270,7 +270,7 @@ const MyComponent = () => {
 ```
 
 ```[swift]
-let status = try await room.status
+let status = room.status
 ```
 
 ```[kotlin]
@@ -288,7 +288,7 @@ blang[javascript,swift,kotlin].
   ```
 
   ```[swift]
-  let statusSubscription = try await room.onStatusChange()
+  let statusSubscription = room.onStatusChange()
   for await status in statusSubscription {
     print("Room status: \(status)")
   }
diff --git a/content/chat/rooms/occupancy.textile b/content/chat/rooms/occupancy.textile
index 0916c7f438..9de3af98ad 100644
--- a/content/chat/rooms/occupancy.textile
+++ b/content/chat/rooms/occupancy.textile
@@ -49,7 +49,7 @@ const MyComponent = () => {
 ```
 
 ```[swift]
-let occupancySubscription = try await room.occupancy.subscribe()
+let occupancySubscription = room.occupancy.subscribe()
 for await event in occupancySubscription {
   occupancyInfo = "Connections: \(event.presenceMembers) (\(event.connections))"
 }
diff --git a/content/chat/rooms/presence.textile b/content/chat/rooms/presence.textile
index 01d55510b8..66bc1ba6cf 100644
--- a/content/chat/rooms/presence.textile
+++ b/content/chat/rooms/presence.textile
@@ -60,7 +60,7 @@ const MyComponent = () => {
 ```
 
 ```[swift]
-let presenceSubscription = try await room.presence.subscribe(events: [.enter, .leave, .update])
+let presenceSubscription = room.presence.subscribe(events: [.enter, .leave, .update])
 for await event in presenceSubscription {
     print("Presence event `\(event.action)` from `\(event.clientId)` with data `\(event.data)`")
 }
@@ -89,10 +89,10 @@ blang[javascript,swift].
 
   ```[swift]
   // Subscribe to only 'enter' events:
-  let presenceSubscription = try await room.presence.subscribe(event: .enter)
+  let presenceSubscription = room.presence.subscribe(event: .enter)
 
   // Subscribe to 'update' and 'leave' events:
-  let presenceSubscription = try await room.presence.subscribe(events: [.leave, .update])
+  let presenceSubscription = room.presence.subscribe(events: [.leave, .update])
   ```
 
 blang[react,kotlin].
diff --git a/content/chat/rooms/reactions.textile b/content/chat/rooms/reactions.textile
index dbf8a9fa15..895afb2d34 100644
--- a/content/chat/rooms/reactions.textile
+++ b/content/chat/rooms/reactions.textile
@@ -45,7 +45,7 @@ const MyComponent = () => {
 ```
 
 ```[swift]
-let reactionSubscription = try await room.reactions.subscribe()
+let reactionSubscription = room.reactions.subscribe()
 for await reaction in reactionSubscription {
   print("Received a reaction of type \(reaction.type), and metadata \(reaction.metadata)")
 }
diff --git a/content/chat/rooms/typing.textile b/content/chat/rooms/typing.textile
index 59dc51a51b..882af12eb4 100644
--- a/content/chat/rooms/typing.textile
+++ b/content/chat/rooms/typing.textile
@@ -49,7 +49,7 @@ const MyComponent = () => {
 ```
 
 ```[swift]
-let typingSubscription = try await room.typing.subscribe()
+let typingSubscription = room.typing.subscribe()
 for await typing in typingSubscription {
   typingInfo = typing.currentlyTyping.isEmpty ? "" :
                 "Typing: \(typing.currentlyTyping.joined(separator: ", "))..."
diff --git a/content/livesync/mongodb/index.textile b/content/livesync/mongodb/index.textile
index 5149c982ff..fec10c2b06 100644
--- a/content/livesync/mongodb/index.textile
+++ b/content/livesync/mongodb/index.textile
@@ -23,10 +23,6 @@ The integration rule exists as a "database connector" component that is entirely
 
 When a change event is received over the Change Streams API it is published to an Ably channel. When you configure the integration rule, you can specify how change events are mapped to individual Ably channels. Clients can then subscribe to database changes by subscribing to Ably channels. Ably "Auth":/docs/auth and "Capabilities":/docs/auth/capabilities control which channels a client can interact with.
 
-h2(#development-status). Development status
-
-The MongoDB database connector is currently in beta status. Your "feedback":https://docs.google.com/forms/d/e/1FAIpQLSd00n1uxgXWPGvMjKwMVL1UDhFKMeh3bSrP52j9AfXifoU-Pg/viewform will help prioritize improvements and fixes for subsequent releases.
-
 h2(#integration-rule). Integration rule
 
 h3(#create). Create a rule
diff --git a/content/metadata-stats/metadata/subscribe.textile b/content/metadata-stats/metadata/subscribe.textile
index e15b4d7a8b..3e536886b8 100644
--- a/content/metadata-stats/metadata/subscribe.textile
+++ b/content/metadata-stats/metadata/subscribe.textile
@@ -36,7 +36,7 @@ It is never possible to publish or be present on a metachannel, however you can
 The following is an example of a capability that provides access to subscribe to all metachannels:
 
 ```[json]
-{"[meta]*":["subscribe"]}
+{&#0034;[meta]*&#0034;:[&#0034;subscribe&#0034;]}
 ```
 
 h2(#connection-lifecycle). Connection lifecycle events
diff --git a/content/metadata-stats/stats.textile b/content/metadata-stats/stats.textile
index 70e2b205d6..a5d2d97f83 100644
--- a/content/metadata-stats/stats.textile
+++ b/content/metadata-stats/stats.textile
@@ -36,45 +36,29 @@ Statistics are available as:
 
 h2(#account). Account statistics
 
-Account statistics provide information about all applications in your account.
-
-You can retrieve account statistics from:
-
-* The "Control API or REST API":#account-api
-* Your "account dashboard":#account-dashboard
+Account statistics aggregate metrics from all applications in your account with additional "account-only metrics":#account-only relating to peak rates monitored and enforced at an account level.
 
 h3(#account-api). Account statistics via API
 
-You can retrieve account statistics from the "Control API":/docs/account/control-api or the "REST API":/docs/api/rest-api.
-
-h4(#account-control). Account statistics via Control API
-
 You can retrieve account statistics using the "Control API":/docs/account/control-api by making a call to the @accounts@ endpoint using your @accountId@ and @accessToken@. For example, to retrieve the last two minutes of account statistics:
 
 ```[curl]
-curl --location --request POST 'https://control.ably.net/v1/accounts/${ACCOUNT_ID}/stats' \
---header 'Content-Type: application/json' \
---header 'Authorization: Bearer ${ACCESS_TOKEN}' \
---data-raw '{
-    "unit": "minute",
-    "limit": 2
-}'
-```
-
-Use the @/me@ endpoint to find your @accountId@, or alternatively find it in the "*Settings*":https://ably.com/accounts/any/edit page of your account dashboard:
-
-```[curl]
-curl --location --request GET 'https://control.ably.net/v1/me' \
---header 'Authorization: Bearer ${ACCESS_TOKEN}'
+curl --request GET \
+  --url 'https://control.ably.net/v1/accounts/${ACCOUNT_ID}/stats?unit=minute&limit=2' \
+  --header 'Authorization: Bearer ${ACCESS_TOKEN}' \
+  --header 'Content-Type: application/json'
 ```
 
-h4(#account-rest). Account statistics via REST API
+This endpoint returns a "statistics response type":#payload including "account-only metrics":#account-only.
 
-You can use the "REST API":/docs/api/rest-api to retrieve account statistics by making a GET request to the "@stats@ endpoint":/docs/api/rest-api#stats. For example, to retrieve account statistics aggregated by hour:
+<aside data-type='note'>
+  <p>To obtain your @ACCOUNT_ID@, you can use @/me@ Control API endpoint to find your @ACCOUNT_ID@, or alternatively find it in the "*Settings*":https://ably.com/accounts/any/edit page of your account dashboard:
+  </p>
+</aside>
 
 ```[curl]
-curl https://rest.ably.io/stats?unit=hour \
- -u "{{API_KEY}}"
+curl 'https://control.ably.net/v1/me' \
+--header 'Authorization: Bearer ${ACCESS_TOKEN}'
 ```
 
 h3(#account-dashboard). Account statistics from the dashboard
@@ -83,21 +67,19 @@ Your account statistics are available as graphs, tabular data, and for download
 
 h2(#app). App statistics
 
-App statistics provide information about a specific application.
-
-You can retrieve account statistics:
+App statistics provide metrics scoped to each application. You can retrieve account statistics:
 
 * Via the "Control API":#app-control
 * Programmatically using the "Pub/Sub SDK":#app-sdk
 * In realtime by subscribing to a "meta channel":#app-meta
 * From your "application dashboard":#app-dashboard
 
-h3(#app-control). App statistics via API
+h3(#app-control). App statistics via Control API
 
-You can retrieve app statistics using the "Control API":/docs/account/control-api by making a call to the @apps@ endpoint using your @appId@ and @accessToken@:
+You can retrieve app statistics using the "Control API":/docs/account/control-api by making a call to the @apps@ endpoint using your @APP_ID@ and @ACCESS_TOKEN@:
 
 ```[curl]
-curl --location --request POST 'https://control.ably.net/v1/apps/${APP_ID}/stats' \
+curl 'https://control.ably.net/v1/apps/${APP_ID}/stats' \
 --header 'Content-Type: application/json' \
 --header 'Authorization: Bearer ${ACCESS_TOKEN}' \
 --data-raw '{
@@ -106,13 +88,19 @@ curl --location --request POST 'https://control.ably.net/v1/apps/${APP_ID}/stats
 }'
 ```
 
-Your @appId@ can be found in the "*Settings*":https://ably.com/accounts/any/apps/any/edit tab of an application within your application dashboard.
+This endpoint returns a "statistics response type":#payload.
 
-h3(#app-sdk). App statistics programmatically
+<aside data-type='note'>
+  <p>
+    The @APP_ID@ can be found in the "*Settings*":https://ably.com/accounts/any/apps/any/edit tab of an application within your dashboard.
+  </p>
+</aside>
 
-App-level statistics are also available programmatically using an Ably SDK at one minute intervals, or aggregated up to the hour, day or month.
+h3(#app-sdk). App statistics via SDK
 
-The following is an example of querying app-level statistics:
+App-level statistics are also available programmatically using an "Ably SDK":/docs/sdks at one minute intervals, or aggregated up to the hour, day or month. Whilst it is possible to obtain statistics via the SDKs, this API is not actively maintained and may be deprecated in future. We recommend using "app-level stats via the Control API":#app-control.
+
+The following is an example of querying app-level statistics using the Ably SDK "@stats@ method":/docs/api/rest-sdk/statistics.
 
 ```[realtime_javascript]
 const realtime = new Ably.Realtime('{{API_KEY}}');
@@ -274,7 +262,7 @@ h3(#app-meta). Subscribe to app statistics
 
 You can subscribe to app statistics using the "@[meta]stats:minute@ metachannel":/docs/metadata-stats/metadata/subscribe#stats. Events are published at one minute intervals and contain the statistics for the previous minute.
 
-The following is an example of subscribing to the @[meta]stats@ channel:
+The following is an example of subscribing to the @[meta]stats:minute@ channel:
 
 ```[realtime_javascript]
 const channel = ably.channels.get("[meta]stats:minute");
@@ -331,40 +319,48 @@ h3(#app-dashboard). App statistics from the dashboard
 
 App statistics are available as graphs, tabular data, and for download from each "application dashboard":https://ably.com/accounts/any/apps/any in your account.
 
-h2(#payload). Statistics response payload
+h2(#payload). Statistics response
 
-Statistics responses are sparse to reduce the size of the JSON and improve performance.
+Statistic API and SDK requests return an array of "Statistics entry types":#metrics.
 
-This means that if a metric is empty, or contains only zero values then the metric will be omitted completely from the response.
+An example simplified response with one stats entry is shown below:
 
 ```[json]
-{
-  entries: {
-    'messages.all.all.count': 245,
-    'messages.all.all.data': 58654,
-    'messages.all.all.uncompressedData': 58654,
-    'messages.all.all.billableCount': 245,
-    'messages.all.messages.count': 245,
-    'messages.all.messages.data': 58654,
-    'messages.all.messages.uncompressedData': 58654,
-    'messages.all.messages.billableCount': 245,
-    'messages.inbound.realtime.all.count': 145,
-    'messages.inbound.realtime.all.data': 29127,
-    'messages.inbound.realtime.all.uncompressedData': 29127,
-    'messages.inbound.realtime.messages.count': 145,
-    ...
-  },
-  schema: 'https://schemas.ably.com/json/app-stats-0.0.5.json',
-  appId: '<appId>',
-  inProgress: '2025-01-20:15:11',
-  unit: 'hour',
-  intervalId: '2025-01-20:15'
-}
+[
+  {
+    entries: {
+      'messages.all.all.count': 245,
+      'messages.all.all.data': 58654,
+      'messages.all.all.uncompressedData': 58654,
+      'messages.all.all.billableCount': 245,
+      'messages.all.messages.count': 245,
+      'messages.all.messages.data': 58654,
+      'messages.all.messages.uncompressedData': 58654,
+      'messages.all.messages.billableCount': 245,
+      'messages.inbound.realtime.all.count': 145,
+      'messages.inbound.realtime.all.data': 29127,
+      'messages.inbound.realtime.all.uncompressedData': 29127,
+      'messages.inbound.realtime.messages.count': 145,
+      ...
+    },
+    schema: 'https://schemas.ably.com/json/app-stats-0.0.5.json',
+    appId: '<appId>',
+    inProgress: '2025-01-20:15:11',
+    unit: 'hour',
+    intervalId: '2025-01-20:15'
+  }
+]
 ```
 
-h2(#metrics). Statistics metrics
+<aside data-type='note'>
+  <p>
+    Each "statistics entry type":#metrics is "sparse" to reduce the size of the JSON and improve performance. That is, if a metric is empty, or contains only zero values then the metric will be omitted completely from the response, thus producing a sparsely populated response with only values that include a metric.
+  </p>
+</aside>
+
+h2(#metrics). Statistics entry type
 
-The following metadata is returned for each request:
+The following metadata is returned for each entry:
 
 |_. Property |_. Description |
 | appId | The ID of the Ably application the statistics are for. Only present when querying app statistics. |
@@ -376,7 +372,7 @@ The following metadata is returned for each request:
 
 h3(#messages). All messages
 
-The following metrics can be returned for all messages. 'All messages' includes totals for all messages sent and received by Ably and clients.
+All messages metrics include all messages types, such as those sent and received by Ably and clients, messages delivered via integrations and push notifications delivered to devices.
 
 |_. Metric |_. Description |
 | messages.all.all.count | Total number of messages that were successfully sent, summed over all message types and transports. |
@@ -404,7 +400,7 @@ The following metrics can be returned for all messages. 'All messages' includes
 
 h3(#inbound). Inbound messages
 
-The following metrics can be returned for inbound messages. Inbound messages are messages that are sent by clients and received by Ably.
+Inbound messages metrics include those messages that are sent by clients and received inbound from those clients by Ably.
 
 |_. Metric |_. Description |
 | messages.inbound.realtime.all.count | Total inbound realtime message count, received by Ably from clients. |
@@ -464,7 +460,7 @@ The following metrics can be returned for inbound messages. Inbound messages are
 
 h3(#outbound). Outbound messages
 
-The following metrics can be returned for outbound messages. Outbound messages are messages that are sent from Ably to a client.
+Outbound message metrics include those messages that are sent outbound from Ably to either clients that subscribe or request messages (such as history requests), to "integrations":docs/integrations, or to "push notification":/docs/push targets.
 
 |_. Metric |_. Description |
 | messages.outbound.realtime.all.count | Total outbound realtime message count, sent from Ably to clients. |
@@ -600,7 +596,7 @@ The following metrics can be returned for outbound messages. Outbound messages a
 
 h3(#persisted). Persisted messages
 
-The following metrics can be returned for persisted messages. Persisted messages are messages "stored":/docs/storage-history/storage by Ably.
+Persisted messages metrics are calculated from the number of "messages stored":/docs/storage-history/storage by Ably.
 
 |_. Metric |_. Description |
 | messages.persisted.all.count | Total count of persisted messages. |
@@ -615,7 +611,7 @@ The following metrics can be returned for persisted messages. Persisted messages
 
 h3(#deltas). Message deltas
 
-The following metrics can be returned for message deltas. Message deltas are messages that are compressed by using the "delta":/docs/channels/options/deltas feature.
+Message deltas metrics are calculated from the number of "messages delta":/docs/channels/options/deltas generated.
 
 |_. Metric |_. Description |
 | messages.processed.delta.xdelta.succeeded | Total number of message deltas successfully generated. |
@@ -624,7 +620,7 @@ The following metrics can be returned for message deltas. Message deltas are mes
 
 h3(#connections). Connections
 
-The following metrics can be returned for connections. Connections are all client "connections":/docs/connect made to Ably.
+Connection metrics include all realtime "connections":/docs/connect made to Ably.
 
 |_. Metric |_. Description |
 | connections.all.peak | Peak connection count. |
@@ -635,7 +631,7 @@ The following metrics can be returned for connections. Connections are all clien
 
 h3(#channels). Channels
 
-The following metrics can be returned for channels. "Channels":/docs/channels are used to separate messages into different topics throughout Ably.
+Channel metrics include all active "channels":/docs/channels that are used to separate messages into different topics throughout Ably.
 
 |_. Metric |_. Description |
 | channels.peak | Peak active channel count. |
@@ -646,7 +642,7 @@ The following metrics can be returned for channels. "Channels":/docs/channels ar
 
 h3(#api). API requests
 
-The following metrics can be returned for API requests. API requests are all HTTP requests made to Ably, including those related to "token authentication":/docs/auth/token and "push notifications":/docs/push. They do not include those requests made to the "Control API":/docs/account/control-api.
+API request metrics include all HTTP requests made to Ably, including those related to "token authentication":/docs/auth/token and "push notifications":/docs/push. They do not include those requests made to the "Control API":/docs/account/control-api.
 
 |_. Metric |_. Description |
 | apiRequests.all.succeeded | Total number of API requests made. |
@@ -664,7 +660,7 @@ The following metrics can be returned for API requests. API requests are all HTT
 
 h3(#push). Push notifications
 
-The following metrics can be returned for push notifications. "Push notifications":/docs/push are all notifications sent to devices via a push transport.
+Push notification metrics include all "notifications":/docs/push sent to devices via one of the push transports such as APNS, FCM or web.
 
 |_. Metric |_. Description |
 | push.channelMessages | Total number of channel messages published over Ably that contained a @push@ payload. Each of these may have triggered notifications to be sent to a device with a matching registered push subscription. |
@@ -694,10 +690,10 @@ The following metrics can be returned for push notifications. "Push notification
 
 h3(#account-only). Account-only metrics
 
-The following metrics can only be returned when querying account statistics:
+The following metrics will only be returned when querying account statistics.
 
 |_. Metric |_. Description |
-| peakRates.messages | ThePeak rate of messages. |
+| peakRates.messages | Peak rate of messages. |
 | peakRates.apiRequests | Peak rate of api requests. |
 | peakRates.tokenRequests | Peak rate of token requests. |
 | peakRates.connections | Peak rate of opened connections. |
diff --git a/content/platform/architecture/index.textile b/content/platform/architecture/index.textile
new file mode 100644
index 0000000000..889dee1daa
--- /dev/null
+++ b/content/platform/architecture/index.textile
@@ -0,0 +1,139 @@
+---
+title: Architecture overview
+meta_description: "Learn more about Ably's platform architecture."
+meta_keywords: "architecture"
+---
+
+Ably's platform architecture is built to deliver dependable realtime experiences at global scale.
+
+As the definitive realtime experience platform, Ably serves billions of devices monthly and delivers over half a trillion messages monthly.
+
+h2. At a glance 
+
+Ably's globally distributed infrastructure forms the foundation of the platform, allowing Ably to maintain exceptional performance, while serving massive scale and providing industry-leading quality of service guarantees.
+
+Ably characterizes the system across "4 pillars of dependability":https://ably.com/four-pillars-of-dependability :
+
+* **Performance**: Ably focuses on predictability of latencies to provide certainty in uncertain operating conditions.
+** <30ms round trip latency within datacenter (99th percentile)
+** <65ms global round trip latency (99th percentile)
+* **Integrity**: Guarantees for message ordering and delivery.
+** Exactly-once delivery semantics
+** Guaranteed message ordering from publishers to subscribers
+** Automatic connection recovery with message continuity
+* **Reliability**: Fault tolerant architecture at regional and global levels to survive multiple failures without outages.
+** 99.999999% message survivability
+** 99.99999999% persisted data survivability
+** Edge network failure resolution by the client SDKs within 30s
+** Automated routing of all traffic away from an abrupt failure of datacenter in less than two minutes
+* **Availability**: Meticulously designed to provide continuity of service even in the case of instance or whole datacenter failures.
+** 99.9999% global service availability (5 minutes 15 seconds of downtime per year)
+** 50% global capacity margin for instant demand surges
+
+h2. Design objectives
+
+Ably's platform is a global service that supports all realtime messaging and associated services. It is architected to achieve horizontal scalability with "no effective ceiling":https://ably.com/blog/ablys-four-pillars-no-scale-ceiling on application scale, while maintaining consistent latency, message integrity, and system reliability across the global network.
+
+The platform has been designed with the following primary objectives in mind:
+
+* **Horizontal scalability**: As more nodes are added, load is automatically redistributed across the cluster so that global capacity increases linearly with the number of instances Ably runs.
+* **No single point of congestion**: As the system scales, there is no single point of congestion for any data path, and data within the system is routed peer-to-peer, ensuring no single component becomes overloaded as traffic scales for an individual app or across the cluster.
+* **Fault tolerance**: Faults in the system are expected, and the system must have redundancy at every layer in the stack to ensure availability and reliability.
+* **Autonomy**: Each component in the system should be able to operate fully without reliance on a global controller. For example, two isolated data centers should continue to service realtime requests while isolated.
+* **Consistent low latencies**: Within data centers, Ably aims for latencies to be in the low 10s of milliseconds and less than 100ms globally. Consistently achieving low latencies requires careful consideration of the placement of data and services across the system as well as prioritisation of the computation performed by each service.
+* **Quality of service**: Ably intentionally designs for high QoS targets to enable sophisticated realtime applications that would be impossible on platforms with weaker guarantees.
+
+h2. Cluster architecture
+
+Ably's platform runs on AWS EC2 infrastructure with a globally distributed architecture. Ably's "clusters":/docs/platform-customization#dedicated-and-isolated-clusters typically span multiple regions, usually between two and ten. This multi-region approach maximizes availability and is a critical aspect of providing a fault tolerant service.
+
+Each regional deployment operates independently, handling its own subscriber connections, REST traffic, channel management and message routing. When activity occurs on a channel across multiple regions, messages flow peer-to-peer between regions directly, eliminating central bottlenecks and single points of failure.
+
+Ably's architecture consists of four primary layers:
+
+* **Routing Layer**: Provides intelligent, latency optimized routing for robust end client connectivity.
+* **Gossip Layer**: Distributes network topology information and facilitates service discovery.
+* **Frontend Layer**: Handles REST requests and maintains realtime connections (such as WebSocket, Comet and SSE).
+* **Core Layer**: Performs all central message processing for channels.
+
+Each component scales independently in each region based on demand. Ably continuously monitors CPU, memory, and other key metrics, triggering autoscaling based on aggregated performance indicators.
+
+The key to Ably's horizontal scalability is intelligent load distribution that efficiently utilizes new capacity as it becomes available:
+
+* In the frontend layer, new instances join the load balancer pool and begin handling their share of incoming connections and REST requests.
+* In the core layer, Ably employs consistent hashing to distribute channels across core processes - each core maintains a set of pseudo-randomly generated hashes that determine channel placement. As the cluster scales, channels automatically relocate to maintain even load distribution.
+
+h3. Routing layer
+
+Ably's latency-optimized routing infrastructure provides multiple layers of resilience to ensure reliable connectivity even during partial system failures.
+
+h4. Intelligent routing
+
+Ably's custom routing layer provides sophisticated traffic management through deep integration with the application architecture.
+
+The routing layer is cluster-aware and implements advanced retry strategies, enables zero-downtime deployments, and distributes instrumentation across the cluster.
+
+This intelligent routing ensures traffic is directed optimally even as the system scales or during partial failures.
+
+h4. DNS and edge protection
+
+Ably uses latency-based routing to ensure clients are consistently routed to their closest datacenter.
+
+Ably employs multiple DNS providers and global load balancing strategies for resilient connectivity, allowing client libraries to route around regional issues and ensuring consistent connectivity.
+
+The routing layer automatically removes unhealthy regions from DNS resolution and offers advanced DDoS protection at the edge.
+
+h4. Connection management
+
+Ably's SDKs implement sophisticated connection management with automatic failover capabilities.
+
+Clients seamlessly handle transient disconnections and the system preserves message continuity if the connection is re-established within two minutes.
+
+Clients automatically select the best available transport (such as WebSocket or Comet) and seamlessly migrate connections across transports to provide the best possible service.
+
+Re-connection attempts cycle through up to 6 globally distributed endpoints. Clients automatically attempt to reconnect via alternative endpoints if a connection attempt fails.
+
+Progressive connection timeout strategies ensure rapid recovery from transient issues, while continuous connection quality monitoring triggers proactive reconnection when performance degrades.
+
+h3. Gossip layer
+
+Every cluster Ably operates includes a network of gossip nodes, spanning all regions, that participate in a (Scuttlebutt-inspired) gossip protocol to facilitate service discovery and even distribution of work across the cluster. Other nodes in the cluster communicate with the gossip layer to broadcast and receive information about the state of the cluster. As nodes are added and removed, or fail abruptly, the gossip layer ensures a single consistent view of the network is shared by all. The gossip layer also allows node health to be consistently determined system-wide without the need for any single coordinator.
+
+h3. Frontend layer
+
+Ably's frontend infrastructure consists of several components that handle individual requests and connections from realtime subscribers. Each component scales independently according to demand, ensuring requests are processed in the optimal location based on client location and system state.
+
+h4. Request handling
+
+Nodes in the frontend layer process all incoming REST and realtime requests. They participate in the active service discovery mechanism between all nodes, maintaining realtime awareness of channel locations across the cluster, even as channels migrate during scaling events. Message fan-out is achieved by frontend nodes efficiently processing published messages and distributing them to all subscribed clients. The frontend layer also handles authentication, enforces rate limits, and provides additional DDoS protection.
+
+h4. Protocol adapters
+
+Ably's "protocol adapters":/docs/protocols enable interoperability with multiple industry protocols. These adapters translate between external protocols and Ably's internal protocols in both directions. Ably supports the MQTT standard as well as proprietary protocols like PubNub and Pusher.
+
+h3. Core layer
+
+Ably's core infrastructure handles all messages as they transit through the system. It is designed to scale elastically according to demand while managing all associated channel and system state.
+
+h4. Resource placement
+
+Ably uses "consistent hashing":https://ably.com/blog/implementing-efficient-consistent-hashing to distribute resources such as channels, apps and accounts across available core compute capacity.
+
+Each compute instance within the core layer has a set of pseudo-randomly generated hashes which determines which resources are located at that instance. As the cluster scales, channels relocate to maintain an even load distribution. Any number of channels can exist as long as sufficient compute capacity is available. Whether handling many lightly-loaded channels or heavily-loaded ones, Ably's scaling and placement strategies ensure capacity is added as required and load is effectively distributed.
+
+When a core node fails, the system detects the failure through the cluster-wide gossip protocol, and its resources are automatically redistributed to healthy nodes. 
+
+h4. Message processing
+
+Nodes in the core layer are responsible for all channel message processing and persistence and apply operations such as "delta":/docs/channels/options/deltas computation, "batching":/docs/messages/batch and "integration rule":/docs/integrations invocation. They also aggregate and persist account and app "statistics":/docs/metadata-stats/stats and enforce "limits":/docs/pricing/limits. Nodes in the core layer communicate cross-regionally to facilitate inter-data-center message transit.
+
+h4. Message persistence
+
+Messages are persisted in multiple locations to ensure that message availability and continuity are maintained even during individual node or data center failures.
+
+Once a message is acknowledged, it is stored in multiple physical locations, providing statistical guarantees of 99.999999% (8 nines) for message availability and survivability. This redundancy enables Ably to maintain its quality of service guarantees even during infrastructure failures.
+
+Messages are stored in two ways:
+
+* **Ephemeral Storage**: Messages are held for 2 minutes in an in-memory database (Redis). This data is distributed according to Ably's consistent hashing mechanism and relocated when channels move between nodes. This short-term storage enables low-latency message delivery and retrieval and supports features like "connection recovery":/docs/connect/states.
+* **Persisted Storage**: Messages can optionally be stored persistently on disk if longer term retention is required. Ably uses a globally distributed and clustered database (Cassandra) for this purpose, deployed across multiple data centers with message data replicated to three regions to ensure integrity and availability even if a region fails.
diff --git a/content/platform/deprecate/index.textile b/content/platform/deprecate/index.textile
new file mode 100644
index 0000000000..988734a6e1
--- /dev/null
+++ b/content/platform/deprecate/index.textile
@@ -0,0 +1,37 @@
+---
+title: Deprecation policy
+meta_description: "A policy detailing how Ably deprecates SDKs and APIs."
+meta_keywords: "Ably, deprecation policy, deprecation, sunset"
+---
+
+Ably's SDKs are regularly updated to add support for new features, bugfixes, and to accommodate version or API changes in dependencies. Whilst Ably ensures changes are backwards-compatible wherever possible, there are some instances where the previous API structure is no longer suitable.
+
+In all cases, updates to SDKs conform to "semantic versioning":https://semver.org/ guidelines. It is recommended that you always update to the latest version of an SDK when it is available.
+
+h2(#applicability). Applicability
+
+This policy applies to the following:
+
+Ably SDKs and associated APIs, including;
+
+* HTTP APIs
+* Ably's realtime protocol
+
+h2(#timelines). Deprecation timelines
+
+Ably will support all releases for at least 12 months from the date of release of a version that supersedes it. For example, if version @1.1.0@ is released on 1st January 2025, version @1.0.X@ will be supported until at least 1st January 2026.
+
+Releases will be always be deprecated within 24 months of being superseded.
+
+h3(#sunset). Sunset date
+
+The sunset date is the date on which a version of an SDK or API will no longer function, at the end of the deprecation period. Ably will usually sunset features by a process of rejecting just a (gradually increasing) proportion of requests to avoid large-scale disruption where possible. However, this won't always be the case, so you should assume that features or versions will stop working on the sunset date.
+
+h2(#support). Supportability
+
+Ably will no longer provide the following when a version is deprecated:
+
+* Technical support for that version.
+* Bugfixes for that version.
+
+Ably also reserves the right to withhold Service Level Agreement (SLA) remedies in the case of service failure, if the use of the deprecated version is believed to be a contributing factor in that failure.
diff --git a/content/platform/deprecate/protocol-v1.textile b/content/platform/deprecate/protocol-v1.textile
new file mode 100644
index 0000000000..8776b87b01
--- /dev/null
+++ b/content/platform/deprecate/protocol-v1.textile
@@ -0,0 +1,33 @@
+---
+title: Deprecation of protocol version 1 - November 2025
+meta_description: "A policy detailing how Ably deprecates SDKs and APIs."
+meta_keywords: "Ably, deprecation policy, deprecation, sunset"
+---
+
+SDKs using version 1 of Ably's realtime protocol will be sunset on 1st November 2025.
+
+This version was superseded by version 2 in January 2023. It introduced new functionality, with a more efficient and scalable backend implementation. New features are not available using version 1 of the protocol, nor in any SDKs implementing it.
+
+h2(#sdks). Affected SDKs
+
+SDK versions earlier than those listed below are now considered deprecated. If you are using a version older than those listed, upgrade before the 1st November 2025.
+
+|_. Product |_. Language |_. Versions |
+| Pub/Sub | JavaScript | < "1.2.36":https://github.com/ably/ably-js/releases/tag/1.2.36 |
+| Pub/Sub | Java | < "1.2.35":https://github.com/ably/ably-java/releases/tag/v1.2.35 |
+| Pub/Sub | Swift / Objective-C | < "1.2.24":https://github.com/ably/ably-cocoa/releases/tag/1.2.24 |
+| Pub/Sub | .NET | < "1.2.12":https://github.com/ably/ably-dotnet/releases/tag/1.2.12 |
+| Pub/Sub | Go | < "1.2.14":https://github.com/ably/ably-go/releases/tag/v1.2.14 |
+| Pub/Sub | Python | < "2.0.0-beta.6":https://github.com/ably/ably-python/releases/tag/v2.0.0-beta.6 |
+| Pub/Sub | Ruby | < "1.2.5":https://github.com/ably/ably-ruby/releases/tag/v1.2.5 |
+| Pub/Sub | PHP | < "1.1.9":https://github.com/ably/ably-php/releases/tag/1.1.9 |
+| Pub/Sub | Flutter | < "1.2.25":https://github.com/ably/ably-flutter/releases/tag/v1.2.25 |
+| Kafka Connect | - | < "2.1.4":https://github.com/ably/kafka-connect-ably/releases/tag/v2.1.4 |
+
+Contact "support":https://ably.com/support if you have any questions.
+
+h2(#requests). Request failures
+
+On the 1st November 2025 attempts to connect to Ably using an SDK that uses version 1 of the protocol will start to fail. Failures will be phased, with only a fraction of traffic being rejected at first, until 100% of requests are rejected after several weeks.
+
+Requests that are rejected will contain an error message and code referencing this deprecation notice and the associated "deprecation policy.":/docs/platform/deprecate
diff --git a/content/pricing/free.textile b/content/pricing/free.textile
index 192dd5d95f..3e1a33cb17 100644
--- a/content/pricing/free.textile
+++ b/content/pricing/free.textile
@@ -31,9 +31,9 @@ h2(#support). Support
 
 Free package support includes Ably's best effort Service Level Objective (SLO) and access to community support, including "Discord":https://discord.gg/g8yqePUVDn and "Stack Overflow":https://stackoverflow.com/questions/tagged/ably-realtime.
 
-h2(#upgrade). Upgrade
+h2(#upgrade). Upgrade from Free to Standard or Pro
 
-To upgrade your account from a Free package:
+To upgrade your account from a Free package to a Standard or Pro package:
 
 1. Ensure you are the "account owner":/docs/account/users.
 2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
@@ -41,6 +41,20 @@ To upgrade your account from a Free package:
 
 Note that your first invoice will be issued at the start of the following calendar month. It covers consumption from the point of upgrade up until the end of that month. All subsequent invoices will follow the same pattern of billing for the previous month's consumption. The base package price will be charged pro-rata from the point in the month that you upgraded.
 
-Once you upgrade to a "Standard":/docs/pricing/standard, "Pro":/docs/pricing/pro or "Enterprise":/docs/pricing/enterprise package, your consumption is counted from that point onwards. For example, if you upgrade in the middle of the month, you are charged for the first message you send after upgrading, not after the 6,000,000 messages allowed on the Free package.
+Once you upgrade to a "Standard":/docs/pricing/standard or "Pro":/docs/pricing/pro package, your consumption is counted from that point onwards. For example, if you upgrade in the middle of the month, you are charged for the first message you send after upgrading, not after the 6,000,000 messages allowed on the Free package.
+
+h2(#free-enterprise). Upgrade from Free to Enterprise
+
+To upgrade your account from a Free package to an "Enterprise package":/docs/pricing/enterprise, "contact us":https://ably.com/contact?cta=enterprise_package to discuss your options.
+
+h2(#downgrade). Downgrade
+
+To downgrade your account to a Free package:
+
+1. Ensure you are the "account owner":/docs/account/users.
+2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
+3. Click the *Downgrade* button.
+
+If you downgrade to a Free package, you will finish the month on your current package with its associated limits and benefits. At the beginning of the following month you will receive a final invoice covering your last month's consumption and package fee. Once the final invoice has been paid, your payment details are removed from the system.
 
 If you wish to cancel your account, have the account owner "contact us":https://ably.com/support. Be aware that this will permanently delete all the information associated with your account.
diff --git a/content/pricing/pro.textile b/content/pricing/pro.textile
index 812b753af1..f634e27413 100644
--- a/content/pricing/pro.textile
+++ b/content/pricing/pro.textile
@@ -34,7 +34,29 @@ h2(#support). Support
 
 Standard package support includes access to Ably support via email with a Service Level Agreement (SLA) of less than 1 business day for general guidance and less than 2 business hours for system impediments or system down.
 
-h2(#upgrade). Upgrade
+h2(#free-pro). Upgrade from Free to Pro
+
+To upgrade your account from a Free package to a Pro package:
+
+1. Ensure you are the "account owner":/docs/account/users.
+2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
+3. Choose the plan you wish to upgrade to and follow the instructions. Upgrades take effect immediately.
+
+Note that your first invoice will be issued at the start of the following calendar month. It covers consumption from the point of upgrade up until the end of that month. All subsequent invoices will follow the same pattern of billing for the previous month's consumption. The base package price will be charged pro-rata from the point in the month that you upgraded.
+
+Once you upgrade to a Pro, your consumption is counted from that point onwards. For example, if you upgrade in the middle of the month, you are charged for the first message you send after upgrading, not after the 6,000,000 messages allowed on the Free package.
+
+h2(#standard-pro). Upgrade from Standard to Pro
+
+To upgrade your account from a Standard package to a Pro package:
+
+1. Ensure you are the "account owner":/docs/account/users.
+2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
+3. Choose the plan you wish to upgrade to and follow the instructions. Upgrades take effect immediately.
+
+The base package price will be charged pro-rata from the point in the month that you upgraded. This is true for the current Standard package base price, as well as the upgraded Pro package base price.
+
+h2(#pro-enterprise). Upgrade from Pro to Enterprise
 
 To upgrade your account from a Pro package, "contact us":https://ably.com/contact?cta=enterprise_package to discuss "Enterprise package":/docs/pricing/enterprise options.
 
@@ -48,6 +70,6 @@ To downgrade your account from a Pro package:
 
 If you downgrade to a "Standard package":/docs/pricing/standard, you will finish the month on the Pro package with its associated limits and benefits. At the beginning of the following month you will receive a final invoice for the Pro package. Subsequent invoices will be for your Standard package.
 
-If you downgrade to a "Free package":/docs/pricing/free, you will finish the month on the Pro package with its associated limits and benefits. At the beginning of the following month you will receive a final invoice covering your last month's consumption. Once the final invoice has been paid, your payment details are removed from the system.
+If you downgrade to a "Free package":/docs/pricing/free, you will finish the month on the Pro package with its associated limits and benefits. At the beginning of the following month you will receive a final invoice covering your last month's consumption and package fee. Once the final invoice has been paid, your payment details are removed from the system.
 
 If you wish to cancel your account, downgrade to the Free package first and then have the account owner "contact us":https://ably.com/support. Be aware that this will permanently delete all the information associated with your account.
diff --git a/content/pricing/standard.textile b/content/pricing/standard.textile
index fb4703836f..7dcf67e3df 100644
--- a/content/pricing/standard.textile
+++ b/content/pricing/standard.textile
@@ -34,9 +34,21 @@ h2(#support). Support
 
 Standard package support includes access to Ably support via email with a Service Level Agreement (SLA) of less than 1 business day for general guidance and for system impediments or system down.
 
-h2(#upgrade). Upgrade
+h2(#free-standard). Upgrade from Free to Standard
 
-To upgrade your account from a Standard package:
+To upgrade your account from a Free package to a Standard package:
+
+1. Ensure you are the "account owner":/docs/account/users.
+2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
+3. Choose the plan you wish to upgrade to and follow the instructions. Upgrades take effect immediately.
+
+Note that your first invoice will be issued at the start of the following calendar month. It covers consumption from the point of upgrade up until the end of that month. All subsequent invoices will follow the same pattern of billing for the previous month's consumption. The base package price will be charged pro-rata from the point in the month that you upgraded.
+
+Once you upgrade to a Standard, your consumption is counted from that point onwards. For example, if you upgrade in the middle of the month, you are charged for the first message you send after upgrading, not after the 6,000,000 messages allowed on the Free package.
+
+h2(#standard-pro). Upgrade from Standard to Pro
+
+To upgrade your account from a Standard package to a Pro package:
 
 1. Ensure you are the "account owner":/docs/account/users.
 2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
@@ -44,6 +56,10 @@ To upgrade your account from a Standard package:
 
 The base package price will be charged pro-rata from the point in the month that you upgraded. This is true for the current Standard package base price, as well as the upgraded "Pro package":/docs/pricing/pro base price.
 
+h2(#standard-enterprise). Upgrade from Standard to Enterprise
+
+To upgrade your account from a Standard package to an "Enterprise package":/docs/pricing/enterprise, "contact us":https://ably.com/contact?cta=enterprise_package to discuss your options.
+
 h2(#downgrade). Downgrade
 
 To downgrade your account from a Standard package to a Free package:
@@ -52,6 +68,6 @@ To downgrade your account from a Standard package to a Free package:
 2. Log in to your "account":https://ably.com/login and select *Billing* from the *Account* menu.
 3. Click the *Downgrade* button.
 
-If you downgrade to a "Free package":/docs/pricing/free, you will finish the month on the Standard package with its associated limits and benefits. At the beginning of the following month you will receive a final invoice covering your last month's consumption. Once the final invoice has been paid, your payment details are removed from the system.
+If you downgrade to a "Free package":/docs/pricing/free, you will finish the month on the Standard package with its associated limits and benefits. At the beginning of the following month you will receive a final invoice covering your last month's consumption and package fee. Once the final invoice has been paid, your payment details are removed from the system.
 
 If you wish to cancel your account, downgrade to the Free package first and then have the account owner "contact us":https://ably.com/support. Be aware that this will permanently delete all the information associated with your account.
diff --git a/content/push/publish.textile b/content/push/publish.textile
index e41e8f5c3a..a1a65f91fc 100644
--- a/content/push/publish.textile
+++ b/content/push/publish.textile
@@ -141,6 +141,8 @@ h2(#direct-publishing). Publish directly
 
 Direct publishing sends push notifications directly to individual devices via the  "Ably SDK":https://ably.com/docs/sdks, bypassing the intermediary of channels. This approach delivers personalized or precise notifications customized for individual users. Direct publishing proves beneficial during the transition phase to Ably's platform and when the objective is to engage existing push notification devices.
 
+Direct publishing is also available in "batch mode":#via-batch-push-api, enabling you to publish to a large number of devices in one request.
+
 Push notifications are targeted explicitly towards devices identified by:
 
 * "@deviceId@":#device-id
@@ -163,7 +165,8 @@ var recipient = {
 var data = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -178,7 +181,8 @@ var recipient = {
 var data = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -193,7 +197,8 @@ recipient = {
 data = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 }
 
@@ -201,20 +206,18 @@ realtime.push.admin.publish(recipient, data)
 ```
 
 ```[realtime_java]
-
 JsonObject payload = JsonUtils.object()
     .add("notification", JsonUtils.object()
         .add("title", "Hello from Ably!")
         .add("body", "Example push notification from Ably.")
-    )
-    .add("data", JsonUtils.object()
-        .add("foo", "bar")
-        .add("baz", "qux")
+        .add("ttl", 3600) // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     )
     .toJson();
 
-
-realtime.push.admin.publish(new Param[]{new Param("deviceId", "xxxxxxxxxxxx")}, payload);
+realtime.push.admin.publish(
+    new Param[] { new Param("deviceId", "xxxxxxxxxxxx") },
+    payload
+);
 ```
 
 ```[realtime_python]
@@ -225,7 +228,8 @@ recipient = {
 message = {
     'notification': {
         'title': 'Hello from Ably!',
-        'body': 'Example push notification from Ably.'
+        'body': 'Example push notification from Ably.',
+        'ttl': 3600  # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 }
 
@@ -243,7 +247,8 @@ var data = new JObject
     ["notification"] = new JObject
     {
         { "title", "Hello from Ably!" },
-        { "body", "Example push notification from Ably." }
+        { "body", "Example push notification from Ably." },
+        { "ttl", 3600 } // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 };
 
@@ -258,7 +263,8 @@ var recipient = {
 var data = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -273,7 +279,8 @@ var recipient = {
 var data = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -288,7 +295,8 @@ recipient = {
 data = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 }
 
@@ -300,15 +308,14 @@ JsonObject payload = JsonUtils.object()
     .add("notification", JsonUtils.object()
         .add("title", "Hello from Ably!")
         .add("body", "Example push notification from Ably.")
-    )
-    .add("data", JsonUtils.object()
-        .add("foo", "bar")
-        .add("baz", "qux")
+        .add("ttl", 3600) // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     )
     .toJson();
 
-
-rest.push.admin.publish(new Param[]{new Param("deviceId", "xxxxxxxxxxxx")}, payload);
+rest.push.admin.publish(
+    new Param[] { new Param("deviceId", "xxxxxxxxxxxx") },
+    payload
+);
 ```
 
 ```[rest_python]
@@ -319,7 +326,8 @@ recipient = {
 message = {
     'notification': {
         'title': 'Hello from Ably!',
-        'body': 'Example push notification from Ably.'
+        'body': 'Example push notification from Ably.',
+        'ttl': 3600  # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 }
 
@@ -334,14 +342,15 @@ $recipient = [
 $data = [
     'notification' => [
         'title' => 'Hello from Ably!',
-        'body' => 'Example push notification from Ably.'
+        'body' => 'Example push notification from Ably.',
+        'ttl' => 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     ]
 ];
 
 $rest->push->admin->publish($recipient, $data);
 
-var channel = rest.channels.get('pushenabled:foo');
-channel.publish({'name': 'example', 'data': 'data', 'extras': extras});
+$channel = $rest->channels->get('pushenabled:foo');
+$channel->publish(['name' => 'example', 'data' => 'data', 'extras' => $extras]);
 ```
 
 ```[rest_csharp]
@@ -355,7 +364,8 @@ var data = new JObject
     ["notification"] = new JObject
     {
         { "title", "Hello from Ably!" },
-        { "body", "Example push notification from Ably." }
+        { "body", "Example push notification from Ably." },
+        { "ttl", 3600 } // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 };
 
@@ -372,13 +382,14 @@ The following example publishes a push notification using the @clientId@:
 
 ```[realtime_javascript]
 var recipient = {
-  clientId: 'bob'
+  clientId: 'xxxxxxxxxxxx'
 };
 
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -387,13 +398,14 @@ realtime.push.admin.publish(recipient, notification);
 
 ```[realtime_nodejs]
 var recipient = {
-  clientId: 'bob'
+  clientId: 'xxxxxxxxxxxx'
 };
 
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -402,13 +414,14 @@ realtime.push.admin.publish(recipient, notification);
 
 ```[realtime_ruby]
 recipient = {
-  clientId: 'bob'
+  clientId: 'xxxxxxxxxxxx'
 }
 
 notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 }
 
@@ -420,10 +433,7 @@ JsonObject payload = JsonUtils.object()
     .add("notification", JsonUtils.object()
         .add("title", "Hello from Ably!")
         .add("body", "Example push notification from Ably.")
-    )
-    .add("data", JsonUtils.object()
-        .add("foo", "bar")
-        .add("baz", "qux")
+        .add("ttl", 3600) // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     )
     .toJson();
 
@@ -438,7 +448,8 @@ recipient = {
 message = {
     'notification': {
         'title': 'Hello from Ably!',
-        'body': 'Example push notification from Ably.'
+        'body': 'Example push notification from Ably.',
+        'ttl': 3600  # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 }
 
@@ -446,14 +457,15 @@ realtime.push.admin.publish(recipient, message)
 ```
 
 ```[realtime_csharp]
-var recipient = new { clientId = "bob" };
+var recipient = new { clientId = "xxxxxxxxxxxx" };
 
 var notification = new
 {
     notification = new
     {
         title = "Hello from Ably!",
-        body = "Example push notification from Ably."
+        body = "Example push notification from Ably.",
+        ttl = 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 };
 
@@ -462,13 +474,14 @@ realtime.Push.Admin.Publish(recipient, notification);
 
 ```[rest_javascript]
 var recipient = {
-  clientId: 'bob'
+  clientId: 'xxxxxxxxxxxx'
 };
 
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -477,13 +490,14 @@ rest.push.admin.publish(recipient, notification);
 
 ```[rest_nodejs]
 var recipient = {
-  clientId: 'bob'
+  clientId: 'xxxxxxxxxxxx'
 };
 
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -492,13 +506,14 @@ rest.push.admin.publish(recipient, notification);
 
 ```[rest_ruby]
 recipient = {
-  clientId: 'bob'
+  clientId: 'xxxxxxxxxxxx'
 }
 
 notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 }
 
@@ -510,10 +525,7 @@ JsonObject payload = JsonUtils.object()
     .add("notification", JsonUtils.object()
         .add("title", "Hello from Ably!")
         .add("body", "Example push notification from Ably.")
-    )
-    .add("data", JsonUtils.object()
-        .add("foo", "bar")
-        .add("baz", "qux")
+        .add("ttl", 3600) // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     )
     .toJson();
 
@@ -528,7 +540,8 @@ recipient = {
 message = {
     'notification': {
         'title': 'Hello from Ably!',
-        'body': 'Example push notification from Ably.'
+        'body': 'Example push notification from Ably.',
+        'ttl': 3600  # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 }
 
@@ -543,25 +556,27 @@ $recipient = [
 $data = [
     'notification' => [
         'title' => 'Hello from Ably!',
-        'body' => 'Example push notification from Ably.'
+        'body' => 'Example push notification from Ably.',
+        'ttl' => 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     ]
 ];
 
 $rest->push->admin->publish($recipient, $data);
 
-var channel = rest.channels.get('pushenabled:foo');
-channel.publish({'name': 'example', 'data': 'data', 'extras': extras});
+$channel = $rest->channels->get('pushenabled:foo');
+$channel->publish(['name' => 'example', 'data' => 'data', 'extras' => $extras]);
 ```
 
 ```[rest_csharp]
-var recipient = new { clientId = "bob" };
+var recipient = new { clientId = "xxxxxxxxxxxx" };
 
 var notification = new
 {
     notification = new
     {
         title = "Hello from Ably!",
-        body = "Example push notification from Ably."
+        body = "Example push notification from Ably.",
+        ttl = 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 };
 
@@ -586,7 +601,8 @@ var recipient = {
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -602,7 +618,8 @@ var recipient = {
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -618,7 +635,8 @@ recipient = {
 notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 }
 
@@ -630,14 +648,16 @@ Message message = new Message("example", "rest data");
 message.extras = io.ably.lib.util.JsonUtils.object()
     .add("notification", io.ably.lib.util.JsonUtils.object()
         .add("title", "Hello from Ably!")
-        .add("body", "Example push notification from Ably."))
-    .add("data", io.ably.lib.util.JsonUtils.object()
-        .add("foo", "bar")
-        .add("baz", "qux"));
-
-realtime.push.admin.publish(arrayOf(Param("transportType", "apns"), Param("deviceToken", deviceToken)), message);
+        .add("body", "Example push notification from Ably.")
+        .add("ttl", 3600)); // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
 
-ably.push.admin.publish(new Param[]{new Param("transportType","fcm"),new Param("registrationToken","<my_registration_token>")},payload);
+realtime.push.admin.publish(
+    new Param[] {
+        new Param("transportType", "apns"),
+        new Param("deviceToken", deviceToken)
+    },
+    message
+);
 ```
 
 ```[realtime_python]
@@ -649,7 +669,8 @@ recipient = {
 message = {
     'notification': {
         'title': 'Hello from Ably!',
-        'body': 'Example push notification from Ably.'
+        'body': 'Example push notification from Ably.',
+        'ttl': 3600  # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 }
 
@@ -657,14 +678,15 @@ realtime.push.admin.publish(recipient, message)
 ```
 
 ```[realtime_csharp]
-var recipient = new { transport_type: 'apns' };
+var recipient = new { transport_type = "apns", deviceToken = "XXXXXXXXXX" };
 
 var notification = new
 {
     notification = new
     {
         title = "Hello from Ably!",
-        body = "Example push notification from Ably."
+        body = "Example push notification from Ably.",
+        ttl = 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 };
 
@@ -680,7 +702,8 @@ var recipient = {
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -696,7 +719,8 @@ var recipient = {
 var notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 };
 
@@ -712,7 +736,8 @@ recipient = {
 notification = {
   notification: {
     title: 'Hello from Ably!',
-    body: 'Example push notification from Ably.'
+    body: 'Example push notification from Ably.',
+    ttl: 3600 # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
   }
 }
 
@@ -724,12 +749,16 @@ Message message = new Message("example", "rest data");
 message.extras = io.ably.lib.util.JsonUtils.object()
     .add("notification", io.ably.lib.util.JsonUtils.object()
         .add("title", "Hello from Ably!")
-        .add("body", "Example push notification from Ably."))
-    .add("data", io.ably.lib.util.JsonUtils.object()
-        .add("foo", "bar")
-        .add("baz", "qux"));
+        .add("body", "Example push notification from Ably.")
+        .add("ttl", 3600)); // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
 
-rest.push.admin.publish(arrayOf(Param("transportType", "apns"), Param("deviceToken", deviceToken)), message);
+rest.push.admin.publish(
+    new Param[] {
+        new Param("transportType", "apns"),
+        new Param("deviceToken", deviceToken)
+    },
+    message
+);
 ```
 
 ```[rest_python]
@@ -741,7 +770,8 @@ recipient = {
 message = {
     'notification': {
         'title': 'Hello from Ably!',
-        'body': 'Example push notification from Ably.'
+        'body': 'Example push notification from Ably.',
+        'ttl': 3600  # Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 }
 
@@ -751,33 +781,100 @@ rest.push.admin.publish(recipient, message)
 ```[rest_php]
 $recipient = [
     'transportType' => 'apns',
-    'deviceToken' => 'XXXXXXX',
+    'deviceToken' => 'XXXXXXX'
+];
 
 $data = [
     'notification' => [
         'title' => 'Hello from Ably!',
-        'body' => 'Example push notification from Ably.'
+        'body' => 'Example push notification from Ably.',
+        'ttl' => 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     ]
 ];
 
-$rest->push->admin->publish( $recipient, $data );
+$rest->push->admin->publish($recipient, $data);
 ```
 
 ```[rest_csharp]
-var recipient = new { transport_type: 'apns' };
+var recipient = new { transport_type = "apns", deviceToken = "XXXXXXXXXX" };
 
 var notification = new
 {
     notification = new
     {
         title = "Hello from Ably!",
-        body = "Example push notification from Ably."
+        body = "Example push notification from Ably.",
+        ttl = 3600 // Required for Web Push on some platforms and browsers like Microsoft Edge (WNS)
     }
 };
 
 rest.Push.Admin.Publish(recipient, notification);
 ```
 
+h3(#via-batch-push-api). Publish via batch push API
+
+The batch push API enables you to publish push notifications to multiple devices or browsers in a single request.
+
+This is useful when you need to send a large number of distinct push notifications to multiple recipients. If you are publishing the same notification to multiple recipients, prefer publishing "via channels":#via-channels.
+
+The batch push endpoint accepts a JSON array of @PushPublishSpec@ objects, each of which contain a @recipient@ or array of recipients, and a @payload@, where @payload@ is the same as the payload you would use in a normal direct publish request.
+
+Currently, the batch push endpoint allows a maximum of 10,000 notifications per request (each recipient for a given payload counts as a separate notification).
+
+The following example shows how to publish multiple push notifications in one request using the batch API with the generic REST "@request()@":/docs/api/rest-sdk#request method:
+
+```[rest_javascript]
+await rest.request('POST', '/push/batch/publish', null, [
+  {
+    recipient: {
+      deviceId: 'xxxxxxxxxxx'
+    },
+    payload: {
+      notification: { title: 'Message 1', body: 'Example push notification from Ably.' }
+    }
+  },
+  {
+    recipient: [
+      {
+        deviceId: 'xxxxxxxxxxx'
+      },
+      {
+        deviceId: 'xxxxxxxxxxx',
+      }
+    ],
+    payload: {
+      notification: { title: 'Message 2', body: 'Example push notification from Ably.' }
+    }
+  }
+])
+```
+
+```[rest_nodejs]
+await rest.request('POST', '/push/batch/publish', null, [
+  {
+    recipient: {
+      deviceId: 'xxxxxxxxxxx'
+    },
+    payload: {
+      notification: { title: 'Message 1', body: 'Example push notification from Ably.' }
+    }
+  },
+  {
+    recipient: [
+      {
+        deviceId: 'xxxxxxxxxxx'
+      },
+      {
+        deviceId: 'xxxxxxxxxxx',
+      }
+    ],
+    payload: {
+      notification: { title: 'Message 2', body: 'Example push notification from Ably.' }
+    }
+  }
+])
+```
+
 h2(#via-channels). Publish via channels
 
 Publishing via channels is modeled on Ably's "channel":#channels infrastructure, facilitating the delivery of push notifications across a network of subscribed devices or browsers. This process publishes messages through predefined channels, which devices or browsers must "subscribe":#sub-channels to in order to   receive updates. This process ensures registered devices or browsers in the specified channels receive the correct push notifications. Publishing via channels is particularly useful for publishing notifications to multiple groups with varying privileges.
diff --git a/data/onCreateNode/create-graphql-schema-customization.ts b/data/onCreateNode/create-graphql-schema-customization.ts
index 39e493d1c5..50ef4ee23c 100644
--- a/data/onCreateNode/create-graphql-schema-customization.ts
+++ b/data/onCreateNode/create-graphql-schema-customization.ts
@@ -51,8 +51,6 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
       oneTrustTest: String
       inkeepEnabled: String
       inkeepApiKey: String
-      inkeepIntegrationId: String
-      inkeepOrganizationId: String
       insightsEnabled: Boolean
       insightsDebug: Boolean
       mixpanelApiKey: String
diff --git a/data/yaml/page-content/homepage.yaml b/data/yaml/page-content/homepage.yaml
deleted file mode 100644
index 3ceaf0afd9..0000000000
--- a/data/yaml/page-content/homepage.yaml
+++ /dev/null
@@ -1,68 +0,0 @@
-name: Homepage
-meta:
-  title: Docs | Ably Realtime
-  description: Ably documentation for 25+ web, mobile, and IoT SDKs, quickstart guides and tutorials, and realtime concepts.
-  image: https://files.ably.io/website/images/meta-tags/ably-generic%402x.jpg
-  twitter: '@ablyrealtime'
-sections:
-  - columns: 1
-    bottomMargin: 48
-    cards:
-      - title: Ably Documentation
-        type: hero
-        content: Realtime experience infrastructure that just works at any scale.
-  - columns: 2
-    bottomMargin: 80
-    cards:
-      - title: Platform
-        type: feature
-        content: Understand the core concepts of Ably's platform, its pricing and integrations.
-        image: 'platform.png'
-        links:
-          - text: Get started
-            href: /platform
-      - title: Pub/Sub
-        type: feature
-        content: Quickly create realtime digital experiences with Ably's core building blocks.
-        image: 'pub-sub.png'
-        links:
-          - text: Get started
-            href: /basics
-      - title: Chat
-        type: feature
-        content: Quickly add chat features into any application.
-        image: 'chat.png'
-        links:
-          - text: Get started
-            href: /chat
-      - title: Spaces
-        type: feature
-        content: Build collaborative environments in just a few lines of code.
-        image: 'spaces.png'
-        links:
-          - text: Get started
-            href: /spaces
-      - title: LiveSync
-        type: feature
-        content: Seamlessly sync database changes with frontend clients.
-        image: 'livesync.png'
-        links:
-          - text: Get started
-            href: /livesync
-      - title: Asset Tracking
-        type: feature
-        content: Track the location of assets in realtime.
-        image: 'asset-tracking.png'
-        links:
-          - text: Get started
-            href: /asset-tracking
-  - columns: 1
-    bottomMargin: 160
-    cards:
-      - title: SDKs
-        content: Ably SDKs provide a consistent and idiomatic API across a variety of supported platforms.
-        image: 'sdks@2x.png'
-        type: sdk
-        callToAction:
-          text: View all SDKs
-          href: /sdks
diff --git a/examples/.env.example b/examples/.env.example
index 22af5f7ebd..58243868bb 100644
--- a/examples/.env.example
+++ b/examples/.env.example
@@ -1,2 +1 @@
-VITE_PUBLIC_ABLY_KEY=
-NEXT_PUBLIC_ABLY_KEY=
+VITE_ABLY_KEY=
diff --git a/examples/auth-generate-jwt/javascript/README.md b/examples/auth-generate-jwt/javascript/README.md
index 29399485c1..9150c880de 100644
--- a/examples/auth-generate-jwt/javascript/README.md
+++ b/examples/auth-generate-jwt/javascript/README.md
@@ -54,7 +54,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -72,4 +72,4 @@ yarn run auth-generate-jwt-server
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/auth-generate-jwt/javascript/postcss.config.ts b/examples/auth-generate-jwt/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/auth-generate-jwt/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/auth-generate-jwt/javascript/tailwind.config.ts b/examples/auth-generate-jwt/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/auth-generate-jwt/javascript/tailwind.config.ts
+++ b/examples/auth-generate-jwt/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/auth-generate-jwt/javascript/vite-env.d.ts b/examples/auth-generate-jwt/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/auth-generate-jwt/javascript/vite-env.d.ts
+++ b/examples/auth-generate-jwt/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/auth-generate-jwt/javascript/vite.config.ts b/examples/auth-generate-jwt/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/auth-generate-jwt/javascript/vite.config.ts
+++ b/examples/auth-generate-jwt/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/auth-generate-jwt/react/README.md b/examples/auth-generate-jwt/react/README.md
index 495829ed7e..7fdc34df01 100644
--- a/examples/auth-generate-jwt/react/README.md
+++ b/examples/auth-generate-jwt/react/README.md
@@ -54,7 +54,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -72,4 +72,4 @@ yarn run auth-generate-jwt-server
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/auth-generate-jwt/react/index.html b/examples/auth-generate-jwt/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/auth-generate-jwt/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/auth-generate-jwt/react/next.config.ts b/examples/auth-generate-jwt/react/next.config.ts
deleted file mode 100644
index 4678774e6d..0000000000
--- a/examples/auth-generate-jwt/react/next.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
diff --git a/examples/auth-generate-jwt/react/package.json b/examples/auth-generate-jwt/react/package.json
index eb6ca6c27f..6e1cc1e7f2 100644
--- a/examples/auth-generate-jwt/react/package.json
+++ b/examples/auth-generate-jwt/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/auth-generate-jwt/react/postcss.config.ts b/examples/auth-generate-jwt/react/postcss.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/auth-generate-jwt/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/auth-generate-jwt/react/src/App.tsx b/examples/auth-generate-jwt/react/src/App.tsx
new file mode 100644
index 0000000000..110c1a55d9
--- /dev/null
+++ b/examples/auth-generate-jwt/react/src/App.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import * as Ably from 'ably';
+import { AblyProvider, useConnectionStateListener } from 'ably/react';
+import './styles/styles.css';
+
+interface StatusMessage {
+  id: number;
+  success: boolean;
+  message: string;
+}
+
+interface StatusMessagesProps {
+  messages: StatusMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<StatusMessage[]>>;
+}
+
+const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
+  useConnectionStateListener((stateChange) => {
+    if (stateChange.current === 'connected') {
+      setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 3 ? { ...msg, success: true } : msg)));
+    }
+  });
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
+          <p className="mb-8">The Ably client has been successfully initialized.</p>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ? <span className="text-green-500">✓</span> : <span className="text-red-500">✗</span>}
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function App() {
+  const [client, setClient] = useState<Ably.Realtime | null>(null);
+  const [messages, setMessages] = useState<StatusMessage[]>([
+    { id: 1, success: false, message: 'Client requests JWT from server' },
+    { id: 2, success: false, message: 'Client initializes connection to Ably with generated JWT' },
+    { id: 3, success: false, message: 'Client is connected' },
+  ]);
+
+  const handleConnect = async () => {
+    // Navigate to authenticated page
+    window.location.href = '/authenticated';
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
+          <p>Press the Connect button to initialize the client:</p>
+          <button onClick={handleConnect} className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded">
+            Connect
+          </button>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg, index) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ? <span className="text-green-500">✓</span> : <span className="text-red-500">✗</span>}
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/auth-generate-jwt/react/src/app/authenticated/page.tsx b/examples/auth-generate-jwt/react/src/app/authenticated/page.tsx
deleted file mode 100644
index 38a84c0e45..0000000000
--- a/examples/auth-generate-jwt/react/src/app/authenticated/page.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import * as Ably from 'ably';
-import { AblyProvider, useConnectionStateListener } from 'ably/react';
-import { useState, useEffect } from 'react';
-
-interface StatusMessage {
-  id: number;
-  success: boolean;
-  message: string;
-}
-interface StatusMessagesProps {
-  messages: StatusMessage[];
-  setMessages: React.Dispatch<React.SetStateAction<StatusMessage[]>>;
-}
-
-const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
-  useConnectionStateListener((stateChange) => {
-    if (stateChange.current === 'connected') {
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 3 ? { ...msg, success: true } : msg
-        )
-      );
-    }
-  });
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
-        <div className="flex-grow text-center">
-          <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
-          <p className="mb-8">The Ably client has been successfully initialized.</p>
-        </div>
-
-        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
-          {messages.map((msg) => (
-            <div key={msg.id} className="flex items-center gap-2">
-              <span>
-                {msg.success ?
-                  <span className="text-green-500">✓</span> :
-                  <span className="text-red-500">✗</span>
-                }
-              </span>
-              {msg.message}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default function Authenticated() {
-  const [messages, setMessages] = useState<StatusMessage[]>([
-    { id: 1, success: false, message: "Client requests JWT from server" },
-    { id: 2, success: false, message: "Client initializes connection to Ably with generated JWT" },
-    { id: 3, success: false, message: "Client is connected"}
-  ]);
-  const [client, setClient] = useState<Ably.Realtime | null>(null);
-
-  useEffect(() => {
-    try {
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 1 ? { ...msg, success: true } : msg
-        )
-      );
-
-      const newClient = new Ably.Realtime({ authUrl: 'http://localhost:3001/generate-jwt' });
-      setClient(newClient);
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 2 ? { ...msg, success: true } : msg
-        )
-      );
-    } catch (error) {
-      console.error('Failed to initialise client:', error);
-    }
-  }, []);
-
-  if (!client) return null;
-
-  return (
-    <AblyProvider client={client}>
-      <StatusMessages messages={messages} setMessages={setMessages} />
-    </AblyProvider>
-  );
-}
diff --git a/examples/auth-generate-jwt/react/src/app/layout.tsx b/examples/auth-generate-jwt/react/src/app/layout.tsx
deleted file mode 100644
index f9a5b0e1e9..0000000000
--- a/examples/auth-generate-jwt/react/src/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import '../../styles/styles.css'
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/examples/auth-generate-jwt/react/src/app/page.tsx b/examples/auth-generate-jwt/react/src/app/page.tsx
deleted file mode 100644
index 998a994d42..0000000000
--- a/examples/auth-generate-jwt/react/src/app/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import * as Ably from 'ably';
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-
-interface StatusMessage {
-  id: number;
-  success: boolean;
-  message: string;
-}
-
-export default function Home() {
-  const [client, setClient] = useState<Ably.Realtime | null>(null);
-  const [messages, setMessages] = useState<StatusMessage[]>([
-    { id: 1, success: false, message: "Client requests JWT from server" },
-    { id: 2, success: false, message: "Client initializes connection to Ably with generated JWT" },
-    { id: 3, success: false, message: "Client is connected"}
-  ]);
-  const router = useRouter();
-  const handleConnect = async () => {
-    router.push('/authenticated');
-  };
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
-        <div className="flex-grow text-center">
-          <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
-          <p>Press the Connect button to initialize the client:</p>
-          <button
-            onClick={handleConnect}
-            className='uk-btn uk-btn-md uk-btn-primary mb-4 rounded'
-          >
-            Connect
-          </button>
-        </div>
-
-        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
-          {messages.map((msg, index) => (
-            <div key={msg.id} className="flex items-center gap-2">
-            <span>
-              {msg.success ?
-                <span className="text-green-500">✓</span> :
-                <span className="text-red-500">✗</span>
-              }
-            </span>
-            {msg.message}
-          </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/examples/auth-generate-jwt/react/src/env.d.ts b/examples/auth-generate-jwt/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/auth-generate-jwt/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/auth-generate-jwt/react/src/index.tsx b/examples/auth-generate-jwt/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/auth-generate-jwt/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/auth-generate-jwt/react/styles/styles.css b/examples/auth-generate-jwt/react/src/styles/styles.css
similarity index 100%
rename from examples/auth-generate-jwt/react/styles/styles.css
rename to examples/auth-generate-jwt/react/src/styles/styles.css
diff --git a/examples/auth-generate-jwt/react/tailwind.config.ts b/examples/auth-generate-jwt/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/auth-generate-jwt/react/tailwind.config.ts
+++ b/examples/auth-generate-jwt/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/auth-generate-jwt/react/tsconfig.json b/examples/auth-generate-jwt/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/auth-generate-jwt/react/tsconfig.json
+++ b/examples/auth-generate-jwt/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/auth-generate-jwt/react/vite.config.ts b/examples/auth-generate-jwt/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/auth-generate-jwt/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/auth-generate-jwt/server/src/server.ts b/examples/auth-generate-jwt/server/src/server.ts
index 899dac1c50..c9ec3d265c 100644
--- a/examples/auth-generate-jwt/server/src/server.ts
+++ b/examples/auth-generate-jwt/server/src/server.ts
@@ -23,11 +23,11 @@ function base64urlEncode(str: string) {
 app.get('/generate-jwt', async (_req, res) => {
   console.log('1 - /generate-jwt endpoint called');
 
-  const ablyApiKey = process.env.VITE_PUBLIC_ABLY_KEY || '';
+  const ablyApiKey = process.env.VITE_ABLY_KEY || '';
   const [apiKeyName, apiKeySecret] = ablyApiKey.split(':');
   try {
     if (ablyApiKey === '') {
-      throw new Error('VITE_PUBLIC_ABLY_KEY is not set');
+      throw new Error('VITE_ABLY_KEY is not set');
     }
 
     const header = {
diff --git a/examples/auth-request-token/javascript/README.md b/examples/auth-request-token/javascript/README.md
index 9337d9dc7c..95c4cb654b 100644
--- a/examples/auth-request-token/javascript/README.md
+++ b/examples/auth-request-token/javascript/README.md
@@ -54,7 +54,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -72,4 +72,4 @@ yarn run auth-request-token-server
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/auth-request-token/javascript/postcss.config.ts b/examples/auth-request-token/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/auth-request-token/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/auth-request-token/javascript/tailwind.config.ts b/examples/auth-request-token/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/auth-request-token/javascript/tailwind.config.ts
+++ b/examples/auth-request-token/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/auth-request-token/javascript/vite-env.d.ts b/examples/auth-request-token/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/auth-request-token/javascript/vite-env.d.ts
+++ b/examples/auth-request-token/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/auth-request-token/javascript/vite.config.ts b/examples/auth-request-token/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/auth-request-token/javascript/vite.config.ts
+++ b/examples/auth-request-token/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/auth-request-token/react/README.md b/examples/auth-request-token/react/README.md
index 84070ac7ff..5a7aa54be2 100644
--- a/examples/auth-request-token/react/README.md
+++ b/examples/auth-request-token/react/README.md
@@ -54,7 +54,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -72,4 +72,4 @@ yarn run auth-request-token-server
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/auth-request-token/react/index.html b/examples/auth-request-token/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/auth-request-token/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/auth-request-token/react/next.config.ts b/examples/auth-request-token/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/auth-request-token/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/auth-request-token/react/package.json b/examples/auth-request-token/react/package.json
index 1d1b86f9f9..3319cb0b57 100644
--- a/examples/auth-request-token/react/package.json
+++ b/examples/auth-request-token/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/auth-request-token/react/postcss.config.ts b/examples/auth-request-token/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/auth-request-token/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/auth-request-token/react/src/App.tsx b/examples/auth-request-token/react/src/App.tsx
new file mode 100644
index 0000000000..9e7c99d768
--- /dev/null
+++ b/examples/auth-request-token/react/src/App.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import * as Ably from 'ably';
+import { AblyProvider, useConnectionStateListener } from 'ably/react';
+import './styles/styles.css';
+
+interface StatusMessage {
+  id: number;
+  success: boolean;
+  message: string;
+}
+
+interface StatusMessagesProps {
+  messages: StatusMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<StatusMessage[]>>;
+}
+
+const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
+  useConnectionStateListener((stateChange) => {
+    if (stateChange.current === 'connected') {
+      setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 3 ? { ...msg, success: true } : msg)));
+    }
+  });
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
+          <p className="mb-8">The Ably client has been successfully initialized.</p>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ? <span className="text-green-500">✓</span> : <span className="text-red-500">✗</span>}
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function App() {
+  const [client, setClient] = useState<Ably.Realtime | null>(null);
+  const [messages, setMessages] = useState<StatusMessage[]>([
+    { id: 1, success: false, message: 'Client requests token from server' },
+    { id: 2, success: false, message: 'Client initializes connection to Ably with generated Token' },
+    { id: 3, success: false, message: 'Client is connected' },
+  ]);
+
+  const handleConnect = async () => {
+    // Navigate to authenticated page
+    window.location.href = '/authenticated';
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
+          <p>Press the Connect button to initialize the client:</p>
+          <button onClick={handleConnect} className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded">
+            Connect
+          </button>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg, index) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ? <span className="text-green-500">✓</span> : <span className="text-red-500">✗</span>}
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/auth-request-token/react/src/app/authenticated/page.tsx b/examples/auth-request-token/react/src/app/authenticated/page.tsx
deleted file mode 100644
index d0804f765a..0000000000
--- a/examples/auth-request-token/react/src/app/authenticated/page.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import * as Ably from 'ably';
-import { AblyProvider, useConnectionStateListener } from 'ably/react';
-import { useState, useEffect } from 'react';
-
-interface StatusMessage {
-  id: number;
-  success: boolean;
-  message: string;
-}
-interface StatusMessagesProps {
-  messages: StatusMessage[];
-  setMessages: React.Dispatch<React.SetStateAction<StatusMessage[]>>;
-}
-
-const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
-  useConnectionStateListener((stateChange) => {
-    if (stateChange.current === 'connected') {
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 3 ? { ...msg, success: true } : msg
-        )
-      );
-    }
-  });
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
-        <div className="flex-grow text-center">
-          <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
-          <p className="mb-8">The Ably client has been successfully initialized.</p>
-        </div>
-
-        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
-          {messages.map((msg) => (
-            <div key={msg.id} className="flex items-center gap-2">
-              <span>
-                {msg.success ?
-                  <span className="text-green-500">✓</span> :
-                  <span className="text-red-500">✗</span>
-                }
-              </span>
-              {msg.message}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default function Authenticated() {
-  const [messages, setMessages] = useState<StatusMessage[]>([
-    { id: 1, success: false, message: "Client requests token from server" },
-    { id: 2, success: false, message: "Client initializes connection to Ably with generated Token" },
-    { id: 3, success: false, message: "Client is connected"}
-  ]);
-  const [client, setClient] = useState<Ably.Realtime | null>(null);
-
-  useEffect(() => {
-    try {
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 1 ? { ...msg, success: true } : msg
-        )
-      );
-
-      const newClient = new Ably.Realtime({ authUrl: 'http://localhost:3001/request-token' });
-      setClient(newClient);
-      setMessages(prevMessages =>
-        prevMessages.map(msg =>
-          msg.id === 2 ? { ...msg, success: true } : msg
-        )
-      );
-    } catch (error) {
-      console.error('Failed to initialise client:', error);
-    }
-  }, []);
-
-  if (!client) return null;
-
-  return (
-    <AblyProvider client={client}>
-      <StatusMessages messages={messages} setMessages={setMessages} />
-    </AblyProvider>
-  );
-}
diff --git a/examples/auth-request-token/react/src/app/layout.tsx b/examples/auth-request-token/react/src/app/layout.tsx
deleted file mode 100644
index ddb173747d..0000000000
--- a/examples/auth-request-token/react/src/app/layout.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import dynamic from 'next/dynamic';
-import '../../styles/styles.css'
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/examples/auth-request-token/react/src/app/page.tsx b/examples/auth-request-token/react/src/app/page.tsx
deleted file mode 100644
index 4fb7fd2f54..0000000000
--- a/examples/auth-request-token/react/src/app/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import * as Ably from 'ably';
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-
-interface StatusMessage {
-  id: number;
-  success: boolean;
-  message: string;
-}
-
-export default function Home() {
-  const [client, setClient] = useState<Ably.Realtime | null>(null);
-  const [messages, setMessages] = useState<StatusMessage[]>([
-    { id: 1, success: false, message: "Client requests token from server" },
-    { id: 2, success: false, message: "Client initializes connection to Ably with generated Token" },
-    { id: 3, success: false, message: "Client is connected"}
-  ]);
-  const router = useRouter();
-  const handleConnect = async () => {
-    router.push('/authenticated');
-  };
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
-        <div className="flex-grow text-center">
-          <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
-          <p>Press the Connect button to initialize the client:</p>
-          <button
-            onClick={handleConnect}
-            className='uk-btn uk-btn-md uk-btn-primary mb-4 rounded'
-          >
-            Connect
-          </button>
-        </div>
-
-        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
-          {messages.map((msg, index) => (
-            <div key={msg.id} className="flex items-center gap-2">
-            <span>
-              {msg.success ?
-                <span className="text-green-500">✓</span> :
-                <span className="text-red-500">✗</span>
-              }
-            </span>
-            {msg.message}
-          </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/examples/auth-request-token/react/src/env.d.ts b/examples/auth-request-token/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/auth-request-token/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/auth-request-token/react/src/index.tsx b/examples/auth-request-token/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/auth-request-token/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/chat-room-history/react/styles/styles.css b/examples/auth-request-token/react/src/styles/styles.css
similarity index 100%
rename from examples/chat-room-history/react/styles/styles.css
rename to examples/auth-request-token/react/src/styles/styles.css
diff --git a/examples/auth-request-token/react/tailwind.config.ts b/examples/auth-request-token/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/auth-request-token/react/tailwind.config.ts
+++ b/examples/auth-request-token/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/auth-request-token/react/tsconfig.json b/examples/auth-request-token/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/auth-request-token/react/tsconfig.json
+++ b/examples/auth-request-token/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/auth-request-token/react/vite.config.ts b/examples/auth-request-token/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/auth-request-token/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/auth-request-token/server/src/server.ts b/examples/auth-request-token/server/src/server.ts
index e18cacedb8..c065fbba41 100644
--- a/examples/auth-request-token/server/src/server.ts
+++ b/examples/auth-request-token/server/src/server.ts
@@ -16,7 +16,7 @@ app.use(
   }),
 );
 
-const ably = new Ably.Rest(process.env.VITE_PUBLIC_ABLY_KEY || '');
+const ably = new Ably.Rest(process.env.VITE_ABLY_KEY || '');
 
 app.get('/request-token', async (_req, res) => {
   console.log('1 - /request-token endpoint called');
diff --git a/examples/chat-online-status/javascript/README.md b/examples/chat-online-status/javascript/README.md
index 7e52a88a9c..37bb40a712 100644
--- a/examples/chat-online-status/javascript/README.md
+++ b/examples/chat-online-status/javascript/README.md
@@ -12,9 +12,9 @@ Online statuses are implemented using [Ably Chat](/docs/products/chat). The Chat
 
 Use the following methods to add an online status implementation into a chat application:
 
-* [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
-* [`rooms.presence.subscribe()`](/docs/chat/rooms/presence?lang=javascript#subscribe): subscribes to users' presence status events by registering a listener. Presence events are emitted when a user chooses a enter or leave the presence set or update their user data.
-* [`room.presence.enter`, `room.presence.update`, `room.presence.leave`](/docs/chat/rooms/presence?lang=javascript#set): Emits a presence event when the user enters or leaves a presence set, or updates their user data.
+- [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
+- [`rooms.presence.subscribe()`](/docs/chat/rooms/presence?lang=javascript#subscribe): subscribes to users' presence status events by registering a listener. Presence events are emitted when a user chooses a enter or leave the presence set or update their user data.
+- [`room.presence.enter`, `room.presence.update`, `room.presence.leave`](/docs/chat/rooms/presence?lang=javascript#set): Emits a presence event when the user enters or leaves a presence set, or updates their user data.
 
 Find out more about [online status](/docs/chat/rooms/presence?lang=javascript).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run chat-online-status-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-online-status/javascript/postcss.config.ts b/examples/chat-online-status/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/chat-online-status/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-online-status/javascript/src/script.ts b/examples/chat-online-status/javascript/src/script.ts
index 9b7d7da7bb..1e392382ee 100644
--- a/examples/chat-online-status/javascript/src/script.ts
+++ b/examples/chat-online-status/javascript/src/script.ts
@@ -1,10 +1,11 @@
 import * as Ably from 'ably';
 import { ChatClient, PresenceEvent, PresenceMember, AllFeaturesEnabled } from '@ably/chat';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 
 const realtimeClient = new Ably.Realtime({
-  clientId: faker.person.firstName(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  clientId: minifaker.firstName(),
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 const chatClient = new ChatClient(realtimeClient);
 
diff --git a/examples/chat-online-status/javascript/tailwind.config.ts b/examples/chat-online-status/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-online-status/javascript/tailwind.config.ts
+++ b/examples/chat-online-status/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-online-status/javascript/vite-env.d.ts b/examples/chat-online-status/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/chat-online-status/javascript/vite-env.d.ts
+++ b/examples/chat-online-status/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/chat-online-status/javascript/vite.config.ts b/examples/chat-online-status/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/chat-online-status/javascript/vite.config.ts
+++ b/examples/chat-online-status/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/chat-online-status/react/README.md b/examples/chat-online-status/react/README.md
index 4aa834e4d1..95ec9591a3 100644
--- a/examples/chat-online-status/react/README.md
+++ b/examples/chat-online-status/react/README.md
@@ -12,11 +12,11 @@ Online statuses are implemented using [Ably Chat](/docs/products/chat). The Chat
 
 Use the following components to add an online status implementation into a chat application:
 
-* [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable real-time chat functionality across the application.
-* [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and real-time interactions within that room via React context.
-* [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
-* [`usePresence()`](/docs/chat/rooms/presence?lang=react#set) hook: a hook to manage the status updates made by users within a chat room.
-* [`usePresenceListener()`](/docs/chat/rooms/presence?lang=react#subscribe) hook: a hook to manage the status updates made by users within a chat room.
+- [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable real-time chat functionality across the application.
+- [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and real-time interactions within that room via React context.
+- [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
+- [`usePresence()`](/docs/chat/rooms/presence?lang=react#set) hook: a hook to manage the status updates made by users within a chat room.
+- [`usePresenceListener()`](/docs/chat/rooms/presence?lang=react#subscribe) hook: a hook to manage the status updates made by users within a chat room.
 
 Find out more about [online status](/docs/chat/rooms/presence?lang=react).
 
@@ -40,7 +40,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -58,4 +58,4 @@ yarn run chat-online-status-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-online-status/react/index.html b/examples/chat-online-status/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/chat-online-status/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/chat-online-status/react/next.config.ts b/examples/chat-online-status/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/chat-online-status/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-online-status/react/package.json b/examples/chat-online-status/react/package.json
index f3e8a3b1fd..b3f01714d6 100644
--- a/examples/chat-online-status/react/package.json
+++ b/examples/chat-online-status/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/chat-online-status/react/postcss.config.ts b/examples/chat-online-status/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/chat-online-status/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-online-status/react/src/app/page.tsx b/examples/chat-online-status/react/src/App.tsx
similarity index 50%
rename from examples/chat-online-status/react/src/app/page.tsx
rename to examples/chat-online-status/react/src/App.tsx
index 83c176e241..767c7830d3 100644
--- a/examples/chat-online-status/react/src/app/page.tsx
+++ b/examples/chat-online-status/react/src/App.tsx
@@ -1,26 +1,25 @@
-"use client";
-
-import React from 'react';
-import { useChatClient, useRoom, usePresenceListener, usePresence } from '@ably/chat';
-import '../../styles/styles.css';
+import { useEffect, useState } from 'react';
+import {
+  useChatClient,
+  useRoom,
+  usePresenceListener,
+  usePresence,
+  ChatClient,
+  ChatClientProvider,
+  ChatRoomProvider,
+  AllFeaturesEnabled,
+} from '@ably/chat';
+import { Realtime } from 'ably';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
+import './styles/styles.css';
 
 interface OnlineStatus {
   status: string;
 }
 
-export default function Home() {
-  const { roomStatus, connectionStatus } = useRoom();
-
-  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div>
-      <Online />
-    </div>
-  );
-}
+const realtimeClient = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: minifaker.firstName() });
+const chatClient = new ChatClient(realtimeClient);
 
 const Online = () => {
   const { presenceData } = usePresenceListener();
@@ -40,35 +39,71 @@ const Online = () => {
           >
             <div
               className={`w-4 h-4 mr-3 rounded-full ${
-                (onlineStatus.data as OnlineStatus)?.status === 'Away' ? 'bg-amber-500' : 'bg-green-500'}`}
+                (onlineStatus.data as OnlineStatus)?.status === 'Away' ? 'bg-amber-500' : 'bg-green-500'
+              }`}
             ></div>
             <div>
               <p className="font-medium text-gray-900">
-                {onlineStatus.clientId}{onlineStatus.clientId === clientId ? ' (You)' : ''}
-              </p>
-              <p className="text-sm italic text-gray-600">
-                {(onlineStatus.data as OnlineStatus)?.status ?? 'Online'}
+                {onlineStatus.clientId}
+                {onlineStatus.clientId === clientId ? ' (You)' : ''}
               </p>
+              <p className="text-sm italic text-gray-600">{(onlineStatus.data as OnlineStatus)?.status ?? 'Online'}</p>
             </div>
           </div>
         ))}
         {presenceData
-          .filter(status => status.clientId === clientId)
-          .map(userStatus => (
+          .filter((status) => status.clientId === clientId)
+          .map((userStatus) => (
             <button
               key={clientId}
               className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded w-full min-w-[120px]"
               onClick={async () =>
-              await update({
-              status: (userStatus.data as OnlineStatus)?.status === 'Away' ? 'Online' : 'Away'
-              })
+                await update({
+                  status: (userStatus.data as OnlineStatus)?.status === 'Away' ? 'Online' : 'Away',
+                })
               }
             >
               {(userStatus.data as OnlineStatus)?.status === 'Away' ? 'Show online' : 'Set away'}
             </button>
-          ))
-        }
+          ))}
       </div>
     </div>
   );
+};
+
+function Home() {
+  const { roomStatus, connectionStatus } = useRoom();
+
+  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Online />
+    </div>
+  );
+}
+
+export default function App() {
+  const [roomName, setRoomName] = useState('chat-online-status');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name !== null) {
+      setRoomName(name);
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      <ChatClientProvider client={chatClient}>
+        <ChatRoomProvider id={roomName} options={AllFeaturesEnabled}>
+          <Home />
+        </ChatRoomProvider>
+      </ChatClientProvider>
+    </div>
+  );
 }
diff --git a/examples/chat-online-status/react/src/app/layout.tsx b/examples/chat-online-status/react/src/app/layout.tsx
deleted file mode 100644
index 86fce9f5dc..0000000000
--- a/examples/chat-online-status/react/src/app/layout.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { Realtime } from 'ably';
-import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
-import { ReactNode, useEffect, useState } from 'react';
-import { faker } from '@faker-js/faker';
-import dynamic from 'next/dynamic';
-import '../../styles/styles.css';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-const realtimeClient = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: faker.person.firstName()});
-const chatClient = new ChatClient(realtimeClient);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: ReactNode;
-}>) {
-  const [roomName, setRoomName] = useState('chat-online-status');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name !== null) {
-      setRoomName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <ChatClientProvider client={chatClient}>
-          <ChatRoomProvider
-            id={roomName}
-            options={AllFeaturesEnabled}
-          >
-            {children}
-          </ChatRoomProvider>
-        </ChatClientProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/chat-online-status/react/src/env.d.ts b/examples/chat-online-status/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/chat-online-status/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/chat-online-status/react/src/index.tsx b/examples/chat-online-status/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/chat-online-status/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/chat-online-status/react/styles/styles.css b/examples/chat-online-status/react/src/styles/styles.css
similarity index 92%
rename from examples/chat-online-status/react/styles/styles.css
rename to examples/chat-online-status/react/src/styles/styles.css
index a788d5bae3..af551e2c6f 100644
--- a/examples/chat-online-status/react/styles/styles.css
+++ b/examples/chat-online-status/react/src/styles/styles.css
@@ -69,6 +69,16 @@
   height: 100vh;
 }
 
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
+
 .away-button {
   margin-top: 1rem;
   padding: 0.5rem 1rem;
diff --git a/examples/chat-online-status/react/tailwind.config.ts b/examples/chat-online-status/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-online-status/react/tailwind.config.ts
+++ b/examples/chat-online-status/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-online-status/react/tsconfig.json b/examples/chat-online-status/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/chat-online-status/react/tsconfig.json
+++ b/examples/chat-online-status/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/chat-online-status/react/vite.config.ts b/examples/chat-online-status/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/chat-online-status/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/chat-room-history/javascript/README.md b/examples/chat-room-history/javascript/README.md
index f913ca6d56..c7a2cd4ff9 100644
--- a/examples/chat-room-history/javascript/README.md
+++ b/examples/chat-room-history/javascript/README.md
@@ -10,9 +10,9 @@ Message history is available in [Ably Chat](/docs/products/chat). The Chat SDK c
 
 Use the following methods to add message history into a chat application:
 
-* [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
-* [`rooms.messages.subscribe()`](/docs/chat/rooms/history?lang=javascript#subscribe): subscribes to a room, retrieving previously sent messages while listening for future messages.
-* [`room.messages.get`](/docs/chat/rooms/history?lang=javascript#get): retrieve messages that have been previously sent to a room.
+- [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
+- [`rooms.messages.subscribe()`](/docs/chat/rooms/history?lang=javascript#subscribe): subscribes to a room, retrieving previously sent messages while listening for future messages.
+- [`room.messages.get`](/docs/chat/rooms/history?lang=javascript#get): retrieve messages that have been previously sent to a room.
 
 Find out more about [message history](/docs/chat/rooms/history?lang=javascript).
 
@@ -36,7 +36,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -54,4 +54,4 @@ yarn run chat-room-history-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-room-history/javascript/postcss.config.ts b/examples/chat-room-history/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/chat-room-history/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-history/javascript/src/script.ts b/examples/chat-room-history/javascript/src/script.ts
index 5f2137ba75..7e04ead3d1 100644
--- a/examples/chat-room-history/javascript/src/script.ts
+++ b/examples/chat-room-history/javascript/src/script.ts
@@ -1,11 +1,12 @@
 import * as Ably from 'ably';
 import { ChatClient, Message, Room, AllFeaturesEnabled } from '@ably/chat';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 import './styles.css';
 
 const realtimeClient = new Ably.Realtime({
-  clientId: faker.person.firstName(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  clientId: minifaker.firstName(),
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 // Number of times messages are sent to the chat room before the user enters the room.
 let sendCount = 0;
diff --git a/examples/chat-room-history/javascript/tailwind.config.ts b/examples/chat-room-history/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-room-history/javascript/tailwind.config.ts
+++ b/examples/chat-room-history/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-room-history/javascript/vite-env.d.ts b/examples/chat-room-history/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/chat-room-history/javascript/vite-env.d.ts
+++ b/examples/chat-room-history/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/chat-room-history/javascript/vite.config.ts b/examples/chat-room-history/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/chat-room-history/javascript/vite.config.ts
+++ b/examples/chat-room-history/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/chat-room-history/react/README.md b/examples/chat-room-history/react/README.md
index 9dba127137..b0e9406ff0 100644
--- a/examples/chat-room-history/react/README.md
+++ b/examples/chat-room-history/react/README.md
@@ -10,10 +10,10 @@ Message history is available in [Ably Chat](/docs/products/chat). The Chat SDK c
 
 Use the following components to add message history into a chat application:
 
-* [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable real-time chat functionality across the application.
-* [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and real-time interactions within that room via React context.
-* [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
-* [`useMessages()`](/docs/chat/rooms/history?lang=react#get) hook: a hook to retrieve messages that have been previously sent to a room.
+- [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable real-time chat functionality across the application.
+- [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and real-time interactions within that room via React context.
+- [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
+- [`useMessages()`](/docs/chat/rooms/history?lang=react#get) hook: a hook to retrieve messages that have been previously sent to a room.
 
 Find out more about [message history](/docs/chat/rooms/history?lang=react).
 
@@ -37,7 +37,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -55,4 +55,4 @@ yarn run chat-room-history-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-room-history/react/index.html b/examples/chat-room-history/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/chat-room-history/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/chat-room-history/react/next.config.ts b/examples/chat-room-history/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/chat-room-history/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-history/react/package.json b/examples/chat-room-history/react/package.json
index b717622263..b324b1c97f 100644
--- a/examples/chat-room-history/react/package.json
+++ b/examples/chat-room-history/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/chat-room-history/react/postcss.config.ts b/examples/chat-room-history/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/chat-room-history/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-history/react/src/App.tsx b/examples/chat-room-history/react/src/App.tsx
new file mode 100644
index 0000000000..76e7f2cfc3
--- /dev/null
+++ b/examples/chat-room-history/react/src/App.tsx
@@ -0,0 +1,38 @@
+import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
+import { Realtime } from 'ably';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
+import { useEffect, useState } from 'react';
+import './styles/styles.css';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from './Home';
+import Chat from './Chat';
+
+const realtimeClient = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: minifaker.firstName() });
+const chatClient = new ChatClient(realtimeClient);
+
+export default function App() {
+  const [roomName, setRoomName] = useState('chat-room-history');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name !== null) {
+      setRoomName(name);
+    }
+  }, []);
+
+  return (
+    <ChatClientProvider client={chatClient}>
+      <ChatRoomProvider id={roomName} options={AllFeaturesEnabled}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/chat" element={<Chat />} />
+          </Routes>
+        </BrowserRouter>
+      </ChatRoomProvider>
+    </ChatClientProvider>
+  );
+}
diff --git a/examples/chat-room-history/react/src/app/chat/page.tsx b/examples/chat-room-history/react/src/Chat.tsx
similarity index 67%
rename from examples/chat-room-history/react/src/app/chat/page.tsx
rename to examples/chat-room-history/react/src/Chat.tsx
index c687361d29..1ab7b6a340 100644
--- a/examples/chat-room-history/react/src/app/chat/page.tsx
+++ b/examples/chat-room-history/react/src/Chat.tsx
@@ -1,8 +1,6 @@
-"use client";
-
 import { Message, useMessages, useChatClient } from '@ably/chat';
-import { useEffect, useState } from 'react';
-import '../../../styles/styles.css';
+import { useState } from 'react';
+import './styles/styles.css';
 
 export default function Chat() {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -15,25 +13,25 @@ export default function Chat() {
   });
 
   const getPastMessages = () => {
-    get({ limit: 10 })
-      .then((result) => {
-        result.items.forEach(message => {
-          const messageExists = messages.some((prevMessage) => prevMessage.serial === message.serial);
+    get({ limit: 10 }).then((result) => {
+      result.items.forEach((message) => {
+        const messageExists = messages.some((prevMessage) => prevMessage.serial === message.serial);
 
-          if (messageExists) {
-            return messages;
-          }
+        if (messageExists) {
+          return messages;
+        }
 
-          setMessages((prevMessages: Message[]) => {
-            return [message, ...prevMessages];
-          });
+        setMessages((prevMessages: Message[]) => {
+          return [message, ...prevMessages];
         });
-        const loadButton = document.getElementById('load-past-messages');
-        if (loadButton instanceof HTMLButtonElement) {
-          loadButton.disabled = true;
-          loadButton.className = 'uk-btn uk-btn-md uk-btn-primary mb-4 rounded absolute top-2 left-1/2 transform -translate-x-1/2 p-2';
-        }
       });
+      const loadButton = document.getElementById('load-past-messages');
+      if (loadButton instanceof HTMLButtonElement) {
+        loadButton.disabled = true;
+        loadButton.className =
+          'uk-btn uk-btn-md uk-btn-primary mb-4 rounded absolute top-2 left-1/2 transform -translate-x-1/2 p-2';
+      }
+    });
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -58,20 +56,15 @@ export default function Chat() {
           </button>
           {messages.map((message, index) => (
             <div key={index} className="flex items-start">
-              <span className={`font-bold ${message.clientId === clientId ? "text-grey-500" : "text-blue-500"} mr-2`}>
-                {message.clientId === clientId ? "You" : message.clientId}:
-              </span>
-              <span className="text-gray-700">
-                {message.text}
+              <span className={`font-bold ${message.clientId === clientId ? 'text-grey-500' : 'text-blue-500'} mr-2`}>
+                {message.clientId === clientId ? 'You' : message.clientId}:
               </span>
+              <span className="text-gray-700">{message.text}</span>
             </div>
           ))}
         </div>
         <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
-          <form
-            className="flex"
-            onSubmit={handleSubmit}
-          >
+          <form className="flex" onSubmit={handleSubmit}>
             <input
               type="text"
               placeholder="Type something..."
@@ -81,10 +74,7 @@ export default function Chat() {
               autoFocus
             />
             <div className="items-center inset-y-0 flex ml-2">
-              <button
-                type="submit"
-                className="uk-btn uk-btn-secondary uk-border-rounded-right"
-              >
+              <button type="submit" className="uk-btn uk-btn-secondary uk-border-rounded-right">
                 Send
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/examples/chat-room-history/react/src/app/page.tsx b/examples/chat-room-history/react/src/Home.tsx
similarity index 59%
rename from examples/chat-room-history/react/src/app/page.tsx
rename to examples/chat-room-history/react/src/Home.tsx
index d19503026c..41566e7215 100644
--- a/examples/chat-room-history/react/src/app/page.tsx
+++ b/examples/chat-room-history/react/src/Home.tsx
@@ -1,21 +1,13 @@
-"use client";
-
+import { useState } from 'react';
 import { useRoom, useMessages } from '@ably/chat';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
-import '../../styles/styles.css'
+import { useNavigate } from 'react-router-dom';
+import './styles/styles.css';
 
 export default function Home() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
   const { roomStatus, connectionStatus } = useRoom();
+  const navigate = useNavigate();
   const { send } = useMessages();
-
-  useEffect(() => {
-    if (searchParams.get('loadChat') === 'true') {
-      router.push('/chat');
-    }
-  }, [searchParams, router]);
+  const [messageCount, setMessageCount] = useState(0);
 
   if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
     return <div>Loading...</div>;
@@ -23,22 +15,20 @@ export default function Home() {
 
   const generateRandomMessage = () => {
     const messages = [
-      "Hey everyone! Just joined this amazing chat.",
-      "What a beautiful day for chatting!",
-      "Hello from the other side of the screen!",
-      "Anyone here interested in web development?",
-      "I love how this chat app works!",
-      "Greetings from a random message generator!"
+      'Hey everyone! Just joined this amazing chat.',
+      'What a beautiful day for chatting!',
+      'Hello from the other side of the screen!',
+      'Anyone here interested in web development?',
+      'I love how this chat app works!',
+      'Greetings from a random message generator!',
     ];
     return messages[Math.floor(Math.random() * messages.length)];
   };
 
-  let messageCount = 0;
-
   const handleSendMessage = () => {
     const randomMessage = generateRandomMessage();
     send({ text: randomMessage });
-    messageCount++;
+    setMessageCount((prev) => prev + 1);
 
     const alert = document.createElement('div');
     alert.className = 'fixed left-1/2 top-4 -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded shadow-lg';
@@ -47,10 +37,10 @@ export default function Home() {
 
     const enterChatButton = document.getElementById('enter-chat');
 
-    if (messageCount >= 5 && enterChatButton) {
+    if (messageCount >= 4 && enterChatButton) {
       (enterChatButton as HTMLButtonElement).disabled = false;
       enterChatButton.className = 'uk-btn uk-btn-md uk-btn-primary mb-4 rounded';
-      enterChatButton.onclick = () => router.push('/chat');
+      enterChatButton.onclick = () => navigate('/chat');
     }
 
     setTimeout(() => {
@@ -65,17 +55,10 @@ export default function Home() {
           Use the 'Send message' button to send 5 messages before you enter and subscribe to the chat room.
         </h2>
         <div className="flex flex-col gap-2">
-          <button
-            onClick={handleSendMessage}
-            className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded w-full"
-          >
+          <button onClick={handleSendMessage} className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded w-full">
             Send message
           </button>
-          <button
-            id="enter-chat"
-            className="uk-btn uk-btn-md uk-btn-secondary mb-4 rounded w-full"
-            disabled
-          >
+          <button id="enter-chat" className="uk-btn uk-btn-md uk-btn-secondary mb-4 rounded w-full" disabled>
             Enter chat
           </button>
         </div>
diff --git a/examples/chat-room-history/react/src/app/layout.tsx b/examples/chat-room-history/react/src/app/layout.tsx
deleted file mode 100644
index 3135b0f3eb..0000000000
--- a/examples/chat-room-history/react/src/app/layout.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { Realtime } from 'ably';
-import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
-import { faker } from '@faker-js/faker';
-import '../../styles/styles.css'
-import { useEffect, useState } from "react";
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-const realtimeClient = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: faker.person.firstName()});
-const chatClient = new ChatClient(realtimeClient);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [roomName, setRoomName] = useState('chat-room-history');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name !== null) {
-      setRoomName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <ChatClientProvider client={chatClient}>
-          <ChatRoomProvider
-            id={roomName}
-            options={AllFeaturesEnabled}
-          >
-            {children}
-          </ChatRoomProvider>
-        </ChatClientProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/chat-room-history/react/src/env.d.ts b/examples/chat-room-history/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/chat-room-history/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/chat-room-history/react/src/index.tsx b/examples/chat-room-history/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/chat-room-history/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/auth-request-token/react/styles/styles.css b/examples/chat-room-history/react/src/styles/styles.css
similarity index 85%
rename from examples/auth-request-token/react/styles/styles.css
rename to examples/chat-room-history/react/src/styles/styles.css
index f6ee9ef952..778cb1fbfe 100644
--- a/examples/auth-request-token/react/styles/styles.css
+++ b/examples/chat-room-history/react/src/styles/styles.css
@@ -78,23 +78,3 @@ input {
   outline: none;
   transition: all 0.2s ease-in-out;
 }
-
-.container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  background-color: #f4f8fb;
-  height: 100vh;
-}
-
-input {
-  padding: 0.5rem;
-  width: 100%;
-  height: 2.5rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  outline: none;
-  transition: all 0.2s ease-in-out;
-}
diff --git a/examples/chat-room-history/react/tailwind.config.ts b/examples/chat-room-history/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-room-history/react/tailwind.config.ts
+++ b/examples/chat-room-history/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-room-history/react/tsconfig.json b/examples/chat-room-history/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/chat-room-history/react/tsconfig.json
+++ b/examples/chat-room-history/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/chat-room-history/react/vite.config.ts b/examples/chat-room-history/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/chat-room-history/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/chat-room-messages/javascript/README.md b/examples/chat-room-messages/javascript/README.md
index abb9efcc64..579e944ff9 100644
--- a/examples/chat-room-messages/javascript/README.md
+++ b/examples/chat-room-messages/javascript/README.md
@@ -12,9 +12,9 @@ Messaging is implemented using [Ably Chat](/docs/products/chat). The Chat SDK co
 
 Use the following methods to send and receive messages into a chat application:
 
-* [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
-* [`rooms.messages.subscribe()`](/docs/chat/rooms/messages?lang=javascript#subscribe): subscribes to room messages events by registering a listener. Message events are emitted when a user sends a message.
-* [`room.messages.send`](/docs/chat/rooms/messages?lang=javascript#send): Emits a message event when the user sends a message to the room.
+- [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
+- [`rooms.messages.subscribe()`](/docs/chat/rooms/messages?lang=javascript#subscribe): subscribes to room messages events by registering a listener. Message events are emitted when a user sends a message.
+- [`room.messages.send`](/docs/chat/rooms/messages?lang=javascript#send): Emits a message event when the user sends a message to the room.
 
 Find out more about [rooms](/docs/chat/rooms?lang=javascript) and [messages](/docs/chat/rooms/messages?lang=javascript).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run chat-room-messages-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-room-messages/javascript/postcss.config.ts b/examples/chat-room-messages/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/chat-room-messages/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-messages/javascript/src/script.ts b/examples/chat-room-messages/javascript/src/script.ts
index f662c32c90..e852fb1d81 100644
--- a/examples/chat-room-messages/javascript/src/script.ts
+++ b/examples/chat-room-messages/javascript/src/script.ts
@@ -6,7 +6,7 @@ const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
 const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
 const realtimeClient = new Ably.Realtime({
   clientId: mockName(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 
 let chatClient: ChatClient;
diff --git a/examples/chat-room-messages/javascript/tailwind.config.ts b/examples/chat-room-messages/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-room-messages/javascript/tailwind.config.ts
+++ b/examples/chat-room-messages/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-room-messages/javascript/vite-env.d.ts b/examples/chat-room-messages/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/chat-room-messages/javascript/vite-env.d.ts
+++ b/examples/chat-room-messages/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/chat-room-messages/javascript/vite.config.ts b/examples/chat-room-messages/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/chat-room-messages/javascript/vite.config.ts
+++ b/examples/chat-room-messages/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/chat-room-messages/react/README.md b/examples/chat-room-messages/react/README.md
index 1c52c75397..a2f9a38b09 100644
--- a/examples/chat-room-messages/react/README.md
+++ b/examples/chat-room-messages/react/README.md
@@ -12,10 +12,10 @@ Messaging is implemented using [Ably Chat](/docs/products/chat). The Chat SDK co
 
 Use the following components to send and receive messages into a chat application:
 
-* [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable realtime chat functionality across the application.
-* [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and realtime interactions within that room via React context.
-* [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
-* [`useMessages()`](/docs/chat/rooms/messages?lang=react#subscribe) hook: a hook to manage and track the messages sent by users within a chat room.
+- [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable realtime chat functionality across the application.
+- [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and realtime interactions within that room via React context.
+- [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
+- [`useMessages()`](/docs/chat/rooms/messages?lang=react#subscribe) hook: a hook to manage and track the messages sent by users within a chat room.
 
 Find out more about [rooms](/docs/chat/rooms?lang=react) and [messages](/docs/chat/rooms/messages?lang=react).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run chat-room-messages-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-room-messages/react/index.html b/examples/chat-room-messages/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/chat-room-messages/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/chat-room-messages/react/next.config.ts b/examples/chat-room-messages/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/chat-room-messages/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-messages/react/package.json b/examples/chat-room-messages/react/package.json
index c096e239bb..6bb6a74108 100644
--- a/examples/chat-room-messages/react/package.json
+++ b/examples/chat-room-messages/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/chat-room-messages/react/postcss.config.ts b/examples/chat-room-messages/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/chat-room-messages/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-messages/react/src/app/page.tsx b/examples/chat-room-messages/react/src/App.tsx
similarity index 57%
rename from examples/chat-room-messages/react/src/app/page.tsx
rename to examples/chat-room-messages/react/src/App.tsx
index 7c3d670b77..dbbc3d2944 100644
--- a/examples/chat-room-messages/react/src/app/page.tsx
+++ b/examples/chat-room-messages/react/src/App.tsx
@@ -1,22 +1,22 @@
-"use client";
+import React, { useEffect, useState } from 'react';
+import {
+  Message,
+  useRoom,
+  useMessages,
+  useChatClient,
+  ChatClient,
+  ChatClientProvider,
+  ChatRoomProvider,
+  AllFeaturesEnabled,
+} from '@ably/chat';
+import { Realtime } from 'ably';
+import './styles/styles.css';
 
-import { Message, useRoom, useMessages, useChatClient } from '@ably/chat';
-import { useState } from 'react';
-import '../../styles/styles.css'
+const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
+const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
 
-export default function Home() {
-  const { roomStatus, connectionStatus } = useRoom();
-
-  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div>
-      <Chat />
-    </div>
-  );
-}
+const realtimeClient = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: mockName() });
+const chatClient = new ChatClient(realtimeClient);
 
 const Chat = () => {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -36,27 +36,22 @@ const Chat = () => {
 
   return (
     <div id="chat-room-reactions" className="container">
-       <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
-       <div
+      <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
+        <div
           id="messages"
           className="w-96 flex flex-auto flex-col space-y-2 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch"
         >
           {messages.map((message, index) => (
             <div key={index} className="flex items-start">
-              <span className={`font-bold ${message.clientId === clientId ? "text-grey-500" : "text-blue-500"} mr-2`}>
-              {message.clientId === clientId ? "You" : message.clientId}:
-              </span>
-              <span className="text-gray-700">
-                {message.text}
+              <span className={`font-bold ${message.clientId === clientId ? 'text-grey-500' : 'text-blue-500'} mr-2`}>
+                {message.clientId === clientId ? 'You' : message.clientId}:
               </span>
+              <span className="text-gray-700">{message.text}</span>
             </div>
           ))}
         </div>
         <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
-          <form
-            className="flex"
-            onSubmit={handleSubmit}
-          >
+          <form className="flex" onSubmit={handleSubmit}>
             <input
               type="text"
               placeholder="Type something..."
@@ -66,10 +61,7 @@ const Chat = () => {
               autoFocus
             />
             <div className="items-center inset-y-0 flex ml-2">
-              <button
-                type="submit"
-                className="uk-btn uk-btn-primary uk-border-rounded-right"
-              >
+              <button type="submit" className="uk-btn uk-btn-primary uk-border-rounded-right">
                 Send
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -86,4 +78,41 @@ const Chat = () => {
       </div>
     </div>
   );
+};
+
+function ChatRoomMessagesDemo() {
+  const { roomStatus, connectionStatus } = useRoom();
+
+  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Chat />
+    </div>
+  );
+}
+
+export default function App() {
+  const [roomName, setRoomName] = useState('chat-room-messages');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name !== null) {
+      setRoomName(name);
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      <ChatClientProvider client={chatClient}>
+        <ChatRoomProvider id={roomName} options={AllFeaturesEnabled}>
+          <ChatRoomMessagesDemo />
+        </ChatRoomProvider>
+      </ChatClientProvider>
+    </div>
+  );
 }
diff --git a/examples/chat-room-messages/react/src/app/layout.tsx b/examples/chat-room-messages/react/src/app/layout.tsx
deleted file mode 100644
index f39e48bea5..0000000000
--- a/examples/chat-room-messages/react/src/app/layout.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
-import { Realtime } from 'ably';
-import '../../styles/styles.css'
-import { useEffect, useState } from "react";
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
-const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
-
-const realtimeClient = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: mockName()});
-const chatClient = new ChatClient(realtimeClient);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [roomName, setRoomName] = useState('chat-room-messages');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name !== null) {
-      setRoomName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <ChatClientProvider client={chatClient}>
-          <ChatRoomProvider
-            id={roomName}
-            options={AllFeaturesEnabled}
-          >
-            {children}
-          </ChatRoomProvider>
-        </ChatClientProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/chat-room-messages/react/src/env.d.ts b/examples/chat-room-messages/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/chat-room-messages/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/chat-room-messages/react/src/index.tsx b/examples/chat-room-messages/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/chat-room-messages/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-channel-state/react/styles/styles.css b/examples/chat-room-messages/react/src/styles/styles.css
similarity index 83%
rename from examples/pub-sub-channel-state/react/styles/styles.css
rename to examples/chat-room-messages/react/src/styles/styles.css
index 4abae025b7..778cb1fbfe 100644
--- a/examples/pub-sub-channel-state/react/styles/styles.css
+++ b/examples/chat-room-messages/react/src/styles/styles.css
@@ -58,3 +58,23 @@
     --chart-5: 340 75% 55%;
   }
 }
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/chat-room-messages/react/tailwind.config.ts b/examples/chat-room-messages/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-room-messages/react/tailwind.config.ts
+++ b/examples/chat-room-messages/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-room-messages/react/vite.config.ts b/examples/chat-room-messages/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/chat-room-messages/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/chat-room-reactions/javascript/README.md b/examples/chat-room-reactions/javascript/README.md
index 5d476f23d6..4e0968bfca 100644
--- a/examples/chat-room-reactions/javascript/README.md
+++ b/examples/chat-room-reactions/javascript/README.md
@@ -12,9 +12,9 @@ Room reactions are implemented using [Ably Chat](/docs/products/chat). The Chat
 
 Use the following methods to add room reactions into a chat application:
 
-* [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
-* [`rooms.reactions.subscribe()`](/docs/chat/rooms/reactions?lang=javascript#subscribe): subscribes to room reaction events events by registering a listener. Reaction events are emitted when a user chooses a reaction to send.
-* [`room.reactions.send`](/docs/chat/rooms/reactions?lang=javascript#send): Emits a reaction event when the user chooses a room reaction.
+- [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
+- [`rooms.reactions.subscribe()`](/docs/chat/rooms/reactions?lang=javascript#subscribe): subscribes to room reaction events events by registering a listener. Reaction events are emitted when a user chooses a reaction to send.
+- [`room.reactions.send`](/docs/chat/rooms/reactions?lang=javascript#send): Emits a reaction event when the user chooses a room reaction.
 
 Find out more about [room reactions](/docs/chat/rooms/reactions?lang=javascript).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-1. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+1. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 2. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run chat-room-reactions-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-room-reactions/javascript/index.html b/examples/chat-room-reactions/javascript/index.html
index 5f0e1e51d8..4554bf5f58 100644
--- a/examples/chat-room-reactions/javascript/index.html
+++ b/examples/chat-room-reactions/javascript/index.html
@@ -1,57 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="src/styles.css" />
-    <script type="module" src="src/script.ts"></script>
-    <title>Chat room reactions Demo</title>
-  </head>
-  <body style="font-family: 'Inter';font-size: 22px;">
-    <div id="chat-room-reactions" class="container">
-      <div class="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
-        <div
-          id="messages"
-          class="w-96 flex flex-auto flex-col space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch"
-        >
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+  <link rel="stylesheet" href="src/styles.css" />
+  <script type="module" src="src/script.ts"></script>
+  <title>Chat room reactions Demo</title>
+</head>
+
+<body style="font-family: 'Inter';font-size: 22px;">
+  <div id="chat-room-reactions" class="container">
+    <div class="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
+      <div id="messages"
+        class="w-96 flex flex-auto flex-col space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch">
+      </div>
+      <div class="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+        <div id="emoji-selector" class="emoji-selector"></div>
+        <div class="absolute right-0 bottom-[100px] mb-2 mr-2">
+          <div class="reaction-container">
+            <div id="reaction-area" class="reaction-area"></div>
+          </div>
         </div>
-        <div class="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
-          <div id="emoji-selector" class="emoji-selector"></div>
-          <div class="absolute right-0 bottom-[100px] mb-2 mr-2">
-            <div class="reaction-container">
-              <div id="reaction-area" class="reaction-area"></div>
-            </div>
+        <form class="flex">
+          <input type="text" disabled placeholder="Start typing..." class="uk-input uk-width-1-1 uk-border-rounded-left"
+            autoFocus />
+          <div class="items-center inset-y-0 flex ml-2">
+            <button disabled type="submit" class="uk-btn uk-btn-primary uk-border-rounded-right">
+              Send
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                class="h-6 w-6 ml-2 transform rotate-90">
+                <path
+                  d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z">
+                </path>
+              </svg>
+            </button>
           </div>
-          <form
-            class="flex"
-          >
-            <input
-               type="text"
-              disabled
-              placeholder="Start typing..."
-              class="uk-input uk-width-1-1 uk-border-rounded-left"
-              autoFocus
-            />
-            <div class="items-center inset-y-0 flex ml-2">
-              <button
-                disabled
-                type="submit"
-                class="uk-btn uk-btn-primary uk-border-rounded-right"
-              >
-                Send
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  class="h-6 w-6 ml-2 transform rotate-90"
-                >
-                  <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path>
-                </svg>
-              </button>
-            </div>
-          </form>
-       </div>
-     </div>
-   </div>
-  </body>
-</html>
+        </form>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/chat-room-reactions/javascript/postcss.config.ts b/examples/chat-room-reactions/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/chat-room-reactions/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-reactions/javascript/src/script.ts b/examples/chat-room-reactions/javascript/src/script.ts
index 27e0e4c7cb..e03b55f8e4 100644
--- a/examples/chat-room-reactions/javascript/src/script.ts
+++ b/examples/chat-room-reactions/javascript/src/script.ts
@@ -5,7 +5,7 @@ import './styles.css';
 
 const realtimeClient = new Ably.Realtime({
   clientId: nanoid(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 
 let room: Room;
diff --git a/examples/chat-room-reactions/javascript/tailwind.config.ts b/examples/chat-room-reactions/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-room-reactions/javascript/tailwind.config.ts
+++ b/examples/chat-room-reactions/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-room-reactions/javascript/vite-env.d.ts b/examples/chat-room-reactions/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/chat-room-reactions/javascript/vite-env.d.ts
+++ b/examples/chat-room-reactions/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/chat-room-reactions/javascript/vite.config.ts b/examples/chat-room-reactions/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/chat-room-reactions/javascript/vite.config.ts
+++ b/examples/chat-room-reactions/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/chat-room-reactions/react/README.md b/examples/chat-room-reactions/react/README.md
index aad0d2650c..f971883527 100644
--- a/examples/chat-room-reactions/react/README.md
+++ b/examples/chat-room-reactions/react/README.md
@@ -12,10 +12,10 @@ Room reactions are implemented using [Ably Chat](/docs/products/chat). The Chat
 
 Use the following components to add room reactions into a chat application:
 
-* [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable realtime chat functionality across the application.
-* [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and realtime interactions within that room via React context.
-* [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
-* [`useRoomReactions()`](/docs/chat/rooms/reactions?lang=react#subscribe) hook: a hook to manage the reactions sent by users within a chat room.
+- [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable realtime chat functionality across the application.
+- [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and realtime interactions within that room via React context.
+- [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
+- [`useRoomReactions()`](/docs/chat/rooms/reactions?lang=react#subscribe) hook: a hook to manage the reactions sent by users within a chat room.
 
 Find out more about [room reactions](/docs/chat/rooms/reactions).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run chat-room-reactions-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-room-reactions/react/index.html b/examples/chat-room-reactions/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/chat-room-reactions/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/chat-room-reactions/react/next.config.ts b/examples/chat-room-reactions/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/chat-room-reactions/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-reactions/react/package.json b/examples/chat-room-reactions/react/package.json
index b89aa8caab..4a5b370a22 100644
--- a/examples/chat-room-reactions/react/package.json
+++ b/examples/chat-room-reactions/react/package.json
@@ -1,11 +1,12 @@
 {
   "name": "chat-room-reactions-react",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.1.0",
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   }
 }
diff --git a/examples/chat-room-reactions/react/postcss.config.ts b/examples/chat-room-reactions/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/chat-room-reactions/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-room-reactions/react/src/app/page.tsx b/examples/chat-room-reactions/react/src/App.tsx
similarity index 58%
rename from examples/chat-room-reactions/react/src/app/page.tsx
rename to examples/chat-room-reactions/react/src/App.tsx
index eabdf30a11..f564e4639e 100644
--- a/examples/chat-room-reactions/react/src/app/page.tsx
+++ b/examples/chat-room-reactions/react/src/App.tsx
@@ -1,54 +1,40 @@
-"use client";
-
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
+import { Realtime } from 'ably';
 import { Reaction as ReactionInterface, useRoom, useRoomReactions } from '@ably/chat';
-import '../../styles/styles.css'
+import './styles/styles.css';
 
-export default function Home() {
-  const { roomStatus, connectionStatus } = useRoom();
+const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
+const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
 
-  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
-    return <div>Loading...</div>;
-  }
+const realtimeClient = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: mockName() });
+const chatClient = new ChatClient(realtimeClient);
 
-  return (
-    <div>
-      <Chat />
-    </div>
-  );
-}
-
-const Chat = () => {
+function Chat() {
   const [reactions, setReactions] = useState<ReactionInterface[]>([]);
-
   const emojis = ['❤️', '😲', '👍', '😊'];
 
   const { send } = useRoomReactions({
     listener: (reaction) => {
-      setReactions((prevReactions: ReactionInterface[]) => [...prevReactions, {...reaction}])
+      setReactions((prevReactions: ReactionInterface[]) => [...prevReactions, { ...reaction }]);
 
       setTimeout(() => {
-        setReactions(prevReactions => prevReactions.filter(r => r.createdAt !== reaction.createdAt));
+        setReactions((prevReactions) => prevReactions.filter((r) => r.createdAt !== reaction.createdAt));
       }, 4000);
     },
   });
 
   return (
     <div id="chat-room-reactions" className="container">
-       <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
+      <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
         <div
           id="messages"
           className="w-96 flex flex-auto flex-col space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch"
-        >
-        </div>
+        ></div>
         <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
           <div className="emoji-selector">
             {emojis.map((emoji, index) => (
-              <span
-                key={index}
-                className="emoji-btn"
-                onClick={() => send({type: emoji})}
-              >
+              <span key={index} className="emoji-btn" onClick={() => send({ type: emoji })}>
                 {emoji}
               </span>
             ))}
@@ -57,14 +43,14 @@ const Chat = () => {
             <div className="reaction-container">
               <div className="reaction-area">
                 {reactions.map((reaction, index) => (
-                  <span key={index} className="reaction">{reaction.type}</span>
+                  <span key={index} className="reaction">
+                    {reaction.type}
+                  </span>
                 ))}
               </div>
             </div>
           </div>
-          <form
-            className="flex"
-          >
+          <form className="flex">
             <input
               type="text"
               disabled={true}
@@ -73,11 +59,7 @@ const Chat = () => {
               autoFocus
             />
             <div className="items-center inset-y-0 flex ml-2">
-              <button
-                disabled={true}
-                type="submit"
-                className="uk-btn uk-btn-primary uk-border-rounded-right"
-              >
+              <button disabled={true} type="submit" className="uk-btn uk-btn-primary uk-border-rounded-right">
                 Send
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -95,3 +77,38 @@ const Chat = () => {
     </div>
   );
 }
+
+function ChatRoomReactionsDemo() {
+  const { roomStatus, connectionStatus } = useRoom();
+
+  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Chat />
+    </div>
+  );
+}
+
+export default function App() {
+  const [roomName, setRoomName] = useState('chat-room-reactions');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name !== null) {
+      setRoomName(name);
+    }
+  }, []);
+
+  return (
+    <ChatClientProvider client={chatClient}>
+      <ChatRoomProvider id={roomName} options={AllFeaturesEnabled}>
+        <ChatRoomReactionsDemo />
+      </ChatRoomProvider>
+    </ChatClientProvider>
+  );
+}
diff --git a/examples/chat-room-reactions/react/src/app/layout.tsx b/examples/chat-room-reactions/react/src/app/layout.tsx
deleted file mode 100644
index 0100c3020a..0000000000
--- a/examples/chat-room-reactions/react/src/app/layout.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled } from '@ably/chat';
-import { Realtime } from 'ably';
-import '../../styles/styles.css'
-import { useEffect, useState } from "react";
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
-const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
-
-const realtimeClient = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: mockName()});
-const chatClient = new ChatClient(realtimeClient);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [roomName, setRoomName] = useState('chat-room-reactions');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name !== null) {
-      setRoomName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <ChatClientProvider client={chatClient}>
-          <ChatRoomProvider
-            id={roomName}
-            options={AllFeaturesEnabled}
-          >
-            {children}
-          </ChatRoomProvider>
-        </ChatClientProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/chat-room-reactions/react/src/index.tsx b/examples/chat-room-reactions/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/chat-room-reactions/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-channel-messages/react/styles/styles.css b/examples/chat-room-reactions/react/src/styles/styles.css
similarity index 97%
rename from examples/pub-sub-channel-messages/react/styles/styles.css
rename to examples/chat-room-reactions/react/src/styles/styles.css
index bf0c5da581..20fdae0384 100644
--- a/examples/pub-sub-channel-messages/react/styles/styles.css
+++ b/examples/chat-room-reactions/react/src/styles/styles.css
@@ -105,7 +105,9 @@ input {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  animation: moveUp 5s linear, waveSideToSide 2s infinite;
+  animation:
+    moveUp 5s linear,
+    waveSideToSide 2s infinite;
 }
 
 .emoji-btn {
@@ -130,7 +132,8 @@ input {
 }
 
 @keyframes waveSideToSide {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateX(-50%);
   }
   25% {
diff --git a/examples/chat-room-reactions/react/tailwind.config.ts b/examples/chat-room-reactions/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-room-reactions/react/tailwind.config.ts
+++ b/examples/chat-room-reactions/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-room-reactions/react/tsconfig.json b/examples/chat-room-reactions/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/chat-room-reactions/react/tsconfig.json
+++ b/examples/chat-room-reactions/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/chat-room-reactions/react/vite.config.ts b/examples/chat-room-reactions/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/chat-room-reactions/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/chat-typing-indicator/javascript/README.md b/examples/chat-typing-indicator/javascript/README.md
index 7e285b1562..e8e82ca05a 100644
--- a/examples/chat-typing-indicator/javascript/README.md
+++ b/examples/chat-typing-indicator/javascript/README.md
@@ -12,10 +12,10 @@ Typing indicators are implemented using [Ably Chat](/docs/products/chat). The Ch
 
 Use the following methods to add typing indicators into a chat application:
 
-* [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
-* [`rooms.typing.subscribe()`](/docs/chat/rooms/typing#subscribe): subscribes to typing events by registering a listener. Typing events are emitted when a user starts typing, or when they stop typing.
-* [`room.typing.get()`](/docs/chat/rooms/typing?lang=javascript#retrieve): retrieves the list of users currently typing by their clientId.
-* [`room.typing.start()`](/docs/chat/rooms/typing?lang=javascript#set): emits a typing event that the user is currently typing, initialising the timeout which will call `room.typing.stop()` if no further events are emitted by the user.
+- [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
+- [`rooms.typing.subscribe()`](/docs/chat/rooms/typing#subscribe): subscribes to typing events by registering a listener. Typing events are emitted when a user starts typing, or when they stop typing.
+- [`room.typing.get()`](/docs/chat/rooms/typing?lang=javascript#retrieve): retrieves the list of users currently typing by their clientId.
+- [`room.typing.start()`](/docs/chat/rooms/typing?lang=javascript#set): emits a typing event that the user is currently typing, initialising the timeout which will call `room.typing.stop()` if no further events are emitted by the user.
 
 Find out more about [typing indicators](/docs/chat/rooms/typing).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run chat-typing-indicator-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-typing-indicator/javascript/index.html b/examples/chat-typing-indicator/javascript/index.html
index 7f75bda423..76d1ace58c 100644
--- a/examples/chat-typing-indicator/javascript/index.html
+++ b/examples/chat-typing-indicator/javascript/index.html
@@ -1,18 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="src/styles.css" />
-    <script type="module" src="src/script.ts"></script>
-    <title>User Typing Demo</title>
-  </head>
-  <body style="font-family: 'Inter';font-size: 22px;">
-    <div id="typing-indicator" class="container">
-      <div class="inner">
-        <input type="text" class="uk-input uk-width-1-1 uk-border-rounded-left" id="user-input" placeholder="Start typing...">
-        <label id="user-input-label" for="user-input"></label>
-      </div>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+  <link rel="stylesheet" href="src/styles.css" />
+  <script type="module" src="src/script.ts"></script>
+  <title>User Typing Demo</title>
+</head>
+
+<body style="font-family: 'Inter';font-size: 22px;">
+  <div id="typing-indicator" class="container">
+    <div class="inner">
+      <input type="text" class="uk-input uk-width-1-1 uk-border-rounded-left" id="user-input"
+        placeholder="Start typing...">
+      <label id="user-input-label" for="user-input"></label>
     </div>
-  </body>
-</html>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/chat-typing-indicator/javascript/postcss.config.ts b/examples/chat-typing-indicator/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/chat-typing-indicator/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-typing-indicator/javascript/src/script.ts b/examples/chat-typing-indicator/javascript/src/script.ts
index a165f47adc..ba43efebd2 100644
--- a/examples/chat-typing-indicator/javascript/src/script.ts
+++ b/examples/chat-typing-indicator/javascript/src/script.ts
@@ -5,7 +5,7 @@ import { nanoid } from 'nanoid';
 const names = ['Bob', 'Jane', 'John', 'Sammy'];
 const realtimeClient = new Ably.Realtime({
   clientId: names[Math.floor(Math.random() * names.length)] ?? nanoid(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 const chatClient = new ChatClient(realtimeClient);
 
diff --git a/examples/chat-typing-indicator/javascript/tailwind.config.ts b/examples/chat-typing-indicator/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-typing-indicator/javascript/tailwind.config.ts
+++ b/examples/chat-typing-indicator/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-typing-indicator/javascript/vite-env.d.ts b/examples/chat-typing-indicator/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/chat-typing-indicator/javascript/vite-env.d.ts
+++ b/examples/chat-typing-indicator/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/chat-typing-indicator/javascript/vite.config.ts b/examples/chat-typing-indicator/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/chat-typing-indicator/javascript/vite.config.ts
+++ b/examples/chat-typing-indicator/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/chat-typing-indicator/react/README.md b/examples/chat-typing-indicator/react/README.md
index dded787315..0e723c370d 100644
--- a/examples/chat-typing-indicator/react/README.md
+++ b/examples/chat-typing-indicator/react/README.md
@@ -12,10 +12,10 @@ Typing indicators are implemented using [Ably Chat](/docs/products/chat). The Ch
 
 Use the following components to add typing indicators into a chat application:
 
-* [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable realtime chat functionality across the application.
-* [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and realtime interactions within that room via React context.
-* [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
-* [`useTyping()`](/docs/chat/rooms/typing?lang=react#subscribe) hook: a hook to manage and track the typing status of users within a chat room.
+- [`ChatClientProvider`](/docs/chat/setup?lang=react#instantiate): initializes and manages a shared chat client instance, passing it down through React context to enable realtime chat functionality across the application.
+- [`ChatRoomProvider`](/docs/chat/rooms?lang=react#create): manages the state and functionality of a specific chat room, providing access to messages, participants, and realtime interactions within that room via React context.
+- [`useRoom()`](/docs/chat/rooms?lang=react#create) hook: a hook to manage the state and interaction for a chat “room”, allowing users to join, send messages, listen for messages, and use the other chat functions such as typing indicators.
+- [`useTyping()`](/docs/chat/rooms/typing?lang=react#subscribe) hook: a hook to manage and track the typing status of users within a chat room.
 
 Find out more about [typing indicators](/docs/chat/rooms/typing).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run chat-typing-indicator-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/chat-typing-indicator/react/index.html b/examples/chat-typing-indicator/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/chat-typing-indicator/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/chat-typing-indicator/react/next.config.ts b/examples/chat-typing-indicator/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/chat-typing-indicator/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-typing-indicator/react/package.json b/examples/chat-typing-indicator/react/package.json
index 5c75325477..f526c34533 100644
--- a/examples/chat-typing-indicator/react/package.json
+++ b/examples/chat-typing-indicator/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/chat-typing-indicator/react/postcss.config.ts b/examples/chat-typing-indicator/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/chat-typing-indicator/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/chat-typing-indicator/react/src/App.tsx b/examples/chat-typing-indicator/react/src/App.tsx
new file mode 100644
index 0000000000..b78e799157
--- /dev/null
+++ b/examples/chat-typing-indicator/react/src/App.tsx
@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react';
+import {
+  TypingEvent,
+  useChatClient,
+  useRoom,
+  useTyping,
+  ChatClient,
+  ChatClientProvider,
+  ChatRoomProvider,
+  AllFeaturesEnabled,
+  TypingOptions,
+} from '@ably/chat';
+import { Realtime } from 'ably';
+import './styles/styles.css';
+
+const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
+const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
+
+const realtimeClient = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: mockName() });
+const chatClient = new ChatClient(realtimeClient);
+
+const typingOptions: TypingOptions = {
+  timeoutMs: 5000,
+};
+
+const Loading = () => <div>Loading...</div>;
+
+const ChatInput = () => {
+  const { start, currentlyTyping } = useTyping({
+    listener: (typingEvent: TypingEvent) => {
+      console.log('Typing event received: ', typingEvent);
+    },
+  });
+  const { clientId } = useChatClient();
+
+  const typingClientIds = Array.from(currentlyTyping).filter((id) => id !== clientId);
+  const clientsTyping = typingClientIds.join(' and ');
+  const typingIndicatorText = clientsTyping
+    ? `${clientsTyping} ${typingClientIds.length === 1 ? 'is' : 'are'} typing`
+    : '';
+
+  return (
+    <div id="typing-indicator" className="container">
+      <div className="inner">
+        <input
+          type="text"
+          id="user-input"
+          className="uk-input uk-width-1-1 uk-border-rounded-left"
+          placeholder="Start typing..."
+          onKeyDown={start}
+        />
+        <label id="user-input-label" htmlFor="user-input">
+          {typingIndicatorText}
+        </label>
+      </div>
+    </div>
+  );
+};
+
+function ChatApp() {
+  const { roomStatus, connectionStatus } = useRoom();
+
+  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
+    return <Loading />;
+  }
+
+  return (
+    <div>
+      <ChatInput />
+    </div>
+  );
+}
+
+export default function App() {
+  const [roomName, setRoomName] = useState('chat-typing-indicator');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name !== null) {
+      setRoomName(name);
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      <ChatClientProvider client={chatClient}>
+        <ChatRoomProvider
+          id={roomName}
+          options={{
+            ...AllFeaturesEnabled,
+            typing: typingOptions,
+          }}
+        >
+          <ChatApp />
+        </ChatRoomProvider>
+      </ChatClientProvider>
+    </div>
+  );
+}
diff --git a/examples/chat-typing-indicator/react/src/app/layout.tsx b/examples/chat-typing-indicator/react/src/app/layout.tsx
deleted file mode 100644
index 710d850e76..0000000000
--- a/examples/chat-typing-indicator/react/src/app/layout.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { Realtime } from 'ably';
-import { ChatClient, ChatClientProvider, ChatRoomProvider, AllFeaturesEnabled, TypingOptions } from '@ably/chat';
-import { useEffect, useState } from "react";
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-const mockNames = ['Bob', 'Jane', 'John', 'Sammy'];
-const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
-
-const realtimeClient = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: mockName()});
-const chatClient = new ChatClient(realtimeClient);
-
-const typingOptions: TypingOptions = {
-  timeoutMs: 5000,
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [roomName, setRoomName] = useState('chat-typing-indicator');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name !== null) {
-      setRoomName(name);
-    }
-  }, []);
-
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <ChatClientProvider client={chatClient}>
-          <ChatRoomProvider
-            id={roomName}
-            options={{
-              ...AllFeaturesEnabled,
-              typing: typingOptions
-            }}
-          >
-            {children}
-          </ChatRoomProvider>
-        </ChatClientProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/chat-typing-indicator/react/src/app/page.tsx b/examples/chat-typing-indicator/react/src/app/page.tsx
deleted file mode 100644
index c3178fbdf0..0000000000
--- a/examples/chat-typing-indicator/react/src/app/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { TypingEvent, useChatClient, useRoom, useTyping } from '@ably/chat';
-import '../../styles/styles.css'
-
-const Loading = () => <div>Loading...</div>;
-
-const ChatInput = () => {
-  const {start, currentlyTyping } = useTyping({
-    listener: (typingEvent: TypingEvent) => {
-      console.log('Typing event received: ', typingEvent);
-    },
-  });
-  const { clientId } = useChatClient();
-
-  const typingClientIds = Array.from(currentlyTyping).filter((id) => id !== clientId);
-  const clientsTyping = typingClientIds.join(' and ');
-  const typingIndicatorText = clientsTyping ? `${clientsTyping} ${typingClientIds.length === 1 ? 'is' : 'are'} typing` : '';
-
-  return (
-    <div id="typing-indicator" className="container">
-      <div className="inner">
-        <input
-          type="text"
-          id="user-input"
-          className="uk-input uk-width-1-1 uk-border-rounded-left"
-          placeholder="Start typing..."
-          onKeyDown={start}
-        />
-        <label id="user-input-label" htmlFor="user-input">
-          {typingIndicatorText}
-        </label>
-      </div>
-    </div>
-  );
-}
-
-export default function ChatApp() {
-  const { roomStatus, connectionStatus } = useRoom();
-
-  if (roomStatus !== 'attached' || connectionStatus !== 'connected') {
-    return <Loading />;
-  }
-
-  return (
-    <div>
-      <ChatInput />
-    </div>
-  );
-}
diff --git a/examples/chat-typing-indicator/react/src/env.d.ts b/examples/chat-typing-indicator/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/chat-typing-indicator/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/chat-typing-indicator/react/src/index.tsx b/examples/chat-typing-indicator/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/chat-typing-indicator/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/chat-typing-indicator/react/styles/styles.css b/examples/chat-typing-indicator/react/src/styles/styles.css
similarity index 100%
rename from examples/chat-typing-indicator/react/styles/styles.css
rename to examples/chat-typing-indicator/react/src/styles/styles.css
index 946d43bde8..ae5fd8f541 100644
--- a/examples/chat-typing-indicator/react/styles/styles.css
+++ b/examples/chat-typing-indicator/react/src/styles/styles.css
@@ -69,6 +69,16 @@
   height: 100vh;
 }
 
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
+
 .inner {
   width: 100%;
   max-width: 320px;
@@ -103,13 +113,3 @@ label {
   font-weight: 500;
   color: black;
 }
-
-input {
-  padding: 0.5rem;
-  width: 100%;
-  height: 2.5rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  outline: none;
-  transition: all 0.2s ease-in-out;
-}
diff --git a/examples/chat-typing-indicator/react/tailwind.config.ts b/examples/chat-typing-indicator/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/chat-typing-indicator/react/tailwind.config.ts
+++ b/examples/chat-typing-indicator/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/chat-typing-indicator/react/tsconfig.json b/examples/chat-typing-indicator/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/chat-typing-indicator/react/tsconfig.json
+++ b/examples/chat-typing-indicator/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/chat-typing-indicator/react/vite.config.ts b/examples/chat-typing-indicator/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/chat-typing-indicator/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/next.config.ts b/examples/next.config.ts
deleted file mode 100644
index fb0d97d3bb..0000000000
--- a/examples/next.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { NextConfig } from 'next';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(process.cwd(), '../../.env.local') });
-
-const baseConfig: NextConfig = {
-  reactStrictMode: false,
-  env: {
-    NEXT_PUBLIC_ABLY_KEY: process.env.NEXT_PUBLIC_ABLY_KEY,
-  },
-};
-
-export default baseConfig;
diff --git a/examples/package.json b/examples/package.json
index 94d8d3bc7f..14e87eaae9 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -88,36 +88,36 @@
   "dependencies": {
     "@ably/chat": "^0.5.0",
     "@ably/spaces": "^0.4.0",
-    "@tailwindcss/postcss": "^4.0.14",
     "ably": "^2.5.0",
     "cors": "^2.8.5",
-    "franken-ui": "^2.0.0-internal.42",
+    "franken-ui": "^2.0.0",
+    "minifaker": "^1.34.1",
     "nanoid": "^5.0.7",
-    "next": "^15",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-sort-media-queries": "^5.2.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.4.0",
-    "ts-node": "^10.9.2",
+    "react-router-dom": "^6.22.2",
     "uikit": "^3.7.0",
-    "usehooks-ts": "^3.1.0",
-    "vite": "^5.4.2"
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "@faker-js/faker": "^9.2.0",
+    "@tailwindcss/postcss": "^4.0.14",
     "@types/express": "^5.0.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uikit": "^3.7.0",
-    "autoprefixer": "^10.4.20",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.21",
     "dotenv": "^16.4.5",
     "eslint": "^8",
-    "eslint-config-next": "15.0.3",
     "express": "^4.21.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "postcss": "^8.5.3",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-load-config": "^6.0.1",
+    "tailwindcss": "3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5",
+    "vite": "4"
   }
 }
diff --git a/examples/postcss.config.ts b/examples/postcss.config.mts
similarity index 52%
rename from examples/postcss.config.ts
rename to examples/postcss.config.mts
index 8347fed650..e25555e645 100644
--- a/examples/postcss.config.ts
+++ b/examples/postcss.config.mts
@@ -2,6 +2,9 @@ const baseConfig = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'franken-ui/postcss/combine-duplicated-selectors': {
+      removeDuplicatedProperties: true,
+    },
   },
 };
 
diff --git a/examples/pub-sub-channel-messages/javascript/README.md b/examples/pub-sub-channel-messages/javascript/README.md
index 8aedcdfb3e..720f14cf34 100644
--- a/examples/pub-sub-channel-messages/javascript/README.md
+++ b/examples/pub-sub-channel-messages/javascript/README.md
@@ -12,9 +12,9 @@ Messaging is implemented using [Ably Pub/Sub](/docs/channels/messages). The Pub/
 
 Use the following methods to send and receive messages in a pub/sub application:
 
-* [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
-* [`channel.subscribe()`](/docs/channels#subscribe): subscribes to channel messages events by registering a listener. Message events are emitted when a user publishes a message.
-* [`channel.publish`](/docs/channels#publish): emits a message event when the user publishes a message to the channel.
+- [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
+- [`channel.subscribe()`](/docs/channels#subscribe): subscribes to channel messages events by registering a listener. Message events are emitted when a user publishes a message.
+- [`channel.publish`](/docs/channels#publish): emits a message event when the user publishes a message to the channel.
 
 Find out more about [channels](/docs/channels) and [messages](/docs/channels/messages).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run pub-sub-channel-messages-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-channel-messages/javascript/postcss.config.ts b/examples/pub-sub-channel-messages/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-channel-messages/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-channel-messages/javascript/src/script.ts b/examples/pub-sub-channel-messages/javascript/src/script.ts
index 79f5d6e739..901c6c83bc 100644
--- a/examples/pub-sub-channel-messages/javascript/src/script.ts
+++ b/examples/pub-sub-channel-messages/javascript/src/script.ts
@@ -4,7 +4,7 @@ import './styles.css';
 
 const client = new Ably.Realtime({
   clientId: nanoid(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 
 let headlines = [
diff --git a/examples/pub-sub-channel-messages/javascript/tailwind.config.ts b/examples/pub-sub-channel-messages/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-channel-messages/javascript/tailwind.config.ts
+++ b/examples/pub-sub-channel-messages/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-channel-messages/javascript/vite-env.d.ts b/examples/pub-sub-channel-messages/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-channel-messages/javascript/vite-env.d.ts
+++ b/examples/pub-sub-channel-messages/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-channel-messages/javascript/vite.config.ts b/examples/pub-sub-channel-messages/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-channel-messages/javascript/vite.config.ts
+++ b/examples/pub-sub-channel-messages/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-channel-messages/react/README.md b/examples/pub-sub-channel-messages/react/README.md
index 19044ee442..315c8237b5 100644
--- a/examples/pub-sub-channel-messages/react/README.md
+++ b/examples/pub-sub-channel-messages/react/README.md
@@ -12,10 +12,10 @@ Messaging is implemented using [Ably Pub/Sub](/docs/channels/messages). The Pub/
 
 Use the following components to send and receive messages in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, members, and realtime interactions within that channel via React context.
-* [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook to manage the state and interaction for a channel, allowing users to join, send messages, and listen for messages.
-* [`publish()`](/docs/getting-started/react#useChannel) function: a function to publish messages to the specified channel.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, members, and realtime interactions within that channel via React context.
+- [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook to manage the state and interaction for a channel, allowing users to join, send messages, and listen for messages.
+- [`publish()`](/docs/getting-started/react#useChannel) function: a function to publish messages to the specified channel.
 
 Find out more about [channels](/docs/channels) and [messages](/docs/channels/messages).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run pub-sub-channel-messages-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-channel-messages/react/index.html b/examples/pub-sub-channel-messages/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-channel-messages/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-channel-messages/react/next.config.ts b/examples/pub-sub-channel-messages/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-channel-messages/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-channel-messages/react/package.json b/examples/pub-sub-channel-messages/react/package.json
index 856f0a4574..5ee5cfa01a 100644
--- a/examples/pub-sub-channel-messages/react/package.json
+++ b/examples/pub-sub-channel-messages/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-channel-messages/react/postcss.config.ts b/examples/pub-sub-channel-messages/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-channel-messages/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-channel-messages/react/src/app/page.tsx b/examples/pub-sub-channel-messages/react/src/App.tsx
similarity index 50%
rename from examples/pub-sub-channel-messages/react/src/app/page.tsx
rename to examples/pub-sub-channel-messages/react/src/App.tsx
index d9bd2822d3..fc22a2fabb 100644
--- a/examples/pub-sub-channel-messages/react/src/app/page.tsx
+++ b/examples/pub-sub-channel-messages/react/src/App.tsx
@@ -1,7 +1,9 @@
-'use client'
-
 import { useState } from 'react';
 import { useChannel } from 'ably/react';
+import { Realtime } from 'ably';
+import { AblyProvider, ChannelProvider } from 'ably/react';
+import { nanoid } from 'nanoid';
+import './styles/styles.css';
 
 interface Message {
   text: string;
@@ -9,36 +11,34 @@ interface Message {
 }
 
 const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
+const channelName = urlParams.get('name') || 'pub-sub-channel-messages';
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: nanoid() });
 
-export default function Home() {
+function ChannelMessages() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [headlines, setHeadlines] = useState([
-    "AI Breakthrough: New Model Achieves Human-Level Understanding in Complex Tasks",
-    "SpaceX Successfully Launches 100th Mission to Mars",
-    "Quantum Computing Milestone: 1000 Qubit Processor Unveiled",
-    "Revolutionary Battery Technology Promises Week-Long Phone Charge",
-    "Web4 Protocol Introduces Decentralized Neural Networks",
-    "Flying Cars Get FAA Approval for Urban Transportation",
-    "Scientists Develop Self-Healing Smartphone Screens",
-    "Blockchain Technology Revolutionizes Global Supply Chain",
-    "New Chip Architecture Doubles Computing Power While Halving Energy Use",
-    "Virtual Reality Breakthrough: Neural Interface Allows Direct Brain Connection"
+    'AI Breakthrough: New Model Achieves Human-Level Understanding in Complex Tasks',
+    'SpaceX Successfully Launches 100th Mission to Mars',
+    'Quantum Computing Milestone: 1000 Qubit Processor Unveiled',
+    'Revolutionary Battery Technology Promises Week-Long Phone Charge',
+    'Web4 Protocol Introduces Decentralized Neural Networks',
+    'Flying Cars Get FAA Approval for Urban Transportation',
+    'Scientists Develop Self-Healing Smartphone Screens',
+    'Blockchain Technology Revolutionizes Global Supply Chain',
+    'New Chip Architecture Doubles Computing Power While Halving Energy Use',
+    'Virtual Reality Breakthrough: Neural Interface Allows Direct Brain Connection',
   ]);
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
 
-  const { publish } = useChannel(urlParams.get('name') || 'pub-sub-channel-messages', (message) => {
-    setMessages(prev => [{ text: message.data, isNew: true }, ...prev]);
+  const { publish } = useChannel(channelName, (message) => {
+    setMessages((prev) => [{ text: message.data, isNew: true }, ...prev]);
 
     setTimeout(() => {
-      setMessages(prev =>
-        prev.map(msg =>
-          msg.text === message.data ? { ...msg, isNew: false } : msg
-        )
-      );
+      setMessages((prev) => prev.map((msg) => (msg.text === message.data ? { ...msg, isNew: false } : msg)));
     }, 5000);
   });
 
-
   const publishHeadline = async () => {
     if (headlines.length === 0) {
       setIsButtonDisabled(true);
@@ -46,13 +46,13 @@ export default function Home() {
       publishButton.className = 'bg-gray-500 text-white px-4 py-2 rounded';
 
       return;
-    };
+    }
 
     const randomIndex = Math.floor(Math.random() * headlines.length);
     const selectedHeadline = headlines[randomIndex];
 
     await publish('headline', selectedHeadline);
-    setHeadlines(prev => prev.filter((_, index) => index !== randomIndex));
+    setHeadlines((prev) => prev.filter((_, index) => index !== randomIndex));
   };
 
   return (
@@ -71,9 +71,7 @@ export default function Home() {
           {messages.map((msg, index) => (
             <div key={index} className="p-3 bg-gray-50 rounded-lg flex items-center gap-2">
               {msg.isNew && (
-                <span className="bg-green-500 text-white text-xs px-2 py-1 rounded-full font-bold">
-                  NEW
-                </span>
+                <span className="bg-green-500 text-white text-xs px-2 py-1 rounded-full font-bold">NEW</span>
               )}
               <span>{msg.text}</span>
             </div>
@@ -81,9 +79,17 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="text-sm text-gray-500">
-        Headlines remaining: {headlines.length}
-      </div>
+      <div className="text-sm text-gray-500">Headlines remaining: {headlines.length}</div>
     </div>
   );
 }
+
+export default function App() {
+  return (
+    <AblyProvider client={client}>
+      <ChannelProvider channelName={channelName}>
+        <ChannelMessages />
+      </ChannelProvider>
+    </AblyProvider>
+  );
+}
diff --git a/examples/pub-sub-channel-messages/react/src/app/layout.tsx b/examples/pub-sub-channel-messages/react/src/app/layout.tsx
deleted file mode 100644
index 63cf18a0e0..0000000000
--- a/examples/pub-sub-channel-messages/react/src/app/layout.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { Realtime } from 'ably';
-import { AblyProvider, ChannelProvider } from 'ably/react';
-import { nanoid } from 'nanoid';
-import '../../styles/styles.css';
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-const client = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: nanoid()});
-const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
-const channelName = urlParams.get('name') || 'pub-sub-channel-messages';
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <AblyProvider client={client}>
-          <ChannelProvider channelName={channelName}>
-            {children}
-          </ChannelProvider>
-        </AblyProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-channel-messages/react/src/env.d.ts b/examples/pub-sub-channel-messages/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-channel-messages/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-channel-messages/react/src/index.tsx b/examples/pub-sub-channel-messages/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-channel-messages/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/chat-room-reactions/react/styles/styles.css b/examples/pub-sub-channel-messages/react/src/styles/styles.css
similarity index 97%
rename from examples/chat-room-reactions/react/styles/styles.css
rename to examples/pub-sub-channel-messages/react/src/styles/styles.css
index bf0c5da581..20fdae0384 100644
--- a/examples/chat-room-reactions/react/styles/styles.css
+++ b/examples/pub-sub-channel-messages/react/src/styles/styles.css
@@ -105,7 +105,9 @@ input {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  animation: moveUp 5s linear, waveSideToSide 2s infinite;
+  animation:
+    moveUp 5s linear,
+    waveSideToSide 2s infinite;
 }
 
 .emoji-btn {
@@ -130,7 +132,8 @@ input {
 }
 
 @keyframes waveSideToSide {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateX(-50%);
   }
   25% {
diff --git a/examples/pub-sub-channel-messages/react/tailwind.config.ts b/examples/pub-sub-channel-messages/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-channel-messages/react/tailwind.config.ts
+++ b/examples/pub-sub-channel-messages/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-channel-messages/react/tsconfig.json b/examples/pub-sub-channel-messages/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-channel-messages/react/tsconfig.json
+++ b/examples/pub-sub-channel-messages/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-channel-messages/react/vite.config.ts b/examples/pub-sub-channel-messages/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-channel-messages/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/pub-sub-channel-state/javascript/README.md b/examples/pub-sub-channel-state/javascript/README.md
index a9f4d5a2b2..9cc50e055b 100644
--- a/examples/pub-sub-channel-state/javascript/README.md
+++ b/examples/pub-sub-channel-state/javascript/README.md
@@ -10,8 +10,8 @@ Channel states is implemented using [Ably Pub/Sub](/docs/). The Pub/Sub SDK prov
 
 Use the following components to manage the channel state in a pub/sub application:
 
-* [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
-* [`channel.on()`](/docs/channels/states?lang=javascript): subscribes to the channel state events of your client by registering a listener.
+- [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
+- [`channel.on()`](/docs/channels/states?lang=javascript): subscribes to the channel state events of your client by registering a listener.
 
 Find out more about [channel states](/docs/channels/states).
 
@@ -35,7 +35,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -53,4 +53,4 @@ yarn run pub-sub-channel-state-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-channel-state/javascript/postcss.config.ts b/examples/pub-sub-channel-state/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-channel-state/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-channel-state/javascript/src/script.ts b/examples/pub-sub-channel-state/javascript/src/script.ts
index 01629b185f..4fd76d73d6 100644
--- a/examples/pub-sub-channel-state/javascript/src/script.ts
+++ b/examples/pub-sub-channel-state/javascript/src/script.ts
@@ -9,7 +9,7 @@ const urlParams = new URLSearchParams(window.location.search);
 const connect = () => {
   // Initialises a new client instance with the Ably key and client ID.
   const newClient = new Ably.Realtime({
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+    key: import.meta.env.VITE_ABLY_KEY as string,
     clientId: nanoid(),
   });
 
diff --git a/examples/pub-sub-channel-state/javascript/tailwind.config.ts b/examples/pub-sub-channel-state/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-channel-state/javascript/tailwind.config.ts
+++ b/examples/pub-sub-channel-state/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-channel-state/javascript/vite-env.d.ts b/examples/pub-sub-channel-state/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-channel-state/javascript/vite-env.d.ts
+++ b/examples/pub-sub-channel-state/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-channel-state/javascript/vite.config.ts b/examples/pub-sub-channel-state/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-channel-state/javascript/vite.config.ts
+++ b/examples/pub-sub-channel-state/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-channel-state/react/README.md b/examples/pub-sub-channel-state/react/README.md
index fc311835c2..22818de749 100644
--- a/examples/pub-sub-channel-state/react/README.md
+++ b/examples/pub-sub-channel-state/react/README.md
@@ -10,9 +10,9 @@ Channel states is implemented using [Ably Pub/Sub](/docs/). The Pub/Sub SDK prov
 
 Use the following components to manage the channel state in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`ChannelProvider`](/docs/getting-started/react#channel-provider): initializes and manages a shared channel instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`useChannelStateListener`](/docs/getting-started/react#useChannelStateListener): creates a subscriber to be notified of channel state changes.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`ChannelProvider`](/docs/getting-started/react#channel-provider): initializes and manages a shared channel instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`useChannelStateListener`](/docs/getting-started/react#useChannelStateListener): creates a subscriber to be notified of channel state changes.
 
 Find out more about [channel states](/docs/channels/states).
 
@@ -36,7 +36,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -54,4 +54,4 @@ yarn run pub-sub-channel-state-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-channel-state/react/index.html b/examples/pub-sub-channel-state/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-channel-state/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-channel-state/react/next.config.ts b/examples/pub-sub-channel-state/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-channel-state/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-channel-state/react/package.json b/examples/pub-sub-channel-state/react/package.json
index 4dc1c88c50..395b60fb85 100644
--- a/examples/pub-sub-channel-state/react/package.json
+++ b/examples/pub-sub-channel-state/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-channel-state/react/postcss.config.ts b/examples/pub-sub-channel-state/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-channel-state/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-channel-state/react/src/app/page.tsx b/examples/pub-sub-channel-state/react/src/App.tsx
similarity index 51%
rename from examples/pub-sub-channel-state/react/src/app/page.tsx
rename to examples/pub-sub-channel-state/react/src/App.tsx
index 1def2c0c51..fd67317af7 100644
--- a/examples/pub-sub-channel-state/react/src/app/page.tsx
+++ b/examples/pub-sub-channel-state/react/src/App.tsx
@@ -1,9 +1,13 @@
-'use client'
-
 import { useEffect, useState } from 'react';
 import { useChannel, useChannelStateListener } from 'ably/react';
+import { Realtime } from 'ably';
+import { AblyProvider, ChannelProvider } from 'ably/react';
+import { nanoid } from 'nanoid';
+import './styles/styles.css';
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: nanoid() });
 
-export default function Home() {
+function ChannelState() {
   const [isAttached, setIsAttached] = useState(false);
   const [channelStates, setChannelStates] = useState<string[]>([]);
   const [channelName, setChannelName] = useState('pub-sub-channel-state');
@@ -17,9 +21,12 @@ export default function Home() {
     }
   }, []);
 
-  useChannelStateListener({channelName}, (stateChange) => {
+  useChannelStateListener({ channelName }, (stateChange) => {
     const timestamp = new Date().toLocaleTimeString();
-    setChannelStates((prevStates) => [`[${timestamp}] State changed: ${stateChange.previous} to ${stateChange.current}`, ...prevStates]);
+    setChannelStates((prevStates) => [
+      `[${timestamp}] State changed: ${stateChange.previous} to ${stateChange.current}`,
+      ...prevStates,
+    ]);
     if (stateChange.current === 'attached') {
       setIsAttached(true);
     } else {
@@ -42,28 +49,41 @@ export default function Home() {
       <h2 className="flex justify-center items-center text-xl font-bold mb-4">Controlling the channel state</h2>
       {isAttached ? (
         <div className="flex justify-center items-center">
-          <button
-            onClick={handleDetach}
-            className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded"
-          >
+          <button onClick={handleDetach} className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded">
             Click to detach
           </button>
         </div>
       ) : (
         <div className="flex justify-center items-center">
-          <button
-            onClick={handleAttach}
-            className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded"
-          >
+          <button onClick={handleAttach} className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded">
             Click to attach
           </button>
         </div>
       )}
-      <textarea
-        readOnly
-        value={channelStates.join('\n')}
-        className="w-full h-40 p-2 border rounded"
-      />
+      <textarea readOnly value={channelStates.join('\n')} className="w-full h-40 p-2 border rounded" />
+    </div>
+  );
+}
+
+export default function App() {
+  const [channelName, setChannelName] = useState('pub-sub-channel-state');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name) {
+      setChannelName(name);
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <AblyProvider client={client}>
+        <ChannelProvider channelName={channelName}>
+          <ChannelState />
+        </ChannelProvider>
+      </AblyProvider>
     </div>
   );
 }
diff --git a/examples/pub-sub-channel-state/react/src/app/layout.tsx b/examples/pub-sub-channel-state/react/src/app/layout.tsx
deleted file mode 100644
index d8d4d08c99..0000000000
--- a/examples/pub-sub-channel-state/react/src/app/layout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { Realtime } from 'ably';
-import { AblyProvider, ChannelProvider } from 'ably/react';
-import { nanoid } from 'nanoid';
-import '../../styles/styles.css';
-import { useEffect, useState } from "react";
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-const client = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: nanoid()});
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [channelName, setChannelName] = useState('pub-sub-channel-state');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name) {
-      setChannelName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <AblyProvider client={client}>
-          <ChannelProvider channelName={channelName}>
-            {children}
-          </ChannelProvider>
-        </AblyProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-channel-state/react/src/env.d.ts b/examples/pub-sub-channel-state/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-channel-state/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-channel-state/react/src/index.tsx b/examples/pub-sub-channel-state/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-channel-state/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-connection-state/react/styles/styles.css b/examples/pub-sub-channel-state/react/src/styles/styles.css
similarity index 83%
rename from examples/pub-sub-connection-state/react/styles/styles.css
rename to examples/pub-sub-channel-state/react/src/styles/styles.css
index 4abae025b7..778cb1fbfe 100644
--- a/examples/pub-sub-connection-state/react/styles/styles.css
+++ b/examples/pub-sub-channel-state/react/src/styles/styles.css
@@ -58,3 +58,23 @@
     --chart-5: 340 75% 55%;
   }
 }
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/pub-sub-channel-state/react/tailwind.config.ts b/examples/pub-sub-channel-state/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-channel-state/react/tailwind.config.ts
+++ b/examples/pub-sub-channel-state/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-channel-state/react/tsconfig.json b/examples/pub-sub-channel-state/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-channel-state/react/tsconfig.json
+++ b/examples/pub-sub-channel-state/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-channel-state/react/vite.config.ts b/examples/pub-sub-channel-state/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-channel-state/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/pub-sub-connection-state/javascript/README.md b/examples/pub-sub-connection-state/javascript/README.md
index e8ae196623..d1faaf9add 100644
--- a/examples/pub-sub-connection-state/javascript/README.md
+++ b/examples/pub-sub-connection-state/javascript/README.md
@@ -10,7 +10,7 @@ Connection states is implemented using [Ably Pub/Sub](/docs/auth). The Pub/Sub S
 
 Use the following components to manage the connection state in a pub/sub application:
 
-* [`client.connection.on()`](/docs/connect/states#listen): subscribes to the connection state events of your client by registering a listener.
+- [`client.connection.on()`](/docs/connect/states#listen): subscribes to the connection state events of your client by registering a listener.
 
 Find out more about [connection states](/docs/connect/states).
 
@@ -34,7 +34,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -52,4 +52,4 @@ yarn run pub-sub-connection-state-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-connection-state/javascript/postcss.config.ts b/examples/pub-sub-connection-state/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-connection-state/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-connection-state/javascript/src/script.ts b/examples/pub-sub-connection-state/javascript/src/script.ts
index a0bd3c5321..0e0c78ef43 100644
--- a/examples/pub-sub-connection-state/javascript/src/script.ts
+++ b/examples/pub-sub-connection-state/javascript/src/script.ts
@@ -5,7 +5,7 @@ let client: Ably.Realtime | null = null;
 
 const connect = () => {
   const newClient = new Ably.Realtime({
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+    key: import.meta.env.VITE_ABLY_KEY as string,
     clientId: nanoid(),
   });
 
diff --git a/examples/pub-sub-connection-state/javascript/tailwind.config.ts b/examples/pub-sub-connection-state/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-connection-state/javascript/tailwind.config.ts
+++ b/examples/pub-sub-connection-state/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-connection-state/javascript/vite-env.d.ts b/examples/pub-sub-connection-state/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-connection-state/javascript/vite-env.d.ts
+++ b/examples/pub-sub-connection-state/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-connection-state/javascript/vite.config.ts b/examples/pub-sub-connection-state/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-connection-state/javascript/vite.config.ts
+++ b/examples/pub-sub-connection-state/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-connection-state/react/README.md b/examples/pub-sub-connection-state/react/README.md
index 9c8153991b..209d5398da 100644
--- a/examples/pub-sub-connection-state/react/README.md
+++ b/examples/pub-sub-connection-state/react/README.md
@@ -10,7 +10,7 @@ Connection states is implemented using [Ably Pub/Sub](/docs/auth). The Pub/Sub S
 
 Use the following components to manage the connection state in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
 
 Find out more about [connection states](/docs/connect/states).
 
@@ -34,7 +34,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -52,4 +52,4 @@ yarn run pub-sub-connection-state-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-connection-state/react/index.html b/examples/pub-sub-connection-state/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-connection-state/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-connection-state/react/next.config.ts b/examples/pub-sub-connection-state/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-connection-state/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-connection-state/react/package.json b/examples/pub-sub-connection-state/react/package.json
index 6f12b7704c..9b1cf37dc9 100644
--- a/examples/pub-sub-connection-state/react/package.json
+++ b/examples/pub-sub-connection-state/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-connection-state/react/postcss.config.ts b/examples/pub-sub-connection-state/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-connection-state/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-connection-state/react/src/app/page.tsx b/examples/pub-sub-connection-state/react/src/App.tsx
similarity index 77%
rename from examples/pub-sub-connection-state/react/src/app/page.tsx
rename to examples/pub-sub-connection-state/react/src/App.tsx
index 7499a0e968..c5ec8c3f74 100644
--- a/examples/pub-sub-connection-state/react/src/app/page.tsx
+++ b/examples/pub-sub-connection-state/react/src/App.tsx
@@ -1,11 +1,33 @@
-'use client'
-
 import { useEffect, useState } from 'react';
 import { Realtime } from 'ably';
 import { AblyProvider, useConnectionStateListener } from 'ably/react';
 import { nanoid } from 'nanoid';
+import './styles/styles.css';
+
+function ConnectionStateComponent({
+  onDisconnect,
+  setConnectionState,
+}: {
+  onDisconnect: () => void;
+  setConnectionState: (state: string) => void;
+}) {
+  useConnectionStateListener((stateChange) => {
+    setConnectionState(stateChange.current);
+    console.log(`Connection state changed to: ${stateChange.current}`);
+  });
+
+  return (
+    <button
+      id="disconnect"
+      onClick={onDisconnect}
+      className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded min-w-[180px]"
+    >
+      Disconnect
+    </button>
+  );
+}
 
-export default function Home() {
+export default function App() {
   const [client, setClient] = useState<Realtime | null>(null);
   const [connectionState, setConnectionState] = useState('closed');
 
@@ -17,8 +39,8 @@ export default function Home() {
 
   const connect = () => {
     const newClient = new Realtime({
-      key: process.env.NEXT_PUBLIC_ABLY_KEY,
-      clientId: nanoid()
+      key: import.meta.env.VITE_ABLY_KEY,
+      clientId: nanoid(),
     });
 
     setClient(newClient);
@@ -33,16 +55,11 @@ export default function Home() {
   return (
     <div className="flex justify-center items-center min-h-screen p-4">
       <div className="w-1/2 h-1/2 flex flex-col items-center space-y-4">
-        <h2 className="text-xl font-bold text-center mb-4">
-          Connection State: {connectionState}
-        </h2>
+        <h2 className="text-xl font-bold text-center mb-4">Connection State: {connectionState}</h2>
         <div className="flex justify-center space-x-2">
           {client ? (
             <AblyProvider client={client}>
-              <ConnectionStateComponent
-                onDisconnect={disconnect}
-                setConnectionState={setConnectionState}
-              />
+              <ConnectionStateComponent onDisconnect={disconnect} setConnectionState={setConnectionState} />
             </AblyProvider>
           ) : (
             <button
@@ -58,26 +75,3 @@ export default function Home() {
     </div>
   );
 }
-
-function ConnectionStateComponent({
-  onDisconnect,
-  setConnectionState
-}: {
-  onDisconnect: () => void,
-  setConnectionState: (state: string) => void
-}) {
-  useConnectionStateListener((stateChange) => {
-    setConnectionState(stateChange.current);
-    console.log(`Connection state changed to: ${stateChange.current}`);
-  });
-
-  return (
-    <button
-      id="disconnect"
-      onClick={onDisconnect}
-      className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded min-w-[180px]"
-    >
-      Disconnect
-    </button>
-  );
-}
diff --git a/examples/pub-sub-connection-state/react/src/app/layout.tsx b/examples/pub-sub-connection-state/react/src/app/layout.tsx
deleted file mode 100644
index 6861ee563f..0000000000
--- a/examples/pub-sub-connection-state/react/src/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import '../../styles/styles.css';
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-connection-state/react/src/env.d.ts b/examples/pub-sub-connection-state/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-connection-state/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-connection-state/react/src/index.tsx b/examples/pub-sub-connection-state/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-connection-state/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-connection-state/react/src/styles/styles.css b/examples/pub-sub-connection-state/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/pub-sub-connection-state/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/pub-sub-connection-state/react/tailwind.config.ts b/examples/pub-sub-connection-state/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-connection-state/react/tailwind.config.ts
+++ b/examples/pub-sub-connection-state/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-connection-state/react/tsconfig.json b/examples/pub-sub-connection-state/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-connection-state/react/tsconfig.json
+++ b/examples/pub-sub-connection-state/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-connection-state/react/vite.config.ts b/examples/pub-sub-connection-state/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-connection-state/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/pub-sub-history/javascript/README.md b/examples/pub-sub-history/javascript/README.md
index 2a537e659f..ee2335de77 100644
--- a/examples/pub-sub-history/javascript/README.md
+++ b/examples/pub-sub-history/javascript/README.md
@@ -12,9 +12,9 @@ History is implemented using [Ably Pub/Sub](/docs/products/channels). The Pub/Su
 
 Use the following methods to retrieve message history in a pub/sub application:
 
-* [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
-* [`channel.subscribe()`](/docs/channels#subscribe): subscribes to message events within a specific channel by registering a listener. Message events are emitted when a user publishes a message.
-* [`channel.history()`](/docs/storage-history/history#retrieve-channel): retrieve paginated message event history.
+- [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
+- [`channel.subscribe()`](/docs/channels#subscribe): subscribes to message events within a specific channel by registering a listener. Message events are emitted when a user publishes a message.
+- [`channel.history()`](/docs/storage-history/history#retrieve-channel): retrieve paginated message event history.
 
 Find out more about [history](/docs/storage-history/history).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run pub-sub-history-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-history/javascript/postcss.config.ts b/examples/pub-sub-history/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-history/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-history/javascript/src/script.ts b/examples/pub-sub-history/javascript/src/script.ts
index 9bebbe15a8..5199dab2ca 100644
--- a/examples/pub-sub-history/javascript/src/script.ts
+++ b/examples/pub-sub-history/javascript/src/script.ts
@@ -1,6 +1,7 @@
 import * as Ably from 'ably';
 import type { Message } from 'ably';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 import UIkit from 'uikit';
 import './styles.css';
 
@@ -14,9 +15,9 @@ preloadButton.addEventListener('click', async () => {
   preloadButton.disabled = true;
 
   for (let i = 0; i < numBids; i++) {
-    const clientId = faker.person.firstName();
+    const clientId = minifaker.firstName();
     const client = new Ably.Realtime({
-      key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+      key: import.meta.env.VITE_ABLY_KEY as string,
       clientId,
     });
     const channel = client.channels.get(urlParams.get('name') || 'pub-sub-history');
@@ -45,8 +46,8 @@ async function enterAuction() {
   auctionRoom.style.display = 'block';
 
   client = new Ably.Realtime({
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
-    clientId: faker.person.firstName(),
+    key: import.meta.env.VITE_ABLY_KEY as string,
+    clientId: minifaker.firstName(),
   });
 
   channel = client.channels.get(channelName);
diff --git a/examples/pub-sub-history/javascript/tailwind.config.ts b/examples/pub-sub-history/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-history/javascript/tailwind.config.ts
+++ b/examples/pub-sub-history/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-history/javascript/vite-env.d.ts b/examples/pub-sub-history/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-history/javascript/vite-env.d.ts
+++ b/examples/pub-sub-history/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-history/javascript/vite.config.ts b/examples/pub-sub-history/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-history/javascript/vite.config.ts
+++ b/examples/pub-sub-history/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-history/react/README.md b/examples/pub-sub-history/react/README.md
index d7826464ec..1f4cb23431 100644
--- a/examples/pub-sub-history/react/README.md
+++ b/examples/pub-sub-history/react/README.md
@@ -12,10 +12,10 @@ History is implemented using [Ably Pub/Sub](/docs/products/channels). The Pub/Su
 
 Use the following components to retrieve message history in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, history, presence, and realtime interactions within that channel via React context.
-* [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook enabling users to subscribe to a channel and receive its messages.
-* [`channel.history()`](/docs/storage-history/history#retrieve-channel): retrieve paginated message event history.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, history, presence, and realtime interactions within that channel via React context.
+- [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook enabling users to subscribe to a channel and receive its messages.
+- [`channel.history()`](/docs/storage-history/history#retrieve-channel): retrieve paginated message event history.
 
 Find out more about [history](/docs/storage-history/history).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run pub-sub-history-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-history/react/index.html b/examples/pub-sub-history/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-history/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-history/react/next.config.ts b/examples/pub-sub-history/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-history/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-history/react/package.json b/examples/pub-sub-history/react/package.json
index fe016256e0..8e5921993d 100644
--- a/examples/pub-sub-history/react/package.json
+++ b/examples/pub-sub-history/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-history/react/postcss.config.ts b/examples/pub-sub-history/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-history/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-history/react/src/App.tsx b/examples/pub-sub-history/react/src/App.tsx
new file mode 100644
index 0000000000..3152c66f43
--- /dev/null
+++ b/examples/pub-sub-history/react/src/App.tsx
@@ -0,0 +1,31 @@
+import * as Ably from 'ably';
+import { AblyProvider, ChannelProvider } from 'ably/react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
+import './styles/styles.css';
+import AuctionRoom from './Auction';
+import Home from './Home';
+
+export default function App() {
+  const client = new Ably.Realtime({
+    key: import.meta.env.VITE_ABLY_KEY,
+    clientId: minifaker.firstName(),
+  });
+
+  const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
+  const channelName = urlParams.get('name') || 'pub-sub-history';
+
+  return (
+    <AblyProvider client={client}>
+      <ChannelProvider channelName={channelName}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/auction" element={<AuctionRoom />} />
+          </Routes>
+        </BrowserRouter>
+      </ChannelProvider>
+    </AblyProvider>
+  );
+}
diff --git a/examples/pub-sub-history/react/src/app/auction/page.tsx b/examples/pub-sub-history/react/src/Auction.tsx
similarity index 64%
rename from examples/pub-sub-history/react/src/app/auction/page.tsx
rename to examples/pub-sub-history/react/src/Auction.tsx
index 3304dad6db..d13bf257c5 100644
--- a/examples/pub-sub-history/react/src/app/auction/page.tsx
+++ b/examples/pub-sub-history/react/src/Auction.tsx
@@ -1,10 +1,8 @@
-'use client';
-
 import { useState, useEffect } from 'react';
-import * as Ably from 'ably';
-import { useAbly, AblyProvider, ChannelProvider, useChannel } from 'ably/react';
-import { faker } from '@faker-js/faker';
+import ReactDOM from 'react-dom';
+import { useAbly, useChannel } from 'ably/react';
 import UIkit from 'uikit';
+import './styles/styles.css';
 
 interface BiddingHistory {
   clientId: string;
@@ -15,23 +13,8 @@ interface BiddingHistory {
 const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
 const channelName = urlParams.get('name') || 'pub-sub-history';
 
-export default function AuctionWrapper() {
-  const client = new Ably.Realtime({
-    key: process.env.NEXT_PUBLIC_ABLY_KEY,
-    clientId: faker.person.firstName()
-  });
-
-  return (
-    <AblyProvider client={client}>
-      <ChannelProvider channelName={channelName}>
-        <AuctionRoom />
-      </ChannelProvider>
-    </AblyProvider>
-  );
-}
-
-function AuctionRoom() {
-  const [bidAmount, setBidAmount] = useState('');
+export default function AuctionRoom() {
+  const [bidAmount, setBidAmount] = useState<number>(0);
   const [biddingHistory, setBiddingHistory] = useState<BiddingHistory[]>([]);
   const [currentBid, setCurrentBid] = useState<BiddingHistory | null>(null);
   const [historyLoaded, setHistoryLoaded] = useState(false);
@@ -54,7 +37,7 @@ function AuctionRoom() {
     setCurrentBid({
       clientId: message.clientId || '',
       amount: message.data.amount,
-      timestamp: new Date(message.data.timestamp)
+      timestamp: new Date(message.data.timestamp),
     });
   });
 
@@ -71,7 +54,7 @@ function AuctionRoom() {
       }
 
       const messageName = 'bid';
-      const filteredMessages = messages.filter(message => message.name === messageName);
+      const filteredMessages = messages.filter((message) => message.name === messageName);
 
       if (filteredMessages.length > 0) {
         return filteredMessages[0];
@@ -86,7 +69,7 @@ function AuctionRoom() {
         setCurrentBid({
           clientId: currentBid.clientId || '',
           amount: currentBid.data.amount,
-          timestamp: new Date(currentBid.data.timestamp)
+          timestamp: new Date(currentBid.data.timestamp),
         });
       } else {
         setCurrentBid(null);
@@ -98,22 +81,22 @@ function AuctionRoom() {
 
   const handleBid = () => {
     if (!bidAmount) {
-      alert("Please enter a valid bid amount.");
+      alert('Please enter a valid bid amount.');
       return;
     }
 
     if (currentBid !== null && bidAmount <= currentBid?.amount) {
-      alert("Bid amount must be greater than the current bid.");
+      alert('Bid amount must be greater than the current bid.');
       return;
     }
 
-    publish("bid", { amount: bidAmount.toFixed(2), timestamp: new Date() });
+    publish('bid', { amount: bidAmount.toFixed(2), timestamp: new Date() });
     setBidAmount(0);
     UIkit.modal('#bid-modal').hide();
   };
 
   const retrieveBiddingHistory = async () => {
-    let messages;
+    let messages: any[] = [];
     setHistoryLoaded(true);
 
     try {
@@ -123,36 +106,31 @@ function AuctionRoom() {
       console.error('Failed to load bidding history:', error);
     }
 
-    const filteredMessages = messages.filter(message => message.name === 'bid');
+    const filteredMessages = messages.filter((message) => message.name === 'bid');
 
-    const history = filteredMessages.slice(0, 10)
-      .map(message => ({
+    const history = filteredMessages
+      .slice(0, 10)
+      .map((message) => ({
         clientId: message.clientId || '',
         amount: message.data.amount,
-        timestamp: new Date(message.data.timestamp)
+        timestamp: new Date(message.data.timestamp),
       }))
-      .filter(newBid => {
-        return !biddingHistory.some(existingBid =>
-          existingBid.clientId === newBid.clientId &&
-          existingBid.amount === newBid.amount &&
-          existingBid.timestamp.getTime() === newBid.timestamp.getTime()
+      .filter((newBid) => {
+        return !biddingHistory.some(
+          (existingBid) =>
+            existingBid.clientId === newBid.clientId &&
+            existingBid.amount === newBid.amount &&
+            existingBid.timestamp.getTime() === newBid.timestamp.getTime(),
         );
       });
 
-    setBiddingHistory((prevHistory) => [
-      ...prevHistory,
-      ...history,
-    ]);
+    setBiddingHistory((prevHistory) => [...prevHistory, ...history]);
   };
 
   return (
     <div className="min-h-screen p-8">
       <div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
-        <img
-          src="/assets/auction-item.png"
-          alt="Auction Item"
-          className="w-full object-cover"
-        />
+        <img src="/assets/auction-item.png" alt="Auction Item" className="w-full object-cover" />
         <div className="p-6">
           <h1 className="text-2xl font-bold mb-2">Vintage timepiece</h1>
           <p className="text-gray-600 mb-4">
@@ -170,9 +148,16 @@ function AuctionRoom() {
             <div className="bg-gray-100 p-4 rounded-lg mb-6">
               <h2 className="text-lg font-bold mb-2">Current Bid</h2>
               <div className="flex justify-between items-center">
-                <span className="font-medium">{currentBid.clientId}{currentBid.clientId === currentClientId ? ' (You)' : ''}</span>
+                <span className="font-medium">
+                  {currentBid.clientId}
+                  {currentBid.clientId === currentClientId ? ' (You)' : ''}
+                </span>
                 <span className="text-gray-600">
-                  {currentBid.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+                  {currentBid.timestamp.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                  })}
                 </span>
                 <span className="font-bold text-lg">${currentBid.amount}</span>
               </div>
@@ -198,7 +183,10 @@ function AuctionRoom() {
             <div className="space-y-2">
               {biddingHistory.map((bid, index) => (
                 <div key={index} className="flex justify-between items-center py-2 border-b">
-                  <span className="font-medium w-1/3">{bid.clientId}{bid.clientId === currentClientId ? ' (You)' : ''}</span>
+                  <span className="font-medium w-1/3">
+                    {bid.clientId}
+                    {bid.clientId === currentClientId ? ' (You)' : ''}
+                  </span>
                   <span className="text-gray-600 w-1/3 text-center">
                     {bid.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                   </span>
@@ -209,28 +197,31 @@ function AuctionRoom() {
           </div>
         </div>
 
-        <div id="bid-modal" className="uk-modal">
-          <div className="uk-modal-dialog uk-modal-body">
-            <h3 className="text-lg font-bold mb-4">Place your bid</h3>
-
-            <input
-              type="number"
-              value={bidAmount}
-              onChange={(e) => setBidAmount(Number(e.target.value))}
-              className="uk-input uk-form-md mb-4"
-              placeholder="Enter bid amount"
-            />
-
-            <p className="uk-text-right">
-              <button className="uk-btn uk-btn-default mr-2" type="button" uk-toggle="target: #bid-modal">
-                Cancel
-              </button>
-              <button onClick={handleBid} className="uk-btn uk-btn-primary" type="button">
-                Place bid
-              </button>
-            </p>
-          </div>
-        </div>
+        {ReactDOM.createPortal(
+          <div id="bid-modal" className="uk-modal">
+            <div className="uk-modal-dialog uk-modal-body">
+              <h3 className="text-lg font-bold mb-4">Place your bid</h3>
+
+              <input
+                type="number"
+                value={bidAmount}
+                onChange={(e) => setBidAmount(Number(e.target.value))}
+                className="uk-input uk-form-md mb-4"
+                placeholder="Enter bid amount"
+              />
+
+              <p className="uk-text-right">
+                <button className="uk-btn uk-btn-default mr-2" type="button" uk-toggle="target: #bid-modal">
+                  Cancel
+                </button>
+                <button onClick={handleBid} className="uk-btn uk-btn-primary" type="button">
+                  Place bid
+                </button>
+              </p>
+            </div>
+          </div>,
+          document.body,
+        )}
       </div>
     </div>
   );
diff --git a/examples/pub-sub-history/react/src/app/page.tsx b/examples/pub-sub-history/react/src/Home.tsx
similarity index 75%
rename from examples/pub-sub-history/react/src/app/page.tsx
rename to examples/pub-sub-history/react/src/Home.tsx
index e0adba6c90..e4fb9cd883 100644
--- a/examples/pub-sub-history/react/src/app/page.tsx
+++ b/examples/pub-sub-history/react/src/Home.tsx
@@ -1,14 +1,13 @@
-'use client'
-
 import * as Ably from 'ably';
-import { faker } from '@faker-js/faker';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 
 const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
 const channelName = urlParams.get('name') || 'pub-sub-history';
 
 export default function Home() {
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const preloadBiddingHistory = async () => {
     let lastBidAmount = 100;
@@ -16,10 +15,10 @@ export default function Home() {
     const numBids = 10;
 
     for (let i = 0; i < numBids; i++) {
-      const clientId = faker.person.firstName();
+      const clientId = minifaker.firstName();
 
       const client = new Ably.Realtime({
-        key: process.env.NEXT_PUBLIC_ABLY_KEY,
+        key: import.meta.env.VITE_ABLY_KEY,
         clientId,
       });
       const channel = client.channels.get(channelName);
@@ -35,7 +34,7 @@ export default function Home() {
       lastBidAmount = parseFloat(bidAmount);
     }
 
-    router.push(`/auction?name=${encodeURIComponent(channelName)}`);
+    navigate(`/auction?name=${encodeURIComponent(channelName)}`);
   };
 
   return (
@@ -44,10 +43,7 @@ export default function Home() {
         <h2 className="text-2xl mb-6">Welcome to the auction</h2>
         <p>Click the button below to add some historical bids.</p>
         <div className="inline-flex flex-col gap-4 items-center">
-          <button
-            onClick={() => preloadBiddingHistory()}
-            className="uk-btn uk-btn-lg uk-btn-primary"
-          >
+          <button onClick={() => preloadBiddingHistory()} className="uk-btn uk-btn-lg uk-btn-primary">
             Pre-load bidding history
           </button>
         </div>
diff --git a/examples/pub-sub-history/react/src/app/layout.tsx b/examples/pub-sub-history/react/src/app/layout.tsx
deleted file mode 100644
index aa54e6f50e..0000000000
--- a/examples/pub-sub-history/react/src/app/layout.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import '../../styles/styles.css'
-import dynamic from 'next/dynamic';
-
-const FrankenUICore = dynamic(
-  () =>
-    // @ts-ignore
-    import('franken-ui/js/core.iife').then(() => {
-      return function NoopComponent() {
-        return null;
-      };
-    }),
-  {
-    ssr: false,
-  },
-);
-
-const FrankenUIIcon = dynamic(
-  () =>
-    // @ts-ignore
-    import('franken-ui/js/icon.iife').then(() => {
-      return function NoopComponent() {
-        return null;
-      };
-    }),
-  {
-    ssr: false,
-  },
-);
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-          <FrankenUICore />
-          <FrankenUIIcon />
-          {children}
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-history/react/src/env.d.ts b/examples/pub-sub-history/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-history/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-history/react/src/index.tsx b/examples/pub-sub-history/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-history/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-history/react/src/styles/styles.css b/examples/pub-sub-history/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/pub-sub-history/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/pub-sub-history/react/styles/styles.css b/examples/pub-sub-history/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/pub-sub-history/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/pub-sub-history/react/tailwind.config.ts b/examples/pub-sub-history/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-history/react/tailwind.config.ts
+++ b/examples/pub-sub-history/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-history/react/tsconfig.json b/examples/pub-sub-history/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-history/react/tsconfig.json
+++ b/examples/pub-sub-history/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-history/react/vite.config.ts b/examples/pub-sub-history/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-history/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/pub-sub-message-encryption/javascript/README.md b/examples/pub-sub-message-encryption/javascript/README.md
index 7041b647ea..d703ed1a61 100644
--- a/examples/pub-sub-message-encryption/javascript/README.md
+++ b/examples/pub-sub-message-encryption/javascript/README.md
@@ -12,9 +12,9 @@ Message encryption is implemented using [Ably Pub/Sub](/docs/auth). The Pub/Sub
 
 Use the following methods to send and receive messages in a pub/sub application:
 
-* [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`. Options are optional with `channel.get()`, options such as `cipher` to enable encryption.
-* [`channel.subscribe()`](/docs/channels#subscribe): subscribes to channel messages events by registering a listener. Message events are emitted when a user publishes a message.
-* [`channel.publish`](/docs/channels#publish): emits a message event when the user publishes a message to the channel.
+- [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`. Options are optional with `channel.get()`, options such as `cipher` to enable encryption.
+- [`channel.subscribe()`](/docs/channels#subscribe): subscribes to channel messages events by registering a listener. Message events are emitted when a user publishes a message.
+- [`channel.publish`](/docs/channels#publish): emits a message event when the user publishes a message to the channel.
 
 Find out more about [channels](/docs/channels), [messages](/docs/channels/messages), and [encryption](/docs/channels/options/encryption).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run pub-sub-message-encryption-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-message-encryption/javascript/postcss.config.ts b/examples/pub-sub-message-encryption/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-message-encryption/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-message-encryption/javascript/src/script.ts b/examples/pub-sub-message-encryption/javascript/src/script.ts
index 8387a9acd4..4f4135b64c 100644
--- a/examples/pub-sub-message-encryption/javascript/src/script.ts
+++ b/examples/pub-sub-message-encryption/javascript/src/script.ts
@@ -22,7 +22,7 @@ async function decryptedMessages() {
 async function establishConnection(hasCipher = true) {
   const client = new Ably.Realtime({
     clientId: nanoid(),
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+    key: import.meta.env.VITE_ABLY_KEY as string,
   });
 
   let options = {};
diff --git a/examples/pub-sub-message-encryption/javascript/tailwind.config.ts b/examples/pub-sub-message-encryption/javascript/tailwind.config.ts
index c62a0a5742..1c86e1c371 100644
--- a/examples/pub-sub-message-encryption/javascript/tailwind.config.ts
+++ b/examples/pub-sub-message-encryption/javascript/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
-  content: [...(Array.isArray(baseConfig.content) ? baseConfig.content : []), './src/**/*.ts'],
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-message-encryption/javascript/vite-env.d.ts b/examples/pub-sub-message-encryption/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-message-encryption/javascript/vite-env.d.ts
+++ b/examples/pub-sub-message-encryption/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-message-encryption/javascript/vite.config.ts b/examples/pub-sub-message-encryption/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-message-encryption/javascript/vite.config.ts
+++ b/examples/pub-sub-message-encryption/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-message-encryption/react/README.md b/examples/pub-sub-message-encryption/react/README.md
index 06fc017312..ecec56aa2b 100644
--- a/examples/pub-sub-message-encryption/react/README.md
+++ b/examples/pub-sub-message-encryption/react/README.md
@@ -12,10 +12,10 @@ Message encryption is implemented using [Ably Pub/Sub](/docs/auth). The Pub/Sub
 
 Use the following components to send and receive messages in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, members, and realtime interactions within that channel via React context. Options are optional with `ChannelProvider`, options such as `cipher` to enable encryption.
-* [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook to manage the state and interaction for a channel, allowing users to join, send messages, and listen for messages.
-* [`publish()`](/docs/getting-started/react#useChannel) function: a function to publish messages to the specified channel.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, members, and realtime interactions within that channel via React context. Options are optional with `ChannelProvider`, options such as `cipher` to enable encryption.
+- [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook to manage the state and interaction for a channel, allowing users to join, send messages, and listen for messages.
+- [`publish()`](/docs/getting-started/react#useChannel) function: a function to publish messages to the specified channel.
 
 Find out more about [channels](/docs/channels), [messages](/docs/channels/messages), and [encryption](/docs/channels/options/encryption).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run pub-sub-message-encryption-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-message-encryption/react/index.html b/examples/pub-sub-message-encryption/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-message-encryption/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-message-encryption/react/next.config.ts b/examples/pub-sub-message-encryption/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-message-encryption/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-message-encryption/react/package.json b/examples/pub-sub-message-encryption/react/package.json
index f889e429e0..7579e1c38a 100644
--- a/examples/pub-sub-message-encryption/react/package.json
+++ b/examples/pub-sub-message-encryption/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-message-encryption/react/postcss.config.ts b/examples/pub-sub-message-encryption/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-message-encryption/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-message-encryption/react/src/app/page.tsx b/examples/pub-sub-message-encryption/react/src/App.tsx
similarity index 75%
rename from examples/pub-sub-message-encryption/react/src/app/page.tsx
rename to examples/pub-sub-message-encryption/react/src/App.tsx
index 64b5fe1e89..a4186ddbb8 100644
--- a/examples/pub-sub-message-encryption/react/src/app/page.tsx
+++ b/examples/pub-sub-message-encryption/react/src/App.tsx
@@ -1,58 +1,12 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { CipherKey, Realtime } from 'ably';
-import { useSearchParams } from 'next/navigation';
-import type { Message } from "ably"
 import { AblyProvider, ChannelProvider, useChannel } from 'ably/react';
 import { nanoid } from 'nanoid';
+import './styles/styles.css';
 
 const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
 const channelName = urlParams.get('name') || 'pub-sub-message-encryption';
-
-export default function Home() {
-  const searchParams = useSearchParams();
-  const isEncrypted = searchParams.get('encrypted') === 'true';
-
-  const [client, setClient] = useState<Realtime | null>(null);
-  const [key, setKey] = useState<CipherKey | null>(null);
-
-  useEffect(() => {
-    const initializeAbly = async () => {
-      const generatedKey = await Realtime.Crypto.generateRandomKey();
-      const newClient = new Realtime({
-        key: process.env.NEXT_PUBLIC_ABLY_KEY,
-        clientId: nanoid()
-      });
-
-      setKey(generatedKey);
-      setClient(newClient);
-    };
-
-    initializeAbly();
-  }, []);
-
-  if (!client || !key) return null;
-
-  return (
-    <AblyProvider client={client}>
-      {isEncrypted ? (
-        <ChannelProvider
-          channelName={channelName}
-          options={{ cipher: { key } }}
-        >
-          <DecodedMessages />
-        </ChannelProvider>
-      ) : (
-        <ChannelProvider
-          channelName={channelName}
-        >
-          <EncodedMessages />
-        </ChannelProvider>
-      )}
-    </AblyProvider>
-  );
-}
+const isEncrypted = urlParams.get('encrypted') === 'true';
 
 function EncodedMessages() {
   const [message, setMessage] = useState('');
@@ -79,21 +33,21 @@ function EncodedMessages() {
       <div className="w-1/2 h-1/2 flex flex-col space-y-4">
         <h2 className="text-xl font-bold text-center mb-4">Client without an encryption key</h2>
         <div className="flex space-x-2">
-        <input
-          type="text"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          placeholder="Enter your message"
-          className="uk-input uk-width-1-1 uk-border-rounded-left h-10"
-        />
-        <button
-          id="publish-button"
-          onClick={publishMessage}
-          className="uk-btn uk-btn-primary rounded h-10"
-          disabled={!message.trim()}
-        >
-          Publish
-        </button>
+          <input
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Enter your message"
+            className="uk-input uk-width-1-1 uk-border-rounded-left h-10"
+          />
+          <button
+            id="publish-button"
+            onClick={publishMessage}
+            className="uk-btn uk-btn-primary rounded h-10"
+            disabled={!message.trim()}
+          >
+            Publish
+          </button>
         </div>
 
         <div className="h-full border rounded-lg overflow-y-auto bg-white shadow-lg">
@@ -108,15 +62,14 @@ function EncodedMessages() {
       </div>
     </div>
   );
-
 }
 
 function DecodedMessages() {
   const [message, setMessage] = useState('');
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [messages, setMessages] = useState<any[]>([]);
 
   const { publish } = useChannel(channelName, (message) => {
-    setMessages((prevMessages: Message[]) => [...prevMessages, message]);
+    setMessages((prevMessages: any[]) => [...prevMessages, message]);
   });
 
   const publishMessage = () => {
@@ -151,10 +104,7 @@ function DecodedMessages() {
         <div className="h-full border rounded-lg overflow-y-auto bg-white shadow-lg">
           <div className="p-4 space-y-2">
             {messages.map((msg, index) => (
-              <div
-                key={index}
-                className="p-3 bg-gray-50 rounded-lg flex items-center gap-2"
-              >
+              <div key={index} className="p-3 bg-gray-50 rounded-lg flex items-center gap-2">
                 <span>{msg.data}</span>
               </div>
             ))}
@@ -164,3 +114,39 @@ function DecodedMessages() {
     </div>
   );
 }
+
+export default function App() {
+  const [client, setClient] = useState<Realtime | null>(null);
+  const [key, setKey] = useState<CipherKey | null>(null);
+
+  useEffect(() => {
+    const initializeAbly = async () => {
+      const generatedKey = await Realtime.Crypto.generateRandomKey();
+      const newClient = new Realtime({
+        key: import.meta.env.VITE_ABLY_KEY,
+        clientId: nanoid(),
+      });
+
+      setKey(generatedKey);
+      setClient(newClient);
+    };
+
+    initializeAbly();
+  }, []);
+
+  if (!client || !key) return null;
+
+  return (
+    <AblyProvider client={client}>
+      {isEncrypted ? (
+        <ChannelProvider channelName={channelName} options={{ cipher: { key } }}>
+          <DecodedMessages />
+        </ChannelProvider>
+      ) : (
+        <ChannelProvider channelName={channelName}>
+          <EncodedMessages />
+        </ChannelProvider>
+      )}
+    </AblyProvider>
+  );
+}
diff --git a/examples/pub-sub-message-encryption/react/src/app/layout.tsx b/examples/pub-sub-message-encryption/react/src/app/layout.tsx
deleted file mode 100644
index 6861ee563f..0000000000
--- a/examples/pub-sub-message-encryption/react/src/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import '../../styles/styles.css';
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-message-encryption/react/src/env.d.ts b/examples/pub-sub-message-encryption/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-message-encryption/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-message-encryption/react/src/index.tsx b/examples/pub-sub-message-encryption/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-message-encryption/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-message-encryption/react/src/styles/styles.css b/examples/pub-sub-message-encryption/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/pub-sub-message-encryption/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/pub-sub-message-encryption/react/styles/styles.css b/examples/pub-sub-message-encryption/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/pub-sub-message-encryption/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/pub-sub-message-encryption/react/tailwind.config.ts b/examples/pub-sub-message-encryption/react/tailwind.config.ts
index 0e75157e32..1c86e1c371 100644
--- a/examples/pub-sub-message-encryption/react/tailwind.config.ts
+++ b/examples/pub-sub-message-encryption/react/tailwind.config.ts
@@ -2,7 +2,8 @@ import baseConfig from '../../tailwind.config';
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  ...baseConfig
+  ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-message-encryption/react/tsconfig.json b/examples/pub-sub-message-encryption/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-message-encryption/react/tsconfig.json
+++ b/examples/pub-sub-message-encryption/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-message-encryption/react/vite.config.ts b/examples/pub-sub-message-encryption/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-message-encryption/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/pub-sub-occupancy/javascript/README.md b/examples/pub-sub-occupancy/javascript/README.md
index 3cf997a612..d7e134e794 100644
--- a/examples/pub-sub-occupancy/javascript/README.md
+++ b/examples/pub-sub-occupancy/javascript/README.md
@@ -10,8 +10,8 @@ Occupancy is implemented using [Ably Pub/Sub](/docs/products/channels). The Pub/
 
 Use the following components to access occupancy in a pub/sub application:
 
-* [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`. By using channel options to enable occupancy, the channel will automatically update occupancy information.
-* [`channel.subscribe()`](/docs/channels#subscribe): subscribes to message events within a specific channel by registering a listener. Message events are emitted when a user publishes a message. Whenever the occupancy is updated, the `useChannel()` hook will update the occupancy information.
+- [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`. By using channel options to enable occupancy, the channel will automatically update occupancy information.
+- [`channel.subscribe()`](/docs/channels#subscribe): subscribes to message events within a specific channel by registering a listener. Message events are emitted when a user publishes a message. Whenever the occupancy is updated, the `useChannel()` hook will update the occupancy information.
 
 Find out more about [occupancy](/docs/presence-occupancy/occupancy).
 
@@ -35,7 +35,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -53,4 +53,4 @@ yarn run pub-sub-occupancy-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-occupancy/javascript/postcss.config.ts b/examples/pub-sub-occupancy/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-occupancy/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-occupancy/javascript/src/script.ts b/examples/pub-sub-occupancy/javascript/src/script.ts
index 7fa0627eae..54c698d203 100644
--- a/examples/pub-sub-occupancy/javascript/src/script.ts
+++ b/examples/pub-sub-occupancy/javascript/src/script.ts
@@ -6,7 +6,7 @@ import './styles.css';
 const occupantCount = document.getElementById('occupants-count');
 
 const client = new Ably.Realtime({
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
   clientId: nanoid(),
 });
 
@@ -23,7 +23,7 @@ async function simulatedOccupants() {
   for (let loopCount = 0; loopCount < 20; loopCount++) {
     const clientId = nanoid();
     const client = new Ably.Realtime({
-      key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+      key: import.meta.env.VITE_ABLY_KEY as string,
       clientId,
     });
 
diff --git a/examples/pub-sub-occupancy/javascript/tailwind.config.ts b/examples/pub-sub-occupancy/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-occupancy/javascript/tailwind.config.ts
+++ b/examples/pub-sub-occupancy/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-occupancy/javascript/vite-env.d.ts b/examples/pub-sub-occupancy/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-occupancy/javascript/vite-env.d.ts
+++ b/examples/pub-sub-occupancy/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-occupancy/javascript/vite.config.ts b/examples/pub-sub-occupancy/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-occupancy/javascript/vite.config.ts
+++ b/examples/pub-sub-occupancy/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-occupancy/react/README.md b/examples/pub-sub-occupancy/react/README.md
index 72be4ff6c7..7d543c8b06 100644
--- a/examples/pub-sub-occupancy/react/README.md
+++ b/examples/pub-sub-occupancy/react/README.md
@@ -10,9 +10,9 @@ Occupancy is implemented using [Ably Pub/Sub](/docs/products/channels). The Pub/
 
 Use the following components to access occupancy in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, history, presence, and realtime interactions within that channel via React context. By using channel options to enable occupancy, the channel will automatically update occupancy information.
-* [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook enabling users to subscribe to a channel and receive its messages. Whenever the occupancy is updated, the `useChannel()` hook will update the occupancy information.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, history, presence, and realtime interactions within that channel via React context. By using channel options to enable occupancy, the channel will automatically update occupancy information.
+- [`useChannel()`](/docs/getting-started/react#useChannel) hook: a hook enabling users to subscribe to a channel and receive its messages. Whenever the occupancy is updated, the `useChannel()` hook will update the occupancy information.
 
 Find out more about [occupancy](/docs/presence-occupancy/occupancy).
 
@@ -36,7 +36,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -51,8 +51,9 @@ yarn run pub-sub-occupancy-react
 ```
 
 7. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result.
-****
+
+---
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-occupancy/react/index.html b/examples/pub-sub-occupancy/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-occupancy/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-occupancy/react/next.config.ts b/examples/pub-sub-occupancy/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-occupancy/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-occupancy/react/package.json b/examples/pub-sub-occupancy/react/package.json
index 8d37bfda02..06acc7cd57 100644
--- a/examples/pub-sub-occupancy/react/package.json
+++ b/examples/pub-sub-occupancy/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-occupancy/react/postcss.config.ts b/examples/pub-sub-occupancy/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-occupancy/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-occupancy/react/src/app/page.tsx b/examples/pub-sub-occupancy/react/src/App.tsx
similarity index 93%
rename from examples/pub-sub-occupancy/react/src/app/page.tsx
rename to examples/pub-sub-occupancy/react/src/App.tsx
index 49f5e1f8d5..0e230ef354 100644
--- a/examples/pub-sub-occupancy/react/src/app/page.tsx
+++ b/examples/pub-sub-occupancy/react/src/App.tsx
@@ -1,26 +1,9 @@
-'use client'
-
 import { Realtime } from 'ably';
 import { AblyProvider, ChannelProvider, useChannel } from 'ably/react';
 import { nanoid } from 'nanoid';
 import { useEffect, useState } from 'react';
 import { FaEye } from 'react-icons/fa';
-
-export default function Home() {
-  const clientId = nanoid();
-  const client = new Realtime({
-    key: process.env.NEXT_PUBLIC_ABLY_KEY,
-    clientId
-  });
-
-  return (
-    <AblyProvider client={client}>
-      <ChannelProvider channelName="occupancy-example" options={{ params: { occupancy: 'metrics' } }}>
-        <Stream />
-      </ChannelProvider>
-    </AblyProvider>
-  );
-}
+import './styles/styles.css';
 
 function Stream() {
   const [occupancySubscribers, setOccupancySubscribers] = useState(0);
@@ -62,8 +45,8 @@ async function simulatedOccupants() {
   for (let loopCount = 0; loopCount < 20; loopCount++) {
     const clientId = nanoid();
     const client = new Realtime({
-      key: process.env.NEXT_PUBLIC_ABLY_KEY,
-      clientId
+      key: import.meta.env.VITE_ABLY_KEY,
+      clientId,
     });
 
     const channel = client.channels.get('occupancy-example');
@@ -81,3 +64,19 @@ async function simulatedOccupants() {
     loopCount++;
   }
 }
+
+export default function App() {
+  const clientId = nanoid();
+  const client = new Realtime({
+    key: import.meta.env.VITE_ABLY_KEY,
+    clientId,
+  });
+
+  return (
+    <AblyProvider client={client}>
+      <ChannelProvider channelName="occupancy-example" options={{ params: { occupancy: 'metrics' } }}>
+        <Stream />
+      </ChannelProvider>
+    </AblyProvider>
+  );
+}
diff --git a/examples/pub-sub-occupancy/react/src/app/layout.tsx b/examples/pub-sub-occupancy/react/src/app/layout.tsx
deleted file mode 100644
index 6861ee563f..0000000000
--- a/examples/pub-sub-occupancy/react/src/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import '../../styles/styles.css';
-import dynamic from 'next/dynamic';
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/core.iife'), {
-  ssr: false,
-});
-
-// @ts-ignore
-dynamic(() => import('franken-ui/js/icon.iife'), {
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-occupancy/react/src/env.d.ts b/examples/pub-sub-occupancy/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-occupancy/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-occupancy/react/src/index.tsx b/examples/pub-sub-occupancy/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-occupancy/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-occupancy/react/src/styles/styles.css b/examples/pub-sub-occupancy/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/pub-sub-occupancy/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/pub-sub-occupancy/react/styles/styles.css b/examples/pub-sub-occupancy/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/pub-sub-occupancy/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/pub-sub-occupancy/react/tailwind.config.ts b/examples/pub-sub-occupancy/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-occupancy/react/tailwind.config.ts
+++ b/examples/pub-sub-occupancy/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-occupancy/react/tsconfig.json b/examples/pub-sub-occupancy/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-occupancy/react/tsconfig.json
+++ b/examples/pub-sub-occupancy/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-occupancy/react/vite.config.ts b/examples/pub-sub-occupancy/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-occupancy/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/pub-sub-presence/javascript/README.md b/examples/pub-sub-presence/javascript/README.md
index d3c4eb699a..219e12f9e1 100644
--- a/examples/pub-sub-presence/javascript/README.md
+++ b/examples/pub-sub-presence/javascript/README.md
@@ -12,10 +12,10 @@ Presence is implemented using [Ably Pub/Sub](/docs/products/channels). The Pub/S
 
 Use the following methods to send and receive messages in a pub/sub application:
 
-* [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
-* [`channel.presence.subscribe()`](/docs/channels#subscribe): subscribes to presence events within a specific channel by registering a listener. Presence events are emitted when a user enters or leaves a presence set, or updates their status within the presence set.
-* [`channel.presence.get()`](/docs/presence-occupancy/presence#retrieve-members): retrieves a list of the users currently within that presence set.
-* [`channel.presence.enter()`, `channel.presence.leave()`, `channel.presence.update()`](/docs/presence-occupancy/presence#trigger-events): emits a presence event when a user enters or leaves a presence set, or updates their status within the the presence set.
+- [`channel.get()`](/docs/channels#create): creates a new or retrieves an existing `channel`.
+- [`channel.presence.subscribe()`](/docs/channels#subscribe): subscribes to presence events within a specific channel by registering a listener. Presence events are emitted when a user enters or leaves a presence set, or updates their status within the presence set.
+- [`channel.presence.get()`](/docs/presence-occupancy/presence#retrieve-members): retrieves a list of the users currently within that presence set.
+- [`channel.presence.enter()`, `channel.presence.leave()`, `channel.presence.update()`](/docs/presence-occupancy/presence#trigger-events): emits a presence event when a user enters or leaves a presence set, or updates their status within the the presence set.
 
 Find out more about [presence](/docs/presence-occupancy/presence).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run pub-sub-presence-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-presence/javascript/postcss.config.ts b/examples/pub-sub-presence/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/pub-sub-presence/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-presence/javascript/src/script.ts b/examples/pub-sub-presence/javascript/src/script.ts
index 38dc001996..b7949722dc 100644
--- a/examples/pub-sub-presence/javascript/src/script.ts
+++ b/examples/pub-sub-presence/javascript/src/script.ts
@@ -1,10 +1,11 @@
 import * as Ably from 'ably';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 import './styles.css';
 
 const client = new Ably.Realtime({
-  clientId: faker.person.firstName(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  clientId: `${minifaker.firstName()} ${minifaker.lastName()}`,
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 const urlParams = new URLSearchParams(window.location.search);
 const channelName = urlParams.get('name') || 'pub-sub-presence';
diff --git a/examples/pub-sub-presence/javascript/tailwind.config.ts b/examples/pub-sub-presence/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-presence/javascript/tailwind.config.ts
+++ b/examples/pub-sub-presence/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-presence/javascript/vite-env.d.ts b/examples/pub-sub-presence/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/pub-sub-presence/javascript/vite-env.d.ts
+++ b/examples/pub-sub-presence/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/pub-sub-presence/javascript/vite.config.ts b/examples/pub-sub-presence/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/pub-sub-presence/javascript/vite.config.ts
+++ b/examples/pub-sub-presence/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/pub-sub-presence/react/README.md b/examples/pub-sub-presence/react/README.md
index aad72d4210..1d8c02f66e 100644
--- a/examples/pub-sub-presence/react/README.md
+++ b/examples/pub-sub-presence/react/README.md
@@ -12,10 +12,10 @@ Presence is implemented using [Ably Pub/Sub](/docs/products/channels). The Pub/S
 
 Use the following components to send and receive messages in a pub/sub application:
 
-* [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
-* [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, presence, and realtime interactions within that channel via React context.
-* [`usePresenceListener()`](/docs/getting-started/react#useChannel) hook: a hook to subscribe to presence events on a channel, notifying users when other users enter or leave a presence set, or updates their member data.
-* [`usePresence()`](/docs/getting-started/react#usePresenceListener) hook: a hook enabling users to enter the presence set.
+- [`AblyProvider`](/docs/getting-started/react#ably-provider): initializes and manages a shared pub/sub client instance, passing it down through React context to enable realtime pub/sub functionality across the application.
+- [`ChannelProvider`](/docs/getting-started/react#channel-provider): manages the state and functionality of a specific channel, providing access to messages, presence, and realtime interactions within that channel via React context.
+- [`usePresenceListener()`](/docs/getting-started/react#useChannel) hook: a hook to subscribe to presence events on a channel, notifying users when other users enter or leave a presence set, or updates their member data.
+- [`usePresence()`](/docs/getting-started/react#usePresenceListener) hook: a hook enabling users to enter the presence set.
 
 Find out more about [presence](/docs/presence-occupancy/presence).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run pub-sub-presence-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/pub-sub-presence/react/index.html b/examples/pub-sub-presence/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/pub-sub-presence/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pub-sub-presence/react/next.config.ts b/examples/pub-sub-presence/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/pub-sub-presence/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-presence/react/package.json b/examples/pub-sub-presence/react/package.json
index cf50309c67..6a9b076ca0 100644
--- a/examples/pub-sub-presence/react/package.json
+++ b/examples/pub-sub-presence/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/pub-sub-presence/react/postcss.config.ts b/examples/pub-sub-presence/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/pub-sub-presence/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/pub-sub-presence/react/src/app/page.tsx b/examples/pub-sub-presence/react/src/App.tsx
similarity index 58%
rename from examples/pub-sub-presence/react/src/app/page.tsx
rename to examples/pub-sub-presence/react/src/App.tsx
index 188529bb13..d4043940ba 100644
--- a/examples/pub-sub-presence/react/src/app/page.tsx
+++ b/examples/pub-sub-presence/react/src/App.tsx
@@ -1,16 +1,21 @@
-'use client'
-
-import { useAbly, usePresence, usePresenceListener } from 'ably/react';
+import { Realtime } from 'ably';
+import { AblyProvider, ChannelProvider, useAbly, usePresence, usePresenceListener } from 'ably/react';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 import { useState } from 'react';
+import './styles/styles.css';
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: minifaker.firstName() });
+const urlParams = new URLSearchParams(window.location.search);
+const channelName = urlParams.get('name') || 'pub-sub-presence';
 
-export default function Home() {
+function PresenceList() {
   const [status, setStatus] = useState('Online');
   const ably = useAbly();
   const currentClientId = ably?.auth.clientId;
-  const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
 
-  const { presenceData } = usePresenceListener(urlParams.get('name') || 'pub-sub-presence');
-  const { updateStatus } = usePresence(urlParams.get('name') || 'pub-sub-presence', 'Online');
+  const { presenceData } = usePresenceListener(channelName);
+  const { updateStatus } = usePresence(channelName, 'Online');
 
   return (
     <div className="min-h-screen p-8">
@@ -20,7 +25,10 @@ export default function Home() {
           {presenceData.map((viewer) => (
             <li key={viewer.clientId} className="flex items-center justify-between p-2 border-b">
               <div className="flex flex-col">
-                <span>{viewer.clientId}{viewer.clientId === currentClientId ? ' (You)' : ''} </span>
+                <span>
+                  {viewer.clientId}
+                  {viewer.clientId === currentClientId ? ' (You)' : ''}{' '}
+                </span>
                 <span className="italic text-sm text-gray-500">{viewer.data}</span>
               </div>
             </li>
@@ -49,3 +57,15 @@ export default function Home() {
     </div>
   );
 }
+
+function App() {
+  return (
+    <AblyProvider client={client}>
+      <ChannelProvider channelName={channelName}>
+        <PresenceList />
+      </ChannelProvider>
+    </AblyProvider>
+  );
+}
+
+export default App;
diff --git a/examples/pub-sub-presence/react/src/app/layout.tsx b/examples/pub-sub-presence/react/src/app/layout.tsx
deleted file mode 100644
index 9bb1527b54..0000000000
--- a/examples/pub-sub-presence/react/src/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import { Realtime } from 'ably';
-import { AblyProvider, ChannelProvider } from 'ably/react';
-import { faker } from '@faker-js/faker';
-import '../../styles/styles.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-const client = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: faker.person.firstName()});
-const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {});
-const channelName = urlParams.get('name') || 'pub-sub-presence';
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <AblyProvider client={client}>
-          <ChannelProvider channelName={channelName}>
-            {children}
-          </ChannelProvider>
-        </AblyProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/pub-sub-presence/react/src/env.d.ts b/examples/pub-sub-presence/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/pub-sub-presence/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/pub-sub-presence/react/src/index.tsx b/examples/pub-sub-presence/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/pub-sub-presence/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pub-sub-presence/react/src/styles/styles.css b/examples/pub-sub-presence/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/pub-sub-presence/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/pub-sub-presence/react/styles/styles.css b/examples/pub-sub-presence/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/pub-sub-presence/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/pub-sub-presence/react/tailwind.config.ts b/examples/pub-sub-presence/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/pub-sub-presence/react/tailwind.config.ts
+++ b/examples/pub-sub-presence/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/pub-sub-presence/react/tsconfig.json b/examples/pub-sub-presence/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/pub-sub-presence/react/tsconfig.json
+++ b/examples/pub-sub-presence/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/pub-sub-presence/react/vite.config.ts b/examples/pub-sub-presence/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/pub-sub-presence/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/spaces-avatar-stack/javascript/README.md b/examples/spaces-avatar-stack/javascript/README.md
index c6fa576e23..54826fb42a 100644
--- a/examples/spaces-avatar-stack/javascript/README.md
+++ b/examples/spaces-avatar-stack/javascript/README.md
@@ -12,10 +12,10 @@ Avatar stack are implemented using [Ably Spaces](/docs/products/spaces). The Spa
 
 Use the following methods to add avatar stack into an application:
 
-* [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
-* [`space.member.subscribe()`](/docs/spaces/avatar#subscribe): subscribes to members' online status and profile updates by registering a listener.
-* [`space.enter()`](/docs/spaces/space#enter): entering a space will register a client as a member and emit an `enter` event to all subscribers.
-* [`space.members.getSelf()` and `space.members.getOthers()`](/docs/spaces/avatar#retrieve): retrieves the list of users currently active in the Space or have recently left but not yet been removed.
+- [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
+- [`space.member.subscribe()`](/docs/spaces/avatar#subscribe): subscribes to members' online status and profile updates by registering a listener.
+- [`space.enter()`](/docs/spaces/space#enter): entering a space will register a client as a member and emit an `enter` event to all subscribers.
+- [`space.members.getSelf()` and `space.members.getOthers()`](/docs/spaces/avatar#retrieve): retrieves the list of users currently active in the Space or have recently left but not yet been removed.
 
 Find out more about [avatar stack](/docs/spaces/avatar).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run spaces-avatar-stack-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-avatar-stack/javascript/postcss.config.ts b/examples/spaces-avatar-stack/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/spaces-avatar-stack/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-avatar-stack/javascript/src/script.ts b/examples/spaces-avatar-stack/javascript/src/script.ts
index bd3ce53e91..5caddc076a 100644
--- a/examples/spaces-avatar-stack/javascript/src/script.ts
+++ b/examples/spaces-avatar-stack/javascript/src/script.ts
@@ -1,7 +1,8 @@
 import Spaces, { type SpaceMember } from '@ably/spaces';
 import { Realtime } from 'ably';
 import { nanoid } from 'nanoid';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 
 export type Member = Omit<SpaceMember, 'profileData'> & {
   profileData: { memberColor: string; name: string };
@@ -12,7 +13,7 @@ connect();
 async function connect() {
   const client = new Realtime({
     clientId: nanoid(),
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+    key: import.meta.env.VITE_ABLY_KEY as string,
   });
 
   const urlParams = new URLSearchParams(window.location.search);
@@ -42,8 +43,8 @@ async function connect() {
   /** 💡 Enter the space as soon as it's available 💡 */
   space
     .enter({
-      name: faker.person.firstName() + ' ' + faker.person.lastName(),
-      memberColor: faker.color.rgb({ format: 'hex', casing: 'lower' }),
+      name: `${minifaker.firstName()} ${minifaker.lastName()}`,
+      memberColor: minifaker.color(),
     })
     .then(async () => {
       const otherMembers = await space.members.getOthers();
diff --git a/examples/spaces-avatar-stack/javascript/tailwind.config.ts b/examples/spaces-avatar-stack/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-avatar-stack/javascript/tailwind.config.ts
+++ b/examples/spaces-avatar-stack/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-avatar-stack/javascript/vite-env.d.ts b/examples/spaces-avatar-stack/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/spaces-avatar-stack/javascript/vite-env.d.ts
+++ b/examples/spaces-avatar-stack/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/spaces-avatar-stack/javascript/vite.config.ts b/examples/spaces-avatar-stack/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/spaces-avatar-stack/javascript/vite.config.ts
+++ b/examples/spaces-avatar-stack/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/spaces-avatar-stack/react/.gitignore b/examples/spaces-avatar-stack/react/.gitignore
index 0cb8fedfd5..d6e89627bb 100644
--- a/examples/spaces-avatar-stack/react/.gitignore
+++ b/examples/spaces-avatar-stack/react/.gitignore
@@ -36,3 +36,35 @@ yarn-error.log*
 next-env.d.ts
 
 .env.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
diff --git a/examples/spaces-avatar-stack/react/README.md b/examples/spaces-avatar-stack/react/README.md
index ecd39291a1..79392deb77 100644
--- a/examples/spaces-avatar-stack/react/README.md
+++ b/examples/spaces-avatar-stack/react/README.md
@@ -12,10 +12,10 @@ Avatar stack are implemented using [Ably Spaces](/docs/products/spaces). The Spa
 
 Use the following components to add avatar stack into an application:
 
-* [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
-* [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
-* [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
-* [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build avatar stacks. It retrieves members of the space, including members that have left the space, but have not yet been removed.
+- [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
+- [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
+- [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
+- [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build avatar stacks. It retrieves members of the space, including members that have left the space, but have not yet been removed.
 
 Find out more about [avatar stack](/docs/spaces/avatar).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run spaces-avatar-stack-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-avatar-stack/react/index.html b/examples/spaces-avatar-stack/react/index.html
new file mode 100644
index 0000000000..2996a1c361
--- /dev/null
+++ b/examples/spaces-avatar-stack/react/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spaces Avatar Stack</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/spaces-avatar-stack/react/next.config.ts b/examples/spaces-avatar-stack/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/spaces-avatar-stack/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-avatar-stack/react/package.json b/examples/spaces-avatar-stack/react/package.json
index c383330f84..23889bae2c 100644
--- a/examples/spaces-avatar-stack/react/package.json
+++ b/examples/spaces-avatar-stack/react/package.json
@@ -1,11 +1,12 @@
 {
   "name": "spaces-avatar-stack-react",
-  "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "version": "0.1.0",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   }
 }
diff --git a/examples/spaces-avatar-stack/react/postcss.config.ts b/examples/spaces-avatar-stack/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/spaces-avatar-stack/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-avatar-stack/react/src/App.tsx b/examples/spaces-avatar-stack/react/src/App.tsx
new file mode 100644
index 0000000000..66a1d5940c
--- /dev/null
+++ b/examples/spaces-avatar-stack/react/src/App.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { useMembers, useSpace, SpaceProvider, SpacesProvider } from '@ably/spaces/react';
+import { type SpaceMember } from '@ably/spaces';
+import { Avatar } from './components/Avatar';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
+import Spaces from '@ably/spaces';
+import { Realtime } from 'ably';
+import { nanoid } from 'nanoid';
+import './styles/styles.css';
+
+export type Member = Omit<SpaceMember, 'profileData'> & {
+  profileData: { memberColor: string; name: string };
+};
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: nanoid() });
+const spaces = new Spaces(client);
+
+function AvatarStack() {
+  const { space } = useSpace();
+
+  useEffect(() => {
+    space?.enter({
+      name: minifaker.firstName() + ' ' + minifaker.lastName(),
+      memberColor: minifaker.color(),
+    });
+
+    return () => {
+      space?.leave();
+    };
+  }, [space]);
+
+  const { others, self } = useMembers();
+  const hasMoreUsers = others.length > 3;
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="flex items-center space-x-[-8px]">
+        {self && (
+          <div className="relative" key={self.clientId}>
+            <Avatar user={self as Member} isSelf={true} />
+          </div>
+        )}
+
+        {others.slice(0, 4).map((other) => {
+          return (
+            <div className="relative z-10" key={other.clientId}>
+              <Avatar user={other as Member} isSelf={false} />
+            </div>
+          );
+        })}
+
+        {hasMoreUsers && (
+          <div className="rounded-full w-10 h-10 flex items-center justify-center bg-gray-600 relative z-20">
+            <p className="text-white text-sm">+{others.length - 4}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  const [spaceName, setSpaceName] = useState('spaces-avatar-stack');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+    if (name) {
+      setSpaceName(name);
+    }
+  }, []);
+
+  return (
+    <SpacesProvider client={spaces}>
+      <SpaceProvider name={spaceName}>
+        <AvatarStack />
+      </SpaceProvider>
+    </SpacesProvider>
+  );
+}
diff --git a/examples/spaces-avatar-stack/react/src/app/layout.tsx b/examples/spaces-avatar-stack/react/src/app/layout.tsx
deleted file mode 100644
index 48c521e671..0000000000
--- a/examples/spaces-avatar-stack/react/src/app/layout.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import Spaces from "@ably/spaces";
-import { SpaceProvider, SpacesProvider } from "@ably/spaces/react";
-import { Realtime } from 'ably';
-import { nanoid } from 'nanoid';
-import { useEffect, useState } from 'react';
-import "../../styles/styles.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-const client = new Realtime({ key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: nanoid() });
-const spaces = new Spaces(client);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [spaceName, setSpaceName] = useState('spaces-avatar-stack');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-    if (name) {
-      setSpaceName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <SpacesProvider client={spaces}>
-          <SpaceProvider name={spaceName}>{children}</SpaceProvider>
-        </SpacesProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/spaces-avatar-stack/react/src/app/page.tsx b/examples/spaces-avatar-stack/react/src/app/page.tsx
deleted file mode 100644
index ddb1687e47..0000000000
--- a/examples/spaces-avatar-stack/react/src/app/page.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { useMembers, useSpace } from "@ably/spaces/react";
-import { type SpaceMember } from "@ably/spaces";
-import { Avatar } from "../components/Avatar";
-import { faker } from '@faker-js/faker';
-import "../../styles/styles.css";
-
-export type Member = Omit<SpaceMember, "profileData"> & {
-  profileData: { memberColor: string; name: string };
-};
-
-export default function Home() {
-  /** 💡 Get a handle on a space instance 💡 */
-  const { space } = useSpace();
-
-  /** 💡 Enter the space as soon as it's available 💡 */
-  useEffect(() => {
-    space?.enter({
-      name: faker.person.firstName() + ' ' + faker.person.lastName(),
-      memberColor: faker.color.rgb({ format: 'hex', casing: 'lower' }),
-    });
-
-    return () => {
-      space?.leave();
-    };
-  }, [space]);
-
-  /** 💡 Get everybody in the space including the local member 💡 */
-  const { others, self } = useMembers();
-  const hasMoreUsers = others.length > 3;
-
-  return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="flex items-center space-x-[-8px]">
-        {/** 💡 Add your avatar to the stack.💡 */}
-        {self && (
-          <div className="relative" key={self.clientId}>
-            <Avatar user={self as Member} isSelf={true} />
-          </div>
-        )}
-
-        {/** 💡 Stack of first 4 user avatars excluding yourself.💡 */}
-        {others.slice(0, 4).map((other) => {
-          return (
-            <div className="relative z-10" key={other.clientId}>
-              <Avatar user={other as Member} isSelf={false} />
-            </div>
-          );
-        })}
-
-        {hasMoreUsers && (
-          <div className="rounded-full w-10 h-10 flex items-center justify-center bg-gray-600 relative z-20">
-            <p className="text-white text-sm">+{others.length-4}</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/examples/spaces-avatar-stack/react/src/components/Avatar.tsx b/examples/spaces-avatar-stack/react/src/components/Avatar.tsx
index 811d321aa0..157a5d5f98 100644
--- a/examples/spaces-avatar-stack/react/src/components/Avatar.tsx
+++ b/examples/spaces-avatar-stack/react/src/components/Avatar.tsx
@@ -1,55 +1,47 @@
-import { FunctionComponent, useState } from "react";
-import { type SpaceMember } from "@ably/spaces";
-import "../../styles/styles.css";
+import { FunctionComponent, useState } from 'react';
+import { type SpaceMember } from '@ably/spaces';
 
-type Member = Omit<SpaceMember, "profileData"> & {
+type Member = Omit<SpaceMember, 'profileData'> & {
   profileData: { memberColor: string; name: string };
 };
 
-const UserInfo: FunctionComponent<{ user: Member; isSelf?: boolean }> = ({
-  user,
-  isSelf,
-}) => {
+const UserInfo: FunctionComponent<{ user: Member; isSelf?: boolean }> = ({ user, isSelf }) => {
   const initials = user.profileData.name
-    .split(" ")
+    .split(' ')
     .map((word: string) => word.charAt(0))
-    .join("");
+    .join('');
 
-  const name = isSelf
-    ? `${user.profileData.name} (You)`
-    : user.profileData.name;
+  const name = isSelf ? `${user.profileData.name} (You)` : user.profileData.name;
 
   return (
-  <div className="absolute left-0 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-[200px]">
-    <div className="uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white">
-      <div className="flex items-center space-x-2">
-        <div
-          style={{
-            backgroundColor: user.profileData.memberColor,
-          }}
-          className="rounded-full w-[40px] h-[40px] flex items-center justify-center"
-        >
-          <p className="text-white text-sm font-medium">
-            {initials}
-          </p>
-        </div>
+    <div className="absolute left-0 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-[200px]">
+      <div className="uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white">
+        <div className="flex items-center space-x-2">
+          <div
+            style={{
+              backgroundColor: user.profileData.memberColor,
+            }}
+            className="rounded-full w-[40px] h-[40px] flex items-center justify-center"
+          >
+            <p className="text-white text-sm font-medium">{initials}</p>
+          </div>
 
-        <div className="flex flex-col">
-          <p className="text-sm font-medium">{name}</p>
+          <div className="flex flex-col">
+            <p className="text-sm font-medium">{name}</p>
+          </div>
         </div>
       </div>
     </div>
-  </div>
   );
 };
 
-export function Avatar({ user, isSelf }: { user: Member, isSelf: boolean }) {
+export function Avatar({ user, isSelf }: { user: Member; isSelf: boolean }) {
   const [hover, setHover] = useState(false);
 
   const userInitials = user.profileData.name
-    .split(" ")
+    .split(' ')
     .map((word: string) => word.charAt(0))
-    .join("");
+    .join('');
 
   return (
     <div className="relative group">
@@ -57,7 +49,7 @@ export function Avatar({ user, isSelf }: { user: Member, isSelf: boolean }) {
         key={user.clientId}
         className="rounded-full w-10 h-10 flex items-center justify-center cursor-pointer"
         style={{
-          backgroundColor: user.profileData.memberColor
+          backgroundColor: user.profileData.memberColor,
         }}
         onMouseOver={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
diff --git a/examples/spaces-avatar-stack/react/src/environment.d.ts b/examples/spaces-avatar-stack/react/src/environment.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/spaces-avatar-stack/react/src/environment.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/spaces-avatar-stack/react/src/main.tsx b/examples/spaces-avatar-stack/react/src/main.tsx
new file mode 100644
index 0000000000..56fea7d6bc
--- /dev/null
+++ b/examples/spaces-avatar-stack/react/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/spaces-avatar-stack/react/src/styles/styles.css b/examples/spaces-avatar-stack/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/spaces-avatar-stack/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/spaces-avatar-stack/react/styles/styles.css b/examples/spaces-avatar-stack/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/spaces-avatar-stack/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/spaces-avatar-stack/react/tailwind.config.ts b/examples/spaces-avatar-stack/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-avatar-stack/react/tailwind.config.ts
+++ b/examples/spaces-avatar-stack/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-avatar-stack/react/tsconfig.json b/examples/spaces-avatar-stack/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/spaces-avatar-stack/react/tsconfig.json
+++ b/examples/spaces-avatar-stack/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/spaces-avatar-stack/react/vite.config.ts b/examples/spaces-avatar-stack/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/spaces-avatar-stack/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/spaces-component-locking/javascript/README.md b/examples/spaces-component-locking/javascript/README.md
index b26ce1862c..e98bd12569 100644
--- a/examples/spaces-component-locking/javascript/README.md
+++ b/examples/spaces-component-locking/javascript/README.md
@@ -12,10 +12,10 @@ Component locking is implemented using [Ably Spaces](/docs/products/spaces). The
 
 Use the following components to add component locking into an application:
 
-* [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
-* [`space.member.subscribe()`](/docs/spaces/locking#subscribe): subscribes to members' online status and profile updates by registering a listener.
-* [`space.enter()`](/docs/spaces/space#enter): Entering a space will register a client as a member and emit an `enter` event to all subscribers.
-* [`space.locks.acquire()`](/docs/spaces/locking#acquire): a method to attempt to acquire a lock with a given unique ID.
+- [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
+- [`space.member.subscribe()`](/docs/spaces/locking#subscribe): subscribes to members' online status and profile updates by registering a listener.
+- [`space.enter()`](/docs/spaces/space#enter): Entering a space will register a client as a member and emit an `enter` event to all subscribers.
+- [`space.locks.acquire()`](/docs/spaces/locking#acquire): a method to attempt to acquire a lock with a given unique ID.
 
 This example also uses [`channels.get()`](/docs/channels#create), [`channel.subscribe()`](/docs/channels#subscribe), and [`channel.publish()`](/docs/channels#publish) from the core Pub/Sub product in order to track component values across multiple clients.
 
@@ -41,7 +41,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -59,4 +59,4 @@ yarn run spaces-component-locking-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-component-locking/javascript/postcss.config.ts b/examples/spaces-component-locking/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/spaces-component-locking/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-component-locking/javascript/src/script.ts b/examples/spaces-component-locking/javascript/src/script.ts
index 14f5324a0e..3c42484c30 100644
--- a/examples/spaces-component-locking/javascript/src/script.ts
+++ b/examples/spaces-component-locking/javascript/src/script.ts
@@ -2,7 +2,8 @@ import Spaces, { Space, Lock, type SpaceMember } from '@ably/spaces';
 import { Realtime } from 'ably';
 import { nanoid } from 'nanoid';
 import { createLockedFieldSvg } from './LockedField';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 
 type Member = Omit<SpaceMember, 'profileData'> & {
   profileData: { memberColor: string; memberName: string };
@@ -22,7 +23,7 @@ const entries: Entry[] = [
 
 const client = new Realtime({
   clientId: nanoid(),
-  key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+  key: import.meta.env.VITE_ABLY_KEY as string,
 });
 
 const handleFocus = async (event: FocusEvent) => {
@@ -69,7 +70,8 @@ function buildForm() {
 
     const formInput = document.createElement('input');
     formInput.id = entry.name;
-    formInput.className = 'uk-input w-full p-3 rounded-md transition-colors duration-200 bg-white hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+    formInput.className =
+      'uk-input w-full p-3 rounded-md transition-colors duration-200 bg-white hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
     formInput.placeholder = 'Click to lock and edit me';
     formInput.name = entry.name;
     formInput.onfocus = handleFocus;
@@ -106,8 +108,8 @@ async function connect() {
 
   /** 💡 Enter the space as soon as it's available 💡 */
   await space.enter({
-    memberName: faker.person.fullName(),
-    memberColor: faker.color.rgb({ format: 'hex', casing: 'lower' }),
+    memberName: `${minifaker.firstName()} ${minifaker.lastName()}`,
+    memberColor: minifaker.color(),
   });
 
   buildForm();
diff --git a/examples/spaces-component-locking/javascript/tailwind.config.ts b/examples/spaces-component-locking/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-component-locking/javascript/tailwind.config.ts
+++ b/examples/spaces-component-locking/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-component-locking/javascript/vite-env.d.ts b/examples/spaces-component-locking/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/spaces-component-locking/javascript/vite-env.d.ts
+++ b/examples/spaces-component-locking/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/spaces-component-locking/javascript/vite.config.ts b/examples/spaces-component-locking/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/spaces-component-locking/javascript/vite.config.ts
+++ b/examples/spaces-component-locking/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/spaces-component-locking/react/README.md b/examples/spaces-component-locking/react/README.md
index 1a68091c0a..e127215d4b 100644
--- a/examples/spaces-component-locking/react/README.md
+++ b/examples/spaces-component-locking/react/README.md
@@ -12,19 +12,18 @@ Component locking is implemented using [Ably Spaces](/docs/products/spaces). The
 
 Use the following components to add component locking into an application:
 
-* [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
-* [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
-* [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
-* [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build component locking. It retrieves members of the space, including members that have left the space, but have not yet been removed.
-* [`space.locks.acquire()`](/docs/spaces/locking#acquire): a method to attempt to acquire a lock with a given unique ID.
+- [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
+- [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
+- [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
+- [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build component locking. It retrieves members of the space, including members that have left the space, but have not yet been removed.
+- [`space.locks.acquire()`](/docs/spaces/locking#acquire): a method to attempt to acquire a lock with a given unique ID.
 
-This example also uses the [`ChannelProvider`](/docs/getting-started/react#channel-provider) and  [`useChannel()`](/docs/getting-started/react#useChannel) hook from the core Pub/Sub product in order to publish and subscribe to the changing values of each component.
+This example also uses the [`ChannelProvider`](/docs/getting-started/react#channel-provider) and [`useChannel()`](/docs/getting-started/react#useChannel) hook from the core Pub/Sub product in order to publish and subscribe to the changing values of each component.
 
 Find out more about [component locking](/docs/spaces/locking).
 
 ## Getting started
 
-
 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found:
 
 ```sh
@@ -43,7 +42,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -61,4 +60,4 @@ yarn run spaces-component-locking-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-component-locking/react/index.html b/examples/spaces-component-locking/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/spaces-component-locking/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/spaces-component-locking/react/next.config.ts b/examples/spaces-component-locking/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/spaces-component-locking/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-component-locking/react/package.json b/examples/spaces-component-locking/react/package.json
index 5b76dc89ae..02ead2d41b 100644
--- a/examples/spaces-component-locking/react/package.json
+++ b/examples/spaces-component-locking/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/spaces-component-locking/react/postcss.config.ts b/examples/spaces-component-locking/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/spaces-component-locking/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-component-locking/react/src/App.tsx b/examples/spaces-component-locking/react/src/App.tsx
new file mode 100644
index 0000000000..c54a96e23d
--- /dev/null
+++ b/examples/spaces-component-locking/react/src/App.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { AblyProvider, ChannelProvider } from 'ably/react';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
+import { nanoid } from 'nanoid';
+import { Realtime } from 'ably';
+import { SpaceProvider, SpacesProvider, useSpace } from '@ably/spaces/react';
+import Spaces from '@ably/spaces';
+import type { SpaceMember } from '@ably/spaces';
+import { AblyPoweredInput } from './components/AblyPoweredInput';
+import './styles/styles.css';
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: nanoid() });
+const spaces = new Spaces(client);
+
+export type Member = Omit<SpaceMember, 'profileData'> & {
+  profileData: { memberColor: string; memberName: string };
+};
+
+const entries = [
+  { label: 'Entry 1', name: 'entry1' },
+  { label: 'Entry 2', name: 'entry2' },
+  { label: 'Entry 3', name: 'entry3' },
+];
+
+function ComponentLocking() {
+  /** 💡 Get a handle on a space instance 💡 */
+  const { space } = useSpace();
+
+  /** 💡 Enter the space as soon as it's available 💡 */
+  useEffect(() => {
+    space?.enter({
+      memberName: `${minifaker.firstName()} ${minifaker.lastName()}`,
+      memberColor: minifaker.color(),
+    });
+  }, [space]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-8">
+      <div className="flex flex-col space-y-4 w-full max-w-md">
+        {entries.map((entry) => {
+          return (
+            <ChannelProvider
+              channelName={`component-locking-${entry.name}`}
+              key={entry.name}
+              options={{ params: { rewind: '1' } }}
+            >
+              <AblyPoweredInput key={entry.name} label={entry.label} name={entry.name} />
+            </ChannelProvider>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  const [spaceName, setSpaceName] = useState('spaces-component-locking');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name) {
+      setSpaceName(name);
+    }
+  }, []);
+
+  return (
+    <AblyProvider client={client}>
+      <SpacesProvider client={spaces}>
+        <SpaceProvider name={spaceName}>
+          <ComponentLocking />
+        </SpaceProvider>
+      </SpacesProvider>
+    </AblyProvider>
+  );
+}
diff --git a/examples/spaces-component-locking/react/src/app/layout.tsx b/examples/spaces-component-locking/react/src/app/layout.tsx
deleted file mode 100644
index 7268d1fffb..0000000000
--- a/examples/spaces-component-locking/react/src/app/layout.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import Spaces from "@ably/spaces";
-import { AblyProvider } from "ably/react";
-import { SpaceProvider, SpacesProvider } from "@ably/spaces/react";
-import { Realtime } from 'ably';
-import { nanoid } from 'nanoid';
-import "../../styles/styles.css";
-import { useEffect, useState } from "react";
-
-const inter = Inter({ subsets: ["latin"] });
-
-const client = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: nanoid()});
-const spaces = new Spaces(client);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [spaceName, setSpaceName] = useState('spaces-component-locking');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name) {
-      setSpaceName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <AblyProvider client={client}>
-          <SpacesProvider client={spaces}>
-            <SpaceProvider name={spaceName}>{children}</SpaceProvider>
-          </SpacesProvider>
-        </AblyProvider>
-      </body>
-    </html>
-  );
-}
-
diff --git a/examples/spaces-component-locking/react/src/app/page.tsx b/examples/spaces-component-locking/react/src/app/page.tsx
deleted file mode 100644
index 72f83ad033..0000000000
--- a/examples/spaces-component-locking/react/src/app/page.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { useMemo, useEffect } from "react";
-import { useSpace } from "@ably/spaces/react";
-import type { SpaceMember } from "@ably/spaces";
-import { AblyPoweredInput } from "@/components/AblyPoweredInput";
-import { ChannelProvider } from "ably/react";
-import { faker } from '@faker-js/faker';
-
-export type Member = Omit<SpaceMember, "profileData"> & {
-  profileData: { memberColor: string; memberName: string };
-};
-
-const entries = [
-  { label: "Entry 1", name: "entry1" },
-  { label: "Entry 2", name: "entry2" },
-  { label: "Entry 3", name: "entry3" },
-];
-
-export default function Home() {
-  /** 💡 Get a handle on a space instance 💡 */
-  const { space } = useSpace();
-
-  /** 💡 Enter the space as soon as it's available 💡 */
-  useEffect(() => {
-    space?.enter({
-      memberName: faker.person.fullName(),
-      memberColor: faker.color.rgb({ format: 'hex', casing: 'lower' }),
-    });
-  }, [space]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center p-8">
-      <div className="flex flex-col space-y-4 w-full max-w-md">
-        {entries.map((entry) => {
-          return (
-            <ChannelProvider
-              channelName={`component-locking-${entry.name}`}
-              key={entry.name}
-              options={{ params: { rewind: '1' } }}
-            >
-              <AblyPoweredInput
-                key={entry.name}
-                label={entry.label}
-                name={entry.name}
-              />
-            </ChannelProvider>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
diff --git a/examples/spaces-component-locking/react/src/components/AblyPoweredInput.tsx b/examples/spaces-component-locking/react/src/components/AblyPoweredInput.tsx
index 3b282e7da9..5805dfbfcb 100644
--- a/examples/spaces-component-locking/react/src/components/AblyPoweredInput.tsx
+++ b/examples/spaces-component-locking/react/src/components/AblyPoweredInput.tsx
@@ -1,23 +1,23 @@
-import React, { useState } from "react";
-import type { Message } from "ably"
-import { useChannel } from "ably/react";
-import { useLock, useMembers } from "@ably/spaces/react";
-import type { SpaceMember } from "@ably/spaces";
-import { InputCell } from "./InputCell";
+import { useState } from 'react';
+import type { Message } from 'ably';
+import { useChannel } from 'ably/react';
+import { useLock, useMembers } from '@ably/spaces/react';
+import type { SpaceMember } from '@ably/spaces';
+import { InputCell } from './InputCell';
 
 type AblyPoweredInputProps = {
   name: string;
   label: string;
 };
 
-export type Member = Omit<SpaceMember, "profileData"> & {
+export type Member = Omit<SpaceMember, 'profileData'> & {
   profileData: { memberColor: string; memberName: string };
 };
 
 export function AblyPoweredInput({ name, label }: AblyPoweredInputProps) {
   const { member, status } = useLock(name);
   const { space, self } = useMembers();
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState('');
 
   const { channel, publish } = useChannel(`component-locking-${name}`, (message: Message) => {
     if (message.connectionId === self?.connectionId) return;
@@ -25,7 +25,7 @@ export function AblyPoweredInput({ name, label }: AblyPoweredInputProps) {
   });
 
   const lockHolder = member as Member;
-  const locked = status === "locked";
+  const locked = status === 'locked';
   const lockedByYou = locked && lockHolder?.connectionId === self?.connectionId;
 
   const handleFocus = async () => {
@@ -52,7 +52,7 @@ export function AblyPoweredInput({ name, label }: AblyPoweredInputProps) {
         onChange={(newValue) => {
           setValue(newValue);
           if (newValue !== value) {
-            publish("update", { text: newValue });
+            publish('update', { text: newValue });
           }
         }}
         lockedByYou={lockedByYou}
diff --git a/examples/spaces-component-locking/react/src/env.d.ts b/examples/spaces-component-locking/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/spaces-component-locking/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/spaces-component-locking/react/src/index.tsx b/examples/spaces-component-locking/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/spaces-component-locking/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/spaces-component-locking/react/src/styles/styles.css b/examples/spaces-component-locking/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/spaces-component-locking/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/spaces-component-locking/react/styles/styles.css b/examples/spaces-component-locking/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/spaces-component-locking/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/spaces-component-locking/react/tailwind.config.ts b/examples/spaces-component-locking/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-component-locking/react/tailwind.config.ts
+++ b/examples/spaces-component-locking/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-component-locking/react/tsconfig.json b/examples/spaces-component-locking/react/tsconfig.json
index 207895f926..4082f16a5d 100644
--- a/examples/spaces-component-locking/react/tsconfig.json
+++ b/examples/spaces-component-locking/react/tsconfig.json
@@ -1,20 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/spaces-component-locking/react/vite.config.ts b/examples/spaces-component-locking/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/spaces-component-locking/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/spaces-live-cursors/javascript/README.md b/examples/spaces-live-cursors/javascript/README.md
index 808efc84b2..dfb793ada1 100644
--- a/examples/spaces-live-cursors/javascript/README.md
+++ b/examples/spaces-live-cursors/javascript/README.md
@@ -12,10 +12,10 @@ Live cursors are implemented using [Ably Spaces](/docs/products/spaces). The Spa
 
 Use the following components to add live cursors into an application:
 
-* [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
-* [`space.cursors.subscribe()`](/docs/spaces/cursors#subscribe): subscribes to members' online status and profile updates by registering a listener.
-* [`space.enter()`](/docs/spaces/space#enter): entering a space will register a client as a member and emit an `enter` event to all subscribers.
-* [`space.cursors.set()`](/docs/spaces/cursors#set): a method to update this member's cursor location in realtime
+- [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
+- [`space.cursors.subscribe()`](/docs/spaces/cursors#subscribe): subscribes to members' online status and profile updates by registering a listener.
+- [`space.enter()`](/docs/spaces/space#enter): entering a space will register a client as a member and emit an `enter` event to all subscribers.
+- [`space.cursors.set()`](/docs/spaces/cursors#set): a method to update this member's cursor location in realtime
 
 Find out more about [live-cursors](/docs/spaces/cursors).
 
@@ -39,7 +39,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -57,4 +57,4 @@ yarn run spaces-live-cursors-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-live-cursors/javascript/postcss.config.ts b/examples/spaces-live-cursors/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/spaces-live-cursors/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-live-cursors/javascript/src/script.ts b/examples/spaces-live-cursors/javascript/src/script.ts
index fa685ff8a1..09f4b0f2a2 100644
--- a/examples/spaces-live-cursors/javascript/src/script.ts
+++ b/examples/spaces-live-cursors/javascript/src/script.ts
@@ -31,7 +31,7 @@ function trackCursor(parentRef: HTMLDivElement, updatePosition: (position: Curso
 async function connect() {
   const client = new Realtime({
     clientId: nanoid(),
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+    key: import.meta.env.VITE_ABLY_KEY as string,
   });
 
   const urlParams = new URLSearchParams(window.location.search);
@@ -40,18 +40,23 @@ async function connect() {
   const space = await spaces.get(spaceName);
   const parentRef = document.getElementById('live-cursors');
 
-  if (!parentRef || !(parentRef instanceof HTMLDivElement)) return;
+  if (!parentRef || !(parentRef instanceof HTMLDivElement)) {
+    return;
+  }
 
-  await space.enter({
-    name: mockNames[Math.floor(Math.random() * mockNames.length)],
-    userColors: { cursorColor: colors[Math.floor(Math.random() * colors.length)] },
-  });
+  parentRef.style.cursor = 'default';
 
   space.cursors.subscribe('update', async (cursorUpdate) => {
     const members = await space.members.getAll();
     const member = members.find((member) => member.connectionId === cursorUpdate.connectionId);
 
-    if (!member) return;
+    if (!member) {
+      return;
+    }
+
+    if (client.connection.id === cursorUpdate.connectionId) {
+      return;
+    }
 
     if (cursorUpdate.data?.['state'] === 'leave') {
       document.getElementById(`member-cursor-${member.connectionId}`)?.remove();
@@ -74,7 +79,8 @@ async function connect() {
     memberCursorContainer.innerHTML = createCursorSvg(cursorColor?.cursorColor || '').outerHTML;
 
     const cursorNameContainer = document.createElement('div');
-    cursorNameContainer.className = 'uk-badge uk-position-relative text-white transform translate-x-4 -translate-y-1 px-3 py-2';
+    cursorNameContainer.className =
+      'uk-badge uk-position-relative text-white transform translate-x-4 -translate-y-1 px-3 py-2';
     cursorNameContainer.style.backgroundColor = cursorColor?.cursorColor || '';
     cursorNameContainer.textContent = member?.profileData?.['name'] || '';
 
@@ -82,6 +88,14 @@ async function connect() {
     parentRef.appendChild(memberCursorContainer);
   });
 
+  const mockName = mockNames[Math.floor(Math.random() * mockNames.length)];
+  const userColor = { cursorColor: colors[Math.floor(Math.random() * colors.length)] };
+
+  await space.enter({
+    name: mockName,
+    userColors: userColor,
+  });
+
   const updateCursorPosition = async (position: CursorPosition) => {
     await space.cursors.set({ position: { x: position.left, y: position.top } });
   };
diff --git a/examples/spaces-live-cursors/javascript/tailwind.config.ts b/examples/spaces-live-cursors/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-live-cursors/javascript/tailwind.config.ts
+++ b/examples/spaces-live-cursors/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-live-cursors/javascript/vite-env.d.ts b/examples/spaces-live-cursors/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/spaces-live-cursors/javascript/vite-env.d.ts
+++ b/examples/spaces-live-cursors/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/spaces-live-cursors/javascript/vite.config.ts b/examples/spaces-live-cursors/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/spaces-live-cursors/javascript/vite.config.ts
+++ b/examples/spaces-live-cursors/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/spaces-live-cursors/react/README.md b/examples/spaces-live-cursors/react/README.md
index ff42e6668d..13b05bf5d6 100644
--- a/examples/spaces-live-cursors/react/README.md
+++ b/examples/spaces-live-cursors/react/README.md
@@ -12,11 +12,11 @@ Live cursors are implemented using [Ably Spaces](/docs/products/spaces). The Spa
 
 Use the following components to add live cursors into an application:
 
-* [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
-* [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
-* [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
-* [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build live cursors. It retrieves members of the space, including members that have left the space, but have not yet been removed.
-* [`useCursors()`](/docs/spaces/react#useCursors) hook: a hook to track a member's cursor position and provide a view of all members' cursors within a space.
+- [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
+- [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
+- [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
+- [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build live cursors. It retrieves members of the space, including members that have left the space, but have not yet been removed.
+- [`useCursors()`](/docs/spaces/react#useCursors) hook: a hook to track a member's cursor position and provide a view of all members' cursors within a space.
 
 Find out more about [live cursors](/docs/spaces/cursors).
 
@@ -40,7 +40,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -58,4 +58,4 @@ yarn run spaces-live-cursors-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-live-cursors/react/index.html b/examples/spaces-live-cursors/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/spaces-live-cursors/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/spaces-live-cursors/react/next.config.ts b/examples/spaces-live-cursors/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/spaces-live-cursors/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-live-cursors/react/package.json b/examples/spaces-live-cursors/react/package.json
index dc99e86625..de79f20490 100644
--- a/examples/spaces-live-cursors/react/package.json
+++ b/examples/spaces-live-cursors/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/spaces-live-cursors/react/postcss.config.ts b/examples/spaces-live-cursors/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/spaces-live-cursors/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-live-cursors/react/src/App.tsx b/examples/spaces-live-cursors/react/src/App.tsx
new file mode 100644
index 0000000000..7c0e3d2350
--- /dev/null
+++ b/examples/spaces-live-cursors/react/src/App.tsx
@@ -0,0 +1,73 @@
+import { YourCursor, MemberCursors } from './components/LiveCursors';
+import { useMemo, useRef, useEffect, useState } from 'react';
+import { useMembers, useSpace, SpaceProvider, SpacesProvider } from '@ably/spaces/react';
+import type { SpaceMember } from '@ably/spaces';
+import Spaces from '@ably/spaces';
+import { Realtime } from 'ably';
+import { nanoid } from 'nanoid';
+import './styles/styles.css';
+
+export type Member = Omit<SpaceMember, 'profileData'> & {
+  profileData: { userColors: { cursorColor: string }; name: string };
+};
+
+export const mockNames = ['Dane Mills', 'Sam Mason', 'Najla Karam'];
+
+export const colors = [{ cursorColor: '#6366f1' }, { cursorColor: '#8b5cf6' }, { cursorColor: '#ec4899' }];
+
+/** 💡 Select a mock name to assign randomly to a new user that enters the space💡 */
+const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: nanoid() });
+const spaces = new Spaces(client);
+
+function LiveCursorsDemo() {
+  const name = useMemo(mockName, []);
+  /** 💡 Select a color to assign randomly to a new user that enters the space💡 */
+  const userColors = useMemo(() => colors[Math.floor(Math.random() * colors.length)], []);
+
+  /** 💡 Get a handle on a space instance 💡 */
+  const { space } = useSpace();
+
+  useEffect(() => {
+    space?.enter({ name, userColors });
+  }, [space, name, userColors]);
+
+  const { self } = useMembers();
+  const liveCursors = useRef(null);
+
+  return (
+    <div
+      id="live-cursors"
+      ref={liveCursors}
+      className="uk-container min-h-screen flex items-center justify-center bg-gray-50 relative"
+    >
+      <p className="uk-text-lead text-center text-gray-700 absolute top-8 left-1/2 transform -translate-x-1/2">
+        Move your cursor over the screen to see live cursors in action
+      </p>
+      <YourCursor self={self as Member | null} parentRef={liveCursors} />
+      <MemberCursors />
+    </div>
+  );
+}
+
+export default function App() {
+  const [spaceName, setSpaceName] = useState('spaces-live-cursors');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name) {
+      setSpaceName(name);
+    }
+  }, []);
+
+  return (
+    <SpacesProvider client={spaces}>
+      <SpaceProvider name={spaceName}>
+        <LiveCursorsDemo />
+      </SpaceProvider>
+    </SpacesProvider>
+  );
+}
diff --git a/examples/spaces-live-cursors/react/src/app/layout.tsx b/examples/spaces-live-cursors/react/src/app/layout.tsx
deleted file mode 100644
index 33c1c0f212..0000000000
--- a/examples/spaces-live-cursors/react/src/app/layout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import Spaces from "@ably/spaces";
-import { SpaceProvider, SpacesProvider } from "@ably/spaces/react";
-import { Realtime } from 'ably';
-import { nanoid } from 'nanoid';
-import "../../styles/styles.css";
-import { useEffect, useState } from "react";
-
-const inter = Inter({ subsets: ["latin"] });
-
-const client = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: nanoid()});
-const spaces = new Spaces(client);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [spaceName, setSpaceName] = useState('spaces-live-cursors');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name) {
-      setSpaceName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <SpacesProvider client={spaces}>
-          <SpaceProvider name={spaceName}>{children}</SpaceProvider>
-        </SpacesProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/spaces-live-cursors/react/src/app/page.tsx b/examples/spaces-live-cursors/react/src/app/page.tsx
deleted file mode 100644
index c155a2e645..0000000000
--- a/examples/spaces-live-cursors/react/src/app/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import { YourCursor, MemberCursors } from "../components/LiveCursors";
-import { useMemo, useRef, useEffect } from "react";
-import { useMembers, useSpace } from "@ably/spaces/react";
-import type { SpaceMember } from "@ably/spaces";
-
-export type Member = Omit<SpaceMember, "profileData"> & {
-  profileData: { userColors: { cursorColor: string; }; name: string };
-};
-
-export const mockNames = [
-  "Dane Mills",
-  "Sam Mason",
-  "Najla Karam",
-];
-
-export const colors = [
-  { cursorColor: "#6366f1" },
-  { cursorColor: "#8b5cf6" },
-  { cursorColor: "#ec4899" },
-];
-
-/** 💡 Select a mock name to assign randomly to a new user that enters the space💡 */
-const mockName = () => mockNames[Math.floor(Math.random() * mockNames.length)];
-
-export default function Home() {
-  const name = useMemo(mockName, []);
-  /** 💡 Select a color to assign randomly to a new user that enters the space💡 */
-  const userColors = useMemo(
-    () => colors[Math.floor(Math.random() * colors.length)],
-    [],
-  );
-
-  /** 💡 Get a handle on a space instance 💡 */
-  const { space } = useSpace();
-
-  useEffect(() => {
-    space?.enter({ name, userColors });
-  }, [space, name, userColors]);
-
-  const { self } = useMembers();
-  const liveCursors = useRef(null);
-
-  return (
-    <div
-      id="live-cursors"
-      ref={liveCursors}
-      className="uk-container min-h-screen flex items-center justify-center bg-gray-50 relative"
-    >
-      <p className="uk-text-lead text-center text-gray-700 absolute top-8 left-1/2 transform -translate-x-1/2">
-        Move your cursor over the screen to see live cursors in action
-      </p>
-      <YourCursor self={self as Member | null} parentRef={liveCursors} />
-      <MemberCursors />
-    </div>
-  );
-}
diff --git a/examples/spaces-live-cursors/react/src/components/LiveCursors.tsx b/examples/spaces-live-cursors/react/src/components/LiveCursors.tsx
index b7746470cd..bc7571949e 100644
--- a/examples/spaces-live-cursors/react/src/components/LiveCursors.tsx
+++ b/examples/spaces-live-cursors/react/src/components/LiveCursors.tsx
@@ -8,7 +8,7 @@ export type Member = Omit<SpaceMember, "profileData"> & {
   profileData: { userColors: { cursorColor: string; }; name: string };
 };
 
-// 💡 This component is used to render the cursor of the user
+// 💡 This component is used to update the location of the user's cursor
 const YourCursor = ({
   self,
   parentRef,
@@ -24,28 +24,7 @@ const YourCursor = ({
 
   useTrackCursor(setCursorPosition, parentRef);
 
-  if (!self) return null;
-  if (!cursorPosition || cursorPosition.state === "leave") return null;
-
-  const { cursorColor } = self.profileData.userColors;
-
-  return (
-    <div
-      className="uk-position-absolute uk-animation-fade pointer-events-none"
-      style={{
-        top: `${cursorPosition?.top || 0}px`,
-        left: `${cursorPosition?.left || 0}px`,
-      }}
-    >
-      <CursorSvg cursorColor={cursorColor} />
-      <div
-        style={{ backgroundColor: cursorColor }}
-        className="uk-badge uk-position-relative text-white transform translate-x-4 -translate-y-1 px-3 py-2"
-      >
-        You
-      </div>
-    </div>
-  );
+  return null;
 };
 
 // 💡 This component is used to render the cursors of other users in the space
diff --git a/examples/spaces-live-cursors/react/src/env.d.ts b/examples/spaces-live-cursors/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/spaces-live-cursors/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/spaces-live-cursors/react/src/index.tsx b/examples/spaces-live-cursors/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/spaces-live-cursors/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/spaces-live-cursors/react/src/styles/styles.css b/examples/spaces-live-cursors/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/spaces-live-cursors/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/spaces-live-cursors/react/styles/styles.css b/examples/spaces-live-cursors/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/spaces-live-cursors/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/spaces-live-cursors/react/tailwind.config.ts b/examples/spaces-live-cursors/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-live-cursors/react/tailwind.config.ts
+++ b/examples/spaces-live-cursors/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-live-cursors/react/tsconfig.json b/examples/spaces-live-cursors/react/tsconfig.json
index c83c1542a1..4082f16a5d 100644
--- a/examples/spaces-live-cursors/react/tsconfig.json
+++ b/examples/spaces-live-cursors/react/tsconfig.json
@@ -1,19 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/spaces-live-cursors/react/vite.config.ts b/examples/spaces-live-cursors/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/spaces-live-cursors/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/spaces-member-location/javascript/README.md b/examples/spaces-member-location/javascript/README.md
index 718194a16a..709dd6f5c7 100644
--- a/examples/spaces-member-location/javascript/README.md
+++ b/examples/spaces-member-location/javascript/README.md
@@ -10,11 +10,11 @@ Member locations are implemented using [Ably Spaces](/docs/products/spaces). The
 
 Use the following components to add member location into an application:
 
-* [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
-* [`space.locations.subscribe()`](/docs/spaces/locations#subscribe): subscribes to location on the document by registering a listener.
-* [`space.enter()`](/docs/spaces/space#enter): entering a space will register a client as a member and emit an `enter` event to all subscribers.
-* [`space.locations.set()`](/docs/spaces/locations#set): a method to emit a location event in realtime that the member has changed their location.
-* [`space.locations.getSelf()` and `space.locations.getOthers()`](/docs/spaces/locations#retrieve): a method to retrieve the locations of members currently within the space.
+- [`spaces.get()`](/docs/spaces/space#create): creates a new or retrieves an existing `space`.
+- [`space.locations.subscribe()`](/docs/spaces/locations#subscribe): subscribes to location on the document by registering a listener.
+- [`space.enter()`](/docs/spaces/space#enter): entering a space will register a client as a member and emit an `enter` event to all subscribers.
+- [`space.locations.set()`](/docs/spaces/locations#set): a method to emit a location event in realtime that the member has changed their location.
+- [`space.locations.getSelf()` and `space.locations.getOthers()`](/docs/spaces/locations#retrieve): a method to retrieve the locations of members currently within the space.
 
 Find out more about [member location](/docs/spaces/locations).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run spaces-member-location-javascript
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-member-location/javascript/postcss.config.ts b/examples/spaces-member-location/javascript/postcss.config.ts
deleted file mode 100644
index 5dd35ae633..0000000000
--- a/examples/spaces-member-location/javascript/postcss.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import baseConfig from '../../postcss.config';
-
-const config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-member-location/javascript/src/script.ts b/examples/spaces-member-location/javascript/src/script.ts
index 30629a7a2f..d9ece8854d 100644
--- a/examples/spaces-member-location/javascript/src/script.ts
+++ b/examples/spaces-member-location/javascript/src/script.ts
@@ -1,7 +1,8 @@
 import Spaces, { Space, type SpaceMember } from '@ably/spaces';
 import { Realtime } from 'ably';
 import { nanoid } from 'nanoid';
-import { faker } from '@faker-js/faker';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
 
 type Member = Omit<SpaceMember, 'profileData' | 'location'> & {
   profileData: {
@@ -46,7 +47,7 @@ function setLocation(location: Member['location']) {
 async function connect() {
   const client = new Realtime({
     clientId: nanoid(),
-    key: import.meta.env.VITE_PUBLIC_ABLY_KEY as string,
+    key: import.meta.env.VITE_ABLY_KEY as string,
   });
 
   const urlParams = new URLSearchParams(window.location.search);
@@ -56,8 +57,8 @@ async function connect() {
 
   /** 💡 Enter the space as soon as it's available 💡 */
   await space.enter({
-    memberName: faker.person.fullName(),
-    memberColor: faker.color.rgb({ format: 'hex', casing: 'lower' }),
+    memberName: `${minifaker.firstName()} ${minifaker.lastName()}`,
+    memberColor: minifaker.color(),
   });
 
   /** 💡 Subscribe to all locations updates 💡 */
diff --git a/examples/spaces-member-location/javascript/tailwind.config.ts b/examples/spaces-member-location/javascript/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-member-location/javascript/tailwind.config.ts
+++ b/examples/spaces-member-location/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-member-location/javascript/vite-env.d.ts b/examples/spaces-member-location/javascript/vite-env.d.ts
index 9454b92dea..449e61aa75 100644
--- a/examples/spaces-member-location/javascript/vite-env.d.ts
+++ b/examples/spaces-member-location/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/spaces-member-location/javascript/vite.config.ts b/examples/spaces-member-location/javascript/vite.config.ts
index b7961c3d30..3b1cf13b4f 100644
--- a/examples/spaces-member-location/javascript/vite.config.ts
+++ b/examples/spaces-member-location/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/spaces-member-location/react/README.md b/examples/spaces-member-location/react/README.md
index 01eb9d1d41..1e7d04081c 100644
--- a/examples/spaces-member-location/react/README.md
+++ b/examples/spaces-member-location/react/README.md
@@ -10,11 +10,11 @@ Member locations are implemented using [Ably Spaces](/docs/products/spaces). The
 
 Use the following components to add member location into an application:
 
-* [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
-* [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
-* [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
-* [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build member location. It retrieves members of the space, including members that have left the space, but have not yet been removed.
-* [`useLocations()`](/docs/spaces/react#useLocations) hook: a hook to subscribe to location events. Location events are emitted whenever a member changes location. Also used to publish the `update` of the location of the member.
+- [`SpacesProvider`](/docs/spaces/react#spaces-provider): initializes and manages a shared space client instance, passing it down through React context to enable realtime spaces functionality across the application.
+- [`SpaceProvider`](/docs/spaces/react#spaces-provider): manages the state and functionality of a specific space, providing access to realtime interactions within that space via React context.
+- [`useSpace()`](/docs/spaces/react#useSpace) hook: a hook to subscribe to the current Space, receive Space state events, and get the current Space instance.
+- [`useMembers()`](/docs/spaces/react#useMembers) hook: a hook to build member location. It retrieves members of the space, including members that have left the space, but have not yet been removed.
+- [`useLocations()`](/docs/spaces/react#useLocations) hook: a hook to subscribe to location events. Location events are emitted whenever a member changes location. Also used to publish the `update` of the location of the member.
 
 Find out more about [member location](/docs/spaces/locations).
 
@@ -38,7 +38,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-4. In `.env.local` update the value of `NEXT_PUBLIC_ABLY_KEY` to be your Ably API key.
+4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 5. Install dependencies:
 
@@ -56,4 +56,4 @@ yarn run spaces-member-location-react
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `NEXT_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and enter the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/spaces-member-location/react/index.html b/examples/spaces-member-location/react/index.html
new file mode 100644
index 0000000000..231a299f0e
--- /dev/null
+++ b/examples/spaces-member-location/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/spaces-member-location/react/next.config.ts b/examples/spaces-member-location/react/next.config.ts
deleted file mode 100644
index 7b42b36c42..0000000000
--- a/examples/spaces-member-location/react/next.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../next.config';
-import type { NextConfig } from 'next';
-
-const config: NextConfig = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-member-location/react/package.json b/examples/spaces-member-location/react/package.json
index dff79000e9..409139c949 100644
--- a/examples/spaces-member-location/react/package.json
+++ b/examples/spaces-member-location/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/spaces-member-location/react/postcss.config.ts b/examples/spaces-member-location/react/postcss.config.ts
deleted file mode 100644
index 0077e40b27..0000000000
--- a/examples/spaces-member-location/react/postcss.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import baseConfig from '../../postcss.config';
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
-  ...baseConfig,
-};
-
-export default config;
diff --git a/examples/spaces-member-location/react/src/App.tsx b/examples/spaces-member-location/react/src/App.tsx
new file mode 100644
index 0000000000..d6d301bc02
--- /dev/null
+++ b/examples/spaces-member-location/react/src/App.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { useLocations, useMembers, useSpace, SpaceProvider, SpacesProvider } from '@ably/spaces/react';
+import { type SpaceMember } from '@ably/spaces';
+import Spreadsheet from './components/Spreadsheet';
+import minifaker from 'minifaker';
+import 'minifaker/locales/en';
+import Spaces from '@ably/spaces';
+import { Realtime } from 'ably';
+import { nanoid } from 'nanoid';
+import './styles/styles.css';
+
+type Member = Omit<SpaceMember, 'profileData' | 'location'> & {
+  profileData: {
+    memberName: string;
+    memberColor: string;
+  };
+  location: {
+    row?: number;
+    col?: number;
+  };
+};
+
+type UpdateLocationCallback = (location: Member['location']) => void;
+
+const client = new Realtime({ key: import.meta.env.VITE_ABLY_KEY, clientId: nanoid() });
+const spaces = new Spaces(client);
+
+function MemberLocationDemo() {
+  /** 💡 Get a handle on a space instance 💡 */
+  const { space } = useSpace();
+  const { self, others } = useMembers();
+  const { update } = useLocations();
+
+  /** 💡 Enter the space as soon as it's available 💡 */
+  useEffect(() => {
+    space?.enter({
+      memberName: `${minifaker.firstName()} ${minifaker.lastName()}`,
+      memberColor: minifaker.color(),
+    });
+  }, [space]);
+
+  return (
+    <div id="member-location" className="uk-container uk-padding">
+      <Spreadsheet self={self as Member} others={others as Member[]} setLocation={update} />
+    </div>
+  );
+}
+
+export default function App() {
+  const [spaceName, setSpaceName] = useState('spaces-member-location');
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name');
+
+    if (name) {
+      setSpaceName(name);
+    }
+  }, []);
+
+  return (
+    <SpacesProvider client={spaces}>
+      <SpaceProvider name={spaceName}>
+        <MemberLocationDemo />
+      </SpaceProvider>
+    </SpacesProvider>
+  );
+}
diff --git a/examples/spaces-member-location/react/src/app/layout.tsx b/examples/spaces-member-location/react/src/app/layout.tsx
deleted file mode 100644
index 33c1c0f212..0000000000
--- a/examples/spaces-member-location/react/src/app/layout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-
-import { Inter } from "next/font/google";
-import Spaces from "@ably/spaces";
-import { SpaceProvider, SpacesProvider } from "@ably/spaces/react";
-import { Realtime } from 'ably';
-import { nanoid } from 'nanoid';
-import "../../styles/styles.css";
-import { useEffect, useState } from "react";
-
-const inter = Inter({ subsets: ["latin"] });
-
-const client = new Realtime({key: process.env.NEXT_PUBLIC_ABLY_KEY, clientId: nanoid()});
-const spaces = new Spaces(client);
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [spaceName, setSpaceName] = useState('spaces-live-cursors');
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const name = urlParams.get('name');
-
-    if (name) {
-      setSpaceName(name);
-    }
-  }, []);
-
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <SpacesProvider client={spaces}>
-          <SpaceProvider name={spaceName}>{children}</SpaceProvider>
-        </SpacesProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/examples/spaces-member-location/react/src/app/page.tsx b/examples/spaces-member-location/react/src/app/page.tsx
deleted file mode 100644
index e98a1fd167..0000000000
--- a/examples/spaces-member-location/react/src/app/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { useLocations, useMembers, useSpace } from "@ably/spaces/react";
-import { type SpaceMember } from "@ably/spaces";
-import Spreadsheet from "@/components/Spreadsheet";
-import { faker } from '@faker-js/faker';
-
-type Member = Omit<SpaceMember, "profileData" | "location"> & {
-  profileData: {
-    memberName: string;
-    memberColor: string;
-  };
-  location: {
-    row?: number;
-    col?: number;
-  };
-};
-
-type UpdateLocationCallback = (location: Member["location"]) => void;
-
-export default function Home() {
-  /** 💡 Get a handle on a space instance 💡 */
-  const { space } = useSpace();
-  const { self, others } = useMembers();
-  const { update } = useLocations();
-
-  /** 💡 Enter the space as soon as it's available 💡 */
-  useEffect(() => {
-    space?.enter({
-      memberName: faker.person.fullName(),
-      memberColor: faker.color.rgb({ format: 'hex', casing: 'lower' }),
-    });
-  }, [space]);
-
-  return (
-    <div id="member-location" className="uk-container uk-padding">
-      <Spreadsheet
-        self={self as Member}
-        others={others as Member[]}
-        setLocation={update}
-      />
-    </div>
-  );
-}
diff --git a/examples/spaces-member-location/react/src/env.d.ts b/examples/spaces-member-location/react/src/env.d.ts
new file mode 100644
index 0000000000..7421e8e743
--- /dev/null
+++ b/examples/spaces-member-location/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/spaces-member-location/react/src/index.tsx b/examples/spaces-member-location/react/src/index.tsx
new file mode 100644
index 0000000000..c018515cd7
--- /dev/null
+++ b/examples/spaces-member-location/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/spaces-member-location/react/src/styles/styles.css b/examples/spaces-member-location/react/src/styles/styles.css
new file mode 100644
index 0000000000..778cb1fbfe
--- /dev/null
+++ b/examples/spaces-member-location/react/src/styles/styles.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #f4f8fb;
+  height: 100vh;
+}
+
+input {
+  padding: 0.5rem;
+  width: 100%;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
diff --git a/examples/spaces-member-location/react/styles/styles.css b/examples/spaces-member-location/react/styles/styles.css
deleted file mode 100644
index 4abae025b7..0000000000
--- a/examples/spaces-member-location/react/styles/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20 91% 54%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 209 100% 43%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
diff --git a/examples/spaces-member-location/react/tailwind.config.ts b/examples/spaces-member-location/react/tailwind.config.ts
index 238d7ed443..1c86e1c371 100644
--- a/examples/spaces-member-location/react/tailwind.config.ts
+++ b/examples/spaces-member-location/react/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/spaces-member-location/react/tsconfig.json b/examples/spaces-member-location/react/tsconfig.json
index 207895f926..4082f16a5d 100644
--- a/examples/spaces-member-location/react/tsconfig.json
+++ b/examples/spaces-member-location/react/tsconfig.json
@@ -1,20 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "extends": "../../tsconfig.json"
 }
diff --git a/examples/spaces-member-location/react/vite.config.ts b/examples/spaces-member-location/react/vite.config.ts
new file mode 100644
index 0000000000..3b1cf13b4f
--- /dev/null
+++ b/examples/spaces-member-location/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  envDir: '../../',
+});
diff --git a/examples/tailwind.config.ts b/examples/tailwind.config.ts
index 2dc312474f..42f1713aae 100644
--- a/examples/tailwind.config.ts
+++ b/examples/tailwind.config.ts
@@ -2,14 +2,10 @@ import type { Config } from 'tailwindcss';
 import franken from 'franken-ui/shadcn-ui/preset-quick';
 
 const baseConfig: Config = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore (franken-ui/shadcn-ui/preset-quick is not properly typed - JH)
   presets: [franken()],
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    './index.html',
-    './src/**/*.ts',
-  ],
+  content: ['./**/*.{js,ts,tsx}'],
   safelist: [
     {
       pattern: /^uk-/,
@@ -22,7 +18,7 @@ const baseConfig: Config = {
     'opacity-50',
   ],
   theme: {
-    extend: {},
+    extend: { sizing: true },
   },
   plugins: [],
 };
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
index 3d0356d0e7..4d957220fd 100644
--- a/examples/tsconfig.json
+++ b/examples/tsconfig.json
@@ -1,32 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext", "es2015"],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "strict": false,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
     "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    },
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "allowJs": true,
     "baseUrl": ".",
-    "outDir": "./lib/cjs/",
-    "sourceMap": true,
-    "declaration": true,
-    "noImplicitAny": true
+    "paths": {
+      "minifaker": ["./node_modules/minifaker/dist/types"]
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/**/*.ts*"],
+  "include": ["**/*.ts", "**/*.tsx", "src/**/*.ts*"],
   "exclude": ["node_modules", "dist", "lib"]
 }
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
index e21ae18514..32f5c0ead1 100644
--- a/examples/vite.config.ts
+++ b/examples/vite.config.ts
@@ -1,14 +1,12 @@
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
 import path from 'path';
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 
-dotenv.config({ path: path.resolve(process.cwd(), '.env.local') });
-
 const baseConfig = defineConfig({
   css: {
     postcss: {
+      config: path.resolve(process.cwd(), 'postcss.config.mts'),
       plugins: [tailwindcss({ config: path.resolve(process.cwd(), 'tailwind.config.ts') }), autoprefixer()],
     },
   },
diff --git a/examples/yarn.lock b/examples/yarn.lock
index f552196c00..5f155f9734 100644
--- a/examples/yarn.lock
+++ b/examples/yarn.lock
@@ -33,6 +33,167 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.26.5":
+  version "7.26.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367"
+  integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==
+
+"@babel/core@^7.20.12":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.10.tgz#5c876f83c8c4dcb233ee4b670c0606f2ac3000f9"
+  integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.10"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.10"
+    "@babel/parser" "^7.26.10"
+    "@babel/template" "^7.26.9"
+    "@babel/traverse" "^7.26.10"
+    "@babel/types" "^7.26.10"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7"
+  integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang==
+  dependencies:
+    "@babel/parser" "^7.26.10"
+    "@babel/types" "^7.26.10"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-compilation-targets@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+  integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
+  dependencies:
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-plugin-utils@^7.25.9":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helpers@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384"
+  integrity sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==
+  dependencies:
+    "@babel/template" "^7.26.9"
+    "@babel/types" "^7.26.10"
+
+"@babel/parser@^7.26.10", "@babel/parser@^7.26.9":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749"
+  integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==
+  dependencies:
+    "@babel/types" "^7.26.10"
+
+"@babel/plugin-transform-react-jsx-self@^7.18.6":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz#c0b6cae9c1b73967f7f9eb2fca9536ba2fad2858"
+  integrity sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx-source@^7.19.6":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz#4c6b8daa520b5f155b5fb55547d7c9fa91417503"
+  integrity sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/template@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2"
+  integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/parser" "^7.26.9"
+    "@babel/types" "^7.26.9"
+
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380"
+  integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.10"
+    "@babel/parser" "^7.26.10"
+    "@babel/template" "^7.26.9"
+    "@babel/types" "^7.26.10"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.25.9", "@babel/types@^7.26.10", "@babel/types@^7.26.9":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259"
+  integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
@@ -40,136 +201,124 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@emnapi/runtime@^1.2.0":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
-  integrity sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==
-  dependencies:
-    tslib "^2.4.0"
-
-"@esbuild/aix-ppc64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
-  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
-
-"@esbuild/android-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
-  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
-
-"@esbuild/android-arm@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
-  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
-
-"@esbuild/android-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
-  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
-
-"@esbuild/darwin-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
-  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
-
-"@esbuild/darwin-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
-  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
-
-"@esbuild/freebsd-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
-  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
-
-"@esbuild/freebsd-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
-  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
-
-"@esbuild/linux-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
-  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
-
-"@esbuild/linux-arm@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
-  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
-
-"@esbuild/linux-ia32@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
-  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
-
-"@esbuild/linux-loong64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
-  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
-
-"@esbuild/linux-mips64el@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
-  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
-
-"@esbuild/linux-ppc64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
-  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
-
-"@esbuild/linux-riscv64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
-  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
-
-"@esbuild/linux-s390x@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
-  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
-
-"@esbuild/linux-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
-  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
-
-"@esbuild/netbsd-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
-  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
-
-"@esbuild/openbsd-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
-  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
-
-"@esbuild/sunos-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
-  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
-
-"@esbuild/win32-arm64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
-  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
-
-"@esbuild/win32-ia32@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
-  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
-
-"@esbuild/win32-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
-  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
-
-"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
+"@esbuild/win32-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+
+"@eslint-community/eslint-utils@^4.2.0":
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
   integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
   dependencies:
     eslint-visitor-keys "^3.4.3"
 
-"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.6.1":
   version "4.12.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
   integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
@@ -194,11 +343,6 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
   integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
-"@faker-js/faker@^9.2.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.4.0.tgz#3e85604df3a318729436677565e9433d964276d2"
-  integrity sha512-85+k0AxaZSTowL0gXp8zYWDIrWclTbRPg/pm/V0dSFZ6W6D4lhcG3uuZl4zLsEKfEvs69xDbLN2cHQudwp95JA==
-
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
@@ -218,119 +362,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@img/sharp-darwin-arm64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08"
-  integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
-  optionalDependencies:
-    "@img/sharp-libvips-darwin-arm64" "1.0.4"
-
-"@img/sharp-darwin-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61"
-  integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==
-  optionalDependencies:
-    "@img/sharp-libvips-darwin-x64" "1.0.4"
-
-"@img/sharp-libvips-darwin-arm64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz#447c5026700c01a993c7804eb8af5f6e9868c07f"
-  integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
-
-"@img/sharp-libvips-darwin-x64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062"
-  integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==
-
-"@img/sharp-libvips-linux-arm64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704"
-  integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==
-
-"@img/sharp-libvips-linux-arm@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197"
-  integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==
-
-"@img/sharp-libvips-linux-s390x@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce"
-  integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==
-
-"@img/sharp-libvips-linux-x64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0"
-  integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==
-
-"@img/sharp-libvips-linuxmusl-arm64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5"
-  integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==
-
-"@img/sharp-libvips-linuxmusl-x64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff"
-  integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==
-
-"@img/sharp-linux-arm64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22"
-  integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-arm64" "1.0.4"
-
-"@img/sharp-linux-arm@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff"
-  integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-arm" "1.0.5"
-
-"@img/sharp-linux-s390x@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667"
-  integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-s390x" "1.0.4"
-
-"@img/sharp-linux-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb"
-  integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-x64" "1.0.4"
-
-"@img/sharp-linuxmusl-arm64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b"
-  integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==
-  optionalDependencies:
-    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
-
-"@img/sharp-linuxmusl-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48"
-  integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==
-  optionalDependencies:
-    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
-
-"@img/sharp-wasm32@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1"
-  integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==
-  dependencies:
-    "@emnapi/runtime" "^1.2.0"
-
-"@img/sharp-win32-ia32@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9"
-  integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==
-
-"@img/sharp-win32-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342"
-  integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==
-
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -343,7 +374,7 @@
     wrap-ansi "^8.1.0"
     wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
 
-"@jridgewell/gen-mapping@^0.3.2":
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
   integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
@@ -362,7 +393,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
   integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.14":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
@@ -375,7 +406,7 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.24":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -383,58 +414,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@next/env@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.1.7.tgz#14e2678f893aec50ff2dcb7a6665092fb9e1263d"
-  integrity sha512-d9jnRrkuOH7Mhi+LHav2XW91HOgTAWHxjMPkXMGBc9B2b7614P7kjt8tAplRvJpbSt4nbO1lugcT/kAaWzjlLQ==
-
-"@next/eslint-plugin-next@15.0.3":
-  version "15.0.3"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-15.0.3.tgz#ce953098036d462f6901e423cc6445fc165b78c4"
-  integrity sha512-3Ln/nHq2V+v8uIaxCR6YfYo7ceRgZNXfTd3yW1ukTaFbO+/I8jNakrjYWODvG9BuR2v5kgVtH/C8r0i11quOgw==
-  dependencies:
-    fast-glob "3.3.1"
-
-"@next/swc-darwin-arm64@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.7.tgz#ecc6eacf174df36a6c73f7c319ed864ec6e08079"
-  integrity sha512-hPFwzPJDpA8FGj7IKV3Yf1web3oz2YsR8du4amKw8d+jAOHfYHYFpMkoF6vgSY4W6vB29RtZEklK9ayinGiCmQ==
-
-"@next/swc-darwin-x64@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.7.tgz#d25b4c131d13439ea4b263dbcd0fd518a835f31c"
-  integrity sha512-2qoas+fO3OQKkU0PBUfwTiw/EYpN+kdAx62cePRyY1LqKtP09Vp5UcUntfZYajop5fDFTjSxCHfZVRxzi+9FYQ==
-
-"@next/swc-linux-arm64-gnu@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.7.tgz#b19abc7b56918042b5309f55f7010e7932ee4967"
-  integrity sha512-sKLLwDX709mPdzxMnRIXLIT9zaX2w0GUlkLYQnKGoXeWUhcvpCrK+yevcwCJPdTdxZEUA0mOXGLdPsGkudGdnA==
-
-"@next/swc-linux-arm64-musl@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.7.tgz#cb2ac35d3024e9d46ce0d4ff03bf491e0773519f"
-  integrity sha512-zblK1OQbQWdC8fxdX4fpsHDw+VSpBPGEUX4PhSE9hkaWPrWoeIJn+baX53vbsbDRaDKd7bBNcXRovY1hEhFd7w==
-
-"@next/swc-linux-x64-gnu@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.7.tgz#cf6e338a1fbb1c9b019c158a76a7ab4f143929ce"
-  integrity sha512-GOzXutxuLvLHFDAPsMP2zDBMl1vfUHHpdNpFGhxu90jEzH6nNIgmtw/s1MDwpTOiM+MT5V8+I1hmVFeAUhkbgQ==
-
-"@next/swc-linux-x64-musl@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.7.tgz#94c9117ece8e5851e7e6674f12d6b82b435e3a6f"
-  integrity sha512-WrZ7jBhR7ATW1z5iEQ0ZJfE2twCNSXbpCSaAunF3BKcVeHFADSI/AW1y5Xt3DzTqPF1FzQlwQTewqetAABhZRQ==
-
-"@next/swc-win32-arm64-msvc@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.7.tgz#4947f3b7f41c7347114985bf3c91e2eacddfe124"
-  integrity sha512-LDnj1f3OVbou1BqvvXVqouJZKcwq++mV2F+oFHptToZtScIEnhNRJAhJzqAtTE2dB31qDYL45xJwrc+bLeKM2Q==
-
-"@next/swc-win32-x64-msvc@15.1.7":
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.7.tgz#0adb399deb15291b61be94909a97e0d6ce1f61fa"
-  integrity sha512-dC01f1quuf97viOfW05/K8XYv2iuBgAxJZl7mbCKEjMgdQl5JjAKJ0D2qMKZCgPWDeFbFT0Q0nYWwytEW0DWTQ==
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -456,138 +435,31 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@nolyfill/is-core-module@1.0.39":
-  version "1.0.39"
-  resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
-  integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
-
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@rollup/rollup-android-arm-eabi@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.1.tgz#c18bad635ba24220a6c8cc427ab2cab12e1531a3"
-  integrity sha512-/pqA4DmqyCm8u5YIDzIdlLcEmuvxb0v8fZdFhVMszSpDTgbQKdw3/mB3eMUHIbubtJ6F9j+LtmyCnHTEqIHyzA==
-
-"@rollup/rollup-android-arm64@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.32.1.tgz#b5c00344b80f20889b72bfe65d3c209cef247362"
-  integrity sha512-If3PDskT77q7zgqVqYuj7WG3WC08G1kwXGVFi9Jr8nY6eHucREHkfpX79c0ACAjLj3QIWKPJR7w4i+f5EdLH5Q==
+"@remix-run/router@1.23.0":
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.23.0.tgz#35390d0e7779626c026b11376da6789eb8389242"
+  integrity sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==
 
-"@rollup/rollup-darwin-arm64@4.32.1", "@rollup/rollup-darwin-arm64@^4.18":
+"@rollup/rollup-darwin-arm64@^4.18":
   version "4.32.1"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.1.tgz#78e5358d4a2a08c090f75dd87fa2eada42eca1e5"
   integrity sha512-zCpKHioQ9KgZToFp5Wvz6zaWbMzYQ2LJHQ+QixDKq52KKrF65ueu6Af4hLlLWHjX1Wf/0G5kSJM9PySW9IrvHA==
 
-"@rollup/rollup-darwin-x64@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.32.1.tgz#c04c9e173244d44de50278f3f893fb68d987fcc6"
-  integrity sha512-sFvF+t2+TyUo/ZQqUcifrJIgznx58oFZbdHS9TvHq3xhPVL9nOp+yZ6LKrO9GWTP+6DbFtoyLDbjTpR62Mbr3Q==
-
-"@rollup/rollup-freebsd-arm64@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.32.1.tgz#3bdf18d4ef32dcfe9b20bba18d7a53a101ed79d9"
-  integrity sha512-NbOa+7InvMWRcY9RG+B6kKIMD/FsnQPH0MWUvDlQB1iXnF/UcKSudCXZtv4lW+C276g3w5AxPbfry5rSYvyeYA==
-
-"@rollup/rollup-freebsd-x64@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.32.1.tgz#35867b15c276f4b4ca8eb226f7dd6df8c64640db"
-  integrity sha512-JRBRmwvHPXR881j2xjry8HZ86wIPK2CcDw0EXchE1UgU0ubWp9nvlT7cZYKc6bkypBt745b4bglf3+xJ7hXWWw==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.32.1.tgz#92c212d1b38c105bd1eb101254722d27d869b1ac"
-  integrity sha512-PKvszb+9o/vVdUzCCjL0sKHukEQV39tD3fepXxYrHE3sTKrRdCydI7uldRLbjLmDA3TFDmh418XH19NOsDRH8g==
-
-"@rollup/rollup-linux-arm-musleabihf@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.32.1.tgz#ebb94d8cd438f23e38caa4a87ca80d4cf5b50fa1"
-  integrity sha512-9WHEMV6Y89eL606ReYowXuGF1Yb2vwfKWKdD1A5h+OYnPZSJvxbEjxTRKPgi7tkP2DSnW0YLab1ooy+i/FQp/Q==
-
-"@rollup/rollup-linux-arm64-gnu@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.32.1.tgz#ce6a5eacbd5fd4bdf7bf27bd818980230bdb9fab"
-  integrity sha512-tZWc9iEt5fGJ1CL2LRPw8OttkCBDs+D8D3oEM8mH8S1ICZCtFJhD7DZ3XMGM8kpqHvhGUTvNUYVDnmkj4BDXnw==
-
-"@rollup/rollup-linux-arm64-musl@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.32.1.tgz#31b4e0a543607e6eb4f982ffb45830919a952a83"
-  integrity sha512-FTYc2YoTWUsBz5GTTgGkRYYJ5NGJIi/rCY4oK/I8aKowx1ToXeoVVbIE4LGAjsauvlhjfl0MYacxClLld1VrOw==
-
-"@rollup/rollup-linux-loongarch64-gnu@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.32.1.tgz#ad7b35f193f1d2e0dc37eba733069b4af5f6498d"
-  integrity sha512-F51qLdOtpS6P1zJVRzYM0v6MrBNypyPEN1GfMiz0gPu9jN8ScGaEFIZQwteSsGKg799oR5EaP7+B2jHgL+d+Kw==
-
-"@rollup/rollup-linux-powerpc64le-gnu@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.32.1.tgz#b713a55d7eac4d2c8a0109c3daca6ea85fc178b3"
-  integrity sha512-wO0WkfSppfX4YFm5KhdCCpnpGbtgQNj/tgvYzrVYFKDpven8w2N6Gg5nB6w+wAMO3AIfSTWeTjfVe+uZ23zAlg==
-
-"@rollup/rollup-linux-riscv64-gnu@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.32.1.tgz#bea4fd8ad190e9bc1d11efafa2efc9d121f50b96"
-  integrity sha512-iWswS9cIXfJO1MFYtI/4jjlrGb/V58oMu4dYJIKnR5UIwbkzR0PJ09O0PDZT0oJ3LYWXBSWahNf/Mjo6i1E5/g==
-
-"@rollup/rollup-linux-s390x-gnu@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.32.1.tgz#cc98c32733ca472635759c78a79b5f8d887b2a6a"
-  integrity sha512-RKt8NI9tebzmEthMnfVgG3i/XeECkMPS+ibVZjZ6mNekpbbUmkNWuIN2yHsb/mBPyZke4nlI4YqIdFPgKuoyQQ==
-
-"@rollup/rollup-linux-x64-gnu@4.32.1", "@rollup/rollup-linux-x64-gnu@^4.18":
+"@rollup/rollup-linux-x64-gnu@^4.18":
   version "4.32.1"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.32.1.tgz#5c009c264a7ce0e19b40890ca9945440bb420691"
   integrity sha512-WQFLZ9c42ECqEjwg/GHHsouij3pzLXkFdz0UxHa/0OM12LzvX7DzedlY0SIEly2v18YZLRhCRoHZDxbBSWoGYg==
 
-"@rollup/rollup-linux-x64-musl@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.32.1.tgz#73d2f44070c23e031262b601927fdb4eec253bc1"
-  integrity sha512-BLoiyHDOWoS3uccNSADMza6V6vCNiphi94tQlVIL5de+r6r/CCQuNnerf+1g2mnk2b6edp5dk0nhdZ7aEjOBsA==
-
-"@rollup/rollup-win32-arm64-msvc@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.32.1.tgz#fa106304818078f9d3fc9005642ad99f596eed2d"
-  integrity sha512-w2l3UnlgYTNNU+Z6wOR8YdaioqfEnwPjIsJ66KxKAf0p+AuL2FHeTX6qvM+p/Ue3XPBVNyVSfCrfZiQh7vZHLQ==
-
-"@rollup/rollup-win32-ia32-msvc@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.32.1.tgz#a1a394c705a0d2a974a124c4b471fc1cf851a56f"
-  integrity sha512-Am9H+TGLomPGkBnaPWie4F3x+yQ2rr4Bk2jpwy+iV+Gel9jLAu/KqT8k3X4jxFPW6Zf8OMnehyutsd+eHoq1WQ==
-
-"@rollup/rollup-win32-x64-msvc@4.32.1":
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.32.1.tgz#512db088df67afee8f07183cdf8c9eecd64f6ef8"
-  integrity sha512-ar80GhdZb4DgmW3myIS9nRFYcpJRSME8iqWgzH2i44u+IdrzmiXVxeFnExQ5v4JYUSpg94bWjevMG8JHf1Da5Q==
-
-"@rtsao/scc@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
-  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
-
-"@rushstack/eslint-patch@^1.10.3":
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.5.tgz#3a1c12c959010a55c17d46b395ed3047b545c246"
-  integrity sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==
-
 "@sindresorhus/is@^4.0.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
   integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
 
-"@swc/counter@0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
-  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
-
-"@swc/helpers@0.5.15":
-  version "0.5.15"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
-  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
-  dependencies:
-    tslib "^2.8.0"
-
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
@@ -733,11 +605,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/estree@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
-  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
-
 "@types/express-serve-static-core@^5.0.0":
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz#41fec4ea20e9c7b22f024ab88a95c6bb288f51b8"
@@ -768,11 +635,6 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
   integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
 
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
-
 "@types/keyv@^3.1.4":
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-3.1.4.tgz#3ccdb1c6751b0c7e52300bcdacd5bcbf8faa75b6"
@@ -856,92 +718,27 @@
   resolved "https://registry.yarnpkg.com/@types/uikit/-/uikit-3.14.5.tgz#a9e250fa71968c3e145bfda7c99f6d9680db2d3e"
   integrity sha512-3Q1CRzoAVLm+XNCP/2P5DbLuX98fkNLYxGQ1qUdV6cdzDTBbyVeH+est0LTZPtro9FUwXTNu8WfxfwLymFbZvQ==
 
-"@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.22.0.tgz#63a1b0d24d85a971949f8d71d693019f58d2e861"
-  integrity sha512-4Uta6REnz/xEJMvwf72wdUnC3rr4jAQf5jnTkeRQ9b6soxLxhDEbS/pfMPoJLDfFPNVRdryqWUIV/2GZzDJFZw==
-  dependencies:
-    "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "8.22.0"
-    "@typescript-eslint/type-utils" "8.22.0"
-    "@typescript-eslint/utils" "8.22.0"
-    "@typescript-eslint/visitor-keys" "8.22.0"
-    graphemer "^1.4.0"
-    ignore "^5.3.1"
-    natural-compare "^1.4.0"
-    ts-api-utils "^2.0.0"
-
-"@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.22.0.tgz#f21c5db24271f182ebbb4ba8c7ad3eb76e5f5f3a"
-  integrity sha512-MqtmbdNEdoNxTPzpWiWnqNac54h8JDAmkWtJExBVVnSrSmi9z+sZUt0LfKqk9rjqmKOIeRhO4fHHJ1nQIjduIQ==
-  dependencies:
-    "@typescript-eslint/scope-manager" "8.22.0"
-    "@typescript-eslint/types" "8.22.0"
-    "@typescript-eslint/typescript-estree" "8.22.0"
-    "@typescript-eslint/visitor-keys" "8.22.0"
-    debug "^4.3.4"
-
-"@typescript-eslint/scope-manager@8.22.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.22.0.tgz#e85836ddeb8eae715f870628bcc32fe96aaf4d0e"
-  integrity sha512-/lwVV0UYgkj7wPSw0o8URy6YI64QmcOdwHuGuxWIYznO6d45ER0wXUbksr9pYdViAofpUCNJx/tAzNukgvaaiQ==
-  dependencies:
-    "@typescript-eslint/types" "8.22.0"
-    "@typescript-eslint/visitor-keys" "8.22.0"
-
-"@typescript-eslint/type-utils@8.22.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.22.0.tgz#cd9f23c23f021357ef0baa3490d4d96edcc97509"
-  integrity sha512-NzE3aB62fDEaGjaAYZE4LH7I1MUwHooQ98Byq0G0y3kkibPJQIXVUspzlFOmOfHhiDLwKzMlWxaNv+/qcZurJA==
-  dependencies:
-    "@typescript-eslint/typescript-estree" "8.22.0"
-    "@typescript-eslint/utils" "8.22.0"
-    debug "^4.3.4"
-    ts-api-utils "^2.0.0"
-
-"@typescript-eslint/types@8.22.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.22.0.tgz#d9dec7116479ad03aeb6c8ac9c5223c4c79cf360"
-  integrity sha512-0S4M4baNzp612zwpD4YOieP3VowOARgK2EkN/GBn95hpyF8E2fbMT55sRHWBq+Huaqk3b3XK+rxxlM8sPgGM6A==
-
-"@typescript-eslint/typescript-estree@8.22.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.22.0.tgz#c188c3e19529d5b3145577c0bd967e2683b114df"
-  integrity sha512-SJX99NAS2ugGOzpyhMza/tX+zDwjvwAtQFLsBo3GQxiGcvaKlqGBkmZ+Y1IdiSi9h4Q0Lr5ey+Cp9CGWNY/F/w==
-  dependencies:
-    "@typescript-eslint/types" "8.22.0"
-    "@typescript-eslint/visitor-keys" "8.22.0"
-    debug "^4.3.4"
-    fast-glob "^3.3.2"
-    is-glob "^4.0.3"
-    minimatch "^9.0.4"
-    semver "^7.6.0"
-    ts-api-utils "^2.0.0"
-
-"@typescript-eslint/utils@8.22.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.22.0.tgz#c8cc4e52a9c711af8a741a82dc5d7242b7a8dd44"
-  integrity sha512-T8oc1MbF8L+Bk2msAvCUzjxVB2Z2f+vXYfcucE2wOmYs7ZUwco5Ep0fYZw8quNwOiw9K8GYVL+Kgc2pETNTLOg==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "8.22.0"
-    "@typescript-eslint/types" "8.22.0"
-    "@typescript-eslint/typescript-estree" "8.22.0"
-
-"@typescript-eslint/visitor-keys@8.22.0":
-  version "8.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.22.0.tgz#02cc005014c372033eb9171e2275b76cba722a3f"
-  integrity sha512-AWpYAXnUgvLNabGTy3uBylkgZoosva/miNd1I8Bz3SjotmQPbVqhO4Cczo8AsZ44XVErEBPr/CRSgaj8sG7g0w==
-  dependencies:
-    "@typescript-eslint/types" "8.22.0"
-    eslint-visitor-keys "^4.2.0"
+"@types/uuid@^8.3.4":
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
+  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@ungap/structured-clone@^1.2.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
   integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
 
+"@vitejs/plugin-react@^3.0.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz#d1091f535eab8b83d6e74034d01e27d73c773240"
+  integrity sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==
+  dependencies:
+    "@babel/core" "^7.20.12"
+    "@babel/plugin-transform-react-jsx-self" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-source" "^7.19.6"
+    magic-string "^0.27.0"
+    react-refresh "^0.14.0"
+
 ably@^2.5.0:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/ably/-/ably-2.6.3.tgz#523960c6cda7cc6405637f9bd129d78b4779f658"
@@ -1038,114 +835,11 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@^5.3.2:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
-  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
-
-array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
-  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
-  dependencies:
-    call-bound "^1.0.3"
-    is-array-buffer "^3.0.5"
-
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
-array-includes@^3.1.6, array-includes@^3.1.8:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
-  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.2"
-    es-object-atoms "^1.0.0"
-    get-intrinsic "^1.2.4"
-    is-string "^1.0.7"
-
-array.prototype.findlast@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
-  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.2"
-    es-errors "^1.3.0"
-    es-object-atoms "^1.0.0"
-    es-shim-unscopables "^1.0.2"
-
-array.prototype.findlastindex@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
-  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.2"
-    es-errors "^1.3.0"
-    es-object-atoms "^1.0.0"
-    es-shim-unscopables "^1.0.2"
-
-array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
-  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
-  dependencies:
-    call-bind "^1.0.8"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.5"
-    es-shim-unscopables "^1.0.2"
-
-array.prototype.flatmap@^1.3.2, array.prototype.flatmap@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
-  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
-  dependencies:
-    call-bind "^1.0.8"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.5"
-    es-shim-unscopables "^1.0.2"
-
-array.prototype.tosorted@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
-  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.3"
-    es-errors "^1.3.0"
-    es-shim-unscopables "^1.0.2"
-
-arraybuffer.prototype.slice@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
-  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
-  dependencies:
-    array-buffer-byte-length "^1.0.1"
-    call-bind "^1.0.8"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.5"
-    es-errors "^1.3.0"
-    get-intrinsic "^1.2.6"
-    is-array-buffer "^3.0.4"
-
-ast-types-flow@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
-  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
-
-async-function@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/async-function/-/async-function-1.0.0.tgz#509c9fca60eaf85034c6829838188e4e4c8ffb2b"
-  integrity sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==
-
 async-mutex@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/async-mutex/-/async-mutex-0.5.0.tgz#353c69a0b9e75250971a64ac203b0ebfddd75482"
@@ -1153,35 +847,18 @@ async-mutex@^0.5.0:
   dependencies:
     tslib "^2.4.0"
 
-autoprefixer@^10.4.20:
-  version "10.4.20"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
-  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
+autoprefixer@^10.4.21:
+  version "10.4.21"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.21.tgz#77189468e7a8ad1d9a37fbc08efc9f480cf0a95d"
+  integrity sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==
   dependencies:
-    browserslist "^4.23.3"
-    caniuse-lite "^1.0.30001646"
+    browserslist "^4.24.4"
+    caniuse-lite "^1.0.30001702"
     fraction.js "^4.3.7"
     normalize-range "^0.1.2"
-    picocolors "^1.0.1"
+    picocolors "^1.1.1"
     postcss-value-parser "^4.2.0"
 
-available-typed-arrays@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
-  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
-  dependencies:
-    possible-typed-array-names "^1.0.0"
-
-axe-core@^4.10.0:
-  version "4.10.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
-  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
-
-axobject-query@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
-  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1245,7 +922,7 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.23.3:
+browserslist@^4.24.0, browserslist@^4.24.4:
   version "4.24.4"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
   integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
@@ -1255,13 +932,6 @@ browserslist@^4.23.3:
     node-releases "^2.0.19"
     update-browserslist-db "^1.1.1"
 
-busboy@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
-  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
-  dependencies:
-    streamsearch "^1.1.0"
-
 bytes@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
@@ -1285,7 +955,7 @@ cacheable-request@^7.0.2:
     normalize-url "^6.0.1"
     responselike "^2.0.0"
 
-call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+call-bind-apply-helpers@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
   integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
@@ -1293,17 +963,7 @@ call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
     es-errors "^1.3.0"
     function-bind "^1.1.2"
 
-call-bind@^1.0.7, call-bind@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
-  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
-  dependencies:
-    call-bind-apply-helpers "^1.0.0"
-    es-define-property "^1.0.0"
-    get-intrinsic "^1.2.4"
-    set-function-length "^1.2.2"
-
-call-bound@^1.0.2, call-bound@^1.0.3:
+call-bound@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
   integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
@@ -1321,11 +981,16 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688:
+caniuse-lite@^1.0.30001688:
   version "1.0.30001696"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz#00c30a2fc11e3c98c25e5125418752af3ae2f49f"
   integrity sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==
 
+caniuse-lite@^1.0.30001702:
+  version "1.0.30001707"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz#c5e104d199e6f4355a898fcd995a066c7eb9bf41"
+  integrity sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==
+
 chalk@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -1349,11 +1014,6 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-client-only@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
-  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
-
 clone-response@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.3.tgz#af2032aa47816399cf5f0a1d0db902f517abb8c3"
@@ -1368,27 +1028,11 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
-  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
-  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.9.0"
-
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -1411,6 +1055,11 @@ content-type@~1.0.4, content-type@~1.0.5:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -1453,38 +1102,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-damerau-levenshtein@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
-  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
-
-data-view-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
-  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
-  dependencies:
-    call-bound "^1.0.3"
-    es-errors "^1.3.0"
-    is-data-view "^1.0.2"
-
-data-view-byte-length@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
-  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
-  dependencies:
-    call-bound "^1.0.3"
-    es-errors "^1.3.0"
-    is-data-view "^1.0.2"
-
-data-view-byte-offset@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
-  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
-  dependencies:
-    call-bound "^1.0.2"
-    es-errors "^1.3.0"
-    is-data-view "^1.0.1"
-
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1492,14 +1109,7 @@ debug@2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.7:
+debug@^4.1.0, debug@^4.3.1, debug@^4.3.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
   integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
@@ -1523,24 +1133,6 @@ defer-to-connect@^2.0.0:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
   integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
 
-define-data-property@^1.0.1, define-data-property@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
-  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    gopd "^1.0.1"
-
-define-properties@^1.1.3, define-properties@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
-  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
-  dependencies:
-    define-data-property "^1.0.1"
-    has-property-descriptors "^1.0.0"
-    object-keys "^1.1.1"
-
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -1576,13 +1168,6 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
-doctrine@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
-  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
-  dependencies:
-    esutils "^2.0.2"
-
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -1595,7 +1180,7 @@ dotenv@^16.4.5:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.7.tgz#0e20c5b82950140aa99be360a8a5f52335f53c26"
   integrity sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==
 
-dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
   integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
@@ -1646,14 +1231,6 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.15.0:
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz#91eb1db193896b9801251eeff1c6980278b1e404"
-  integrity sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==
-  dependencies:
-    graceful-fs "^4.2.4"
-    tapable "^2.2.0"
-
 enhanced-resolve@^5.18.1:
   version "5.18.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz#728ab082f8b7b6836de51f1637aab5d3b9568faf"
@@ -1662,64 +1239,7 @@ enhanced-resolve@^5.18.1:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9:
-  version "1.23.9"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.9.tgz#5b45994b7de78dada5c1bebf1379646b32b9d606"
-  integrity sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==
-  dependencies:
-    array-buffer-byte-length "^1.0.2"
-    arraybuffer.prototype.slice "^1.0.4"
-    available-typed-arrays "^1.0.7"
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    data-view-buffer "^1.0.2"
-    data-view-byte-length "^1.0.2"
-    data-view-byte-offset "^1.0.1"
-    es-define-property "^1.0.1"
-    es-errors "^1.3.0"
-    es-object-atoms "^1.0.0"
-    es-set-tostringtag "^2.1.0"
-    es-to-primitive "^1.3.0"
-    function.prototype.name "^1.1.8"
-    get-intrinsic "^1.2.7"
-    get-proto "^1.0.0"
-    get-symbol-description "^1.1.0"
-    globalthis "^1.0.4"
-    gopd "^1.2.0"
-    has-property-descriptors "^1.0.2"
-    has-proto "^1.2.0"
-    has-symbols "^1.1.0"
-    hasown "^2.0.2"
-    internal-slot "^1.1.0"
-    is-array-buffer "^3.0.5"
-    is-callable "^1.2.7"
-    is-data-view "^1.0.2"
-    is-regex "^1.2.1"
-    is-shared-array-buffer "^1.0.4"
-    is-string "^1.1.1"
-    is-typed-array "^1.1.15"
-    is-weakref "^1.1.0"
-    math-intrinsics "^1.1.0"
-    object-inspect "^1.13.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.7"
-    own-keys "^1.0.1"
-    regexp.prototype.flags "^1.5.3"
-    safe-array-concat "^1.1.3"
-    safe-push-apply "^1.0.0"
-    safe-regex-test "^1.1.0"
-    set-proto "^1.0.0"
-    string.prototype.trim "^1.2.10"
-    string.prototype.trimend "^1.0.9"
-    string.prototype.trimstart "^1.0.8"
-    typed-array-buffer "^1.0.3"
-    typed-array-byte-length "^1.0.3"
-    typed-array-byte-offset "^1.0.4"
-    typed-array-length "^1.0.7"
-    unbox-primitive "^1.1.0"
-    which-typed-array "^1.1.18"
-
-es-define-property@^1.0.0, es-define-property@^1.0.1:
+es-define-property@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
   integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
@@ -1729,28 +1249,6 @@ es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-iterator-helpers@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz#d1dd0f58129054c0ad922e6a9a1e65eef435fe75"
-  integrity sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.6"
-    es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.3"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.6"
-    globalthis "^1.0.4"
-    gopd "^1.2.0"
-    has-property-descriptors "^1.0.2"
-    has-proto "^1.2.0"
-    has-symbols "^1.1.0"
-    internal-slot "^1.1.0"
-    iterator.prototype "^1.1.4"
-    safe-array-concat "^1.1.3"
-
 es-object-atoms@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
@@ -1758,60 +1256,33 @@ es-object-atoms@^1.0.0:
   dependencies:
     es-errors "^1.3.0"
 
-es-set-tostringtag@^2.0.3, es-set-tostringtag@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
-  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
-  dependencies:
-    es-errors "^1.3.0"
-    get-intrinsic "^1.2.6"
-    has-tostringtag "^1.0.2"
-    hasown "^2.0.2"
-
-es-shim-unscopables@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
-  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
-  dependencies:
-    hasown "^2.0.0"
-
-es-to-primitive@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
-  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
-  dependencies:
-    is-callable "^1.2.7"
-    is-date-object "^1.0.5"
-    is-symbol "^1.0.4"
-
-esbuild@^0.21.3:
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
-  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
+esbuild@^0.18.10:
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
+  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.21.5"
-    "@esbuild/android-arm" "0.21.5"
-    "@esbuild/android-arm64" "0.21.5"
-    "@esbuild/android-x64" "0.21.5"
-    "@esbuild/darwin-arm64" "0.21.5"
-    "@esbuild/darwin-x64" "0.21.5"
-    "@esbuild/freebsd-arm64" "0.21.5"
-    "@esbuild/freebsd-x64" "0.21.5"
-    "@esbuild/linux-arm" "0.21.5"
-    "@esbuild/linux-arm64" "0.21.5"
-    "@esbuild/linux-ia32" "0.21.5"
-    "@esbuild/linux-loong64" "0.21.5"
-    "@esbuild/linux-mips64el" "0.21.5"
-    "@esbuild/linux-ppc64" "0.21.5"
-    "@esbuild/linux-riscv64" "0.21.5"
-    "@esbuild/linux-s390x" "0.21.5"
-    "@esbuild/linux-x64" "0.21.5"
-    "@esbuild/netbsd-x64" "0.21.5"
-    "@esbuild/openbsd-x64" "0.21.5"
-    "@esbuild/sunos-x64" "0.21.5"
-    "@esbuild/win32-arm64" "0.21.5"
-    "@esbuild/win32-ia32" "0.21.5"
-    "@esbuild/win32-x64" "0.21.5"
+    "@esbuild/android-arm" "0.18.20"
+    "@esbuild/android-arm64" "0.18.20"
+    "@esbuild/android-x64" "0.18.20"
+    "@esbuild/darwin-arm64" "0.18.20"
+    "@esbuild/darwin-x64" "0.18.20"
+    "@esbuild/freebsd-arm64" "0.18.20"
+    "@esbuild/freebsd-x64" "0.18.20"
+    "@esbuild/linux-arm" "0.18.20"
+    "@esbuild/linux-arm64" "0.18.20"
+    "@esbuild/linux-ia32" "0.18.20"
+    "@esbuild/linux-loong64" "0.18.20"
+    "@esbuild/linux-mips64el" "0.18.20"
+    "@esbuild/linux-ppc64" "0.18.20"
+    "@esbuild/linux-riscv64" "0.18.20"
+    "@esbuild/linux-s390x" "0.18.20"
+    "@esbuild/linux-x64" "0.18.20"
+    "@esbuild/netbsd-x64" "0.18.20"
+    "@esbuild/openbsd-x64" "0.18.20"
+    "@esbuild/sunos-x64" "0.18.20"
+    "@esbuild/win32-arm64" "0.18.20"
+    "@esbuild/win32-ia32" "0.18.20"
+    "@esbuild/win32-x64" "0.18.20"
 
 escalade@^3.2.0:
   version "3.2.0"
@@ -1828,127 +1299,6 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-next@15.0.3:
-  version "15.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-15.0.3.tgz#b483585260d5e55050d4ab87e053c88089ae12ee"
-  integrity sha512-IGP2DdQQrgjcr4mwFPve4DrCqo7CVVez1WoYY47XwKSrYO4hC0Dlb+iJA60i0YfICOzgNADIb8r28BpQ5Zs0wg==
-  dependencies:
-    "@next/eslint-plugin-next" "15.0.3"
-    "@rushstack/eslint-patch" "^1.10.3"
-    "@typescript-eslint/eslint-plugin" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
-    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^3.5.2"
-    eslint-plugin-import "^2.31.0"
-    eslint-plugin-jsx-a11y "^6.10.0"
-    eslint-plugin-react "^7.35.0"
-    eslint-plugin-react-hooks "^5.0.0"
-
-eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
-  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
-  dependencies:
-    debug "^3.2.7"
-    is-core-module "^2.13.0"
-    resolve "^1.22.4"
-
-eslint-import-resolver-typescript@^3.5.2:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.7.0.tgz#e69925936a771a9cb2de418ccebc4cdf6c0818aa"
-  integrity sha512-Vrwyi8HHxY97K5ebydMtffsWAn1SCR9eol49eCd5fJS4O1WV7PaAjbcjmbfJJSMz/t4Mal212Uz/fQZrOB8mow==
-  dependencies:
-    "@nolyfill/is-core-module" "1.0.39"
-    debug "^4.3.7"
-    enhanced-resolve "^5.15.0"
-    fast-glob "^3.3.2"
-    get-tsconfig "^4.7.5"
-    is-bun-module "^1.0.2"
-    is-glob "^4.0.3"
-    stable-hash "^0.0.4"
-
-eslint-module-utils@^2.12.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
-  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
-  dependencies:
-    debug "^3.2.7"
-
-eslint-plugin-import@^2.31.0:
-  version "2.31.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
-  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
-  dependencies:
-    "@rtsao/scc" "^1.1.0"
-    array-includes "^3.1.8"
-    array.prototype.findlastindex "^1.2.5"
-    array.prototype.flat "^1.3.2"
-    array.prototype.flatmap "^1.3.2"
-    debug "^3.2.7"
-    doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.9"
-    eslint-module-utils "^2.12.0"
-    hasown "^2.0.2"
-    is-core-module "^2.15.1"
-    is-glob "^4.0.3"
-    minimatch "^3.1.2"
-    object.fromentries "^2.0.8"
-    object.groupby "^1.0.3"
-    object.values "^1.2.0"
-    semver "^6.3.1"
-    string.prototype.trimend "^1.0.8"
-    tsconfig-paths "^3.15.0"
-
-eslint-plugin-jsx-a11y@^6.10.0:
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
-  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
-  dependencies:
-    aria-query "^5.3.2"
-    array-includes "^3.1.8"
-    array.prototype.flatmap "^1.3.2"
-    ast-types-flow "^0.0.8"
-    axe-core "^4.10.0"
-    axobject-query "^4.1.0"
-    damerau-levenshtein "^1.0.8"
-    emoji-regex "^9.2.2"
-    hasown "^2.0.2"
-    jsx-ast-utils "^3.3.5"
-    language-tags "^1.0.9"
-    minimatch "^3.1.2"
-    object.fromentries "^2.0.8"
-    safe-regex-test "^1.0.3"
-    string.prototype.includes "^2.0.1"
-
-eslint-plugin-react-hooks@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz#3d34e37d5770866c34b87d5b499f5f0b53bf0854"
-  integrity sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==
-
-eslint-plugin-react@^7.35.0:
-  version "7.37.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz#1b6c80b6175b6ae4b26055ae4d55d04c414c7181"
-  integrity sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==
-  dependencies:
-    array-includes "^3.1.8"
-    array.prototype.findlast "^1.2.5"
-    array.prototype.flatmap "^1.3.3"
-    array.prototype.tosorted "^1.1.4"
-    doctrine "^2.1.0"
-    es-iterator-helpers "^1.2.1"
-    estraverse "^5.3.0"
-    hasown "^2.0.2"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.8"
-    object.fromentries "^2.0.8"
-    object.values "^1.2.1"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.5"
-    semver "^6.3.1"
-    string.prototype.matchall "^4.0.12"
-    string.prototype.repeat "^1.0.0"
-
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
@@ -1962,11 +1312,6 @@ eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint-visitor-keys@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
-  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
-
 eslint@^8:
   version "8.57.1"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
@@ -2034,7 +1379,7 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
@@ -2091,17 +1436,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
-  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
 fast-glob@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
@@ -2184,13 +1518,6 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
   integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
 
-for-each@^0.3.3:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.4.tgz#814517ffc303d1399b2564d8165318e735d0341c"
-  integrity sha512-kKaIINnFpzW6ffJNDjjyjrk21BkDx38c0xa/klsT8VzLCaMEefv4ZTacrcVR4DmgTeBra++jMDAfS/tS799YDw==
-  dependencies:
-    is-callable "^1.2.7"
-
 foreground-child@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
@@ -2209,7 +1536,7 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-franken-ui@^2.0.0-internal.42:
+franken-ui@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/franken-ui/-/franken-ui-2.0.0.tgz#c6139119e7d8929a955324274651971fa8d8e551"
   integrity sha512-MbmGsR2ADh5BonDTCUoUg4BAqcvObQPR4g45FWore6eiVtr0qofhelxyVuSEmcSKBqIeI/d6DpMEFdRu2e4Dow==
@@ -2224,7 +1551,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2, fsevents@~2.3.3:
+fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -2234,24 +1561,12 @@ function-bind@^1.1.2:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
-  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
-    functions-have-names "^1.2.3"
-    hasown "^2.0.2"
-    is-callable "^1.2.7"
-
-functions-have-names@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
-  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7:
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
   integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
@@ -2267,7 +1582,7 @@ get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@
     hasown "^2.0.2"
     math-intrinsics "^1.1.0"
 
-get-proto@^1.0.0, get-proto@^1.0.1:
+get-proto@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
   integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
@@ -2282,22 +1597,6 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-symbol-description@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
-  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
-  dependencies:
-    call-bound "^1.0.3"
-    es-errors "^1.3.0"
-    get-intrinsic "^1.2.6"
-
-get-tsconfig@^4.7.5:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.10.0.tgz#403a682b373a823612475a4c2928c7326fc0f6bb"
-  integrity sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==
-  dependencies:
-    resolve-pkg-maps "^1.0.0"
-
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -2336,6 +1635,11 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^13.19.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
@@ -2343,15 +1647,7 @@ globals@^13.19.0:
   dependencies:
     type-fest "^0.20.2"
 
-globalthis@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
-  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
-  dependencies:
-    define-properties "^1.2.1"
-    gopd "^1.0.1"
-
-gopd@^1.0.1, gopd@^1.2.0:
+gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
@@ -2383,43 +1679,17 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-has-bigints@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
-  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
-  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
-  dependencies:
-    es-define-property "^1.0.0"
-
-has-proto@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
-  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
-  dependencies:
-    dunder-proto "^1.0.0"
-
-has-symbols@^1.0.3, has-symbols@^1.1.0:
+has-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
   integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
 
-has-tostringtag@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
-  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
-  dependencies:
-    has-symbols "^1.0.3"
-
-hasown@^2.0.0, hasown@^2.0.2:
+hasown@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
   integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
@@ -2457,7 +1727,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-ignore@^5.2.0, ignore@^5.3.1:
+ignore@^5.2.0:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
@@ -2488,52 +1758,11 @@ inherits@2, inherits@2.0.4:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-internal-slot@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
-  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
-  dependencies:
-    es-errors "^1.3.0"
-    hasown "^2.0.2"
-    side-channel "^1.1.0"
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
-  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    get-intrinsic "^1.2.6"
-
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
-is-async-function@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.1.1.tgz#3e69018c8e04e73b738793d020bfe884b9fd3523"
-  integrity sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==
-  dependencies:
-    async-function "^1.0.0"
-    call-bound "^1.0.3"
-    get-proto "^1.0.1"
-    has-tostringtag "^1.0.2"
-    safe-regex-test "^1.1.0"
-
-is-bigint@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
-  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
-  dependencies:
-    has-bigints "^1.0.2"
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -2541,77 +1770,23 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.1.tgz#c20d0c654be05da4fbc23c562635c019e93daf89"
-  integrity sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==
-  dependencies:
-    call-bound "^1.0.2"
-    has-tostringtag "^1.0.2"
-
-is-bun-module@^1.0.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/is-bun-module/-/is-bun-module-1.3.0.tgz#ea4d24fdebfcecc98e81bcbcb506827fee288760"
-  integrity sha512-DgXeu5UWI0IsMQundYb5UAOzm6G2eVnarJ0byP6Tm55iZNKceD59LNPA2L4VvsScTtHcw0yEkVwSf7PC+QoLSA==
-  dependencies:
-    semver "^7.6.3"
-
-is-callable@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
-  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
-
-is-core-module@^2.13.0, is-core-module@^2.15.1, is-core-module@^2.16.0:
+is-core-module@^2.16.0:
   version "2.16.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
-  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
-  dependencies:
-    hasown "^2.0.2"
-
-is-data-view@^1.0.1, is-data-view@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
-  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
-  dependencies:
-    call-bound "^1.0.2"
-    get-intrinsic "^1.2.6"
-    is-typed-array "^1.1.13"
-
-is-date-object@^1.0.5, is-date-object@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
-  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
   dependencies:
-    call-bound "^1.0.2"
-    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
 
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-finalizationregistry@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
-  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
-  dependencies:
-    call-bound "^1.0.3"
-
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-generator-function@^1.0.10:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
-  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
-  dependencies:
-    call-bound "^1.0.3"
-    get-proto "^1.0.0"
-    has-tostringtag "^1.0.2"
-    safe-regex-test "^1.1.0"
-
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -2619,19 +1794,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-map@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
-  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
-
-is-number-object@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
-  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
-  dependencies:
-    call-bound "^1.0.3"
-    has-tostringtag "^1.0.2"
-
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -2642,94 +1804,11 @@ is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-regex@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
-  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
-  dependencies:
-    call-bound "^1.0.2"
-    gopd "^1.2.0"
-    has-tostringtag "^1.0.2"
-    hasown "^2.0.2"
-
-is-set@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
-  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
-
-is-shared-array-buffer@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
-  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
-  dependencies:
-    call-bound "^1.0.3"
-
-is-string@^1.0.7, is-string@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
-  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
-  dependencies:
-    call-bound "^1.0.3"
-    has-tostringtag "^1.0.2"
-
-is-symbol@^1.0.4, is-symbol@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
-  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
-  dependencies:
-    call-bound "^1.0.2"
-    has-symbols "^1.1.0"
-    safe-regex-test "^1.1.0"
-
-is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
-  version "1.1.15"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
-  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
-  dependencies:
-    which-typed-array "^1.1.16"
-
-is-weakmap@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
-  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
-
-is-weakref@^1.0.2, is-weakref@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.0.tgz#47e3472ae95a63fa9cf25660bcf0c181c39770ef"
-  integrity sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==
-  dependencies:
-    call-bound "^1.0.2"
-
-is-weakset@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
-  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
-  dependencies:
-    call-bound "^1.0.3"
-    get-intrinsic "^1.2.6"
-
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-iterator.prototype@^1.1.4:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.5.tgz#12c959a29de32de0aa3bbbb801f4d777066dae39"
-  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-object-atoms "^1.0.0"
-    get-intrinsic "^1.2.6"
-    get-proto "^1.0.0"
-    has-symbols "^1.1.0"
-    set-function-name "^2.0.2"
-
 jackspeak@^3.1.2:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
@@ -2749,7 +1828,7 @@ jiti@^2.4.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.4.2.tgz#d19b7732ebb6116b06e2038da74a55366faef560"
   integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==
 
-"js-tokens@^3.0.0 || ^4.0.0":
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -2761,6 +1840,11 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -2776,22 +1860,10 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json5@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
-  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
-  dependencies:
-    minimist "^1.2.0"
-
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
-  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
-  dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flat "^1.3.1"
-    object.assign "^4.1.4"
-    object.values "^1.1.6"
+json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 keyv@^4.0.0, keyv@^4.5.3:
   version "4.5.4"
@@ -2800,18 +1872,6 @@ keyv@^4.0.0, keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
-language-subtag-registry@^0.3.20:
-  version "0.3.23"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
-  integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
-
-language-tags@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
-  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
-  dependencies:
-    language-subtag-registry "^0.3.20"
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -2888,7 +1948,7 @@ lightningcss@1.29.2:
     lightningcss-win32-arm64-msvc "1.29.2"
     lightningcss-win32-x64-msvc "1.29.2"
 
-lilconfig@^3.0.0, lilconfig@^3.1.3:
+lilconfig@^3.0.0, lilconfig@^3.1.1, lilconfig@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
   integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
@@ -2920,7 +1980,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2937,6 +1997,20 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
   integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
@@ -2967,7 +2041,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-micromatch@^4.0.4, micromatch@^4.0.8:
+micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -3002,6 +2076,15 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
+minifaker@^1.34.1:
+  version "1.34.1"
+  resolved "https://registry.yarnpkg.com/minifaker/-/minifaker-1.34.1.tgz#38d96a1aeebd99b950a9c420eb34d2638147ebf2"
+  integrity sha512-O9+c6GaUETgtKe65bJkpDTJxGcAALiUPqJtDv97dT3o0uP2HmyUVEguEGm6PLKuoSzZUmHqSTZ4cS7m8xKFEAg==
+  dependencies:
+    "@types/uuid" "^8.3.4"
+    nanoid "^3.2.0"
+    uuid "^8.3.2"
+
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -3016,11 +2099,6 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.6:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
-  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
-
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
@@ -3031,7 +2109,7 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
-ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
+ms@2.1.3, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -3045,7 +2123,12 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.6, nanoid@^3.3.7, nanoid@^3.3.8:
+nanoid@^3.2.0:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+nanoid@^3.3.7, nanoid@^3.3.8:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
   integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
@@ -3065,29 +2148,6 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-next@^15:
-  version "15.1.7"
-  resolved "https://registry.yarnpkg.com/next/-/next-15.1.7.tgz#e814845e7cdb0294aee88ceab0bb962de83e8e6f"
-  integrity sha512-GNeINPGS9c6OZKCvKypbL8GTsT5GhWPp4DM0fzkXJuXMilOO2EeFxuAY6JZbtk6XIl6Ws10ag3xRINDjSO5+wg==
-  dependencies:
-    "@next/env" "15.1.7"
-    "@swc/counter" "0.1.3"
-    "@swc/helpers" "0.5.15"
-    busboy "1.6.0"
-    caniuse-lite "^1.0.30001579"
-    postcss "8.4.31"
-    styled-jsx "5.1.6"
-  optionalDependencies:
-    "@next/swc-darwin-arm64" "15.1.7"
-    "@next/swc-darwin-x64" "15.1.7"
-    "@next/swc-linux-arm64-gnu" "15.1.7"
-    "@next/swc-linux-arm64-musl" "15.1.7"
-    "@next/swc-linux-x64-gnu" "15.1.7"
-    "@next/swc-linux-x64-musl" "15.1.7"
-    "@next/swc-win32-arm64-msvc" "15.1.7"
-    "@next/swc-win32-x64-msvc" "15.1.7"
-    sharp "^0.33.5"
-
 node-releases@^2.0.19:
   version "2.0.19"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
@@ -3108,7 +2168,7 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4, object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -3123,61 +2183,6 @@ object-inspect@^1.13.3:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
   integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
 
-object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object.assign@^4.1.4, object.assign@^4.1.7:
-  version "4.1.7"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
-  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
-    es-object-atoms "^1.0.0"
-    has-symbols "^1.1.0"
-    object-keys "^1.1.1"
-
-object.entries@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
-  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-object-atoms "^1.0.0"
-
-object.fromentries@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
-  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.2"
-    es-object-atoms "^1.0.0"
-
-object.groupby@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
-  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.2"
-
-object.values@^1.1.6, object.values@^1.2.0, object.values@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
-  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
-    es-object-atoms "^1.0.0"
-
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -3204,15 +2209,6 @@ optionator@^0.9.3:
     type-check "^0.4.0"
     word-wrap "^1.2.5"
 
-own-keys@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
-  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
-  dependencies:
-    get-intrinsic "^1.2.6"
-    object-keys "^1.1.1"
-    safe-push-apply "^1.0.0"
-
 p-cancelable@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.1.1.tgz#aab7fbd416582fa32a3db49859c122487c5ed2cf"
@@ -3282,7 +2278,7 @@ path-to-regexp@0.1.12:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
   integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
-picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.1:
+picocolors@^1.0.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -3302,11 +2298,6 @@ pirates@^4.0.1:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-possible-typed-array-names@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
-  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
-
 postcss-combine-duplicated-selectors@^10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz#71e8b6783e99cd560cf08ba7b896ad0db318c11c"
@@ -3338,6 +2329,13 @@ postcss-load-config@^4.0.2:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
+postcss-load-config@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-6.0.1.tgz#6fd7dcd8ae89badcf1b2d644489cbabf83aa8096"
+  integrity sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==
+  dependencies:
+    lilconfig "^3.1.1"
+
 postcss-nested@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
@@ -3353,40 +2351,24 @@ postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.1, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-sort-media-queries@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-sort-media-queries/-/postcss-sort-media-queries-5.2.0.tgz#4556b3f982ef27d3bac526b99b6c0d3359a6cf97"
-  integrity sha512-AZ5fDMLD8SldlAYlvi8NIqo0+Z8xnXU2ia0jxmuhxAU+Lqt9K+AlmLNJ/zWEnE9x+Zx3qL3+1K20ATgNOr3fAA==
-  dependencies:
-    sort-css-media-queries "2.2.0"
-
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8, postcss@^8.4.43, postcss@^8.4.47:
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
-  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
+postcss@^8.4.27, postcss@^8.4.41, postcss@^8.5.3:
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb"
+  integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==
   dependencies:
     nanoid "^3.3.8"
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
-postcss@^8.4.41:
-  version "8.5.3"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb"
-  integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==
+postcss@^8.4.47:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
   dependencies:
     nanoid "^3.3.8"
     picocolors "^1.1.1"
@@ -3397,15 +2379,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.8.1:
-  version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
-  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -3472,10 +2445,25 @@ react-icons@^5.4.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"
   integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==
 
-react-is@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+react-refresh@^0.14.0:
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
+  integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
+
+react-router-dom@^6.22.2:
+  version "6.30.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.30.0.tgz#a64774104508bff56b1affc2796daa3f7e76b7df"
+  integrity sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==
+  dependencies:
+    "@remix-run/router" "1.23.0"
+    react-router "6.30.0"
+
+react-router@6.30.0:
+  version "6.30.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.30.0.tgz#9789d775e63bc0df60f39ced77c8c41f1e01ff90"
+  integrity sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==
+  dependencies:
+    "@remix-run/router" "1.23.0"
 
 react@^18:
   version "18.3.1"
@@ -3498,32 +2486,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
-  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
-  dependencies:
-    call-bind "^1.0.8"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.9"
-    es-errors "^1.3.0"
-    es-object-atoms "^1.0.0"
-    get-intrinsic "^1.2.7"
-    get-proto "^1.0.1"
-    which-builtin-type "^1.2.1"
-
-regexp.prototype.flags@^1.5.3:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
-  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
-  dependencies:
-    call-bind "^1.0.8"
-    define-properties "^1.2.1"
-    es-errors "^1.3.0"
-    get-proto "^1.0.1"
-    gopd "^1.2.0"
-    set-function-name "^2.0.2"
-
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -3534,12 +2496,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-pkg-maps@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
-  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
-
-resolve@^1.1.7, resolve@^1.22.4, resolve@^1.22.8:
+resolve@^1.1.7, resolve@^1.22.8:
   version "1.22.10"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
   integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
@@ -3548,15 +2505,6 @@ resolve@^1.1.7, resolve@^1.22.4, resolve@^1.22.8:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.5:
-  version "2.0.0-next.5"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
-  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
-  dependencies:
-    is-core-module "^2.13.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 responselike@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-2.0.1.tgz#9a0bc8fdc252f3fb1cca68b016591059ba1422bc"
@@ -3576,32 +2524,11 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^4.20.0:
-  version "4.32.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.32.1.tgz#95309604d92c3d21cbf06c3ee46a098209ce13a4"
-  integrity sha512-z+aeEsOeEa3mEbS1Tjl6sAZ8NE3+AalQz1RJGj81M+fizusbdDMoEJwdJNHfaB40Scr4qNu+welOfes7maKonA==
-  dependencies:
-    "@types/estree" "1.0.6"
+rollup@^3.27.1:
+  version "3.29.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.5.tgz#8a2e477a758b520fb78daf04bca4c522c1da8a54"
+  integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.32.1"
-    "@rollup/rollup-android-arm64" "4.32.1"
-    "@rollup/rollup-darwin-arm64" "4.32.1"
-    "@rollup/rollup-darwin-x64" "4.32.1"
-    "@rollup/rollup-freebsd-arm64" "4.32.1"
-    "@rollup/rollup-freebsd-x64" "4.32.1"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.32.1"
-    "@rollup/rollup-linux-arm-musleabihf" "4.32.1"
-    "@rollup/rollup-linux-arm64-gnu" "4.32.1"
-    "@rollup/rollup-linux-arm64-musl" "4.32.1"
-    "@rollup/rollup-linux-loongarch64-gnu" "4.32.1"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.32.1"
-    "@rollup/rollup-linux-riscv64-gnu" "4.32.1"
-    "@rollup/rollup-linux-s390x-gnu" "4.32.1"
-    "@rollup/rollup-linux-x64-gnu" "4.32.1"
-    "@rollup/rollup-linux-x64-musl" "4.32.1"
-    "@rollup/rollup-win32-arm64-msvc" "4.32.1"
-    "@rollup/rollup-win32-ia32-msvc" "4.32.1"
-    "@rollup/rollup-win32-x64-msvc" "4.32.1"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -3611,39 +2538,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-safe-array-concat@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
-  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.2"
-    get-intrinsic "^1.2.6"
-    has-symbols "^1.1.0"
-    isarray "^2.0.5"
-
 safe-buffer@5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-push-apply@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
-  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
-  dependencies:
-    es-errors "^1.3.0"
-    isarray "^2.0.5"
-
-safe-regex-test@^1.0.3, safe-regex-test@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
-  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
-  dependencies:
-    call-bound "^1.0.2"
-    es-errors "^1.3.0"
-    is-regex "^1.2.1"
-
 "safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -3661,11 +2560,6 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.6.0, semver@^7.6.3:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.0.tgz#9c6fe61d0c6f9fa9e26575162ee5a9180361b09c"
-  integrity sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==
-
 send@0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
@@ -3695,71 +2589,11 @@ serve-static@1.16.2:
     parseurl "~1.3.3"
     send "0.19.0"
 
-set-function-length@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
-  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
-
-set-function-name@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
-  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    functions-have-names "^1.2.3"
-    has-property-descriptors "^1.0.2"
-
-set-proto@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
-  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
-  dependencies:
-    dunder-proto "^1.0.1"
-    es-errors "^1.3.0"
-    es-object-atoms "^1.0.0"
-
 setprototypeof@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-sharp@^0.33.5:
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.5.tgz#13e0e4130cc309d6a9497596715240b2ec0c594e"
-  integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==
-  dependencies:
-    color "^4.2.3"
-    detect-libc "^2.0.3"
-    semver "^7.6.3"
-  optionalDependencies:
-    "@img/sharp-darwin-arm64" "0.33.5"
-    "@img/sharp-darwin-x64" "0.33.5"
-    "@img/sharp-libvips-darwin-arm64" "1.0.4"
-    "@img/sharp-libvips-darwin-x64" "1.0.4"
-    "@img/sharp-libvips-linux-arm" "1.0.5"
-    "@img/sharp-libvips-linux-arm64" "1.0.4"
-    "@img/sharp-libvips-linux-s390x" "1.0.4"
-    "@img/sharp-libvips-linux-x64" "1.0.4"
-    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
-    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
-    "@img/sharp-linux-arm" "0.33.5"
-    "@img/sharp-linux-arm64" "0.33.5"
-    "@img/sharp-linux-s390x" "0.33.5"
-    "@img/sharp-linux-x64" "0.33.5"
-    "@img/sharp-linuxmusl-arm64" "0.33.5"
-    "@img/sharp-linuxmusl-x64" "0.33.5"
-    "@img/sharp-wasm32" "0.33.5"
-    "@img/sharp-win32-ia32" "0.33.5"
-    "@img/sharp-win32-x64" "0.33.5"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -3801,7 +2635,7 @@ side-channel-weakmap@^1.0.2:
     object-inspect "^1.13.3"
     side-channel-map "^1.0.1"
 
-side-channel@^1.0.6, side-channel@^1.1.0:
+side-channel@^1.0.6:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
   integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
@@ -3817,38 +2651,16 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
-  dependencies:
-    is-arrayish "^0.3.1"
-
-sort-css-media-queries@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-2.2.0.tgz#aa33cf4a08e0225059448b6c40eddbf9f1c8334c"
-  integrity sha512-0xtkGhWCC9MGt/EzgnvbbbKhqWjl1+/rncmhTh5qCpbYguXh6S/qwePfv/JQ8jePXXmqingylxoC49pCkSPIbA==
-
-source-map-js@^1.0.2, source-map-js@^1.2.1:
+source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
-stable-hash@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/stable-hash/-/stable-hash-0.0.4.tgz#55ae7dadc13e4b3faed13601587cec41859b42f7"
-  integrity sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==
-
 statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-streamsearch@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
-  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
-
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   name string-width-cjs
   version "4.2.3"
@@ -3868,74 +2680,6 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.includes@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
-  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.3"
-
-string.prototype.matchall@^4.0.12:
-  version "4.0.12"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"
-  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.6"
-    es-errors "^1.3.0"
-    es-object-atoms "^1.0.0"
-    get-intrinsic "^1.2.6"
-    gopd "^1.2.0"
-    has-symbols "^1.1.0"
-    internal-slot "^1.1.0"
-    regexp.prototype.flags "^1.5.3"
-    set-function-name "^2.0.2"
-    side-channel "^1.1.0"
-
-string.prototype.repeat@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
-  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
-string.prototype.trim@^1.2.10:
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
-  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.2"
-    define-data-property "^1.1.4"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.5"
-    es-object-atoms "^1.0.0"
-    has-property-descriptors "^1.0.2"
-
-string.prototype.trimend@^1.0.8, string.prototype.trimend@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
-  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.2"
-    define-properties "^1.2.1"
-    es-object-atoms "^1.0.0"
-
-string.prototype.trimstart@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
-  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-object-atoms "^1.0.0"
-
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   name strip-ansi-cjs
   version "6.0.1"
@@ -3951,23 +2695,11 @@ strip-ansi@^7.0.1:
   dependencies:
     ansi-regex "^6.0.1"
 
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
-
 strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-styled-jsx@5.1.6:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.6.tgz#83b90c077e6c6a80f7f5e8781d0f311b2fe41499"
-  integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
-  dependencies:
-    client-only "0.0.1"
-
 sucrase@^3.35.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
@@ -3993,12 +2725,7 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-tailwindcss@4.0.14:
-  version "4.0.14"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.0.14.tgz#531548524eb422fb8b89a24ebdf267c6726a09c6"
-  integrity sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw==
-
-tailwindcss@^3.4.1:
+tailwindcss@3:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
   integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
@@ -4026,6 +2753,11 @@ tailwindcss@^3.4.1:
     resolve "^1.22.8"
     sucrase "^3.35.0"
 
+tailwindcss@4.0.14:
+  version "4.0.14"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.0.14.tgz#531548524eb422fb8b89a24ebdf267c6726a09c6"
+  integrity sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw==
+
 tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -4067,11 +2799,6 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
-ts-api-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.0.0.tgz#b9d7d5f7ec9f736f4d0f09758b8607979044a900"
-  integrity sha512-xCt/TOAc+EOHS1XPnijD3/yzpH6qg2xppZO1YDqGoVsNXfQfzHpOdNuXwrwOU8u4ITXJyDCTyt8w5g1sZv9ynQ==
-
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -4096,17 +2823,7 @@ ts-node@^10.9.2:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-tsconfig-paths@^3.15.0:
-  version "3.15.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
-  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.2"
-    minimist "^1.2.6"
-    strip-bom "^3.0.0"
-
-tslib@^2.4.0, tslib@^2.8.0:
+tslib@^2.4.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -4131,51 +2848,6 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typed-array-buffer@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
-  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
-  dependencies:
-    call-bound "^1.0.3"
-    es-errors "^1.3.0"
-    is-typed-array "^1.1.14"
-
-typed-array-byte-length@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
-  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
-  dependencies:
-    call-bind "^1.0.8"
-    for-each "^0.3.3"
-    gopd "^1.2.0"
-    has-proto "^1.2.0"
-    is-typed-array "^1.1.14"
-
-typed-array-byte-offset@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
-  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
-  dependencies:
-    available-typed-arrays "^1.0.7"
-    call-bind "^1.0.8"
-    for-each "^0.3.3"
-    gopd "^1.2.0"
-    has-proto "^1.2.0"
-    is-typed-array "^1.1.15"
-    reflect.getprototypeof "^1.0.9"
-
-typed-array-length@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
-  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
-  dependencies:
-    call-bind "^1.0.7"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    is-typed-array "^1.1.13"
-    possible-typed-array-names "^1.0.0"
-    reflect.getprototypeof "^1.0.6"
-
 typescript@^5:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.3.tgz#919b44a7dbb8583a9b856d162be24a54bf80073e"
@@ -4191,16 +2863,6 @@ ulid@^2.3.0:
   resolved "https://registry.yarnpkg.com/ulid/-/ulid-2.3.0.tgz#93063522771a9774121a84d126ecd3eb9804071f"
   integrity sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==
 
-unbox-primitive@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
-  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
-  dependencies:
-    call-bound "^1.0.3"
-    has-bigints "^1.0.2"
-    has-symbols "^1.1.0"
-    which-boxed-primitive "^1.1.1"
-
 undici-types@~6.19.2:
   version "6.19.8"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
@@ -4248,6 +2910,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -4258,68 +2925,16 @@ vary@^1, vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vite@^5.4.2:
-  version "5.4.14"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.14.tgz#ff8255edb02134df180dcfca1916c37a6abe8408"
-  integrity sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==
+vite@4:
+  version "4.5.10"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.10.tgz#fc6823d5347fd171a25ae6379f05b0be700d303e"
+  integrity sha512-f2ueoukYTMI/5kMMT7wW+ol3zL6z6PjN28zYrGKAjnbzXhRXWXPThD3uN6muCp+TbfXaDgGvRuPsg6mwVLaWwQ==
   dependencies:
-    esbuild "^0.21.3"
-    postcss "^8.4.43"
-    rollup "^4.20.0"
+    esbuild "^0.18.10"
+    postcss "^8.4.27"
+    rollup "^3.27.1"
   optionalDependencies:
-    fsevents "~2.3.3"
-
-which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
-  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
-  dependencies:
-    is-bigint "^1.1.0"
-    is-boolean-object "^1.2.1"
-    is-number-object "^1.1.1"
-    is-string "^1.1.1"
-    is-symbol "^1.1.1"
-
-which-builtin-type@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
-  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
-  dependencies:
-    call-bound "^1.0.2"
-    function.prototype.name "^1.1.6"
-    has-tostringtag "^1.0.2"
-    is-async-function "^2.0.0"
-    is-date-object "^1.1.0"
-    is-finalizationregistry "^1.1.0"
-    is-generator-function "^1.0.10"
-    is-regex "^1.2.1"
-    is-weakref "^1.0.2"
-    isarray "^2.0.5"
-    which-boxed-primitive "^1.1.0"
-    which-collection "^1.0.2"
-    which-typed-array "^1.1.16"
-
-which-collection@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
-  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
-  dependencies:
-    is-map "^2.0.3"
-    is-set "^2.0.3"
-    is-weakmap "^2.0.2"
-    is-weakset "^2.0.3"
-
-which-typed-array@^1.1.16, which-typed-array@^1.1.18:
-  version "1.1.18"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.18.tgz#df2389ebf3fbb246a71390e90730a9edb6ce17ad"
-  integrity sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==
-  dependencies:
-    available-typed-arrays "^1.0.7"
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    for-each "^0.3.3"
-    gopd "^1.2.0"
-    has-tostringtag "^1.0.2"
+    fsevents "~2.3.2"
 
 which@^2.0.1:
   version "2.0.2"
@@ -4361,6 +2976,11 @@ ws@^8.17.1:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
   integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yaml@^2.3.4:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
diff --git a/gatsby-config.ts b/gatsby-config.ts
index 3385e6acfa..3fc16a2060 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -26,8 +26,6 @@ export const siteMetadata = {
     oneTrustTest: process.env.ONE_TRUST_TEST,
     inkeepEnabled: process.env.INKEEP_CHAT_ENABLED,
     inkeepApiKey: process.env.INKEEP_CHAT_API_KEY,
-    inkeepIntegrationId: process.env.INKEEP_CHAT_INTEGRATION_ID,
-    inkeepOrganizationId: process.env.INKEEP_CHAT_ORGANIZATION_ID,
     insightsEnabled: !!process.env.INSIGHTS_ENABLED,
     insightsDebug: process.env.INSIGHTS_DEBUG === 'true',
     mixpanelApiKey: process.env.MIXPANEL_API_KEY,
diff --git a/how-tos/pub-sub/package.json b/how-tos/pub-sub/package.json
index ffd84e6899..c8008f0109 100644
--- a/how-tos/pub-sub/package.json
+++ b/how-tos/pub-sub/package.json
@@ -26,6 +26,6 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.31",
     "typescript": "^5.0.2",
-    "vite": "^4.5.6"
+    "vite": "^4.5.12"
   }
 }
diff --git a/how-tos/pub-sub/yarn.lock b/how-tos/pub-sub/yarn.lock
index 58e6e9e370..b0f37892ca 100644
--- a/how-tos/pub-sub/yarn.lock
+++ b/how-tos/pub-sub/yarn.lock
@@ -1789,10 +1789,10 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-vite@^4.5.6:
-  version "4.5.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.6.tgz#48bbd97fe06e8241df2e625b31c581707e10b57d"
-  integrity sha512-ElBNuVvJKslxcfY2gMmae5IjaKGqCYGicCNZ+8R56sAznobeE3pI9ctzI17cBS/6OJh5YuQNMSN4BP4dRjugBg==
+vite@^4.5.12:
+  version "4.5.12"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.12.tgz#48f48dbcf789722765e91bc32a99cb66c628eadc"
+  integrity sha512-qrMwavANtSz91nDy3zEiUHMtL09x0mniQsSMvDkNxuCBM1W5vriJ22hEmwTth6DhLSWsZnHBT0yHFAQXt6efGA==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"
diff --git a/package.json b/package.json
index 2cd25a13ec..8a63fa4123 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "no-githooks": "git config --unset core.hooksPath"
   },
   "dependencies": {
-    "@ably/ui": "15.8.1",
+    "@ably/ui": "16.1.1",
     "@codesandbox/sandpack-react": "^2.9.0",
     "@mdx-js/react": "^2.3.0",
     "@react-hook/media-query": "^1.1.1",
diff --git a/src/components/Examples/ExamplesList.tsx b/src/components/Examples/ExamplesList.tsx
index 500c8ad62d..5aa2474e12 100644
--- a/src/components/Examples/ExamplesList.tsx
+++ b/src/components/Examples/ExamplesList.tsx
@@ -8,7 +8,7 @@ const ExamplesList: React.FC = () => {
         <a
           key={example.name}
           href={'#'}
-          className="px-16 ui-text-menu1 text-neutral-1000 dark:text-neutral-300 font-bold hover:text-neutral-1300 dark:hover:text-neutral-000"
+          className="px-16 ui-text-label1 text-neutral-1000 dark:text-neutral-300 font-bold hover:text-neutral-1300 dark:hover:text-neutral-000"
         >
           {example.name}
         </a>
diff --git a/src/components/Examples/ExamplesNoResults.tsx b/src/components/Examples/ExamplesNoResults.tsx
index 7f2d507b26..c50722d225 100644
--- a/src/components/Examples/ExamplesNoResults.tsx
+++ b/src/components/Examples/ExamplesNoResults.tsx
@@ -12,7 +12,7 @@ const ExamplesNoResults = () => {
       <p className="ui-text-p3 mt-24 text-neutral-1100">Try these popular search terms</p>
       <div className="flex mt-8 gap-x-6">
         {popularSearchTerm.map((term) => (
-          <Badge key={`search-term-${term}`} className="text-neutral-1300 ui-text-menu3 font-medium">
+          <Badge key={`search-term-${term}`} className="text-neutral-1300 ui-text-label3 font-medium">
             {term}
           </Badge>
         ))}
diff --git a/src/components/GlobalLoading/GlobalLoading.tsx b/src/components/GlobalLoading/GlobalLoading.tsx
index be6c6d8268..1de4ee76ce 100644
--- a/src/components/GlobalLoading/GlobalLoading.tsx
+++ b/src/components/GlobalLoading/GlobalLoading.tsx
@@ -31,8 +31,6 @@ const GlobalLoading: FC<GlobalLoadingProps> = ({ children, template }) => {
             announcementEnabled
             inkeepEnabled
             inkeepApiKey
-            inkeepIntegrationId
-            inkeepOrganizationId
             insightsEnabled
             insightsDebug
             mixpanelApiKey
diff --git a/src/components/LanguageButton/LanguageButton.test.tsx b/src/components/LanguageButton/LanguageButton.test.tsx
index 14a5084f40..e6ccc62cd4 100644
--- a/src/components/LanguageButton/LanguageButton.test.tsx
+++ b/src/components/LanguageButton/LanguageButton.test.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { LayoutProvider } from 'src/contexts/layout-context';
 
-import { PageLanguageContext } from 'src/contexts/page-language-context';
 import LanguageButton from './LanguageButton';
 
-const contextValue = {
-  handleCurrentLanguageChange: jest.fn(),
-  getPreferredLanguage: jest.fn(),
-  setPreferredLanguage: jest.fn(),
-};
+jest.mock('@reach/router', () => ({
+  useLocation: () => ({
+    pathname: '/test-path',
+    search: '?lang=javascript',
+  }),
+}));
 
 describe(`<LanguageButton />`, () => {
   it('renders default state button', () => {
@@ -18,7 +18,7 @@ describe(`<LanguageButton />`, () => {
     );
     expect(screen.getByRole('button')).toMatchInlineSnapshot(`
       <button
-        class="button ui-text-menu3 isActive"
+        class="button ui-text-label3 isActive"
       >
         JavaScript
       </button>
@@ -26,41 +26,28 @@ describe(`<LanguageButton />`, () => {
   });
   it('renders active state button', () => {
     render(
-      <PageLanguageContext.Provider value={{ currentLanguage: 'javascript', ...contextValue }}>
+      <LayoutProvider>
         <LanguageButton language="javascript" selectedSDKInterfaceTab="realtime" selectedLocalLanguage="javascript" />
-      </PageLanguageContext.Provider>,
+      </LayoutProvider>,
     );
     expect(screen.getByRole('button')).toMatchInlineSnapshot(`
       <button
-        class="button ui-text-menu3 isActive"
+        class="button ui-text-label3 isActive"
       >
         JavaScript
       </button>
     `);
   });
 
-  it('changes session storage value on click', async () => {
-    const setItemSpy = jest.spyOn(contextValue, 'setPreferredLanguage');
-    render(
-      <PageLanguageContext.Provider value={{ currentLanguage: 'python', ...contextValue }}>
-        <LanguageButton selectedSDKInterfaceTab="realtime" language="javascript" selectedLocalLanguage="javascript" />
-      </PageLanguageContext.Provider>,
-    );
-
-    const button = screen.getByRole('button');
-    await userEvent.click(button);
-    expect(setItemSpy).toHaveBeenCalledWith('javascript');
-  });
-
   it('renders active button if pageLanguage is not in the languages but the language is the first language of the array', () => {
     render(
-      <PageLanguageContext.Provider value={{ currentLanguage: 'php', ...contextValue }}>
+      <LayoutProvider>
         <LanguageButton language="ruby" selectedSDKInterfaceTab="realtime" selectedLocalLanguage="ruby" />
-      </PageLanguageContext.Provider>,
+      </LayoutProvider>,
     );
     expect(screen.getByRole('button')).toMatchInlineSnapshot(`
       <button
-        class="button ui-text-menu3 isActive"
+        class="button ui-text-label3"
       >
         Ruby
       </button>
@@ -69,13 +56,13 @@ describe(`<LanguageButton />`, () => {
 
   it('renders active button if language is a sdk interface', () => {
     render(
-      <PageLanguageContext.Provider value={{ currentLanguage: 'java', ...contextValue }}>
+      <LayoutProvider>
         <LanguageButton language="rest_java" selectedSDKInterfaceTab="rest" selectedLocalLanguage="java" />
-      </PageLanguageContext.Provider>,
+      </LayoutProvider>,
     );
     expect(screen.getByRole('button')).toMatchInlineSnapshot(`
       <button
-        class="button ui-text-menu3 isActive"
+        class="button ui-text-label3"
       />
     `);
   });
diff --git a/src/components/LanguageButton/LanguageButton.tsx b/src/components/LanguageButton/LanguageButton.tsx
index 3f7c53f277..b271b2a942 100644
--- a/src/components/LanguageButton/LanguageButton.tsx
+++ b/src/components/LanguageButton/LanguageButton.tsx
@@ -4,33 +4,33 @@ import cn from '@ably/ui/core/utils/cn';
 import { createLanguageHrefFromDefaults, getLanguageDefaults, getTrimmedLanguage } from 'src/components';
 import { LanguageNavigationComponentProps } from '../Menu/LanguageNavigation';
 import { button, isActive } from '../Menu/MenuItemButton/MenuItemButton.module.css';
-import { usePageLanguage } from 'src/contexts';
 import { languageInfo } from 'src/data/languages';
 import { LanguageKey } from 'src/data/languages/types';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 const LanguageButton: FC<LanguageNavigationComponentProps> = ({ language, selectedLocalLanguage }) => {
-  const { currentLanguage: pageLanguage, setPreferredLanguage } = usePageLanguage();
+  const { activePage, setLanguage } = useLayoutContext();
   const selectedLanguage = getTrimmedLanguage(language);
-  const { isLanguageDefault, isPageLanguageDefault } = getLanguageDefaults(selectedLanguage, pageLanguage);
+  const { isLanguageDefault, isPageLanguageDefault } = getLanguageDefaults(selectedLanguage, activePage.language);
   /*
   separate the isLanguageActive variable because we will pass a pageLanguage value that is not always from the useContext(PageLanguageContext),
   so if the  useContext(PageLanguageContext) is not present in the languages we will pass the first language of the languages
    eg: selected global language: PHP but the languages are: [js, ruby]  so it will pass js now as php is not present
    */
-  const { isLanguageActive } = getLanguageDefaults(selectedLanguage, selectedLocalLanguage);
+  const isLanguageActive = activePage.language === selectedLanguage;
 
   const handleClick = () => {
     const href = createLanguageHrefFromDefaults(isPageLanguageDefault, isLanguageDefault, selectedLanguage);
 
     if (!isPageLanguageDefault) {
-      setPreferredLanguage(language);
+      setLanguage(language);
     }
     navigate(href);
   };
 
   return (
     <button
-      className={cn(button, 'ui-text-menu3', {
+      className={cn(button, 'ui-text-label3', {
         [isActive]: isLanguageActive,
       })}
       onClick={handleClick}
diff --git a/src/components/Layout/Breadcrumbs.tsx b/src/components/Layout/Breadcrumbs.tsx
index 4d09220b1f..fcbbbfb17a 100644
--- a/src/components/Layout/Breadcrumbs.tsx
+++ b/src/components/Layout/Breadcrumbs.tsx
@@ -25,7 +25,7 @@ const Breadcrumbs: React.FC = () => {
   }
 
   const linkStyles =
-    'ui-text-menu4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500';
+    'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500';
 
   return (
     <nav aria-label="breadcrumb" className="flex mt-32 items-center gap-4">
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 61cdef69a6..6896c5b3b7 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -88,7 +88,7 @@ const Footer: React.FC = () => (
             <a
               key={link.label}
               href={link.link}
-              className="ui-text-menu4 font-medium text-neutral-900 hover:text-neutral-1300 dark:text-neutral-400 dark:hover:text-neutral-000 transition-colors"
+              className="ui-text-label4 font-medium text-neutral-900 hover:text-neutral-1300 dark:text-neutral-400 dark:hover:text-neutral-000 transition-colors"
             >
               {link.label}
             </a>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 19cd7c2cec..e0a6e82886 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -40,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
       // nav={
       //   <TabMenu
       //     tabs={tabs}
-      //     tabClassName="ui-text-menu3 !px-16"
+      //     tabClassName="ui-text-label3 !px-16"
       //     tabOnClick={(index) => {
       //       navigate(tabLinks(index));
       //     }}
@@ -53,7 +53,7 @@ const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
       //     contents={[<LeftSidebar inHeader key="nav-mobile-documentation-tab" />, <ExamplesList key="nav-mobile-examples-tab" />]}
       //     rootClassName="h-full overflow-y-hidden min-h-[51px] flex flex-col"
       //     contentClassName="h-full py-16 overflow-y-scroll"
-      //     tabClassName="ui-text-menu2 !px-16"
+      //     tabClassName="ui-text-label2 !px-16"
       //     options={{ flexibleTabWidth: true }}
       //   />
       // }
diff --git a/src/components/Layout/LanguageSelector.tsx b/src/components/Layout/LanguageSelector.tsx
index 866ba8fe72..c4c50844ad 100644
--- a/src/components/Layout/LanguageSelector.tsx
+++ b/src/components/Layout/LanguageSelector.tsx
@@ -46,7 +46,7 @@ const LanguageSelectorOption = ({ isOption, setMenuOpen, langParam, ...props }:
   return (
     <div
       className={cn(
-        'ui-text-menu4 text-left leading-none w-full text-neutral-1100 dark:text-neutral-200 hover:text-neutral-1200 dark:hover:text-neutral-300 group/lang-dropdown flex gap-8 items-center rounded',
+        'ui-text-label4 text-left leading-none w-full text-neutral-1100 dark:text-neutral-200 hover:text-neutral-1200 dark:hover:text-neutral-300 group/lang-dropdown flex gap-8 items-center rounded',
         {
           'p-8 hover:bg-neutral-100 dark:hover:bg-neutral-1200 cursor-pointer': isOption,
         },
@@ -99,13 +99,6 @@ export const LanguageSelector = () => {
   const queryParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
   const langParam = queryParams.get('lang');
 
-  useEffect(() => {
-    if (langParam && !options.some((option) => option.label === langParam)) {
-      queryParams.delete('lang');
-      navigate(`${location.pathname}?${queryParams.toString()}`, { replace: true });
-    }
-  }, [langParam, options, location.pathname, queryParams]);
-
   useEffect(() => {
     const defaultOption = options.find((option) => option.label === langParam) || options[0];
     setSelectedOption(defaultOption);
diff --git a/src/components/Layout/LeftSidebar.tsx b/src/components/Layout/LeftSidebar.tsx
index 901ce7b94f..0787d9aa5a 100644
--- a/src/components/Layout/LeftSidebar.tsx
+++ b/src/components/Layout/LeftSidebar.tsx
@@ -54,7 +54,7 @@ const NavPage = ({
         key={hierarchicalKey(page.link, depth, activePage.tree)}
         id={linkId}
         className={cn({
-          'block ui-text-menu2 leading-relaxed md:leading-snug md:ui-text-menu4 text-neutral-1000 dark:text-neutral-300 md:text-neutral-900 dark:md:text-neutral-400 transition-colors hover:text-neutral-1300 active:text-neutral-800 focus-base':
+          'block ui-text-label2 leading-relaxed md:leading-snug md:ui-text-label4 text-neutral-1000 dark:text-neutral-300 md:text-neutral-900 dark:md:text-neutral-400 transition-colors hover:text-neutral-1300 active:text-neutral-800 focus-base':
             true,
           '!font-semibold': !pageActive,
           'text-neutral-900': !pageActive && type === 'content',
diff --git a/src/components/Layout/RightSidebar.tsx b/src/components/Layout/RightSidebar.tsx
index 60119b6f43..35ea283969 100644
--- a/src/components/Layout/RightSidebar.tsx
+++ b/src/components/Layout/RightSidebar.tsx
@@ -173,7 +173,7 @@ const RightSidebar = () => {
                     key={[location.pathname, header.id, language, index].join('-')}
                     id={`sidebar-${header.id}`}
                     className={cn(
-                      'ui-text-menu4 font-medium text-neutral-900 dark:text-neutral-400 transition-colors scroll-smooth hover:text-neutral-1300 dark:hover:text-neutral-000',
+                      'ui-text-label4 font-medium text-neutral-900 dark:text-neutral-400 transition-colors scroll-smooth hover:text-neutral-1300 dark:hover:text-neutral-000',
                       { 'text-neutral-1300 dark:text-neutral-000': header.id === activeHeader?.id },
                       { 'ml-8': header.type !== 'H2' },
                     )}
diff --git a/src/components/Layout/utils/nav.ts b/src/components/Layout/utils/nav.ts
index 0cf19c92cf..16d26e9637 100644
--- a/src/components/Layout/utils/nav.ts
+++ b/src/components/Layout/utils/nav.ts
@@ -4,10 +4,17 @@ import { HEADER_HEIGHT, componentMaxHeight } from '@ably/ui/core/utils/heights';
 import { ProductData, ProductKey } from 'src/data/types';
 import { NavProductContent, NavProductPage, NavProductPages } from 'src/data/nav/types';
 import { LanguageKey } from 'src/data/languages/types';
+import { DEFAULT_LANGUAGE } from 'src/contexts/layout-context';
 
 export type PageTreeNode = { index: number; page: NavProductPage };
 
-export type ActivePage = { tree: PageTreeNode[]; page: NavProductPage; languages: LanguageKey[] };
+export type ActivePage = {
+  tree: PageTreeNode[];
+  page: NavProductPage;
+  languages: LanguageKey[];
+  language: LanguageKey;
+  product: ProductKey | null;
+};
 
 /**
  * Determines the active page based on the provided target link.
@@ -64,6 +71,8 @@ export const determineActivePage = (data: ProductData, targetLink: string): Acti
         tree: [{ index: Object.keys(data).indexOf(key), page: { name, link } }],
         page: { name, link },
         languages: [],
+        language: DEFAULT_LANGUAGE,
+        product: key,
       };
     }
 
@@ -94,7 +103,7 @@ export const determineActivePage = (data: ProductData, targetLink: string): Acti
           data[key].nav[apiResult ? 'api' : 'content'],
         );
 
-        return { tree, page: page?.[0] as NavProductPage, languages: [] };
+        return { tree, page: page?.[0] as NavProductPage, languages: [], language: DEFAULT_LANGUAGE, product: key };
       }
     }
   }
@@ -130,8 +139,8 @@ export const commonAccordionOptions = (
       'text-neutral-1000 dark:text-neutral-300 md:text-neutral-900 dark:md:text-neutral-400 hover:text-neutral-1100 active:text-neutral-1000 !py-0 pl-0 !mb-0 transition-colors [&_svg]:!w-24 [&_svg]:!h-24 md:[&_svg]:!w-20 md:[&_svg]:!h-20',
       {
         'my-12': topLevel && inHeader,
-        'h-40 ui-text-menu1 !font-bold md:ui-text-menu4 px-16': topLevel,
-        'min-h-[1.625em] md:min-h-[1.375em] ui-text-menu2 !font-semibold md:ui-text-menu4': !topLevel,
+        'h-40 ui-text-label1 !font-bold md:ui-text-label4 px-16': topLevel,
+        'min-h-[1.625em] md:min-h-[1.375em] ui-text-label2 !font-semibold md:ui-text-label4': !topLevel,
       },
     ),
     selectedHeaderCSS: '!text-neutral-1300 mb-8',
diff --git a/src/components/Link/LanguageLink.tsx b/src/components/Link/LanguageLink.tsx
index 93e9c9cf55..0c082cd0fc 100644
--- a/src/components/Link/LanguageLink.tsx
+++ b/src/components/Link/LanguageLink.tsx
@@ -1,13 +1,12 @@
 import { Link } from 'gatsby';
-import { usePageLanguage } from '../../contexts/page-language-context';
 import { getLanguageDefaults } from '../common/language-defaults';
 import { languageLabel } from 'src/data/languages';
 import { LanguageKey } from 'src/data/languages/types';
-
+import { useLayoutContext } from 'src/contexts/layout-context';
 const LanguageLink = ({ language }: { language: LanguageKey }) => {
-  const { currentLanguage: pageLanguage } = usePageLanguage();
+  const { activePage } = useLayoutContext();
 
-  const { isLanguageDefault, isPageLanguageDefault } = getLanguageDefaults(language, pageLanguage);
+  const { isLanguageDefault, isPageLanguageDefault } = getLanguageDefaults(language, activePage.language);
   const href = isPageLanguageDefault
     ? `./language/${language}`
     : `../../${isLanguageDefault ? '' : `language/${language}`}`;
diff --git a/src/components/Menu/LanguageNavigation/LanguageNavigation.tsx b/src/components/Menu/LanguageNavigation/LanguageNavigation.tsx
index 19cb61aee2..b5fbc503d6 100644
--- a/src/components/Menu/LanguageNavigation/LanguageNavigation.tsx
+++ b/src/components/Menu/LanguageNavigation/LanguageNavigation.tsx
@@ -1,5 +1,4 @@
 import { Dispatch, FunctionComponent as FC, SetStateAction } from 'react';
-import { usePageLanguage } from 'src/contexts';
 import { SingleValue } from 'react-select';
 import { navigate } from 'gatsby';
 
@@ -15,6 +14,7 @@ import {
   Select,
 } from 'src/components';
 import cn from '@ably/ui/core/utils/cn';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 export interface LanguageNavigationComponentProps {
   language: string;
@@ -65,12 +65,13 @@ const LanguageNavigation = ({
   setSelectedSDKInterfaceTab,
   setPreviousSDKInterfaceTab,
 }: LanguageNavigationProps) => {
-  const { currentLanguage: pageLanguage, setPreferredLanguage } = usePageLanguage();
-  const selectedPageLanguage = pageLanguage === DEFAULT_LANGUAGE ? DEFAULT_PREFERRED_LANGUAGE : pageLanguage;
+  const { activePage, setLanguage } = useLayoutContext();
+  const selectedPageLanguage =
+    activePage.language === DEFAULT_LANGUAGE ? DEFAULT_PREFERRED_LANGUAGE : activePage.language;
   const options = items.map((item) => ({ label: item.content, value: item.props.language }));
   const value = options.find((option) => option.value === selectedPageLanguage);
 
-  const onSelectChange = changePageOnSelect(pageLanguage, setPreferredLanguage);
+  const onSelectChange = changePageOnSelect(activePage.language, setLanguage);
 
   const isSDKInterFacePresent = allListOfLanguages
     ? checkIfLanguageHasSDKInterface(allListOfLanguages, SDK_INTERFACES)
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index c6b1fe6499..3fda08e82d 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -23,7 +23,7 @@ export const Notification = ({
   return isVisible ? (
     <div
       className={cn(
-        'py-6 px-12 w-full col-span-3 hidden md:flex text-white relative items-center justify-center rounded ui-text-menu3',
+        'py-6 px-12 w-full col-span-3 hidden md:flex text-white relative items-center justify-center rounded ui-text-label3',
         {
           'bg-active-orange': variant === NotificationVariant.Warning,
         },
diff --git a/src/components/ProductNavigation/ProductNavigation.tsx b/src/components/ProductNavigation/ProductNavigation.tsx
index c9afba25c5..3648b4a06b 100644
--- a/src/components/ProductNavigation/ProductNavigation.tsx
+++ b/src/components/ProductNavigation/ProductNavigation.tsx
@@ -11,7 +11,7 @@ const Item = ({ to, children, active = false }: PropsWithChildren<ItemProps>) =>
   return (
     <Link
       to={to}
-      className={cn('px-12 md:px-14 py-16 relative cursor-pointer ui-text-menu3', {
+      className={cn('px-12 md:px-14 py-16 relative cursor-pointer ui-text-label3', {
         'text-neutral-1300 md:mr-2': active,
         'text-neutral-1000 md:px-14': !active,
       })}
diff --git a/src/components/Redoc/Loader.tsx b/src/components/Redoc/Loader.tsx
index 3c1ca638a4..092539ebdd 100644
--- a/src/components/Redoc/Loader.tsx
+++ b/src/components/Redoc/Loader.tsx
@@ -57,7 +57,7 @@ export const Loader = ({ specUrl }: { specUrl: string }) => {
     <>
       <GoTopButton />
       {specUrl ? (
-        <div id="redoc-container" className="redoc-content"></div>
+        <div id="redoc-container" className="redoc-content max-w-[100vw]"></div>
       ) : (
         <div className="ml-24 mb-20">
           Missing <span className="ui-text-code">{specUrl}</span> metadata
diff --git a/src/components/SearchBar/EmptyState.tsx b/src/components/SearchBar/EmptyState.tsx
index ba23940b48..caf95f0ed7 100644
--- a/src/components/SearchBar/EmptyState.tsx
+++ b/src/components/SearchBar/EmptyState.tsx
@@ -2,5 +2,5 @@ import React, { HTMLAttributes } from 'react';
 import cn from '@ably/ui/core/utils/cn';
 
 export const EmptyState = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => {
-  return <div className={cn('p-16 mb-16 ui-text-menu3', className)} {...props} />;
+  return <div className={cn('p-16 mb-16 ui-text-label3', className)} {...props} />;
 };
diff --git a/src/components/SearchBar/SuggestionBox.tsx b/src/components/SearchBar/SuggestionBox.tsx
index 2c83f281f6..326d69f77e 100644
--- a/src/components/SearchBar/SuggestionBox.tsx
+++ b/src/components/SearchBar/SuggestionBox.tsx
@@ -45,7 +45,7 @@ export const SuggestionBox = ({ results, isActive, error, query, displayLocation
 
   return (
     <div aria-label="suggestions" className={container} style={containerStyle ?? {}}>
-      <div className="uppercase ui-text-menu3 px-16 mb-2">Results from docs</div>
+      <div className="uppercase ui-text-label3 px-16 mb-2">Results from docs</div>
       {results && totalResults > 0 ? (
         results.map((hit, index) => {
           const { title, highlight, meta_description, url, id } = hit;
@@ -66,7 +66,7 @@ export const SuggestionBox = ({ results, isActive, error, query, displayLocation
               role="link"
             >
               <h4 className={cn('ui-text-h4 mb-6', titleStyle)}>{pageTitle}</h4>
-              <div className="ui-text-menu3">{htmr(body)}</div>
+              <div className="ui-text-label3">{htmr(body)}</div>
             </a>
           );
         })
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 52af5a0ccc..b4e89f501f 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -8,7 +8,7 @@ const CustomOption = ({ innerProps, innerRef, isSelected, label }: OptionProps<R
     <div
       ref={innerRef}
       {...innerProps}
-      className="text-cool-black rounded w-full hover:bg-light-grey cursor-pointer hover:text-gui-active p-8 flex items-center justify-between font-sans text-btn2"
+      className="text-cool-black rounded w-full hover:bg-light-grey cursor-pointer hover:text-gui-active p-8 flex items-center justify-between font-sans text-label2"
     >
       {label}
       {isSelected && <Icon name="icon-gui-check-micro" size="1rem" />}
diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts
index 2766414eb7..1d0b3d5ceb 100644
--- a/src/components/Select/styles.ts
+++ b/src/components/Select/styles.ts
@@ -32,7 +32,7 @@ export const selectMenuStyles: StylesConfig<ReactSelectOption, false> = {
     backgroundColor: 'transparent',
     boxShadow: 'none',
     fontSize: '14px',
-    lineHeight: 'var(--lh-snug)',
+    lineHeight: 'var(--lh-dense)',
     height: SELECT_HEIGHT,
     minHeight: SELECT_HEIGHT,
     cursor: 'pointer',
diff --git a/src/components/blocks/Html/Html.test.tsx b/src/components/blocks/Html/Html.test.tsx
index d2aa9d8430..9c962984fd 100644
--- a/src/components/blocks/Html/Html.test.tsx
+++ b/src/components/blocks/Html/Html.test.tsx
@@ -1,17 +1,24 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DlWrapper } from 'src/components/blocks/list/Dl/DlWrapper';
-import { PageLanguageContext } from 'src/contexts';
+import { LayoutProvider } from 'src/contexts/layout-context';
 
 import Html from './';
 import { dtFixture } from './fixtures';
 
+jest.mock('@reach/router', () => ({
+  useLocation: () => ({
+    pathname: '/test-path',
+    search: '?lang=python',
+  }),
+}));
+
 describe('<Html />', () => {
   it('renders correct Dl based on PageLanguageContext value', () => {
     const { container } = render(
-      <PageLanguageContext.Provider value="python">
+      <LayoutProvider>
         <Html data={dtFixture} BlockWrapper={DlWrapper} />
-      </PageLanguageContext.Provider>,
+      </LayoutProvider>,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/src/components/blocks/Html/LinkableHtmlBlock.js b/src/components/blocks/Html/LinkableHtmlBlock.js
index 3f09254ac2..31b4aa5f9d 100644
--- a/src/components/blocks/Html/LinkableHtmlBlock.js
+++ b/src/components/blocks/Html/LinkableHtmlBlock.js
@@ -1,13 +1,17 @@
 import PropTypes from 'prop-types';
-import { usePageLanguage } from 'src/contexts';
 import Html from '.';
 import CopyLink from '../wrappers/CopyLink';
 import { childOrSelfHasLanguageMatchingPageLanguageOrDefault } from '../wrappers/language-utilities';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 const LinkableHtmlBlock = (Type, marginBottom, marginTop) => {
   const InnerBlock = ({ data, attribs }) => {
-    const { currentLanguage: pageLanguage } = usePageLanguage();
-    const shouldShowBlock = childOrSelfHasLanguageMatchingPageLanguageOrDefault(pageLanguage, data, attribs?.lang);
+    const { activePage } = useLayoutContext();
+    const shouldShowBlock = childOrSelfHasLanguageMatchingPageLanguageOrDefault(
+      activePage.language,
+      data,
+      attribs?.lang,
+    );
     if (shouldShowBlock) {
       return (
         <CopyLink attribs={attribs} marginBottom={marginBottom} marginTop={marginTop}>
diff --git a/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap b/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap
index ae9f233218..629871a09a 100644
--- a/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap
+++ b/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap
@@ -16,20 +16,75 @@ exports[`<Html /> renders correct Dl based on PageLanguageContext value 1`] = `
   >
     event name for the published message
     <span
-      lang="default"
+      lang="python"
     >
       <em>
         Type: 
+        <code
+          class="ui-text-code-inline"
+        >
+          Unicode
+        </code>
+         for Python 2, 
         <code
           class="ui-text-code-inline"
         >
           String
         </code>
+         for Python 3
       </em>
     </span>
   </dd>
   
 	
+  <div
+    lang="python"
+  >
+    <dt
+      class="listDt"
+    >
+      <div>
+        data
+      </div>
+    </dt>
+    <dd
+      class=""
+    >
+      data payload for the message. The supported payload types are unicode Strings, Dict, or List objects that can be serialized to 
+      <span
+        class="caps"
+      >
+        JSON
+      </span>
+       using 
+      <code
+        class="ui-text-code-inline"
+      >
+        json.dumps
+      </code>
+      , binary data as 
+      <code
+        class="ui-text-code-inline"
+      >
+        bytearray
+      </code>
+       (in Python 3, 
+      <code
+        class="ui-text-code-inline"
+      >
+        bytes
+      </code>
+       also works), and None.
+      <em>
+        Type: 
+        <code
+          class="ui-text-code-inline"
+        >
+          Object
+        </code>
+      </em>
+    </dd>
+  </div>
   
 	
   
diff --git a/src/components/blocks/api-reference/dividers/ApiReferenceDiv.tsx b/src/components/blocks/api-reference/dividers/ApiReferenceDiv.tsx
index e569c06f68..d026e1905b 100644
--- a/src/components/blocks/api-reference/dividers/ApiReferenceDiv.tsx
+++ b/src/components/blocks/api-reference/dividers/ApiReferenceDiv.tsx
@@ -1,8 +1,8 @@
 import { matchesLanguageOrDefault } from '../../wrappers/language-utilities';
-import { usePageLanguage } from 'src/contexts';
 import Html from '../../Html';
 import { HtmlComponentProps, HtmlComponentPropsData } from 'src/components/html-component-props';
 import { isString } from 'lodash/fp';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 const DIV_CONTENTS_WHICH_SHOULD_IGNORE_NORMAL_LANGUAGE_RULES = ['dt', 'dd'];
 
@@ -17,9 +17,11 @@ const childExistsOfIgnoredType = (data: HtmlComponentPropsData) =>
     : false;
 
 const ApiReferenceDiv = ({ data, attribs }: HtmlComponentProps<'div'>) => {
-  const { currentLanguage: pageLanguage } = usePageLanguage();
+  const { activePage } = useLayoutContext();
   const shouldShowBlock =
-    attribs?.forcedisplay || matchesLanguageOrDefault(pageLanguage, attribs?.lang) || childExistsOfIgnoredType(data);
+    attribs?.forcedisplay ||
+    matchesLanguageOrDefault(activePage.language, attribs?.lang) ||
+    childExistsOfIgnoredType(data);
 
   return shouldShowBlock ? (
     <div {...attribs}>
diff --git a/src/components/blocks/api-reference/dividers/ApiReferenceSpan.tsx b/src/components/blocks/api-reference/dividers/ApiReferenceSpan.tsx
index 44dc104662..84eeb00892 100644
--- a/src/components/blocks/api-reference/dividers/ApiReferenceSpan.tsx
+++ b/src/components/blocks/api-reference/dividers/ApiReferenceSpan.tsx
@@ -1,11 +1,11 @@
 import { HtmlComponentProps } from 'src/components/html-component-props';
-import { usePageLanguage } from 'src/contexts';
 import Html from '../../Html';
 import { matchesLanguageOrDefault } from '../../wrappers/language-utilities';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 const ApiReferenceSpan = ({ data, attribs }: HtmlComponentProps<'span'>) => {
-  const { currentLanguage: pageLanguage } = usePageLanguage();
-  const shouldShowBlock = matchesLanguageOrDefault(pageLanguage, attribs?.lang);
+  const { activePage } = useLayoutContext();
+  const shouldShowBlock = matchesLanguageOrDefault(activePage.language, attribs?.lang);
 
   return shouldShowBlock ? (
     <span {...attribs}>
diff --git a/src/components/blocks/api-reference/headings/ApiReferenceH5.tsx b/src/components/blocks/api-reference/headings/ApiReferenceH5.tsx
index 3d89f93dae..3787b911e7 100644
--- a/src/components/blocks/api-reference/headings/ApiReferenceH5.tsx
+++ b/src/components/blocks/api-reference/headings/ApiReferenceH5.tsx
@@ -3,7 +3,7 @@ import LinkableHtmlBlock from 'src/components/blocks/Html/LinkableHtmlBlock';
 import { HtmlAttributes } from 'src/components/html-component-props';
 
 const StyledApiReferenceH5: FC<HtmlAttributes<'h5'>> = ({ children, ...attribs }) => (
-  <h5 {...attribs} className="ui-text-h5 font-sans my-16 font-bold leading-normal">
+  <h5 {...attribs} className="ui-text-h5 font-sans my-16 font-bold leading-tight">
     {children}
   </h5>
 );
diff --git a/src/components/blocks/dividers/dividers.module.css b/src/components/blocks/dividers/dividers.module.css
index 66289de0d9..c11886aace 100644
--- a/src/components/blocks/dividers/dividers.module.css
+++ b/src/components/blocks/dividers/dividers.module.css
@@ -72,17 +72,16 @@ div.versioningContainer {
   padding-top: var(--spacing-8);
   padding-left: var(--spacing-8);
   border-left: solid 1px;
-  color: #89929F;
+  color: #89929f;
 }
 
 div.versioningContainer * {
-  font-size: var(--fs-p3);
-  line-height: var(--lh-normal);
+  @apply leading-tight text-p3;
 }
 
 div.versioningContainer code {
   padding: 0;
   background-color: transparent;
   border: none;
-  color: #89929F;
+  color: #89929f;
 }
diff --git a/src/components/blocks/headings/H5.tsx b/src/components/blocks/headings/H5.tsx
index f02f399a14..bd6da2cf74 100644
--- a/src/components/blocks/headings/H5.tsx
+++ b/src/components/blocks/headings/H5.tsx
@@ -3,7 +3,7 @@ import LinkableHtmlBlock from 'src/components/blocks/Html/LinkableHtmlBlock';
 import { HtmlAttributes } from 'src/components/html-component-props';
 
 const AblyH5 = ({ ...props }: HtmlAttributes<'h5'>) => (
-  <h5 className="ui-text-h5 font-sans my-16 font-bold leading-normal" {...props} />
+  <h5 className="ui-text-h5 font-sans my-16 font-bold leading-tight" {...props} />
 );
 
 export default LinkableHtmlBlock(AblyH5);
diff --git a/src/components/blocks/list/Dl/DlWrapper.tsx b/src/components/blocks/list/Dl/DlWrapper.tsx
index 9f300d9e49..b5c62a210e 100644
--- a/src/components/blocks/list/Dl/DlWrapper.tsx
+++ b/src/components/blocks/list/Dl/DlWrapper.tsx
@@ -1,17 +1,16 @@
 import { Children, FunctionComponent } from 'react';
-import { DEFAULT_LANGUAGE, DEFAULT_PREFERRED_LANGUAGE } from '../../../../../data/createPages/constants';
-import { usePageLanguage } from 'src/contexts';
+import { useLayoutContext, DEFAULT_LANGUAGE } from 'src/contexts/layout-context';
 
-export const DlWrapper: FunctionComponent<any> = ({ children }) => {
-  const { currentLanguage: pageLanguage } = usePageLanguage();
+export const DlWrapper: FunctionComponent<unknown> = ({ children }) => {
+  const { activePage } = useLayoutContext();
 
   return Children.map(children, (child) => {
     const attribs = child?.props?.attribs;
 
     if (attribs?.lang) {
       if (
-        (pageLanguage === DEFAULT_LANGUAGE && attribs?.lang === DEFAULT_PREFERRED_LANGUAGE) ||
-        attribs?.lang === pageLanguage ||
+        (activePage.language === DEFAULT_LANGUAGE && attribs?.lang === DEFAULT_LANGUAGE) ||
+        attribs?.lang === activePage.language ||
         attribs?.lang === DEFAULT_LANGUAGE
       ) {
         return child;
diff --git a/src/components/blocks/software/Code/MultilineCodeContent.tsx b/src/components/blocks/software/Code/MultilineCodeContent.tsx
index 62336d223c..aa5af7a72d 100644
--- a/src/components/blocks/software/Code/MultilineCodeContent.tsx
+++ b/src/components/blocks/software/Code/MultilineCodeContent.tsx
@@ -7,6 +7,7 @@ import languagesRegistry from '@ably/ui/core/utils/syntax-highlighter-registry';
 registerDefaultLanguages(languagesRegistry);
 
 const TRUNCATION_CHARACTER_THRESHOLD = 20;
+const truncationRegex = new RegExp(`^[A-Za-z0-9_-]{6}.[A-Za-z0-9_-]{6}:[A-Za-z0-9_-]{43}$`, 'gu');
 
 const chooseString = (condition: boolean, firstString: string, secondString: string) =>
   condition ? firstString : secondString;
@@ -48,8 +49,8 @@ export const MultilineCodeContent = ({
     contentWithObfuscatedKey,
   );
 
-  const truncatedContent = renderedContent.replace(
-    new RegExp(`'([a-zA-Z0-9\\p{P}]{${TRUNCATION_CHARACTER_THRESHOLD},})'`, 'gu'),
+  const truncatedContent = renderedContent.replaceAll(
+    truncationRegex,
     (_, p1) => `'${truncate({ length: TRUNCATION_CHARACTER_THRESHOLD }, p1)}'`,
   );
 
diff --git a/src/components/blocks/software/Pre.test.tsx b/src/components/blocks/software/Pre.test.tsx
index 91a54dedaa..756d3c71c9 100644
--- a/src/components/blocks/software/Pre.test.tsx
+++ b/src/components/blocks/software/Pre.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { PageLanguageContext } from 'src/contexts';
 import { Pre } from './';
+import { LayoutProvider } from 'src/contexts/layout-context';
 
 const DATA_ARRAY_TEST = [{ data: 'useVars = false;', type: 'text' }];
 const PRE_TEST_SINGLE_DATA = { data: DATA_ARRAY_TEST, type: 'tag', name: 'code' };
@@ -33,6 +33,13 @@ const PRE_REST_CSHARP_TEST_DATA = [
   },
 ];
 
+jest.mock('@reach/router', () => ({
+  useLocation: () => ({
+    pathname: '/test-path',
+    search: '?lang=javascript',
+  }),
+}));
+
 describe('<Pre />', () => {
   it('should successfully render Code elements with language', () => {
     const { container } = render(
@@ -51,7 +58,7 @@ describe('<Pre />', () => {
 
   it('should render tip wrapper if language is unavailable', () => {
     render(
-      <PageLanguageContext.Provider value="javascript">
+      <LayoutProvider>
         <Pre
           data={PRE_TEST_DATA}
           language="javascript"
@@ -61,7 +68,7 @@ describe('<Pre />', () => {
             csharp: [{ data: 'bool useVars = false;', type: 'text' }],
           }}
         />
-      </PageLanguageContext.Provider>,
+      </LayoutProvider>,
     );
     expect(
       screen.getByText("code sample for this example, or this feature isn't supported in", { exact: false }),
diff --git a/src/components/blocks/software/Pre.tsx b/src/components/blocks/software/Pre.tsx
index b3e04a5324..a9ed7bf3fd 100644
--- a/src/components/blocks/software/Pre.tsx
+++ b/src/components/blocks/software/Pre.tsx
@@ -16,9 +16,9 @@ import { isString, every, reduce } from 'lodash/fp';
 import { MultilineCodeContent } from './Code/MultilineCodeContent';
 import { isArray, isEmpty } from 'lodash';
 import { getTrimmedLanguage } from 'src/components/common';
-import { usePageLanguage } from 'src/contexts';
 import { languageLabel } from 'src/data/languages';
 import { LanguageKey } from 'src/data/languages/types';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 type PreProps = HtmlComponentProps<'pre'> & {
   language: string;
@@ -53,7 +53,8 @@ const Pre = ({
   restAltData,
   attribs,
 }: PreProps): ReactElement => {
-  const { currentLanguage: pageLanguage } = usePageLanguage();
+  const { activePage } = useLayoutContext();
+  const pageLanguage = activePage.language;
 
   /*  selectedInterfaceTab useState  */
   const [selectedSDKInterfaceTab, setSelectedSDKInterfaceTab] = useState(DEFAULT_PREFERRED_INTERFACE);
@@ -160,7 +161,7 @@ const Pre = ({
           <div className="mt-2">
             <Icon name="icon-gui-information-circle-micro" size="1rem" />
           </div>
-          <div className="ml-8 leading-normal">
+          <div className="ml-8 leading-tight">
             You&apos;re currently viewing the <span className="font-semibold">{languageLabel ?? pageLanguage}</span>{' '}
             docs. There either isn&apos;t a {languageLabel ?? pageLanguage} code sample for this example, or this
             feature isn&apos;t supported in {languageLabel ?? pageLanguage}. Switch language to view this example in a
diff --git a/src/components/blocks/software/__snapshots__/Pre.test.tsx.snap b/src/components/blocks/software/__snapshots__/Pre.test.tsx.snap
index c39734a60a..511ec61d39 100644
--- a/src/components/blocks/software/__snapshots__/Pre.test.tsx.snap
+++ b/src/components/blocks/software/__snapshots__/Pre.test.tsx.snap
@@ -28,12 +28,12 @@ exports[`<Pre /> should successfully render Code elements with language 1`] = `
         data-testid="menu"
       >
         <button
-          class="button ui-text-menu3 isActive"
+          class="button ui-text-label3 isActive"
         >
           JavaScript
         </button>
         <button
-          class="button ui-text-menu3"
+          class="button ui-text-label3"
         >
           C# .NET
         </button>
@@ -158,12 +158,12 @@ exports[`<Pre /> should successfully render code elements with  only Realtime la
         data-testid="menu"
       >
         <button
-          class="button ui-text-menu3 isActive"
+          class="button ui-text-label3 isActive"
         >
           JavaScript
         </button>
         <button
-          class="button ui-text-menu3"
+          class="button ui-text-label3"
         >
           C# .NET
         </button>
@@ -245,8 +245,47 @@ exports[`<Pre /> should successfully render code elements with  only Realtime la
 
 exports[`<Pre /> should successfully render code elements with  only Rest languages 1`] = `
 <div
-  class="my-32"
+  class="my-32 p-16 bg-light-grey rounded-lg"
 >
+  <aside
+    class="mb-16 flex justify-between items-start"
+  >
+    <div
+      class="mt-2"
+    >
+      <svg
+        class=""
+        style="width: 1rem; height: 1rem;"
+      >
+        <use
+          xlink:href="#sprite-icon-gui-information-circle-micro"
+        />
+      </svg>
+    </div>
+    <div
+      class="ml-8 leading-normal"
+    >
+      You're currently viewing the 
+      <span
+        class="font-semibold"
+      >
+        JavaScript
+      </span>
+       
+      docs. There either isn't a 
+      JavaScript
+       code sample for this example, or this feature isn't supported in 
+      JavaScript
+      . Switch language to view this example in a different language, or
+       
+      <a
+        class="ui-link"
+        href="/docs/sdks"
+      >
+        check which SDKs support this feature.
+      </a>
+    </div>
+  </aside>
   <pre
     class="bg-cool-black text-white p-0 rounded-lg relative max-w-[calc(100vw-48px)] sm:max-w-full"
   >
@@ -258,7 +297,7 @@ exports[`<Pre /> should successfully render code elements with  only Rest langua
         data-testid="menuSDKInterface"
       >
         <button
-          class="font-medium font-sans focus:outline-none px-24 text-mid-grey "
+          class="font-medium font-sans focus:outline-none px-24 text-mid-grey bg-charcoal-grey"
         >
           Realtime
         </button>
@@ -279,95 +318,6 @@ exports[`<Pre /> should successfully render code elements with  only Rest langua
         </div>
       </menu>
     </div>
-    <div
-      class="border-b border-charcoal-grey w-full"
-    >
-      <menu
-        class="horizontalNav docs-language-navigation"
-        data-languages="javascript,csharp"
-        data-testid="menu"
-      >
-        <button
-          class="button ui-text-menu3 isActive"
-        >
-          JavaScript
-        </button>
-        <button
-          class="button ui-text-menu3"
-        >
-          C# .NET
-        </button>
-        <div
-          class="dropdownContainer"
-        >
-          <div
-            class=" css-fyq6mk-container"
-          >
-            <span
-              class="css-1f43avz-a11yText-A11yText"
-              id="react-select-language-navigation-live-region"
-            />
-            <span
-              aria-atomic="false"
-              aria-live="polite"
-              aria-relevant="additions text"
-              class="css-1f43avz-a11yText-A11yText"
-              role="log"
-            />
-            <div
-              class="ably-select__control css-bo7mvc-control"
-            >
-              <div
-                class="ably-select__value-container ably-select__value-container--has-value css-1fdsijx-ValueContainer"
-              >
-                <div
-                  class="ably-select__single-value css-9aszhm-singleValue"
-                >
-                  rest_javascript
-                </div>
-                <input
-                  aria-activedescendant=""
-                  aria-autocomplete="list"
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-readonly="true"
-                  class="css-mohuvp-dummyInput-DummyInput"
-                  id="react-select-language-navigation-input"
-                  inputmode="none"
-                  role="combobox"
-                  tabindex="0"
-                  value=""
-                />
-              </div>
-              <div
-                class="ably-select__indicators css-1hb7zxy-IndicatorsContainer"
-              >
-                <span
-                  class="ably-select__indicator-separator css-1xjgjl1-IndicatorSeparator"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ably-select__indicator ably-select__dropdown-indicator css-1gvtn5f-indicatorContainer"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="css-tj5bde-Svg"
-                    focusable="false"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    width="20"
-                  >
-                    <path
-                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </menu>
-    </div>
     useVars = false;
   </pre>
 </div>
@@ -388,12 +338,12 @@ exports[`<Pre /> should successfully render code elements with both Rest and Rea
         data-testid="menuSDKInterface"
       >
         <button
-          class="font-medium font-sans focus:outline-none px-24 text-mid-grey "
+          class="font-medium font-sans focus:outline-none px-24 text-mid-grey bg-charcoal-grey"
         >
           Realtime
         </button>
         <button
-          class="font-medium font-sans focus:outline-none px-24 text-mid-grey bg-charcoal-grey"
+          class="font-medium font-sans focus:outline-none px-24 text-mid-grey "
         >
           REST
         </button>
@@ -423,12 +373,12 @@ exports[`<Pre /> should successfully render code elements with both Rest and Rea
         data-testid="menu"
       >
         <button
-          class="button ui-text-menu3 isActive"
+          class="button ui-text-label3 isActive"
         >
           JavaScript
         </button>
         <button
-          class="button ui-text-menu3"
+          class="button ui-text-label3"
         >
           C# .NET
         </button>
@@ -458,7 +408,7 @@ exports[`<Pre /> should successfully render code elements with both Rest and Rea
                 <div
                   class="ably-select__single-value css-9aszhm-singleValue"
                 >
-                  rest_javascript
+                  realtime_javascript
                 </div>
                 <input
                   aria-activedescendant=""
diff --git a/src/components/blocks/software/styles.css b/src/components/blocks/software/styles.css
index a95c1fdd4c..9ced0e66be 100644
--- a/src/components/blocks/software/styles.css
+++ b/src/components/blocks/software/styles.css
@@ -1,4 +1,4 @@
 .docs-api-key-label {
-  @apply ui-text-menu3 cursor-help;
+  @apply ui-text-label3 cursor-help;
   color: white;
 }
diff --git a/src/components/blocks/table/Th.tsx b/src/components/blocks/table/Th.tsx
index 76bd48d373..1e4b61f073 100644
--- a/src/components/blocks/table/Th.tsx
+++ b/src/components/blocks/table/Th.tsx
@@ -6,7 +6,7 @@ import GenericHtmlBlock from '../Html/GenericHtmlBlock';
 import { theader } from './Th.module.css';
 
 const Th = (props: HtmlComponentProps<'th'>) => {
-  return <th className={cn('px-16 uppercase ui-text-menu1 pt-40 pb-20 sticky top-0 bg-white', theader)} {...props} />;
+  return <th className={cn('px-16 uppercase ui-text-label1 pt-40 pb-20 sticky top-0 bg-white', theader)} {...props} />;
 };
 
 export default GenericHtmlBlock(Th);
diff --git a/src/components/blocks/wrappers/ConditionalChildrenLanguageDisplay.js b/src/components/blocks/wrappers/ConditionalChildrenLanguageDisplay.js
index 6ea96b3120..d8cd92b5ee 100644
--- a/src/components/blocks/wrappers/ConditionalChildrenLanguageDisplay.js
+++ b/src/components/blocks/wrappers/ConditionalChildrenLanguageDisplay.js
@@ -6,10 +6,10 @@ import {
 } from '../../../../data/createPages/constants';
 import { makeGroup, assignPrimary, addToFilter, isIrrelevantForLanguageDisplay } from './language-utilities';
 import { isEmpty } from 'lodash';
-import { usePageLanguage } from 'src/contexts';
+import { useLayoutContext } from 'src/contexts/layout-context';
 
 const ConditionalChildrenLanguageDisplay = ({ children }) => {
-  const { currentLanguage: pageLanguage } = usePageLanguage();
+  const { activePage } = useLayoutContext();
 
   let currentGroup = false;
   const childLanguageGroups = [];
@@ -31,7 +31,7 @@ const ConditionalChildrenLanguageDisplay = ({ children }) => {
         currentGroup = makeGroup(attribs.lang, index, props.data);
       } else {
         currentGroup.end = index;
-        currentGroup = assignPrimary(currentGroup, attribs.lang, pageLanguage, props.data, index);
+        currentGroup = assignPrimary(currentGroup, attribs.lang, activePage.language, props.data, index);
       }
       return;
     }
@@ -59,11 +59,15 @@ const ConditionalChildrenLanguageDisplay = ({ children }) => {
         key.includes(REALTIME_SDK_INTERFACE),
       );
       const allAltDataRest = Object.entries(relevantGroup.data).filter(([key]) => key.includes(REST_SDK_INTERFACE));
-      const realtimeAltData = getCleanedSDKInterfaceAltData(allAltDataRealtime, pageLanguage, REALTIME_SDK_INTERFACE);
-      const restAltData = getCleanedSDKInterfaceAltData(allAltDataRest, pageLanguage, REST_SDK_INTERFACE);
+      const realtimeAltData = getCleanedSDKInterfaceAltData(
+        allAltDataRealtime,
+        activePage.language,
+        REALTIME_SDK_INTERFACE,
+      );
+      const restAltData = getCleanedSDKInterfaceAltData(allAltDataRest, activePage.language, REST_SDK_INTERFACE);
 
       return React.cloneElement(child, {
-        pageLanguage,
+        pageLanguage: activePage.language,
         languages: relevantGroup.languages,
         altData: relevantGroup.data,
         isSDKInterface: !isEmpty(allAltDataRealtime) || !isEmpty(allAltDataRest),
diff --git a/src/components/blocks/wrappers/__snapshots__/LocalLanguageAlternatives.test.tsx.snap b/src/components/blocks/wrappers/__snapshots__/LocalLanguageAlternatives.test.tsx.snap
index 9c5ef4b602..b81a50bf15 100644
--- a/src/components/blocks/wrappers/__snapshots__/LocalLanguageAlternatives.test.tsx.snap
+++ b/src/components/blocks/wrappers/__snapshots__/LocalLanguageAlternatives.test.tsx.snap
@@ -11,17 +11,17 @@ exports[`<LocalLanguageAlternatives /> renders correctly 1`] = `
       data-testid="menu"
     >
       <button
-        class="button ui-text-menu3 isActive"
+        class="button ui-text-label3 isActive"
       >
         JavaScript
       </button>
       <button
-        class="button ui-text-menu3"
+        class="button ui-text-label3"
       >
         Ruby
       </button>
       <button
-        class="button ui-text-menu3"
+        class="button ui-text-label3"
       >
         C# .NET
       </button>
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index e046a7bdac..c300d99041 100644
--- a/src/contexts/index.ts
+++ b/src/contexts/index.ts
@@ -1,3 +1,2 @@
-export * from './page-language-context';
 export * from './pathname-context';
 export * from './user-context';
diff --git a/src/contexts/layout-context.tsx b/src/contexts/layout-context.tsx
index fb47d935ae..79aa23fcdb 100644
--- a/src/contexts/layout-context.tsx
+++ b/src/contexts/layout-context.tsx
@@ -1,40 +1,89 @@
-import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react';
+import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
 import { useLocation } from '@reach/router';
 import { ActivePage, determineActivePage } from 'src/components/Layout/utils/nav';
 import { productData } from 'src/data';
 import { NavProduct } from 'src/data/nav/types';
 import { ProductData, ProductKey } from 'src/data/types';
 import { LanguageKey } from 'src/data/languages/types';
+import { languageData } from 'src/data/languages';
 
 /**
  * LayoutContext
  *
  * activePage - The navigation tree that leads to the current page, and a list of languages referenced on the page.
  * products - List of products with their navigation data.
+ * setLanguages - Set the possible languages for the current page.
+ * setLanguage - Set the active language for the current page.
  */
 
+export const DEFAULT_LANGUAGE = 'javascript';
+
 const LayoutContext = createContext<{
   activePage: ActivePage;
   products: [ProductKey, NavProduct][];
   setLanguages: (languages: LanguageKey[]) => void;
+  setLanguage: (language: LanguageKey) => void;
 }>({
-  activePage: { tree: [], page: { name: '', link: '' }, languages: [] },
+  activePage: {
+    tree: [],
+    page: { name: '', link: '' },
+    languages: [],
+    language: DEFAULT_LANGUAGE,
+    product: null,
+  },
   products: [],
   setLanguages: (languages) => {
     console.warn('setLanguages called without a provider', languages);
   },
+  setLanguage: (language) => {
+    console.warn('setLanguage called without a provider', language);
+  },
 });
 
 export const LayoutProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const location = useLocation();
   const [languages, setLanguages] = useState<LanguageKey[]>([]);
+  const [language, setLanguage] = useState<LanguageKey>(DEFAULT_LANGUAGE);
+
+  useEffect(() => {
+    const languagesSet = new Set<LanguageKey>();
+
+    document.querySelectorAll('.docs-language-navigation').forEach((element) => {
+      const languages = element.getAttribute('data-languages');
+      if (languages) {
+        languages.split(',').forEach((language) => languagesSet.add(language as LanguageKey));
+      }
+    });
+
+    setLanguages(Array.from(languagesSet));
+  }, [location.pathname]);
 
   const activePage = useMemo(() => {
     const activePageData = determineActivePage(productData, location.pathname);
     return activePageData
-      ? { ...activePageData, languages: activePageData.page.languages ?? languages }
-      : { tree: [], page: { name: '', link: '' }, languages: [] };
-  }, [location.pathname, languages]);
+      ? {
+          ...activePageData,
+          languages: activePageData.page.languages ?? languages,
+          language,
+        }
+      : {
+          tree: [],
+          page: { name: '', link: '' },
+          languages: [],
+          language,
+          product: null,
+        };
+  }, [location.pathname, languages, language]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+
+    if (params.get('lang')) {
+      setLanguage(params.get('lang') as LanguageKey);
+    } else if (activePage.product) {
+      setLanguage(Object.keys(languageData[activePage.product])[0]);
+    }
+  }, [location.search, activePage.product]);
 
   const products = useMemo(
     () =>
@@ -51,6 +100,7 @@ export const LayoutProvider: React.FC<PropsWithChildren> = ({ children }) => {
         activePage,
         products,
         setLanguages,
+        setLanguage,
       }}
     >
       {children}
diff --git a/src/contexts/page-language-context.tsx b/src/contexts/page-language-context.tsx
deleted file mode 100644
index ad861825a3..0000000000
--- a/src/contexts/page-language-context.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ReactNode, createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { PREFERRED_LANGUAGE_KEY, safeWindow } from 'src/utilities';
-import { DEFAULT_LANGUAGE } from '../../data/createPages/constants';
-import { useUrlParams } from '../hooks';
-
-interface PageLanguageContextProps {
-  currentLanguage: string;
-  handleCurrentLanguageChange: (lang: string) => void;
-  getPreferredLanguage: () => string | null | undefined;
-  setPreferredLanguage: (lang: string) => void;
-}
-
-const initialState = {
-  currentLanguage: DEFAULT_LANGUAGE,
-  handleCurrentLanguageChange: () => null,
-  getPreferredLanguage: () => null,
-  setPreferredLanguage: () => null,
-};
-
-export const PageLanguageContext = createContext<PageLanguageContextProps>(initialState);
-
-export function usePageLanguage() {
-  const context = useContext(PageLanguageContext);
-
-  if (context === undefined) {
-    throw new Error('usePageLanguage context must be used within a PageLanguageProvider');
-  }
-
-  return context;
-}
-
-interface PageLanguageProviderProps {
-  children: ReactNode;
-  search: string;
-}
-
-export const PageLanguageProvider: React.FC<PageLanguageProviderProps> = ({ children, search }) => {
-  const { getParam } = useUrlParams();
-  const param = getParam('lang');
-
-  const getPreferredLanguage = useCallback(() => safeWindow.sessionStorage.getItem(PREFERRED_LANGUAGE_KEY), []);
-  const setPreferredLanguage = useCallback(
-    (lang: string) => safeWindow.sessionStorage.setItem(PREFERRED_LANGUAGE_KEY, lang),
-    [],
-  );
-
-  const [currentLanguage, setCurrentLanguage] = useState<string>((param || getPreferredLanguage()) ?? DEFAULT_LANGUAGE);
-
-  useEffect(() => {
-    setCurrentLanguage((param || getPreferredLanguage()) ?? DEFAULT_LANGUAGE);
-  }, [param, getPreferredLanguage]);
-
-  useEffect(() => {
-    setPreferredLanguage(currentLanguage);
-  }, [currentLanguage, setPreferredLanguage]);
-
-  const handleCurrentLanguageChange = (lang: string) => {
-    setCurrentLanguage(lang ?? DEFAULT_LANGUAGE);
-  };
-
-  const value = { currentLanguage, handleCurrentLanguageChange, getPreferredLanguage, setPreferredLanguage };
-
-  return <PageLanguageContext.Provider value={value}>{children}</PageLanguageContext.Provider>;
-};
diff --git a/src/data/nav/chat.ts b/src/data/nav/chat.ts
index 2c6dcbea53..3b8cf54dc5 100644
--- a/src/data/nav/chat.ts
+++ b/src/data/nav/chat.ts
@@ -78,6 +78,10 @@ export default {
           name: 'React SDK',
           external: true,
         },
+        {
+          link: '/docs/api/chat-rest',
+          name: 'REST API',
+        },
       ],
     },
   ],
diff --git a/src/data/nav/platform.ts b/src/data/nav/platform.ts
index be72bfcc99..cc83dc7c25 100644
--- a/src/data/nav/platform.ts
+++ b/src/data/nav/platform.ts
@@ -17,6 +17,38 @@ export default {
         },
       ],
     },
+    {
+      name: 'Architecture',
+      pages: [
+        {
+          name: 'Overview',
+          link: '/docs/platform/architecture',
+        },
+      ],
+    },
+    {
+      name: 'Products and SDKs',
+      pages: [
+        {
+          name: 'SDKs',
+          link: '/docs/sdks',
+          external: true,
+        },
+        {
+          name: 'Deprecation',
+          pages: [
+            {
+              name: 'Policy',
+              link: '/docs/platform/deprecate',
+            },
+            {
+              name: 'Nov 2025 - Protocol v1',
+              link: '/docs/platform/deprecate/protocol-v1',
+            },
+          ],
+        },
+      ],
+    },
     {
       name: 'Pricing',
       pages: [
diff --git a/src/external-scripts/hubspot.test.ts b/src/external-scripts/hubspot.test.ts
index 2f6b306272..6e7c78a7f9 100644
--- a/src/external-scripts/hubspot.test.ts
+++ b/src/external-scripts/hubspot.test.ts
@@ -92,4 +92,65 @@ describe('Hubspot', () => {
       expect(spy).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('openFromMetaTag', () => {
+    beforeEach(() => {
+      document.head.innerHTML = '';
+      jest.spyOn(window.history, 'pushState').mockImplementation();
+      global.window.HubSpotConversations = {
+        widget: {
+          load: jest.fn(),
+          open: jest.fn(),
+        },
+      };
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('opens chat widget when conversation meta tag exists', () => {
+      // Add a meta tag to the document
+      const metaTag = document.createElement('meta');
+      metaTag.name = 'conversation';
+      metaTag.content = 'sales';
+      document.head.appendChild(metaTag);
+
+      hubspot('12345');
+
+      // Simulate the HubSpot script loading by calling the registered callback
+      global.hsConversationsOnReady[0]();
+
+      expect(window.history.pushState).toHaveBeenCalledWith({}, '', '?chat-type=sales');
+      expect(global.window.HubSpotConversations.widget.load).toHaveBeenCalled();
+      expect(global.window.HubSpotConversations.widget.open).toHaveBeenCalled();
+    });
+
+    it('does not open chat widget when no conversation meta tag exists', () => {
+      document.head.innerHTML = '<meta name="other-tag" content="something">';
+
+      hubspot('12345');
+
+      // Simulate the HubSpot script loading
+      global.hsConversationsOnReady[0]();
+
+      expect(window.history.pushState).not.toHaveBeenCalled();
+      expect(global.window.HubSpotConversations.widget.load).not.toHaveBeenCalled();
+      expect(global.window.HubSpotConversations.widget.open).not.toHaveBeenCalled();
+    });
+
+    it('correctly sets URL query parameter from meta tag content', () => {
+      const metaTag = document.createElement('meta');
+      metaTag.name = 'conversation';
+      metaTag.content = 'support';
+      document.head.appendChild(metaTag);
+
+      hubspot('12345');
+
+      // Simulate the HubSpot script loading
+      global.hsConversationsOnReady[0]();
+
+      expect(window.history.pushState).toHaveBeenCalledWith({}, '', '?chat-type=support');
+    });
+  });
 });
diff --git a/src/external-scripts/hubspot.ts b/src/external-scripts/hubspot.ts
index 760ac80c0f..6a44425c89 100644
--- a/src/external-scripts/hubspot.ts
+++ b/src/external-scripts/hubspot.ts
@@ -6,6 +6,10 @@ declare global {
   type HubspotItem = string | Record<string, string>;
   interface Window {
     _hsq: Array<string | Record<string, string>>[];
+    hsConversationsSettings?: {
+      loadImmediately: boolean;
+    };
+    hsConversationsOnReady?: Array<() => void>;
   }
 }
 
@@ -22,12 +26,25 @@ export type HubspotUser = {
   adminUrl: string;
 };
 
-const hubspot = (hubspotTrackingId, loadImmediately = true) => {
+const hubspot = (hubspotTrackingId: string, loadImmediately = true) => {
+  const openFromMetaTag = () => {
+    const metaConversation = document.querySelector('meta[name="conversation"]') as HTMLMetaElement;
+
+    if (metaConversation) {
+      window.history.pushState({}, '', `?chat-type=${metaConversation.content}`);
+
+      window.HubSpotConversations?.widget.load();
+      window.HubSpotConversations?.widget.open();
+    }
+  };
+
   scriptLoader(document, `//js.hs-scripts.com/${hubspotTrackingId}.js`, { id: 'hs-script-loader' });
   window._hsq = window._hsq || [];
   window.hsConversationsSettings = {
     loadImmediately: loadImmediately,
   };
+
+  window.hsConversationsOnReady = [...(window.hsConversationsOnReady || []), openFromMetaTag];
 };
 
 export const hubspotIdentifyUser = ({
diff --git a/src/external-scripts/index.ts b/src/external-scripts/index.ts
index 14ed826e4f..9605a2caeb 100644
--- a/src/external-scripts/index.ts
+++ b/src/external-scripts/index.ts
@@ -26,8 +26,6 @@ type ExternalScriptsData = {
   headwayAccountId?: string;
   inkeepEnabled?: string;
   inkeepApiKey?: string;
-  inkeepIntegrationId?: string;
-  inkeepOrganizationId?: string;
   insightsEnabled?: boolean;
 };
 
@@ -37,8 +35,6 @@ const injectScripts = ({
   announcementEnabled,
   inkeepEnabled,
   inkeepApiKey,
-  inkeepIntegrationId,
-  inkeepOrganizationId,
 }: ExternalScriptsData = {}) => {
   if (announcementEnabled) {
     announcement();
@@ -49,7 +45,7 @@ const injectScripts = ({
   }
 
   if (inkeepEnabled) {
-    inkeepChat(inkeepApiKey, inkeepIntegrationId, inkeepOrganizationId);
+    inkeepChat(inkeepApiKey);
   }
 
   if (!document.querySelector('div[data-scripts-loaded="true"]')) {
diff --git a/src/external-scripts/inkeep.test.ts b/src/external-scripts/inkeep.test.ts
index 04ee44a19a..77ef183f3a 100644
--- a/src/external-scripts/inkeep.test.ts
+++ b/src/external-scripts/inkeep.test.ts
@@ -11,7 +11,7 @@ describe('inkeepChat', () => {
   it('does not load Inkeep when configuration is not present', () => {
     const spy = jest.spyOn(scriptLoader, 'scriptLoader');
 
-    inkeepChat(undefined, 'integrationId', 'organizationId');
+    inkeepChat(undefined);
 
     expect(spy).not.toHaveBeenCalled();
   });
@@ -19,7 +19,7 @@ describe('inkeepChat', () => {
   it('load Inkeep when configuration is present', () => {
     const spy = jest.spyOn(scriptLoader, 'scriptLoader');
 
-    inkeepChat('apiKey', 'integrationId', 'organizationId');
+    inkeepChat('apiKey');
 
     expect(spy).toHaveBeenCalled();
   });
@@ -28,12 +28,12 @@ describe('inkeepChat', () => {
     let spy;
 
     beforeEach(() => {
-      global.inkeepWidget = { render: jest.fn };
-      spy = jest.spyOn(global.inkeepWidget, 'render');
+      global.inkeepWidget = { update: jest.fn };
+      spy = jest.spyOn(global.inkeepWidget, 'update');
     });
 
     it('returns when the user is undefined', () => {
-      inkeepChatIdentifyUser({ account: { uuid: '123' } });
+      inkeepChatIdentifyUser({});
 
       expect(spy).not.toHaveBeenCalled();
     });
@@ -41,7 +41,7 @@ describe('inkeepChat', () => {
     it('sets the Inkeep userId', () => {
       inkeepChatIdentifyUser({ user: { uuid: '123' } });
 
-      expect(spy).toHaveBeenCalledWith({ baseSettings: { userId: '123' } });
+      expect(spy).toHaveBeenCalledWith({ baseSettings: { userProperties: { id: '123' } } });
     });
   });
 });
diff --git a/src/external-scripts/inkeep.ts b/src/external-scripts/inkeep.ts
index 90c56bbe81..ea26e07807 100644
--- a/src/external-scripts/inkeep.ts
+++ b/src/external-scripts/inkeep.ts
@@ -1,20 +1,54 @@
 import { scriptLoader } from './utils';
+import posthog from 'posthog-js';
 
-const inkeepChat = (apiKey, integrationId, organizationId) => {
-  if (!(apiKey && integrationId && organizationId)) {
+const inkeepChat = (apiKey: string) => {
+  if (!apiKey) {
     return;
   }
 
-  scriptLoader(document, 'https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js', {
+  scriptLoader(document, 'https://unpkg.com/@inkeep/cxkit-js@0.5.40/dist/embed.js', {
     defer: true,
     async: false,
     type: 'module',
+    crossOrigin: 'anonymous',
     onload: () => {
-      inkeepOnLoad(apiKey, integrationId, organizationId);
+      posthog.onFeatureFlags(() => {
+        inkeepOnLoad(apiKey);
+      });
     },
   });
 };
 
+declare global {
+  interface Window {
+    HubSpotConversations?: {
+      widget: {
+        load: () => void;
+        open: () => void;
+        remove: () => void;
+      };
+      on: (event: string, callback: () => void) => void;
+      off: (event: string, callback: (() => void) | null) => void;
+    };
+    inkeepWidgetConfig?: object;
+    inkeepWidget?: {
+      update: (config: object) => void;
+    };
+    Inkeep: {
+      ChatButton: (config: object) => {
+        update: (config: object) => void;
+      };
+      SearchBar: (
+        element: string,
+        config: object,
+      ) => {
+        update: (config: object) => void;
+        remount: () => void;
+      };
+    };
+  }
+}
+
 const openHubSpotConversations = () => {
   window.HubSpotConversations?.widget.load();
   window.HubSpotConversations?.widget.open();
@@ -25,92 +59,220 @@ const openHubSpotConversations = () => {
   });
 };
 
-const aiChatSettings = {
-  aiChatSettings: {
-    actionButtonLabels: {
-      getHelpButtonLabel: 'More Help',
+const getTools = () => [
+  {
+    type: 'function',
+    function: {
+      name: 'contactSales',
+      description:
+        "Detect if there is buyer intent or the customer is asking about pricing information or Ably's paid plans.",
+      parameters: {
+        type: 'object',
+        properties: {
+          aiAnnotations: {
+            type: 'object',
+            properties: {
+              answerConfidence: {
+                anyOf: [
+                  { type: 'string', const: 'very_confident' },
+                  { type: 'string', const: 'somewhat_confident' },
+                  { type: 'string', const: 'not_confident' },
+                  { type: 'string', const: 'no_sources' },
+                ],
+              },
+            },
+            required: ['answerConfidence'],
+          },
+        },
+        required: ['aiAnnotations'],
+      },
     },
-    shouldShowCopyChatButton: true,
-    chatSubjectName: 'Ably',
-    botAvatarSrcUrl: 'https://storage.googleapis.com/organization-image-assets/ably-botAvatarSrcUrl-1721406747144.png',
-    getHelpCallToActions: [
-      {
-        name: 'Request a meeting',
-        url: 'https://meetings.hubspot.com/cameron-michie/ably-demo',
+    renderMessageButtons: ({ args }: { args: { aiAnnotations: { answerConfidence: string } } }) => {
+      const confidence = args.aiAnnotations.answerConfidence;
+      if (confidence === 'very_confident' || confidence === 'somewhat_confident') {
+        return [
+          {
+            label: 'Talk to Sales',
+            icon: { builtIn: 'LuUsers' },
+            action: {
+              type: 'invoke_callback',
+              callback: () => {
+                window.history.pushState({}, '', '?chat-type=product');
+                openHubSpotConversations();
+              },
+              shouldCloseModal: true,
+            },
+          },
+        ];
+      }
+      return [];
+    },
+  },
+];
 
-        type: 'OPEN_LINK',
-        pinToToolbar: true,
-        shouldCloseModal: false,
+const aiChatSettings = () => ({
+  organizationDisplayName: 'Ably',
+  aiAssistantAvatar:
+    'https://storage.googleapis.com/organization-image-assets/ably-botAvatarDarkSrcUrl-1744125448083.png',
+  getHelpOptions: [
+    {
+      name: 'Request a meeting',
+      action: {
+        type: 'open_link',
+        url: 'https://meetings.hubspot.com/cameron-michie/ably-demo',
       },
-      {
-        name: 'Chat with support',
-        url: 'https://ably.com/support',
-        icon: {
-          builtIn: 'IoHelpBuoyOutline',
-        },
-        type: 'INVOKE_CALLBACK',
+      isPinnedToToolbar: true,
+    },
+    {
+      name: 'Chat with support',
+      action: {
+        type: 'invoke_callback',
         callback: () => {
           openHubSpotConversations();
         },
-        pinToToolbar: true,
         shouldCloseModal: true,
       },
-    ],
-    quickQuestions: ['What is a channel?', 'How do I authenticate with Ably?', 'How do I manage user status?'],
-  },
+      isPinnedToToolbar: true,
+    },
+  ],
+  exampleQuestions: ['What is a channel?', 'How do I authenticate with Ably?', 'How to manage user status?'],
+  shouldShowCopyChatButton: true,
+  ...(posthog.isFeatureEnabled('inkeep-intent') ? { getTools } : {}),
+});
+
+interface SourceItem {
+  id?: string;
+  title: string | undefined;
+  url: string;
+  description: string | undefined;
+  breadcrumbs: string[];
+  type: string;
+  contentType?: string;
+  tag?: string;
+  tabs?: string[];
+}
+
+const transformSource = (source: SourceItem) => {
+  const { url, breadcrumbs } = source;
+  if (!url) {
+    return source;
+  }
+  try {
+    const { pathname } = new URL(url);
+    const urlPatterns = [
+      { pattern: '/docs', tabName: 'Docs' },
+      { pattern: '/blog', tabName: 'Blog' },
+      { pattern: 'faqs.ably.com', tabName: 'FAQs' },
+    ];
+
+    const matchingPattern = urlPatterns.find(({ pattern }) => pathname.startsWith(pattern) || url.includes(pattern));
+
+    if (matchingPattern) {
+      const { tabName } = matchingPattern;
+      return {
+        ...source,
+        tabs: [
+          [
+            tabName,
+            {
+              breadcrumbs: breadcrumbs[0] === tabName ? breadcrumbs.slice(1) : breadcrumbs,
+            },
+          ],
+        ],
+      };
+    }
+    return source;
+  } catch (error) {
+    return source;
+  }
+};
+
+const prefilledSearchText = () => {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  return new URLSearchParams(window.location.search).get('q') || '';
 };
 
-export const inkeepOnLoad = (apiKey, integrationId, organizationId) => {
-  window.inkeepBase = Inkeep({
+const searchSettings = {
+  defaultQuery: prefilledSearchText(),
+  placeholder: 'Search',
+  tabs: ['All', 'Docs', 'Blog', 'FAQs', 'GitHub'],
+};
+
+export const inkeepOnLoad = (apiKey: string) => {
+  const baseSettings = {
     apiKey,
-    integrationId,
-    organizationId,
+    transformSource,
     theme: {
-      components: {
-        SearchBarTrigger: {
-          defaultProps: {
-            size: 'expand',
-            variant: 'emphasize',
-          },
+      styles: [
+        {
+          key: 'custom-style',
+          type: 'style',
+          value: `css
+            .ikp-ai-chat-message-toolbar {
+              flex-wrap: wrap;
+              justify-content: flex-end;
+            }
+
+            .ikp-ai-chat-message-tool-actions {
+              width: 100%;
+            }
+
+            .ikp-ai-chat-message-tool-action {
+              background: #03020d;
+              color: white;
+              height: 36px;
+              font-size: 15px;
+              border: none;
+              margin: 0px auto;
+              margin-bottom: 8px;
+              padding: 12px 24px;
+              height: auto;
+              gap: 12px;
+            }
+
+            .ikp-ai-chat-message-tool-action > .ikp-icon {
+              font-size: 18px;
+            }
+
+            .ikp-ai-chat-message-tool-action:hover:not([disabled]) {
+              background: #2c3344;
+              color: white;
+            }
+          `,
         },
-      },
+      ],
     },
-  });
+  };
 
-  const searchSettings = {
-    placeholder: 'Search',
-    tabSettings: {
-      rootBreadcrumbsToUseAsTabs: ['Docs', 'Blog', 'Ably FAQs'],
-    },
+  const config = {
+    baseSettings,
+    label: 'Ask Ably',
+    aiChatSettings: aiChatSettings(),
+    searchSettings,
   };
 
-  window.inkeepWidget = inkeepBase.embed({
-    componentType: 'ChatButton',
-    properties: {
-      chatButtonType: 'PILL',
-      chatButtonText: 'Ask Ably',
-      ...aiChatSettings,
-      searchSettings,
-    },
+  window.inkeepWidget = window.Inkeep.ChatButton({
+    ...config,
   });
 
-  loadInkeepSearch(searchSettings);
+  loadInkeepSearch(config);
 };
 
-const loadInkeepSearch = (searchSettings) => {
+const loadInkeepSearch = (config: object) => {
   const searchBar = document.getElementById('inkeep-search');
   if (!searchBar) {
     return;
   }
 
-  window.inkeepBase.embed({
-    componentType: 'SearchBar',
-    targetElement: searchBar,
-    properties: {
-      searchSettings,
-      ...aiChatSettings,
+  window.Inkeep.SearchBar(`#${searchBar.id}`, {
+    ...config,
+    modalSettings: {
+      defaultView: 'SEARCH',
     },
-  });
+  }).remount();
 };
 
 export type InkeepUser = {
@@ -122,9 +284,11 @@ export const inkeepChatIdentifyUser = ({ user }: { user?: InkeepUser }) => {
     return;
   }
 
-  window.inkeepWidget.render({
+  window.inkeepWidget.update({
     baseSettings: {
-      userId: user.uuid,
+      userProperties: {
+        id: user.uuid,
+      },
     },
   });
 };
diff --git a/src/hooks/use-site-metadata.ts b/src/hooks/use-site-metadata.ts
index dc5f77ae64..4f360807d5 100644
--- a/src/hooks/use-site-metadata.ts
+++ b/src/hooks/use-site-metadata.ts
@@ -21,8 +21,6 @@ export const useSiteMetadata = () => {
             announcementEnabled
             inkeepEnabled
             inkeepApiKey
-            inkeepIntegrationId
-            inkeepOrganizationId
             insightsEnabled
             insightsDebug
             mixpanelApiKey
diff --git a/src/pages/docs/api/chat-rest.tsx b/src/pages/docs/api/chat-rest.tsx
new file mode 100644
index 0000000000..8cfb8903ed
--- /dev/null
+++ b/src/pages/docs/api/chat-rest.tsx
@@ -0,0 +1,35 @@
+import { Link, withAssetPrefix } from 'gatsby';
+import Icon from '@ably/ui/core/Icon';
+import { useSiteMetadata } from '../../../hooks/use-site-metadata';
+import { Head } from '../../../components/Head';
+import { Loader } from '../../../components/Redoc';
+
+const ChatRestApi = () => {
+  const { canonicalUrl } = useSiteMetadata();
+  const canonical = canonicalUrl('/docs/api/chat-rest');
+  const meta_title = 'Chat REST API';
+  const meta_description = 'The Chat REST API enables you to interact with the Ably Chat endpoints via REST.';
+  const chatRest = withAssetPrefix('/open-specs/chat.yaml');
+
+  return (
+    <>
+      <Head title={meta_title} metaTitle={meta_title} canonical={canonical} description={meta_description} />
+      <div className="ml-8 mt-32 mb-24">
+        <div className="text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2">
+          <Link to="/docs/chat">
+            <Icon
+              name="icon-gui-arrow-long-right-micro"
+              size="1rem"
+              additionalCSS="align-middle transform rotate-180 mr-4 h-16 w-16 ui-link"
+            />
+            Ably Chat
+          </Link>
+          <span className="ui-text-p2 ml-4"> / {meta_title}</span>
+        </div>
+      </div>
+      <Loader specUrl={chatRest} />
+    </>
+  );
+};
+
+export default ChatRestApi;
diff --git a/src/pages/docs/index.tsx b/src/pages/docs/index.tsx
index a6db694d30..94505d2195 100644
--- a/src/pages/docs/index.tsx
+++ b/src/pages/docs/index.tsx
@@ -4,7 +4,6 @@ import { Helmet } from 'react-helmet';
 import { ImageProps } from 'src/components/Image';
 import { useSiteMetadata } from 'src/hooks/use-site-metadata';
 import { HomepageContent } from 'src/components/Homepage/HomepageContent';
-import { PageLanguageProvider } from 'src/contexts';
 import { pageData } from 'src/data';
 
 export const ABLY_MAIN_WEBSITE = process.env.GATSBY_ABLY_MAIN_WEBSITE ?? 'http://localhost:3000';
@@ -13,10 +12,8 @@ const IndexPage = ({
   data: {
     allFile: { images },
   },
-  location: { search },
 }: {
   data: { allFile: { images: ImageProps[] } };
-  location: Location;
 }) => {
   const { sections, meta } = pageData.homepage.content;
   const openGraphTitle = meta.title ?? 'Ably Realtime Docs';
@@ -41,9 +38,7 @@ const IndexPage = ({
         <meta name="twitter:image" content={meta.image} />
       </Helmet>
 
-      <PageLanguageProvider search={search}>
-        <HomepageContent sections={sections} images={images} />
-      </PageLanguageProvider>
+      <HomepageContent sections={sections} images={images} />
     </>
   );
 };
diff --git a/src/styles/global.css b/src/styles/global.css
index f2fece5844..4e8bf6b604 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,8 +4,7 @@
 
 @import '@ably/ui/reset/styles.css';
 @import '@ably/ui/core/styles.css';
-@import '@ably/ui/core/Meganav/component.css';
-@import '@ably/ui/core/Footer/component.css';
+
 @import '@ably/ui/core/CookieMessage/component.css';
 @import '@ably/ui/core/Slider/component.css';
 @import '@ably/ui/core/Code/component.css';
@@ -60,6 +59,11 @@
     font-weight: inherit;
   }
 
+  /* inline code blocks inside anchor tags should have the colour of the anchor tag */
+  a > code.ui-text-code-inline {
+    color: inherit;
+  }
+
   #headway-widget-target .HW_badge_cont {
     position: absolute;
     right: -30px;
diff --git a/src/templates/base-template.tsx b/src/templates/base-template.tsx
index e218a43fe3..8ec4b1d59c 100644
--- a/src/templates/base-template.tsx
+++ b/src/templates/base-template.tsx
@@ -1,18 +1,11 @@
-import { Script, ScriptStrategy, navigate } from 'gatsby';
-import { useEffect, useLayoutEffect, useMemo } from 'react';
+import { Script, ScriptStrategy } from 'gatsby';
+import { useLayoutEffect, useMemo } from 'react';
 
 import { Head } from 'src/components/Head';
 import Article from 'src/components/Article';
 import PageTitle from 'src/components/PageTitle';
 import Html from 'src/components/blocks/Html';
-import {
-  createLanguageHrefFromDefaults,
-  getLanguageDefaults,
-  languageIsUsable,
-} from 'src/components/common/language-defaults';
-import { PageLanguageProvider, PathnameContext, usePageLanguage } from 'src/contexts';
-
-import { DEFAULT_LANGUAGE, DEFAULT_PREFERRED_LANGUAGE, IGNORED_LANGUAGES } from '../../data/createPages/constants';
+import { PathnameContext } from 'src/contexts';
 import { AblyDocument, AblyDocumentMeta, AblyTemplateData, ProductName } from './template-data';
 import { useSiteMetadata } from 'src/hooks/use-site-metadata';
 import { getMetaTitle } from 'src/components/common/meta-title';
@@ -26,7 +19,6 @@ const getMetaDataDetails = (
 ) => (document?.meta?.[prop] ? document.meta[prop] : alternative);
 
 const META_DESCRIPTION_FALLBACK = `Ably provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime. Organizations like Toyota, Bloomberg, HubSpot, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime data synchronization at global scale.`;
-const NO_LANGUAGE = 'none';
 const META_PRODUCT_FALLBACK = 'pub_sub';
 
 interface ITemplate extends AblyTemplateData {
@@ -34,8 +26,8 @@ interface ITemplate extends AblyTemplateData {
 }
 
 const Template = ({
-  location: { pathname, hash },
-  pageContext: { contentOrderedList, languages, slug, script },
+  location: { pathname },
+  pageContext: { contentOrderedList, slug, script },
   data: { document: ablyDocument },
   currentProduct,
 }: ITemplate) => {
@@ -54,15 +46,8 @@ const Template = ({
     setLanguages(Array.from(languagesSet));
   }, [setLanguages]);
 
-  const {
-    currentLanguage: currentLanguageFromContext,
-    handleCurrentLanguageChange,
-    getPreferredLanguage,
-  } = usePageLanguage();
-
   const title = getMetaDataDetails(ablyDocument, 'title') as string;
   const description = getMetaDataDetails(ablyDocument, 'meta_description', META_DESCRIPTION_FALLBACK) as string;
-  const menuLanguages = getMetaDataDetails(ablyDocument, 'languages', languages) as string[];
   const { canonicalUrl } = useSiteMetadata();
   const canonical = canonicalUrl(`/docs/${slug}`);
 
@@ -70,20 +55,6 @@ const Template = ({
   currentProduct ??= getMetaDataDetails(ablyDocument, 'product', META_PRODUCT_FALLBACK) as ProductName;
   const metaTitle = getMetaTitle(title, currentProduct) as string;
 
-  const filteredLanguages = useMemo(
-    () =>
-      menuLanguages.includes(NO_LANGUAGE)
-        ? []
-        : menuLanguages
-            .filter((language) => /^[^,]+$/.test(language))
-            .filter((language) => !IGNORED_LANGUAGES.includes(language)),
-    [menuLanguages],
-  );
-
-  const pageLanguage = filteredLanguages.includes(currentLanguageFromContext)
-    ? currentLanguageFromContext
-    : DEFAULT_LANGUAGE;
-
   const elements = useMemo(
     () =>
       contentOrderedList.map(
@@ -94,49 +65,6 @@ const Template = ({
     [contentOrderedList],
   );
 
-  useEffect(() => {
-    if (currentLanguageFromContext === DEFAULT_LANGUAGE || !filteredLanguages.includes(currentLanguageFromContext)) {
-      const preferredLanguage = getPreferredLanguage();
-
-      if (filteredLanguages.length <= 1) {
-        if (pageLanguage === DEFAULT_LANGUAGE) {
-          return;
-        }
-        const href = `${pathname}${hash}`;
-        navigate(href);
-        return;
-      }
-
-      if (preferredLanguage) {
-        /**
-         * We must select a language specified in `pageLanguages`, otherwise
-         * pages such as /docs/api/realtime-sdk/push?lang=ruby will show
-         * broken content.
-         */
-        const usableLanguage = languageIsUsable(preferredLanguage, filteredLanguages)
-          ? preferredLanguage
-          : languageIsUsable(DEFAULT_PREFERRED_LANGUAGE, filteredLanguages)
-            ? DEFAULT_PREFERRED_LANGUAGE
-            : filteredLanguages[0];
-        const { isLanguageDefault, isPageLanguageDefault } = getLanguageDefaults(usableLanguage, pageLanguage);
-
-        const href = createLanguageHrefFromDefaults(isPageLanguageDefault, isLanguageDefault, usableLanguage);
-        navigate(href);
-        return;
-      }
-    } else {
-      handleCurrentLanguageChange(pageLanguage);
-    }
-  }, [
-    currentLanguageFromContext,
-    filteredLanguages,
-    getPreferredLanguage,
-    handleCurrentLanguageChange,
-    hash,
-    pageLanguage,
-    pathname,
-  ]);
-
   return (
     <>
       <PathnameContext.Provider value={pathname}>
@@ -151,12 +79,4 @@ const Template = ({
   );
 };
 
-const TemplateWrapper = (props: ITemplate) => {
-  return (
-    <PageLanguageProvider search={props.location.search}>
-      <Template {...props} />
-    </PageLanguageProvider>
-  );
-};
-
-export default TemplateWrapper;
+export default Template;
diff --git a/static/open-specs/chat.yaml b/static/open-specs/chat.yaml
new file mode 100644
index 0000000000..7bcf75915b
--- /dev/null
+++ b/static/open-specs/chat.yaml
@@ -0,0 +1,687 @@
+openapi: 3.0.0
+info:
+  title: Ably Chat REST API
+  version: 2.0.0
+  description: |
+    # Chat API
+
+    This API enables you to integrate certain chat functionality into your application without requiring a Chat SDK. It provides endpoints for sending and retrieving messages, updating and deleting messages, and fetching occupancy information for chat rooms.
+
+    ## The Ably PubSub SDKs
+
+    Whilst you can interact with these endpoints directly, it is recommended where possible to use the Ably PubSub SDKs - which provide a convenient `request` method for interacting with Ably APIs.
+    By using this method, you can take advantage of built-in support for Ably’s authentication, pagination, and link headers, as well as automatic retry and fallback mechanics. This approach helps ensure consistent error handling, reduces setup overhead, and simplifies performing common operations against the Chat REST API. Using this method, instead of implementing your own request handling, will lead to more robust and maintainable client-side integrations.
+
+servers:
+  - url: https://main.realtime.ably.net/
+    description: Production server for Ably REST API
+components:
+  schemas:
+    ErrorInfo:
+      type: object
+      properties:
+        error:
+          type: object
+          properties:
+            message:
+              type: string
+              description: Description of the error.
+              example: "Invalid request payload. 'text' field is required."
+            code:
+              type: integer
+              description: A unique error code generated by the server.
+              example: 40001
+            statusCode:
+              type: integer
+              description: The HTTP status code associated with the error.
+              example: 400
+            href:
+              type: string
+              description: A link to the relevant documentation for this error.
+              example: "https://help.ably.io/error/40001"
+  parameters:
+    ClientIdParam:
+      name: clientId
+      in: query
+      required: false
+      description: Optional client ID. If provided, this must match the client ID used to authenticate the request.
+      schema:
+        type: string
+        example: "some-client-id"
+    AuthorizationHeader:
+      name: Authorization
+      in: header
+      required: true
+      description: A valid authentication token for accessing the requested resource. This can also be a base64 encoded API key when using basic authentication.
+      schema:
+        type: string
+        example: "Bearer eyJhbGc..."
+    ClientIdHeader:
+      name: X-Ably-ClientId
+      in: header
+      required: false
+      description: Optional client ID. If provided, this must match the client ID used to authenticate the request.
+      schema:
+        type: string
+        example: "some-client-id"
+    AcceptHeader:
+      name: Accept
+      in: header
+      required: false
+      description: |
+        The content type the client is willing to accept in the response.
+        Supported values are `application/json` and `application/x-msgpack`.
+      schema:
+        type: string
+        enum:
+          - application/json
+          - application/x-msgpack
+        example: "application/json"
+        default: "application/json"
+
+paths:
+  /chat/{version}/rooms/{roomId}/messages:
+    post:
+      summary: Send a message to a room
+      description: |
+        Sends a new message to a specified room.
+
+        A successful request returns a response with the serial and creation timestamp of the newly sent message. This will also mean the message has been broadcast to all subscribing members of the room.
+      tags:
+        - rooms
+      parameters:
+        - name: version
+          in: path
+          required: true
+          description: The version of the Chat API endpoint to use.
+          schema:
+            type: string
+            example: v3
+        - name: roomId
+          in: path
+          required: true
+          description: The unique identifier of the room to send the message to. The `roomId` must be URI-encoded.
+          schema:
+            type: string
+        - $ref: '#/components/parameters/ClientIdHeader'
+        - $ref: '#/components/parameters/AuthorizationHeader'
+        - $ref: '#/components/parameters/AcceptHeader'
+      requestBody:
+        description: The message content and optional properties to send to the specified room.
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                text:
+                  type: string
+                  description: |
+                    The main content of the message. This property is required. Empty strings will result in an error.
+                  example: "Hello World!"
+                headers:
+                  type: object
+                  description: |
+                    Optional headers for adding additional information to a message, such as the relative timestamp of a livestream video, or flagging a message as important. Do not use the headers for authoritative information. Treat them like user input.
+                  example:
+                    liveStreamTime: "0:15:34.450"
+                    priority: "high"
+                metadata:
+                  type: object
+                  description: |
+                    Optional metadata associated with the message. This can include animations, effects, or links, amongst others. This information is not read or processed by the server. Treat it like user input.
+                  example:
+                    animation: "wave_effect"
+                    imageUrl: "https://example.com/image.jpg"
+              required:
+                - text
+      responses:
+        '200':
+          description: |
+            Successfully sent the message to the room.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  serial:
+                    type: string
+                    description: The unique identifier for the message.
+                    example: "01826232498871-001@abcdefghij:001"
+                  createdAt:
+                    type: number
+                    format: unix-timestamp
+                    description: The timestamp when the message was created.
+                    example: 1741973127428
+        '400':
+          description: Invalid request body.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+        '401':
+          description: Unauthorized access.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                  error:
+                    message: "Unauthorized access."
+                    code: 40005
+                    statusCode: 401
+                    href: "https://help.ably.io/error/40101"
+        '422':
+          description: Moderation error.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Message contains inappropriate language."
+                  code: 42201
+                  statusCode: 422
+                  href: "https://help.ably.io/error/42201"
+        '500':
+          description: Server error.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Internal server error."
+                  code: 50001
+                  statusCode: 500
+                  href: "https://help.ably.io/error/50001"
+    get:
+      summary: Retrieve messages from a room
+      description: |
+        Fetches a list of messages from a specified room. The messages are returned in a paginated format with links to navigate through other pages.
+
+        To query specific messages or control the set of messages returned, use the query parameters provided.
+      tags:
+        - rooms
+      parameters:
+        - name: roomId
+          in: path
+          required: true
+          description: The unique identifier of the room to fetch messages from. The `roomId` must be URI-encoded.
+          schema:
+            type: string
+        - name: limit
+          in: query
+          required: false
+          description: The maximum number of messages to retrieve per request.
+          schema:
+            type: integer
+            example: 50
+        - name: serial
+          in: query
+          required: false
+          description: The serial value to start fetching messages from, this must be URI encoded. If omitted, messages are retrieved from the beginning or end depending on the `orderBy` parameter.
+          schema:
+            type: string
+            example: 01741966242815-000@cbf5P0_1gBmlrl25663776:000
+        - name: orderBy
+          in: query
+          required: false
+          description: |
+            The order of messages in the response, based on the order of creation.
+          schema:
+            type: string
+            enum: [oldestFirst, newestFirst]
+            default: newestFirst
+        - $ref: '#/components/parameters/ClientIdHeader'
+        - $ref: '#/components/parameters/AuthorizationHeader'
+        - $ref: '#/components/parameters/AcceptHeader'
+      responses:
+        '200':
+          description: A paginated list of messages retrieved from the room.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  messages:
+                    type: array
+                    description: A list of retrieved messages. Each message contains the following fields
+                    items:
+                      type: object
+                      properties:
+                        serial:
+                          type: string
+                          description: Unique identifier for the message.
+                          example: "01741702684595-000@cbf5P0_1gBmlrl69332878:000"
+                        clientId:
+                          type: string
+                          description: Client identifier of the message sender.
+                          example: "some-client-id"
+                        roomId:
+                          type: string
+                          description: Identifier of the room where the message originated.
+                          example: "room-001"
+                        text:
+                          type: string
+                          description: The main content of the message.
+                          example: "Hello, world!"
+                        headers:
+                          type: object
+                          description: Optional headers for additional message context.
+                          example: { relativeTime: "10ms", urgency: "low" }
+                        metadata:
+                          type: object
+                          description: Additional metadata or properties associated with the message.
+                          example: { type: "chat", imageUrl: "https://example.com/image.jpg" }
+                        createdAt:
+                          type: number
+                          format: unix-timestamp
+                          description: The timestamp when the message was created.
+                          example: 1741702684595
+                        action:
+                          type: string
+                          description: Indicates the latest action performed on the message.
+                          example: "message.create"
+                        version:
+                          type: string
+                          description: A unique identifier for the version of the message.
+                          example: "01741702684595-000@cbf5P0_1gBmlrl69332878:000"
+                        timestamp:
+                          type: number
+                          format: unix-timestamp
+                          description: The timestamp when the action was performed. For `message.create` actions, it is the same as `createdAt`.
+                          example: 1741702684595
+                  links:
+                    type: object
+                    description: If the response contains multiple pages, links shall be provided to navigate through the pages.
+                    properties:
+                      current:
+                        type: string
+                        format: uri
+                        description: URI link to the current page of messages.
+                        example: <./messages?direction=backwards&limit=100>; rel="current"
+                      next:
+                        type: string
+                        format: uri
+                        description: URI link to the next page of messages, if it exists.
+                        example: <./messages?cursor=01741782820772-000%40cbf5P0_1gBmlrl73660839%3A000&direction=backwards&limit=100>; rel="previous"
+                      first:
+                        type: string
+                        format: uri
+                        description: URI link to the first page of messages.
+                        example: <./messages?direction=backwards&limit=100>; rel="first"
+        '400':
+          description: Invalid query parameters
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+        '401':
+          description: Unauthorized access.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Unauthorized access."
+                  code: 40005
+                  statusCode: 401
+                  href: "https://help.ably.io/error/40101"
+        '500':
+          description: Server error.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Internal server error."
+                  code: 50001
+                  statusCode: 500
+                  href: "https://help.ably.io/error/50001"
+  /chat/{version}/rooms/{roomId}/occupancy:
+    get:
+      summary: Retrieve occupancy of a room
+      description: |
+        Fetches the occupancy metrics of a specified room.
+
+        A successful request returns the number of active connections and presence members.
+      tags:
+        - rooms
+      parameters:
+        - name: version
+          in: path
+          required: true
+          description: The version of the Chat API endpoint to use.
+          schema:
+            type: string
+            example: v3
+        - name: roomId
+          in: path
+          required: true
+          description: |
+            The unique identifier of the room to retrieve occupancy information from.
+            The `roomId` must be URI-encoded.
+          schema:
+            type: string
+        - $ref: '#/components/parameters/ClientIdHeader'
+        - $ref: '#/components/parameters/AuthorizationHeader'
+        - $ref: '#/components/parameters/AcceptHeader'
+      responses:
+        '200':
+          description: |
+            Successfully retrieved the occupancy metrics.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  connections:
+                    type: integer
+                    description: The number of active connections in the room.
+                    example: 103
+                  presenceMembers:
+                    type: integer
+                    description: The number of presence members in the room.
+                    example: 95
+        '400':
+          description: Invalid query parameters.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+        '401':
+          description: Unauthorized access.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Unauthorized access."
+                  code: 40005
+                  statusCode: 401
+                  href: "https://help.ably.io/error/40101"
+        '500':
+          description: Server error.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Internal server error."
+                  code: 50001
+                  statusCode: 500
+                  href: "https://help.ably.io/error/50001"
+  /chat/{version}/rooms/{roomId}/messages/{serial}:
+    put:
+      summary: Update a message in a room
+      description: |
+        Updates an existing message in a specified room.
+
+        **Important:** Omitting either the `headers` or `metadata` fields will result in removal of any existing values for those fields in the message. To retain original `headers` or `metadata`, you must include them explicitly in the update request.
+
+        A successful request returns the updated message's `version` and the `timestamp` when the update occurred. This will broadcast the updated message to all subscribing members of the room.
+      tags:
+        - rooms
+      parameters:
+        - name: version
+          in: path
+          required: true
+          description: The version of the Chat API endpoint to use.
+          schema:
+            type: string
+            example: v3
+        - name: roomId
+          in: path
+          required: true
+          description: |
+            The unique identifier of the room that contains the message to be updated.
+            The `roomId` must be URI-encoded.
+          schema:
+            type: string
+        - name: serial
+          in: path
+          required: true
+          description: |
+            The unique identifier of the message you wish to update.
+            The `serial` must be URI-encoded.
+          schema:
+            type: string
+            example: "01926232498871-001@abcdefghij:001"
+        - $ref: '#/components/parameters/ClientIdHeader'
+        - $ref: '#/components/parameters/AuthorizationHeader'
+        - $ref: '#/components/parameters/AcceptHeader'
+      requestBody:
+        description: The updated message content and optional properties, along with details related to the update operation.
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                message:
+                  type: object
+                  description: The new content of the message, including text, headers, and metadata.
+                  properties:
+                    text:
+                      type: string
+                      description: |
+                        The main content of the updated message. This property is required.
+                        Empty strings will result in an error.
+                      example: "Updated Text Content"
+                    headers:
+                      type: object
+                      description: |
+                        Optional headers for providing context, such as the relative timestamp
+                        of a livestream or special tags for the message.
+                        If not included, existing headers will be removed.
+                      example:
+                        liveStreamTime: "0:20:15.100"
+                        priority: "medium"
+                    metadata:
+                      type: object
+                      description: |
+                        Optional metadata such as animations, effects, or links to other resources
+                        associated with the message. If not included, existing metadata will be removed.
+                      example:
+                        animation: "highlight_effect"
+                        imageUrl: "https://example.com/updated-image.jpg"
+                  required:
+                    - text
+                description:
+                  type: string
+                  description: |
+                    Optional description for the action. This provides context about the update operation.
+                  example: "Message updated by user"
+                metadata:
+                  type: object
+                  description: |
+                    Optional metadata specific to the action. This does not modify the metadata of the message itself.
+                  example:
+                    editedBy: "user-12345"
+                    reason: "Corrected typo"
+      responses:
+        '201':
+          description: |
+            Successfully updated the message.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  version:
+                    type: string
+                    description: The unique identifier for the updated version of the message.
+                    example: "01926232498871-002@abcdefghij:001"
+                  timestamp:
+                    type: number
+                    format: unix-timestamp
+                    description: The timestamp when the message update was successfully performed.
+                    example: 1741973127428
+        '400':
+          description: Invalid request body.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+        '401':
+          description: Unauthorized access.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Unauthorized access."
+                  code: 40005
+                  statusCode: 401
+                  href: "https://help.ably.io/error/40101"
+        '404':
+          description: Message not found.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Message not found."
+                  code: 40400
+                  statusCode: 404
+                  href: "https://help.ably.io/error/40401"
+        '500':
+          description: Server error.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Internal server error."
+                  code: 50001
+                  statusCode: 500
+                  href: "https://help.ably.io/error/50001"
+  /chat/{version}/rooms/{roomId}/messages/{serial}/delete:
+    post:
+      summary: Delete a message in a room
+      description: |
+        Deletes a specific message in a room.
+
+        A successful request returns the `version` and `timestamp` of the deleted message. This will also broadcast the deletion to all subscribing members of the room.
+      tags:
+        - rooms
+      parameters:
+        - name: version
+          in: path
+          required: true
+          description: The version of the Chat API endpoint to use.
+          schema:
+            type: string
+            example: v3
+        - name: roomId
+          in: path
+          required: true
+          description: |
+            The unique identifier of the room containing the message you wish to delete.
+            The `roomId` should be URI-encoded.
+          schema:
+            type: string
+        - name: serial
+          in: path
+          required: true
+          description: |
+            The unique identifier of the message you wish to delete.
+            The `serial` must be URI-encoded.
+          schema:
+            type: string
+            example: "01826232498871-001@abcdefghij:001"
+        - $ref: '#/components/parameters/ClientIdHeader'
+        - $ref: '#/components/parameters/AuthorizationHeader'
+        - $ref: '#/components/parameters/AcceptHeader'
+      requestBody:
+        description: |
+          Optional body containing additional information about the deletion action, such as a description and metadata.
+        required: false
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                description:
+                  type: string
+                  description: |
+                    Optional description providing context for the operation, such as the reason for deleting the message.
+                  example: "Message deleted by user"
+                metadata:
+                  type: object
+                  description: |
+                    Optional metadata associated with the delete operation.
+                    This does not affect the metadata of the message or room.
+                  example:
+                    deletedBy: "user-12345"
+                    flaggedAs: "inappropriate"
+      responses:
+        '200':
+          description: |
+            Successfully deleted the message.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  version:
+                    type: string
+                    description: |
+                      The unique identifier of the deleted version of the message.
+                    example: "01826232498871-001@abcdefghij:001"
+                  timestamp:
+                    type: number
+                    format: unix-timestamp
+                    description: |
+                      The timestamp when the deletion was successfully performed.
+                    example: 1741973127428
+        '400':
+          description: Invalid request body or missing required fields.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+        '401':
+          description: Unauthorized access.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Unauthorized access."
+                  code: 40005
+                  statusCode: 401
+                  href: "https://help.ably.io/error/40101"
+        '404':
+          description: Message not found.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Message not found."
+                  code: 40400
+                  statusCode: 404
+                  href: "https://help.ably.io/error/40401"
+        '500':
+          description: Server error.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorInfo'
+              example:
+                error:
+                  message: "Internal server error."
+                  code: 50001
+                  statusCode: 500
+                  href: "https://help.ably.io/error/50001"
diff --git a/static/open-specs/control-v1.yaml b/static/open-specs/control-v1.yaml
index 7d31d2c4eb..d2b8bd32e5 100644
--- a/static/open-specs/control-v1.yaml
+++ b/static/open-specs/control-v1.yaml
@@ -5,8 +5,10 @@ info:
   version: 1.1.0
   description: |
     Use the Control API to manage your applications, namespaces, keys, queues, rules, and more.
-
+    </br></br>
     Detailed information on using this API can be found in the Ably <a href="https://ably.com/docs/account/control-api">Control API docs</a>.
+    </br></br>
+    The <a href="https://swagger.io/specification/">OpenAPI specification</a> file used to generate this REST API is available to view <a href="https://github.com/ably/docs/blob/main/static/open-specs/control-v1.yaml">here</a>.
 servers:
 - url: https://control.ably.net/v1
 paths:
@@ -4873,16 +4875,22 @@ TOfReTlUQzgpXRW5h3n2LVXbXQhPGcVitb88Cm2R8cxQwgB1VncM8yvmKhREo2tz
           default: false
           description: If `true`, channels within this namespace will start batching inbound messages instead of sending them out immediately to subscribers.
           example: false
-        batchingPolicy:
-          type: string
-          default: simple
-          description: If `true`, groups multiple incoming messages into a single batch.
-          example: simple
         batchingInterval:
           type: integer
           default: 20
           description: If `true`, the batching interval, configurable from 20ms to 1s, temporarily holds and aggregates incoming messages. These messages are then combined and delivered as a single batch once the interval elapses or a size limit is reached (before the interval elapses).
           example: 20
+        conflationEnabled:
+          default: false
+          description: If `true`, enables <a href="https://ably.com/docs/messages#conflation">conflation</a> for channels within this namespace. Conflation will aggregate published messages for a set period of time and evaluate them against a conflation key. Only the most recent message that satisfies the key will be sent to subscribers at the end of the conflation interval.
+          example: false
+        conflationInterval:
+          type: integer
+          description: The interval in milliseconds over which messages are held and evaluated for conflation.
+          example: 1000
+        conflationKey:
+          type: string
+          description: The <a href="https://ably.com/docs/messages#routing">key</a> used to determine which messages should be conflated.
         tlsOnly:
           type: boolean
           default: false
@@ -4922,16 +4930,23 @@ TOfReTlUQzgpXRW5h3n2LVXbXQhPGcVitb88Cm2R8cxQwgB1VncM8yvmKhREo2tz
           type: boolean
           default: false
           description: If `true`, channels within this namespace will start batching inbound messages instead of sending them out immediately to subscribers.
-        batchingPolicy:
-          type: string
-          default: simple
-          description: If `true`, groups multiple incoming messages into a single batch.
-          example: simple
+          example: false
         batchingInterval:
           type: integer
           default: 20
           description: If `true`, the batching interval, configurable from 20ms to 1s, temporarily holds and aggregates incoming messages. These messages are then combined and delivered as a single batch once the interval elapses or a size limit is reached (before the interval elapses).
           example: 20
+        conflationEnabled:
+          default: false
+          description: If `true`, enables <a href="https://ably.com/docs/messages#conflation">conflation</a> for channels within this namespace. Conflation will aggregate published messages for a set period of time and evaluate them against a conflation key. Only the most recent message that satisfies the key will be sent to subscribers at the end of the conflation interval.
+          example: false
+        conflationInterval:
+          type: integer
+          description: The interval in milliseconds over which messages are held and evaluated for conflation.
+          example: 1000
+        conflationKey:
+          type: string
+          description: The <a href="https://ably.com/docs/messages#routing">key</a> used to determine which messages should be conflated.
         tlsOnly:
           type: boolean
           default: false
@@ -4981,16 +4996,22 @@ TOfReTlUQzgpXRW5h3n2LVXbXQhPGcVitb88Cm2R8cxQwgB1VncM8yvmKhREo2tz
           default: false
           description: If `true`, channels within this namespace will start batching inbound messages instead of sending them out immediately to subscribers.
           example: false
-        batchingPolicy:
-          type: string
-          default: simple
-          description: If `true`, groups multiple incoming messages into a single batch.
-          example: simple
         batchingInterval:
           type: integer
           default: 20
           description: If `true`, the batching interval, configurable from 20ms to 1s, temporarily holds and aggregates incoming messages. These messages are then combined and delivered as a single batch once the interval elapses or a size limit is reached (before the interval elapses).
           example: 20
+        conflationEnabled:
+          default: false
+          description: If `true`, enables <a href="https://ably.com/docs/messages#conflation">conflation</a> for channels within this namespace. Conflation will aggregate published messages for a set period of time and evaluate them against a conflation key. Only the most recent message that satisfies the key will be sent to subscribers at the end of the conflation interval.
+          example: false
+        conflationInterval:
+          type: integer
+          description: The interval in milliseconds over which messages are held and evaluated for conflation.
+          example: 1000
+        conflationKey:
+          type: string
+          description: The <a href="https://ably.com/docs/messages#routing">key</a> used to determine which messages should be conflated.
         tlsOnly:
           type: boolean
           default: false
diff --git a/tailwind.config.js b/tailwind.config.js
index d8341fba8b..2e7bfa36d5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -76,10 +76,6 @@ module.exports = extendConfig((ablyUIConfig) => ({
     },
     extend: {
       ...ablyUIConfig.theme.extend,
-      lineHeight: {
-        ...ablyUIConfig.theme.lineHeight,
-        normal: 'var(--lh-normal)',
-      },
       width: {
         ...ablyUIConfig.theme.extend.width,
         24: '1.5rem',
diff --git a/tsconfig.json b/tsconfig.json
index 56d71a28e0..7b8a2f1ef5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,11 +14,11 @@
     "sourceMap": true /* Create source map files for emitted JavaScript files. */,
     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
     "outDir": "./dist",
-    "types": ["@ably/ui"]
+    "types": ["@ably/ui"],
+    "paths": {
+      "@reach/router": ["../node_modules/@gatsbyjs/reach-router"]
+    }
   },
   "include": ["./src/**/*", "./data/**/*", "read-textile.ts"],
-  "exclude": ["./dist/**/*"],
-  "paths": {
-    "@reach/router": ["../node_modules/@gatsbyjs/reach-router"]
-  }
+  "exclude": ["./dist/**/*"]
 }
diff --git a/yarn.lock b/yarn.lock
index 3daf60b441..a2d3d0c012 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@ably/ui@15.8.1":
-  version "15.8.1"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-15.8.1.tgz#be59ffe07c0ce826c1061adbcb8ff2a75dcfd78c"
-  integrity sha512-o2wpZEHpXDeLH1i+YaEeBf2PxqnG3EzBmmqB4Lx80NjbpTXFY19wI25bZ53fUuFroU04Yj1UQ/T94Qmbld6wkg==
+"@ably/ui@16.1.1":
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-16.1.1.tgz#bddfe9bb4df2ea06e981fa2901cda18cac63ca4b"
+  integrity sha512-GrsR/SDmeNg3HbRB3ThefIA2hzuiBvOT+1Xlq5JoIsxm+OKWEioKQuxu7aYtgpPgFP/9fOf2G97Jqnl7CaQKzg==
   dependencies:
     "@radix-ui/react-accordion" "^1.2.1"
     "@radix-ui/react-navigation-menu" "^1.2.4"
@@ -14528,16 +14528,7 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14628,7 +14619,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -14649,13 +14640,6 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -16019,7 +16003,7 @@ wildcard@^2.0.0:
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -16037,15 +16021,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"