diff --git a/.eslintrc b/.eslintrc
index 51a6ed2..1dca80b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,18 +1,13 @@
 {
-  "extends": ["airbnb", "airbnb/hooks", "prettier"],
-  "parser": "babel-eslint",
+  "extends": ["next/core-web-vitals", "prettier"],
   "env": {
     "browser": true,
     "node": true,
     "es6": true
   },
   "rules": {
-    "no-console": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/forbid-prop-types": 0,
-    "react/require-default-props": 0,
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "import/no-extraneous-dependencies": 0,
+    "@next/next/no-img-element": 0,
     "import/order": [
       "error",
       {
diff --git a/README.md b/README.md
index 7651b9b..c128dd4 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Setup dependencies via `yarn install`.
 
 Add the required environment variables (e.g. your Daily API key) for the demo being used. Each demo's README will list the required environment variables to run it locally.
 
-Run an example via `yarn workspace @dailyjs/basic-call dev` (replacing `basic-call` with the name of the demo).
+Run an example via `yarn workspace @custom/basic-call dev` (replacing `basic-call` with the name of the demo).
 
 Please note: these demos are intended as educational resources for using the Daily platform as well as showcasing common usage patterns and best practices. That said, they are not intended to be used as production ready applications.
 
@@ -18,7 +18,7 @@ Please note: these demos are intended as educational resources for using the Dai
 
 ## Contents
 
-## [Daily JS (Web)](./dailyjs/)
+## [Daily JS (Web)](./custom/)
 
 Examples that showcase the Daily CallObject using our Javascript library
 
diff --git a/dailyjs/.gitignore b/custom/.gitignore
similarity index 100%
rename from dailyjs/.gitignore
rename to custom/.gitignore
diff --git a/dailyjs/README.md b/custom/README.md
similarity index 92%
rename from dailyjs/README.md
rename to custom/README.md
index 81f366e..31c48a8 100644
--- a/dailyjs/README.md
+++ b/custom/README.md
@@ -30,7 +30,7 @@ Demonstrates using manual track management to support larger call sizes
 
 We recommend starting with the [basic call](./basic-call) example, showcasing the common flow of a call Daily call, device management and error handling.
 
-Run an examples with `yarn workspace @dailyjs/[demo-name] dev` (replacing `[demo-name]` with the name of the demo you'd like to run e.g. `basic-call`.
+Run an examples with `yarn workspace @custom/[demo-name] dev` (replacing `[demo-name]` with the name of the demo you'd like to run e.g. `basic-call`.
 
 - Please ensure your Daily rooms are setup to use [web sockets](https://docs.daily.co/reference#domain-configuration)
 - Follow the instructions within each demo first, making sure to set all the necassary local environment variables etc
diff --git a/dailyjs/basic-call/.babelrc b/custom/basic-call/.babelrc
similarity index 100%
rename from dailyjs/basic-call/.babelrc
rename to custom/basic-call/.babelrc
diff --git a/dailyjs/basic-call/.gitignore b/custom/basic-call/.gitignore
similarity index 100%
rename from dailyjs/basic-call/.gitignore
rename to custom/basic-call/.gitignore
diff --git a/dailyjs/basic-call/README.md b/custom/basic-call/README.md
similarity index 94%
rename from dailyjs/basic-call/README.md
rename to custom/basic-call/README.md
index 3fde13d..b8abd9a 100644
--- a/dailyjs/basic-call/README.md
+++ b/custom/basic-call/README.md
@@ -4,7 +4,7 @@
 
 ### Live example
 
-**[See it in action here ➡️](https://dailyjs-basic-call.vercel.app)**
+**[See it in action here ➡️](https://custom-basic-call.vercel.app)**
 
 ---
 
@@ -28,7 +28,7 @@ mv env.example .env.local
 
 # from project root...
 yarn
-yarn workspace @dailyjs/basic-call dev
+yarn workspace @custom/basic-call dev
 ```
 
 ## How does this example work?
diff --git a/dailyjs/basic-call/components/App/App.js b/custom/basic-call/components/App/App.js
similarity index 80%
rename from dailyjs/basic-call/components/App/App.js
rename to custom/basic-call/components/App/App.js
index fa7c678..81b43d9 100644
--- a/dailyjs/basic-call/components/App/App.js
+++ b/custom/basic-call/components/App/App.js
@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
-import ExpiryTimer from '@dailyjs/shared/components/ExpiryTimer';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useCallUI } from '@dailyjs/shared/hooks/useCallUI';
+import ExpiryTimer from '@custom/shared/components/ExpiryTimer';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useCallUI } from '@custom/shared/hooks/useCallUI';
 
 import PropTypes from 'prop-types';
-import Room from '../Room';
+import Room from '../Call/Room';
 import { Asides } from './Asides';
 import { Modals } from './Modals';
 
@@ -13,7 +13,7 @@ export const App = ({ customComponentForState }) => {
 
   const componentForState = useCallUI({
     state,
-    room: () => <Room />,
+    room: <Room />,
     ...customComponentForState,
   });
 
diff --git a/dailyjs/basic-call/components/App/Asides.js b/custom/basic-call/components/App/Asides.js
similarity index 55%
rename from dailyjs/basic-call/components/App/Asides.js
rename to custom/basic-call/components/App/Asides.js
index f78b4c8..4afbca0 100644
--- a/dailyjs/basic-call/components/App/Asides.js
+++ b/custom/basic-call/components/App/Asides.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { PeopleAside } from '@dailyjs/shared/components/Aside/PeopleAside';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import { NetworkAside } from '@custom/shared/components/Aside';
+import { PeopleAside } from '@custom/shared/components/Aside';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 
 export const Asides = () => {
   const { asides } = useUIState();
@@ -8,6 +9,7 @@ export const Asides = () => {
   return (
     <>
       <PeopleAside />
+      <NetworkAside />
       {asides.map((AsideComponent) => (
         <AsideComponent key={AsideComponent.name} />
       ))}
diff --git a/dailyjs/basic-call/components/App/Modals.js b/custom/basic-call/components/App/Modals.js
similarity index 62%
rename from dailyjs/basic-call/components/App/Modals.js
rename to custom/basic-call/components/App/Modals.js
index 264ddd7..ba5c27c 100644
--- a/dailyjs/basic-call/components/App/Modals.js
+++ b/custom/basic-call/components/App/Modals.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import DeviceSelectModal from '@dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import DeviceSelectModal from '@custom/shared/components/DeviceSelectModal/DeviceSelectModal';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 
 export const Modals = () => {
   const { modals } = useUIState();
diff --git a/dailyjs/basic-call/components/App/index.js b/custom/basic-call/components/App/index.js
similarity index 53%
rename from dailyjs/basic-call/components/App/index.js
rename to custom/basic-call/components/App/index.js
index 8ab4977..7e7372b 100644
--- a/dailyjs/basic-call/components/App/index.js
+++ b/custom/basic-call/components/App/index.js
@@ -1,2 +1 @@
 export { App as default } from './App';
-export { Modals } from './Modals';
diff --git a/dailyjs/basic-call/components/Room/RoomContainer.js b/custom/basic-call/components/Call/Container.js
similarity index 64%
rename from dailyjs/basic-call/components/Room/RoomContainer.js
rename to custom/basic-call/components/Call/Container.js
index b3fed79..22e0d08 100644
--- a/dailyjs/basic-call/components/Room/RoomContainer.js
+++ b/custom/basic-call/components/Call/Container.js
@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { Audio } from '@dailyjs/shared/components/Audio';
-import { BasicTray } from '@dailyjs/shared/components/Tray';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import useJoinSound from '@dailyjs/shared/hooks/useJoinSound';
+import { Audio } from '@custom/shared/components/Audio';
+import { BasicTray } from '@custom/shared/components/Tray';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import useJoinSound from '@custom/shared/hooks/useJoinSound';
 import PropTypes from 'prop-types';
-import WaitingRoom from '../WaitingRoom';
+import { WaitingRoom } from './WaitingRoom';
 
-export const RoomContainer = ({ children }) => {
+export const Container = ({ children }) => {
   const { isOwner } = useParticipants();
 
   useJoinSound();
@@ -42,8 +42,8 @@ export const RoomContainer = ({ children }) => {
   );
 };
 
-RoomContainer.propTypes = {
+Container.propTypes = {
   children: PropTypes.node,
 };
 
-export default RoomContainer;
+export default Container;
diff --git a/dailyjs/basic-call/components/Room/Header.js b/custom/basic-call/components/Call/Header.js
similarity index 69%
rename from dailyjs/basic-call/components/Room/Header.js
rename to custom/basic-call/components/Call/Header.js
index 7491b1e..b158054 100644
--- a/dailyjs/basic-call/components/Room/Header.js
+++ b/custom/basic-call/components/Call/Header.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import HeaderCapsule from '@dailyjs/shared/components/HeaderCapsule';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import HeaderCapsule from '@custom/shared/components/HeaderCapsule';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 
 export const Header = () => {
   const { participantCount } = useParticipants();
@@ -10,7 +10,13 @@ export const Header = () => {
   return useMemo(
     () => (
       <header className="room-header">
-        <img src="assets/daily-logo.svg" alt="Daily" className="logo" />
+        <img
+          src="/assets/daily-logo.svg"
+          alt="Daily"
+          className="logo"
+          width="80"
+          height="32"
+        />
 
         <HeaderCapsule>Basic call demo</HeaderCapsule>
         <HeaderCapsule>
@@ -31,7 +37,8 @@ export const Header = () => {
             flex: 0 0 auto;
             column-gap: var(--spacing-xxs);
             box-sizing: border-box;
-            padding: var(--spacing-sm);
+            padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xxs)
+              var(--spacing-sm);
             align-items: center;
             width: 100%;
           }
diff --git a/custom/basic-call/components/Call/Room.js b/custom/basic-call/components/Call/Room.js
new file mode 100644
index 0000000..aa4cfe6
--- /dev/null
+++ b/custom/basic-call/components/Call/Room.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
+
+import { Container } from './Container';
+import { Header } from './Header';
+import { VideoGrid } from './VideoGrid';
+
+export function Room() {
+  return (
+    <Container>
+      <Header />
+      <VideoContainer>
+        <VideoGrid />
+      </VideoContainer>
+    </Container>
+  );
+}
+
+export default Room;
diff --git a/dailyjs/basic-call/components/VideoGrid/VideoGrid.js b/custom/basic-call/components/Call/VideoGrid.js
similarity index 95%
rename from dailyjs/basic-call/components/VideoGrid/VideoGrid.js
rename to custom/basic-call/components/Call/VideoGrid.js
index 7f66798..e71ff6d 100644
--- a/dailyjs/basic-call/components/VideoGrid/VideoGrid.js
+++ b/custom/basic-call/components/Call/VideoGrid.js
@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react';
-import Tile from '@dailyjs/shared/components/Tile';
-import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
+import Tile from '@custom/shared/components/Tile';
+import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
 /**
diff --git a/dailyjs/basic-call/components/WaitingRoom/WaitingRoom.js b/custom/basic-call/components/Call/WaitingRoom.js
similarity index 73%
rename from dailyjs/basic-call/components/WaitingRoom/WaitingRoom.js
rename to custom/basic-call/components/Call/WaitingRoom.js
index c4b2605..4266d44 100644
--- a/dailyjs/basic-call/components/WaitingRoom/WaitingRoom.js
+++ b/custom/basic-call/components/Call/WaitingRoom.js
@@ -2,8 +2,8 @@ import React from 'react';
 import {
   WaitingRoomModal,
   WaitingRoomNotification,
-} from '@dailyjs/shared/components/WaitingRoom';
-import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
+} from '@custom/shared/components/WaitingRoom';
+import { useWaitingRoom } from '@custom/shared/contexts/WaitingRoomProvider';
 
 export const WaitingRoom = () => {
   const { setShowModal, showModal } = useWaitingRoom();
diff --git a/dailyjs/basic-call/components/CreatingRoom/CreatingRoom.js b/custom/basic-call/components/Prejoin/CreatingRoom.js
similarity index 92%
rename from dailyjs/basic-call/components/CreatingRoom/CreatingRoom.js
rename to custom/basic-call/components/Prejoin/CreatingRoom.js
index 4973120..29b779d 100644
--- a/dailyjs/basic-call/components/CreatingRoom/CreatingRoom.js
+++ b/custom/basic-call/components/Prejoin/CreatingRoom.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody } from '@dailyjs/shared/components/Card';
-import Loader from '@dailyjs/shared/components/Loader';
-import { Well } from '@dailyjs/shared/components/Well';
+import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
+import Loader from '@custom/shared/components/Loader';
+import Well from '@custom/shared/components/Well';
 import PropTypes from 'prop-types';
 
 export const CreatingRoom = ({ onCreated }) => {
diff --git a/dailyjs/basic-call/components/Intro/Intro.js b/custom/basic-call/components/Prejoin/Intro.js
similarity index 87%
rename from dailyjs/basic-call/components/Intro/Intro.js
rename to custom/basic-call/components/Prejoin/Intro.js
index 2fe43bb..0f0eaf8 100644
--- a/dailyjs/basic-call/components/Intro/Intro.js
+++ b/custom/basic-call/components/Prejoin/Intro.js
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Button } from '@dailyjs/shared/components/Button';
+import Button from '@custom/shared/components/Button';
 import {
   Card,
   CardBody,
   CardFooter,
   CardHeader,
-} from '@dailyjs/shared/components/Card';
-import Field from '@dailyjs/shared/components/Field';
-import { TextInput, BooleanInput } from '@dailyjs/shared/components/Input';
-import { Well } from '@dailyjs/shared/components/Well';
+} from '@custom/shared/components/Card';
+import Field from '@custom/shared/components/Field';
+import { TextInput, BooleanInput } from '@custom/shared/components/Input';
+import Well from '@custom/shared/components/Well';
 import PropTypes from 'prop-types';
 
 /**
diff --git a/dailyjs/basic-call/components/Intro/NotConfigured.js b/custom/basic-call/components/Prejoin/NotConfigured.js
similarity index 92%
rename from dailyjs/basic-call/components/Intro/NotConfigured.js
rename to custom/basic-call/components/Prejoin/NotConfigured.js
index 75a32fd..7c379ed 100644
--- a/dailyjs/basic-call/components/Intro/NotConfigured.js
+++ b/custom/basic-call/components/Prejoin/NotConfigured.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardBody, CardHeader } from '@dailyjs/shared/components/Card';
+import { Card, CardBody, CardHeader } from '@custom/shared/components/Card';
 
 export const NotConfigured = () => (
   <Card>
diff --git a/dailyjs/recording/env.example b/custom/basic-call/env.example
similarity index 73%
rename from dailyjs/recording/env.example
rename to custom/basic-call/env.example
index 5ab7e03..b4eeffe 100644
--- a/dailyjs/recording/env.example
+++ b/custom/basic-call/env.example
@@ -6,3 +6,6 @@ DAILY_API_KEY=
 
 # Daily REST API endpoint
 DAILY_REST_DOMAIN=https://api.daily.co/v1
+
+# Run in demo mode (will create a demo room for you to try)
+DAILY_DEMO_MODE=0
\ No newline at end of file
diff --git a/dailyjs/basic-call/image.png b/custom/basic-call/image.png
similarity index 100%
rename from dailyjs/basic-call/image.png
rename to custom/basic-call/image.png
diff --git a/dailyjs/basic-call/index.js b/custom/basic-call/index.js
similarity index 100%
rename from dailyjs/basic-call/index.js
rename to custom/basic-call/index.js
diff --git a/dailyjs/basic-call/next.config.js b/custom/basic-call/next.config.js
similarity index 74%
rename from dailyjs/basic-call/next.config.js
rename to custom/basic-call/next.config.js
index d054cbd..81f29cd 100644
--- a/dailyjs/basic-call/next.config.js
+++ b/custom/basic-call/next.config.js
@@ -1,5 +1,5 @@
 const withPlugins = require('next-compose-plugins');
-const withTM = require('next-transpile-modules')(['@dailyjs/shared']);
+const withTM = require('next-transpile-modules')(['@custom/shared']);
 
 const packageJson = require('./package.json');
 
diff --git a/dailyjs/basic-call/package.json b/custom/basic-call/package.json
similarity index 70%
rename from dailyjs/basic-call/package.json
rename to custom/basic-call/package.json
index 495f694..f82188c 100644
--- a/dailyjs/basic-call/package.json
+++ b/custom/basic-call/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/basic-call",
+  "name": "@custom/basic-call",
   "description": "Basic Call Example",
   "version": "0.1.0",
   "private": true,
@@ -10,11 +10,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dailyjs/shared": "*",
-    "next": "^11.0.0",
-    "pluralize": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@custom/shared": "*",
+    "next": "^11.1.2",
+    "pluralize": "^8.0.0"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^4.1.0",
diff --git a/dailyjs/basic-call/pages/_app.js b/custom/basic-call/pages/_app.js
similarity index 83%
rename from dailyjs/basic-call/pages/_app.js
rename to custom/basic-call/pages/_app.js
index 790ea7a..d8a7a82 100644
--- a/dailyjs/basic-call/pages/_app.js
+++ b/custom/basic-call/pages/_app.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import GlobalHead from '@dailyjs/shared/components/GlobalHead';
-import GlobalStyle from '@dailyjs/shared/components/GlobalStyle';
+import GlobalStyle from '@custom/shared/components/GlobalStyle';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
 
@@ -10,7 +9,6 @@ function App({ Component, pageProps }) {
       <Head>
         <title>Daily - {process.env.PROJECT_TITLE}</title>
       </Head>
-      <GlobalHead />
       <GlobalStyle />
       <Component
         asides={App.asides}
diff --git a/custom/basic-call/pages/_document.js b/custom/basic-call/pages/_document.js
new file mode 100644
index 0000000..d57b011
--- /dev/null
+++ b/custom/basic-call/pages/_document.js
@@ -0,0 +1,23 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=optional"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/dailyjs/basic-call/pages/api/createRoom.js b/custom/basic-call/pages/api/createRoom.js
similarity index 92%
rename from dailyjs/basic-call/pages/api/createRoom.js
rename to custom/basic-call/pages/api/createRoom.js
index 1a67932..969d16e 100644
--- a/dailyjs/basic-call/pages/api/createRoom.js
+++ b/custom/basic-call/pages/api/createRoom.js
@@ -1,5 +1,5 @@
 export default async function handler(req, res) {
-  const { privacy, expiryMinutes } = req.body;
+  const { privacy, expiryMinutes, ...rest } = req.body;
 
   if (req.method === 'POST') {
     console.log(`Creating room on domain ${process.env.DAILY_DOMAIN}`);
@@ -16,7 +16,7 @@ export default async function handler(req, res) {
           exp: Math.round(Date.now() / 1000) + (expiryMinutes || 5) * 60, // expire in x minutes
           eject_at_room_exp: true,
           enable_knocking: privacy !== 'public',
-          enable_recording: 'local',
+          ...rest,
         },
       }),
     };
diff --git a/dailyjs/basic-call/pages/api/token.js b/custom/basic-call/pages/api/token.js
similarity index 100%
rename from dailyjs/basic-call/pages/api/token.js
rename to custom/basic-call/pages/api/token.js
diff --git a/dailyjs/basic-call/pages/index.js b/custom/basic-call/pages/index.js
similarity index 82%
rename from dailyjs/basic-call/pages/index.js
rename to custom/basic-call/pages/index.js
index d2c213b..6ba92ec 100644
--- a/dailyjs/basic-call/pages/index.js
+++ b/custom/basic-call/pages/index.js
@@ -1,15 +1,16 @@
 import React, { useState, useCallback } from 'react';
-import { CallProvider } from '@dailyjs/shared/contexts/CallProvider';
-import { MediaDeviceProvider } from '@dailyjs/shared/contexts/MediaDeviceProvider';
-import { ParticipantsProvider } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { TracksProvider } from '@dailyjs/shared/contexts/TracksProvider';
-import { UIStateProvider } from '@dailyjs/shared/contexts/UIStateProvider';
-import { WaitingRoomProvider } from '@dailyjs/shared/contexts/WaitingRoomProvider';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import { CallProvider } from '@custom/shared/contexts/CallProvider';
+import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
+import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
+import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
+import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
+import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
+import getDemoProps from '@custom/shared/lib/demoProps';
 import PropTypes from 'prop-types';
 import App from '../components/App';
-import { CreatingRoom } from '../components/CreatingRoom';
-import { Intro, NotConfigured } from '../components/Intro';
+import CreatingRoom from '../components/Prejoin/CreatingRoom';
+import Intro from '../components/Prejoin/Intro';
+import NotConfigured from '../components/Prejoin/NotConfigured';
 
 /**
  * Index page
@@ -22,7 +23,6 @@ import { Intro, NotConfigured } from '../components/Intro';
 export default function Index({
   domain,
   isConfigured = false,
-  predefinedRoom = '',
   forceFetchToken = false,
   forceOwner = false,
   subscribeToTracksAutomatically = true,
@@ -32,7 +32,7 @@ export default function Index({
   customTrayComponent,
   customAppComponent,
 }) {
-  const [roomName, setRoomName] = useState(predefinedRoom);
+  const [roomName, setRoomName] = useState();
   const [fetchingToken, setFetchingToken] = useState(false);
   const [token, setToken] = useState();
   const [tokenError, setTokenError] = useState();
@@ -137,7 +137,6 @@ export default function Index({
 
 Index.propTypes = {
   isConfigured: PropTypes.bool.isRequired,
-  predefinedRoom: PropTypes.string,
   domain: PropTypes.string,
   asides: PropTypes.arrayOf(PropTypes.func),
   modals: PropTypes.arrayOf(PropTypes.func),
diff --git a/dailyjs/basic-call/pages/not-found.js b/custom/basic-call/pages/not-found.js
similarity index 89%
rename from dailyjs/basic-call/pages/not-found.js
rename to custom/basic-call/pages/not-found.js
index 6a7b1f6..1d25fb7 100644
--- a/dailyjs/basic-call/pages/not-found.js
+++ b/custom/basic-call/pages/not-found.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MessageCard from '@dailyjs/shared/components/MessageCard';
+import MessageCard from '@custom/shared/components/MessageCard';
 
 export default function RoomNotFound() {
   return (
diff --git a/dailyjs/basic-call/public/assets/daily-logo-dark.svg b/custom/basic-call/public/assets/daily-logo-dark.svg
similarity index 100%
rename from dailyjs/basic-call/public/assets/daily-logo-dark.svg
rename to custom/basic-call/public/assets/daily-logo-dark.svg
diff --git a/dailyjs/basic-call/public/assets/daily-logo.svg b/custom/basic-call/public/assets/daily-logo.svg
similarity index 100%
rename from dailyjs/basic-call/public/assets/daily-logo.svg
rename to custom/basic-call/public/assets/daily-logo.svg
diff --git a/dailyjs/basic-call/public/assets/join.mp3 b/custom/basic-call/public/assets/join.mp3
similarity index 100%
rename from dailyjs/basic-call/public/assets/join.mp3
rename to custom/basic-call/public/assets/join.mp3
diff --git a/dailyjs/basic-call/public/assets/message.mp3 b/custom/basic-call/public/assets/message.mp3
similarity index 100%
rename from dailyjs/basic-call/public/assets/message.mp3
rename to custom/basic-call/public/assets/message.mp3
diff --git a/dailyjs/basic-call/public/assets/pattern-bg.png b/custom/basic-call/public/assets/pattern-bg.png
similarity index 100%
rename from dailyjs/basic-call/public/assets/pattern-bg.png
rename to custom/basic-call/public/assets/pattern-bg.png
diff --git a/dailyjs/flying-emojis/.babelrc b/custom/flying-emojis/.babelrc
similarity index 100%
rename from dailyjs/flying-emojis/.babelrc
rename to custom/flying-emojis/.babelrc
diff --git a/dailyjs/flying-emojis/README.md b/custom/flying-emojis/README.md
similarity index 89%
rename from dailyjs/flying-emojis/README.md
rename to custom/flying-emojis/README.md
index 4c7c69d..c46f833 100644
--- a/dailyjs/flying-emojis/README.md
+++ b/custom/flying-emojis/README.md
@@ -4,7 +4,7 @@
 
 ### Live example
 
-**[See it in action here ➡️](https://dailyjs-flying-emojis.vercel.app)**
+**[See it in action here ➡️](https://custom-flying-emojis.vercel.app)**
 
 ---
 
@@ -23,7 +23,7 @@ Please note: this demo is not currently mobile optimised
 mv env.example .env.local
 
 yarn
-yarn workspace @dailyjs/flying-emojis dev
+yarn workspace @custom/flying-emojis dev
 ```
 
 ## Deploy your own on Vercel
diff --git a/dailyjs/flying-emojis/components/App/App.js b/custom/flying-emojis/components/App.js
similarity index 54%
rename from dailyjs/flying-emojis/components/App/App.js
rename to custom/flying-emojis/components/App.js
index e006832..fcee52a 100644
--- a/dailyjs/flying-emojis/components/App/App.js
+++ b/custom/flying-emojis/components/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import App from '@dailyjs/basic-call/components/App';
-import FlyingEmojiOverlay from '../FlyingEmojis/FlyingEmojisOverlay';
+import App from '@custom/basic-call/components/App';
+import FlyingEmojiOverlay from './FlyingEmojisOverlay';
 
 export const AppWithEmojis = () => (
   <>
diff --git a/dailyjs/flying-emojis/components/FlyingEmojis/FlyingEmojisOverlay.js b/custom/flying-emojis/components/FlyingEmojisOverlay.js
similarity index 98%
rename from dailyjs/flying-emojis/components/FlyingEmojis/FlyingEmojisOverlay.js
rename to custom/flying-emojis/components/FlyingEmojisOverlay.js
index 68f0ff9..35b87d7 100644
--- a/dailyjs/flying-emojis/components/FlyingEmojis/FlyingEmojisOverlay.js
+++ b/custom/flying-emojis/components/FlyingEmojisOverlay.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useCallback } from 'react';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
 
 const EMOJI_MAP = {
   fire: '🔥',
diff --git a/dailyjs/flying-emojis/components/Tray/Tray.js b/custom/flying-emojis/components/Tray.js
similarity index 91%
rename from dailyjs/flying-emojis/components/Tray/Tray.js
rename to custom/flying-emojis/components/Tray.js
index 113de3d..2ee605f 100644
--- a/dailyjs/flying-emojis/components/Tray/Tray.js
+++ b/custom/flying-emojis/components/Tray.js
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
-import Button from '@dailyjs/shared/components/Button';
-import { TrayButton } from '@dailyjs/shared/components/Tray';
-import { ReactComponent as IconStar } from '@dailyjs/shared/icons/star-md.svg';
+import Button from '@custom/shared/components/Button';
+import { TrayButton } from '@custom/shared/components/Tray';
+import { ReactComponent as IconStar } from '@custom/shared/icons/star-md.svg';
 
 const COOLDOWN = 1500;
 
diff --git a/dailyjs/basic-call/env.example b/custom/flying-emojis/env.example
similarity index 100%
rename from dailyjs/basic-call/env.example
rename to custom/flying-emojis/env.example
diff --git a/dailyjs/flying-emojis/image.png b/custom/flying-emojis/image.png
similarity index 100%
rename from dailyjs/flying-emojis/image.png
rename to custom/flying-emojis/image.png
diff --git a/dailyjs/flying-emojis/index.js b/custom/flying-emojis/index.js
similarity index 100%
rename from dailyjs/flying-emojis/index.js
rename to custom/flying-emojis/index.js
diff --git a/dailyjs/pagination/next.config.js b/custom/flying-emojis/next.config.js
similarity index 84%
rename from dailyjs/pagination/next.config.js
rename to custom/flying-emojis/next.config.js
index 9a0a6ee..9140e28 100644
--- a/dailyjs/pagination/next.config.js
+++ b/custom/flying-emojis/next.config.js
@@ -1,7 +1,7 @@
 const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')([
-  '@dailyjs/shared',
-  '@dailyjs/basic-call',
+  '@custom/shared',
+  '@custom/basic-call',
 ]);
 
 const packageJson = require('./package.json');
diff --git a/dailyjs/flying-emojis/package.json b/custom/flying-emojis/package.json
similarity index 83%
rename from dailyjs/flying-emojis/package.json
rename to custom/flying-emojis/package.json
index a084b01..a3244d3 100644
--- a/dailyjs/flying-emojis/package.json
+++ b/custom/flying-emojis/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/flying-emojis",
+  "name": "@custom/flying-emojis",
   "description": "Basic Call + Flying Emojis",
   "version": "0.1.0",
   "private": true,
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dailyjs/basic-call": "*",
-    "@dailyjs/shared": "*",
+    "@custom/basic-call": "*",
+    "@custom/shared": "*",
     "next": "^11.0.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",
diff --git a/dailyjs/flying-emojis/pages/_app.js b/custom/flying-emojis/pages/_app.js
similarity index 81%
rename from dailyjs/flying-emojis/pages/_app.js
rename to custom/flying-emojis/pages/_app.js
index 16a9742..8f9ab26 100644
--- a/dailyjs/flying-emojis/pages/_app.js
+++ b/custom/flying-emojis/pages/_app.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import App from '@dailyjs/basic-call/pages/_app';
+import App from '@custom/basic-call/pages/_app';
 import AppWithEmojis from '../components/App';
 import Tray from '../components/Tray';
 
diff --git a/custom/flying-emojis/pages/_document.js b/custom/flying-emojis/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/flying-emojis/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/dailyjs/flying-emojis/pages/api b/custom/flying-emojis/pages/api
similarity index 100%
rename from dailyjs/flying-emojis/pages/api
rename to custom/flying-emojis/pages/api
diff --git a/dailyjs/flying-emojis/pages/index.js b/custom/flying-emojis/pages/index.js
similarity index 63%
rename from dailyjs/flying-emojis/pages/index.js
rename to custom/flying-emojis/pages/index.js
index d25e77e..84a3f53 100644
--- a/dailyjs/flying-emojis/pages/index.js
+++ b/custom/flying-emojis/pages/index.js
@@ -1,5 +1,5 @@
-import Index from '@dailyjs/basic-call/pages';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import Index from '@custom/basic-call/pages';
+import getDemoProps from '@custom/shared/lib/demoProps';
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
diff --git a/dailyjs/flying-emojis/public/assets/daily-logo-dark.svg b/custom/flying-emojis/public/assets/daily-logo-dark.svg
similarity index 100%
rename from dailyjs/flying-emojis/public/assets/daily-logo-dark.svg
rename to custom/flying-emojis/public/assets/daily-logo-dark.svg
diff --git a/dailyjs/flying-emojis/public/assets/daily-logo.svg b/custom/flying-emojis/public/assets/daily-logo.svg
similarity index 100%
rename from dailyjs/flying-emojis/public/assets/daily-logo.svg
rename to custom/flying-emojis/public/assets/daily-logo.svg
diff --git a/dailyjs/flying-emojis/public/assets/join.mp3 b/custom/flying-emojis/public/assets/join.mp3
similarity index 100%
rename from dailyjs/flying-emojis/public/assets/join.mp3
rename to custom/flying-emojis/public/assets/join.mp3
diff --git a/dailyjs/flying-emojis/public/assets/message.mp3 b/custom/flying-emojis/public/assets/message.mp3
similarity index 100%
rename from dailyjs/flying-emojis/public/assets/message.mp3
rename to custom/flying-emojis/public/assets/message.mp3
diff --git a/dailyjs/flying-emojis/public/assets/pattern-bg.png b/custom/flying-emojis/public/assets/pattern-bg.png
similarity index 100%
rename from dailyjs/flying-emojis/public/assets/pattern-bg.png
rename to custom/flying-emojis/public/assets/pattern-bg.png
diff --git a/dailyjs/live-streaming/.babelrc b/custom/pagination/.babelrc
similarity index 100%
rename from dailyjs/live-streaming/.babelrc
rename to custom/pagination/.babelrc
diff --git a/dailyjs/pagination/components/App/App.js b/custom/pagination/App.js
similarity index 71%
rename from dailyjs/pagination/components/App/App.js
rename to custom/pagination/App.js
index 317d450..4f873b8 100644
--- a/dailyjs/pagination/components/App/App.js
+++ b/custom/pagination/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import App from '@dailyjs/basic-call/components/App';
-import Room from '@dailyjs/basic-call/components/Room';
+import App from '@custom/basic-call/components/App';
+import Room from '@custom/basic-call/components/Room';
 import PaginatedVideoGrid from '../PaginatedVideoGrid';
 
 export const AppWithPagination = () => (
diff --git a/dailyjs/pagination/README.md b/custom/pagination/README.md
similarity index 96%
rename from dailyjs/pagination/README.md
rename to custom/pagination/README.md
index 89272f3..c4753cf 100644
--- a/dailyjs/pagination/README.md
+++ b/custom/pagination/README.md
@@ -4,7 +4,7 @@
 
 ### Live example
 
-**[See it in action here ➡️](https://dailyjs-pagination.vercel.app)**
+**[See it in action here ➡️](https://custom-pagination.vercel.app)**
 
 ---
 
@@ -22,7 +22,7 @@ Please note: this demo is not currently mobile optimised
 mv env.example .env.local
 
 yarn
-yarn workspace @dailyjs/live-streaming dev
+yarn workspace @custom/live-streaming dev
 ```
 
 Note: this example uses an additional env `MANUAL_TRACK_SUBS=1` that will disable [automatic track management](https://docs.daily.co/reference#%EF%B8%8F-setsubscribetotracksautomatically).
diff --git a/custom/pagination/components/App.js b/custom/pagination/components/App.js
new file mode 100644
index 0000000..5c68179
--- /dev/null
+++ b/custom/pagination/components/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import App from '@custom/basic-call/components/App';
+import Room from '@custom/basic-call/components/Call/Room';
+import PaginatedVideoGrid from './PaginatedVideoGrid';
+
+export const AppWithPagination = () => (
+  <App
+    customComponentForState={{
+      room: <Room MainComponent={PaginatedVideoGrid} />,
+    }}
+  />
+);
+
+export default AppWithPagination;
diff --git a/dailyjs/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js b/custom/pagination/components/PaginatedVideoGrid.js
similarity index 93%
rename from dailyjs/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js
rename to custom/pagination/components/PaginatedVideoGrid.js
index 4d3661e..20b5cbe 100644
--- a/dailyjs/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js
+++ b/custom/pagination/components/PaginatedVideoGrid.js
@@ -5,19 +5,19 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { Button } from '@dailyjs/shared/components/Button';
-import Tile from '@dailyjs/shared/components/Tile';
+import { Button } from '@custom/shared/components/Button';
+import Tile from '@custom/shared/components/Tile';
 import {
   DEFAULT_ASPECT_RATIO,
   MEETING_STATE_JOINED,
-} from '@dailyjs/shared/constants';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { isLocalId } from '@dailyjs/shared/contexts/participantsState';
-import { useActiveSpeaker } from '@dailyjs/shared/hooks/useActiveSpeaker';
-import { useCamSubscriptions } from '@dailyjs/shared/hooks/useCamSubscriptions';
-import { ReactComponent as IconArrow } from '@dailyjs/shared/icons/raquo-md.svg';
-import sortByKey from '@dailyjs/shared/lib/sortByKey';
+} from '@custom/shared/constants';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { isLocalId } from '@custom/shared/contexts/participantsState';
+import { useActiveSpeaker } from '@custom/shared/hooks/useActiveSpeaker';
+import { useCamSubscriptions } from '@custom/shared/hooks/useCamSubscriptions';
+import { ReactComponent as IconArrow } from '@custom/shared/icons/raquo-md.svg';
+import sortByKey from '@custom/shared/lib/sortByKey';
 import PropTypes from 'prop-types';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
diff --git a/dailyjs/pagination/components/Tray/Tray.js b/custom/pagination/components/Tray.js
similarity index 60%
rename from dailyjs/pagination/components/Tray/Tray.js
rename to custom/pagination/components/Tray.js
index e04e896..2099856 100644
--- a/dailyjs/pagination/components/Tray/Tray.js
+++ b/custom/pagination/components/Tray.js
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { TrayButton } from '@dailyjs/shared/components/Tray';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { ReactComponent as IconAdd } from '@dailyjs/shared/icons/add-md.svg';
+import { TrayButton } from '@custom/shared/components/Tray';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { ReactComponent as IconAdd } from '@custom/shared/icons/add-md.svg';
 
 export const Tray = () => {
   const { callObject } = useCallState();
diff --git a/dailyjs/pagination/env.example b/custom/pagination/env.example
similarity index 100%
rename from dailyjs/pagination/env.example
rename to custom/pagination/env.example
diff --git a/dailyjs/pagination/image.png b/custom/pagination/image.png
similarity index 100%
rename from dailyjs/pagination/image.png
rename to custom/pagination/image.png
diff --git a/dailyjs/flying-emojis/next.config.js b/custom/pagination/next.config.js
similarity index 84%
rename from dailyjs/flying-emojis/next.config.js
rename to custom/pagination/next.config.js
index 9a0a6ee..9140e28 100644
--- a/dailyjs/flying-emojis/next.config.js
+++ b/custom/pagination/next.config.js
@@ -1,7 +1,7 @@
 const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')([
-  '@dailyjs/shared',
-  '@dailyjs/basic-call',
+  '@custom/shared',
+  '@custom/basic-call',
 ]);
 
 const packageJson = require('./package.json');
diff --git a/dailyjs/pagination/package.json b/custom/pagination/package.json
similarity index 83%
rename from dailyjs/pagination/package.json
rename to custom/pagination/package.json
index 796128e..eff1894 100644
--- a/dailyjs/pagination/package.json
+++ b/custom/pagination/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/pagination",
+  "name": "@custom/pagination",
   "description": "Basic Call + Pagination",
   "version": "0.1.0",
   "private": true,
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dailyjs/shared": "*",
-    "@dailyjs/basic-call": "*",
+    "@custom/shared": "*",
+    "@custom/basic-call": "*",
     "next": "^11.0.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",
diff --git a/dailyjs/pagination/pages/_app.js b/custom/pagination/pages/_app.js
similarity index 81%
rename from dailyjs/pagination/pages/_app.js
rename to custom/pagination/pages/_app.js
index 5ffe4b9..d819eae 100644
--- a/dailyjs/pagination/pages/_app.js
+++ b/custom/pagination/pages/_app.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import App from '@dailyjs/basic-call/pages/_app';
+import App from '@custom/basic-call/pages/_app';
 import AppWithPagination from '../components/App';
 
 import Tray from '../components/Tray';
diff --git a/custom/pagination/pages/_document.js b/custom/pagination/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/pagination/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/dailyjs/live-streaming/pages/api b/custom/pagination/pages/api
similarity index 100%
rename from dailyjs/live-streaming/pages/api
rename to custom/pagination/pages/api
diff --git a/dailyjs/pagination/pages/index.js b/custom/pagination/pages/index.js
similarity index 67%
rename from dailyjs/pagination/pages/index.js
rename to custom/pagination/pages/index.js
index 2668138..f61b429 100644
--- a/dailyjs/pagination/pages/index.js
+++ b/custom/pagination/pages/index.js
@@ -1,5 +1,5 @@
-import Index from '@dailyjs/basic-call/pages';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import Index from '@custom/basic-call/pages';
+import getDemoProps from '@custom/shared/lib/demoProps';
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
diff --git a/dailyjs/live-streaming/public/assets/daily-logo-dark.svg b/custom/pagination/public/assets/daily-logo-dark.svg
similarity index 100%
rename from dailyjs/live-streaming/public/assets/daily-logo-dark.svg
rename to custom/pagination/public/assets/daily-logo-dark.svg
diff --git a/dailyjs/live-streaming/public/assets/daily-logo.svg b/custom/pagination/public/assets/daily-logo.svg
similarity index 100%
rename from dailyjs/live-streaming/public/assets/daily-logo.svg
rename to custom/pagination/public/assets/daily-logo.svg
diff --git a/dailyjs/live-streaming/public/assets/join.mp3 b/custom/pagination/public/assets/join.mp3
similarity index 100%
rename from dailyjs/live-streaming/public/assets/join.mp3
rename to custom/pagination/public/assets/join.mp3
diff --git a/dailyjs/live-streaming/public/assets/message.mp3 b/custom/pagination/public/assets/message.mp3
similarity index 100%
rename from dailyjs/live-streaming/public/assets/message.mp3
rename to custom/pagination/public/assets/message.mp3
diff --git a/dailyjs/live-streaming/public/assets/pattern-bg.png b/custom/pagination/public/assets/pattern-bg.png
similarity index 100%
rename from dailyjs/live-streaming/public/assets/pattern-bg.png
rename to custom/pagination/public/assets/pattern-bg.png
diff --git a/dailyjs/pagination/.babelrc b/custom/recording/.babelrc
similarity index 100%
rename from dailyjs/pagination/.babelrc
rename to custom/recording/.babelrc
diff --git a/dailyjs/recording/README.md b/custom/recording/README.md
similarity index 97%
rename from dailyjs/recording/README.md
rename to custom/recording/README.md
index dd0aa59..523abe6 100644
--- a/dailyjs/recording/README.md
+++ b/custom/recording/README.md
@@ -22,7 +22,7 @@ Please note: this demo is not currently mobile optimised
 mv env.example .env.local
 
 yarn
-yarn workspace @dailyjs/recording dev
+yarn workspace @custom/recording dev
 ```
 
 ### How does this demo work?
diff --git a/dailyjs/recording/components/App/App.js b/custom/recording/components/App.js
similarity index 64%
rename from dailyjs/recording/components/App/App.js
rename to custom/recording/components/App.js
index 393d2ad..f79f4b5 100644
--- a/dailyjs/recording/components/App/App.js
+++ b/custom/recording/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import App from '@dailyjs/basic-call/components/App';
-import { RecordingProvider } from '../../contexts/RecordingProvider';
+import App from '@custom/basic-call/components/App';
+import { RecordingProvider } from '../contexts/RecordingProvider';
 
 // Extend our basic call app component with the recording context
 export const AppWithRecording = () => (
diff --git a/dailyjs/recording/components/RecordingModal/RecordingModal.js b/custom/recording/components/RecordingModal.js
similarity index 85%
rename from dailyjs/recording/components/RecordingModal/RecordingModal.js
rename to custom/recording/components/RecordingModal.js
index db1f108..e89efa4 100644
--- a/dailyjs/recording/components/RecordingModal/RecordingModal.js
+++ b/custom/recording/components/RecordingModal.js
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
-import { Button } from '@dailyjs/shared/components/Button';
-import { CardBody } from '@dailyjs/shared/components/Card';
-import Modal from '@dailyjs/shared/components/Modal';
-import Well from '@dailyjs/shared/components/Well';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import Button from '@custom/shared/components/Button';
+import { CardBody } from '@custom/shared/components/Card';
+import Modal from '@custom/shared/components/Modal';
+import Well from '@custom/shared/components/Well';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import {
   RECORDING_COUNTDOWN_1,
   RECORDING_COUNTDOWN_2,
@@ -15,7 +15,7 @@ import {
   RECORDING_TYPE_CLOUD,
   RECORDING_UPLOADING,
   useRecording,
-} from '../../contexts/RecordingProvider';
+} from '../contexts/RecordingProvider';
 
 export const RECORDING_MODAL = 'recording';
 
@@ -75,12 +75,13 @@ export const RecordingModal = () => {
       isOpen={currentModals[RECORDING_MODAL]}
       onClose={() => closeModal(RECORDING_MODAL)}
       actions={[
-        <Button fullWidth variant="outline">
+        <Button key="close" fullWidth variant="outline">
           Close
         </Button>,
         <Button
           fullWidth
           disabled={!disabled}
+          key="record"
           onClick={() => handleRecordingClick()}
         >
           {renderButtonLabel()}
diff --git a/dailyjs/recording/components/Tray/Tray.js b/custom/recording/components/Tray.js
similarity index 72%
rename from dailyjs/recording/components/Tray/Tray.js
rename to custom/recording/components/Tray.js
index 6eeba01..025444f 100644
--- a/dailyjs/recording/components/Tray/Tray.js
+++ b/custom/recording/components/Tray.js
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 
-import { TrayButton } from '@dailyjs/shared/components/Tray';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { ReactComponent as IconRecord } from '@dailyjs/shared/icons/record-md.svg';
+import { TrayButton } from '@custom/shared/components/Tray';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { ReactComponent as IconRecord } from '@custom/shared/icons/record-md.svg';
 
 import {
   RECORDING_ERROR,
@@ -10,8 +10,8 @@ import {
   RECORDING_SAVED,
   RECORDING_UPLOADING,
   useRecording,
-} from '../../contexts/RecordingProvider';
-import { RECORDING_MODAL } from '../RecordingModal';
+} from '../contexts/RecordingProvider';
+import { RECORDING_MODAL } from './RecordingModal';
 
 export const Tray = () => {
   const { openModal } = useUIState();
diff --git a/dailyjs/recording/contexts/RecordingProvider.js b/custom/recording/contexts/RecordingProvider.js
similarity index 96%
rename from dailyjs/recording/contexts/RecordingProvider.js
rename to custom/recording/contexts/RecordingProvider.js
index e56a3f0..326bb37 100644
--- a/dailyjs/recording/contexts/RecordingProvider.js
+++ b/custom/recording/contexts/RecordingProvider.js
@@ -6,13 +6,13 @@ import React, {
   useState,
 } from 'react';
 
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import {
   CALL_STATE_REDIRECTING,
   CALL_STATE_JOINED,
-} from '@dailyjs/shared/contexts/useCallMachine';
+} from '@custom/shared/contexts/useCallMachine';
 import PropTypes from 'prop-types';
 import { useDeepCompareEffect } from 'use-deep-compare';
 
diff --git a/dailyjs/flying-emojis/env.example b/custom/recording/env.example
similarity index 100%
rename from dailyjs/flying-emojis/env.example
rename to custom/recording/env.example
diff --git a/dailyjs/recording/image.png b/custom/recording/image.png
similarity index 100%
rename from dailyjs/recording/image.png
rename to custom/recording/image.png
diff --git a/dailyjs/live-streaming/index.js b/custom/recording/index.js
similarity index 100%
rename from dailyjs/live-streaming/index.js
rename to custom/recording/index.js
diff --git a/dailyjs/recording/next.config.js b/custom/recording/next.config.js
similarity index 84%
rename from dailyjs/recording/next.config.js
rename to custom/recording/next.config.js
index 9a0a6ee..9140e28 100644
--- a/dailyjs/recording/next.config.js
+++ b/custom/recording/next.config.js
@@ -1,7 +1,7 @@
 const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')([
-  '@dailyjs/shared',
-  '@dailyjs/basic-call',
+  '@custom/shared',
+  '@custom/basic-call',
 ]);
 
 const packageJson = require('./package.json');
diff --git a/dailyjs/recording/package.json b/custom/recording/package.json
similarity index 84%
rename from dailyjs/recording/package.json
rename to custom/recording/package.json
index 48a1257..6f511f2 100644
--- a/dailyjs/recording/package.json
+++ b/custom/recording/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/recording",
+  "name": "@custom/recording",
   "description": "Basic Call + Recording",
   "version": "0.1.0",
   "private": true,
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dailyjs/shared": "*",
-    "@dailyjs/basic-call": "*",
+    "@custom/shared": "*",
+    "@custom/basic-call": "*",
     "next": "^11.0.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",
diff --git a/dailyjs/recording/pages/_app.js b/custom/recording/pages/_app.js
similarity index 86%
rename from dailyjs/recording/pages/_app.js
rename to custom/recording/pages/_app.js
index df733a8..7636341 100644
--- a/dailyjs/recording/pages/_app.js
+++ b/custom/recording/pages/_app.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import App from '@dailyjs/basic-call/pages/_app';
+import App from '@custom/basic-call/pages/_app';
 import AppWithRecording from '../components/App';
 
 import { RecordingModal } from '../components/RecordingModal';
diff --git a/custom/recording/pages/_document.js b/custom/recording/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/recording/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/dailyjs/pagination/pages/api b/custom/recording/pages/api
similarity index 100%
rename from dailyjs/pagination/pages/api
rename to custom/recording/pages/api
diff --git a/dailyjs/live-streaming/pages/index.js b/custom/recording/pages/index.js
similarity index 67%
rename from dailyjs/live-streaming/pages/index.js
rename to custom/recording/pages/index.js
index 2668138..f61b429 100644
--- a/dailyjs/live-streaming/pages/index.js
+++ b/custom/recording/pages/index.js
@@ -1,5 +1,5 @@
-import Index from '@dailyjs/basic-call/pages';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import Index from '@custom/basic-call/pages';
+import getDemoProps from '@custom/shared/lib/demoProps';
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
diff --git a/dailyjs/pagination/public/assets/daily-logo-dark.svg b/custom/recording/public/assets/daily-logo-dark.svg
similarity index 100%
rename from dailyjs/pagination/public/assets/daily-logo-dark.svg
rename to custom/recording/public/assets/daily-logo-dark.svg
diff --git a/dailyjs/pagination/public/assets/daily-logo.svg b/custom/recording/public/assets/daily-logo.svg
similarity index 100%
rename from dailyjs/pagination/public/assets/daily-logo.svg
rename to custom/recording/public/assets/daily-logo.svg
diff --git a/dailyjs/pagination/public/assets/join.mp3 b/custom/recording/public/assets/join.mp3
similarity index 100%
rename from dailyjs/pagination/public/assets/join.mp3
rename to custom/recording/public/assets/join.mp3
diff --git a/dailyjs/pagination/public/assets/message.mp3 b/custom/recording/public/assets/message.mp3
similarity index 100%
rename from dailyjs/pagination/public/assets/message.mp3
rename to custom/recording/public/assets/message.mp3
diff --git a/dailyjs/pagination/public/assets/pattern-bg.png b/custom/recording/public/assets/pattern-bg.png
similarity index 100%
rename from dailyjs/pagination/public/assets/pattern-bg.png
rename to custom/recording/public/assets/pattern-bg.png
diff --git a/dailyjs/shared/components/Aside/Aside.js b/custom/shared/components/Aside/Aside.js
similarity index 97%
rename from dailyjs/shared/components/Aside/Aside.js
rename to custom/shared/components/Aside/Aside.js
index 59fa9c3..4cf7f2c 100644
--- a/dailyjs/shared/components/Aside/Aside.js
+++ b/custom/shared/components/Aside/Aside.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ReactComponent as IconClose } from '../../icons/close-sm.svg';
-import { Button } from '../Button';
+import Button from '../Button';
 
 export const ASIDE_WIDTH = 380;
 
diff --git a/custom/shared/components/Aside/NetworkAside.js b/custom/shared/components/Aside/NetworkAside.js
new file mode 100644
index 0000000..0f4d61c
--- /dev/null
+++ b/custom/shared/components/Aside/NetworkAside.js
@@ -0,0 +1,107 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { Aside } from '@custom/shared/components/Aside';
+import { useCallState } from '../../contexts/CallProvider';
+import { useUIState } from '../../contexts/UIStateProvider';
+import Capsule from '../Capsule';
+
+export const NETWORK_ASIDE = 'network';
+
+const NETWORK_QUALITY_LABELS = {
+  low: 'Low',
+  'very-low': 'Very Low',
+  good: 'Good',
+};
+
+export const NetworkAside = () => {
+  const { callObject } = useCallState();
+  const { showAside, setShowAside } = useUIState();
+  const [networkStats, setNetworkStats] = useState();
+
+  const updateStats = useCallback(async () => {
+    setNetworkStats(await callObject.getNetworkStats());
+  }, [callObject]);
+
+  useEffect(() => {
+    if (!callObject) {
+      return;
+    }
+
+    updateStats();
+
+    const i = setInterval(updateStats, 2000);
+
+    return () => clearInterval(i);
+  }, [callObject, updateStats]);
+
+  const downloadKbs = useMemo(
+    () =>
+      Math.round(
+        (networkStats?.stats?.latest?.videoRecvBitsPerSecond ?? 0) / 1000
+      ),
+    [networkStats]
+  );
+
+  const uploadKbs = useMemo(
+    () =>
+      Math.round(
+        (networkStats?.stats?.latest?.videoSendBitsPerSecond ?? 0) / 1000
+      ),
+    [networkStats]
+  );
+
+  if (!showAside || showAside !== NETWORK_ASIDE) {
+    return null;
+  }
+
+  return (
+    <Aside onClose={() => setShowAside(false)}>
+      <div className="network-aside">
+        {networkStats ? (
+          <>
+            <div className="panel">
+              <h4>Packet Loss:</h4>
+              Your network quality is:
+              <Capsule variant="success">
+                {NETWORK_QUALITY_LABELS[networkStats.threshold]}
+              </Capsule>
+            </div>
+            <div className="panel">
+              <h4>Download rate:</h4>
+              {downloadKbs} kbps
+            </div>
+            <div className="panel">
+              <h4>Upload rate:</h4>
+              {uploadKbs} kbps
+            </div>
+            <div className="note">
+              Download and upload rates reflect bandwidth used by this call.
+              Updated every 2 seconds.
+            </div>
+          </>
+        ) : (
+          <>Fetching network stats...</>
+        )}
+        <style jsx>{`
+          .panel {
+            background-color: var(--gray-wash);
+            border-radius: var(--radius-sm);
+            padding: var(--spacing-sm);
+            margin: var(--spacing-xxs);
+          }
+
+          .panel h4 {
+            margin: 0 0 var(--spacing-xxs) 0;
+          }
+
+          .note {
+            margin: var(--spacing-xxs);
+            color: var(--text-mid);
+            font-size: 0.875rem;
+          }
+        `}</style>
+      </div>
+    </Aside>
+  );
+};
+
+export default NetworkAside;
diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/custom/shared/components/Aside/PeopleAside.js
similarity index 90%
rename from dailyjs/shared/components/Aside/PeopleAside.js
rename to custom/shared/components/Aside/PeopleAside.js
index b595bad..d5dc374 100644
--- a/dailyjs/shared/components/Aside/PeopleAside.js
+++ b/custom/shared/components/Aside/PeopleAside.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import Aside from '@dailyjs/shared/components/Aside';
-import { ReactComponent as IconCamOff } from '@dailyjs/shared/icons/camera-off-sm.svg';
-import { ReactComponent as IconCamOn } from '@dailyjs/shared/icons/camera-on-sm.svg';
-import { ReactComponent as IconMicOff } from '@dailyjs/shared/icons/mic-off-sm.svg';
-import { ReactComponent as IconMicOn } from '@dailyjs/shared/icons/mic-on-sm.svg';
+import { Aside } from '@custom/shared/components/Aside';
+import { ReactComponent as IconCamOff } from '@custom/shared/icons/camera-off-sm.svg';
+import { ReactComponent as IconCamOn } from '@custom/shared/icons/camera-on-sm.svg';
+import { ReactComponent as IconMicOff } from '@custom/shared/icons/mic-off-sm.svg';
+import { ReactComponent as IconMicOn } from '@custom/shared/icons/mic-on-sm.svg';
 import PropTypes from 'prop-types';
 import { useCallState } from '../../contexts/CallProvider';
 import { useParticipants } from '../../contexts/ParticipantsProvider';
 import { useUIState } from '../../contexts/UIStateProvider';
-import { Button } from '../Button';
+import Button from '../Button';
 
 export const PEOPLE_ASIDE = 'people';
 
diff --git a/dailyjs/shared/components/Aside/index.js b/custom/shared/components/Aside/index.js
similarity index 62%
rename from dailyjs/shared/components/Aside/index.js
rename to custom/shared/components/Aside/index.js
index ab85567..b21056d 100644
--- a/dailyjs/shared/components/Aside/index.js
+++ b/custom/shared/components/Aside/index.js
@@ -1,3 +1,3 @@
-export { Aside as default } from './Aside';
 export { Aside } from './Aside';
 export { PeopleAside } from './PeopleAside';
+export { NetworkAside } from './NetworkAside';
diff --git a/dailyjs/shared/components/Audio/Audio.js b/custom/shared/components/Audio/Audio.js
similarity index 97%
rename from dailyjs/shared/components/Audio/Audio.js
rename to custom/shared/components/Audio/Audio.js
index 931ee56..a806340 100644
--- a/dailyjs/shared/components/Audio/Audio.js
+++ b/custom/shared/components/Audio/Audio.js
@@ -8,7 +8,7 @@
  * into into a single audio node using the CombinedAudioTrack component
  */
 import React, { useEffect, useMemo } from 'react';
-import { useTracks } from '@dailyjs/shared/contexts/TracksProvider';
+import { useTracks } from '@custom/shared/contexts/TracksProvider';
 import Bowser from 'bowser';
 import { Portal } from 'react-portal';
 import AudioTrack from './AudioTrack';
diff --git a/custom/shared/components/Audio/AudioTrack.js b/custom/shared/components/Audio/AudioTrack.js
new file mode 100644
index 0000000..82b22db
--- /dev/null
+++ b/custom/shared/components/Audio/AudioTrack.js
@@ -0,0 +1,42 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const AudioTrack = ({ track }) => {
+  const audioRef = useRef(null);
+
+  useEffect(() => {
+    if (!audioRef.current) return false;
+    let playTimeout;
+
+    const handleCanPlay = () => {
+      playTimeout = setTimeout(() => {
+        console.log('Unable to autoplay audio element');
+      }, 1500);
+    };
+    const handlePlay = () => {
+      clearTimeout(playTimeout);
+    };
+    audioRef.current.addEventListener('canplay', handleCanPlay);
+    audioRef.current.addEventListener('play', handlePlay);
+    audioRef.current.srcObject = new MediaStream([track]);
+
+    const audioEl = audioRef.current;
+
+    return () => {
+      audioEl?.removeEventListener('canplay', handleCanPlay);
+      audioEl?.removeEventListener('play', handlePlay);
+    };
+  }, [track]);
+
+  return track ? (
+    <audio autoPlay playsInline ref={audioRef}>
+      <track kind="captions" />
+    </audio>
+  ) : null;
+};
+
+AudioTrack.propTypes = {
+  track: PropTypes.object,
+};
+
+export default AudioTrack;
diff --git a/dailyjs/shared/components/Audio/CombinedAudioTrack.js b/custom/shared/components/Audio/CombinedAudioTrack.js
similarity index 100%
rename from dailyjs/shared/components/Audio/CombinedAudioTrack.js
rename to custom/shared/components/Audio/CombinedAudioTrack.js
diff --git a/custom/shared/components/Audio/index.js b/custom/shared/components/Audio/index.js
new file mode 100644
index 0000000..2fc98bb
--- /dev/null
+++ b/custom/shared/components/Audio/index.js
@@ -0,0 +1,3 @@
+export { Audio } from './Audio';
+export { AudioTrack } from './AudioTrack';
+export { CombinedAudioTrack } from './CombinedAudioTrack';
diff --git a/dailyjs/shared/components/Button/Button.js b/custom/shared/components/Button/Button.js
similarity index 100%
rename from dailyjs/shared/components/Button/Button.js
rename to custom/shared/components/Button/Button.js
diff --git a/dailyjs/shared/components/Button/index.js b/custom/shared/components/Button/index.js
similarity index 56%
rename from dailyjs/shared/components/Button/index.js
rename to custom/shared/components/Button/index.js
index e229288..3fa135d 100644
--- a/dailyjs/shared/components/Button/index.js
+++ b/custom/shared/components/Button/index.js
@@ -1,2 +1 @@
-export { Button } from './Button';
 export { Button as default } from './Button';
diff --git a/custom/shared/components/Capsule/Capsule.js b/custom/shared/components/Capsule/Capsule.js
new file mode 100644
index 0000000..09362b0
--- /dev/null
+++ b/custom/shared/components/Capsule/Capsule.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+export const Capsule = ({ children, variant }) => (
+  <span className={classNames('capsule', variant)}>
+    {children}
+    <style jsx>{`
+      display: inline-flex;
+      padding: 4px 6px;
+      margin: 0 6px;
+      align-items: center;
+      line-height: 1;
+      justify-content: center;
+      border-radius: 5px;
+      font-size: 0.75rem;
+      font-weight: var(--weight-bold);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+
+      .capsule.success {
+        background-color: var(--green-default);
+        color: #ffffff;
+      }
+      .capsule.warning {
+        background-color: var(--secondary-default);
+        color: #ffffff;
+      }
+      .capsule.error {
+        background-color: var(--red-default);
+        color: #ffffff;
+      }
+    `}</style>
+  </span>
+);
+
+Capsule.propTypes = {
+  children: PropTypes.node,
+  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']),
+};
+
+export default Capsule;
diff --git a/custom/shared/components/Capsule/index.js b/custom/shared/components/Capsule/index.js
new file mode 100644
index 0000000..eb1b21c
--- /dev/null
+++ b/custom/shared/components/Capsule/index.js
@@ -0,0 +1 @@
+export { Capsule as default } from './Capsule';
diff --git a/dailyjs/shared/components/Card/Card.js b/custom/shared/components/Card/Card.js
similarity index 100%
rename from dailyjs/shared/components/Card/Card.js
rename to custom/shared/components/Card/Card.js
diff --git a/dailyjs/shared/components/Card/index.js b/custom/shared/components/Card/index.js
similarity index 100%
rename from dailyjs/shared/components/Card/index.js
rename to custom/shared/components/Card/index.js
diff --git a/dailyjs/shared/components/DeviceSelect/DeviceSelect.js b/custom/shared/components/DeviceSelect/DeviceSelect.js
similarity index 94%
rename from dailyjs/shared/components/DeviceSelect/DeviceSelect.js
rename to custom/shared/components/DeviceSelect/DeviceSelect.js
index c089280..f0b0153 100644
--- a/dailyjs/shared/components/DeviceSelect/DeviceSelect.js
+++ b/custom/shared/components/DeviceSelect/DeviceSelect.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { useMediaDevices } from '@dailyjs/shared/contexts/MediaDeviceProvider';
-import { Field } from '../Field';
+import { useMediaDevices } from '@custom/shared/contexts/MediaDeviceProvider';
+import Field from '../Field';
 import { SelectInput } from '../Input';
 
 export const DeviceSelect = () => {
diff --git a/dailyjs/shared/components/DeviceSelect/index.js b/custom/shared/components/DeviceSelect/index.js
similarity index 55%
rename from dailyjs/shared/components/DeviceSelect/index.js
rename to custom/shared/components/DeviceSelect/index.js
index 8929c5c..4326925 100644
--- a/dailyjs/shared/components/DeviceSelect/index.js
+++ b/custom/shared/components/DeviceSelect/index.js
@@ -1,2 +1 @@
 export { DeviceSelect as default } from './DeviceSelect';
-export { DeviceSelect } from './DeviceSelect';
diff --git a/dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal.js b/custom/shared/components/DeviceSelectModal/DeviceSelectModal.js
similarity index 57%
rename from dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal.js
rename to custom/shared/components/DeviceSelectModal/DeviceSelectModal.js
index 926ba85..f208dc8 100644
--- a/dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal.js
+++ b/custom/shared/components/DeviceSelectModal/DeviceSelectModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import Modal from '@dailyjs/shared/components/Modal';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { Button } from '../Button';
-import { DeviceSelect } from '../DeviceSelect';
+import Modal from '@custom/shared/components/Modal';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import Button from '../Button';
+import DeviceSelect from '../DeviceSelect';
 
 export const DEVICE_MODAL = 'device';
 
@@ -15,10 +15,12 @@ export const DeviceSelectModal = () => {
       isOpen={currentModals[DEVICE_MODAL]}
       onClose={() => closeModal(DEVICE_MODAL)}
       actions={[
-        <Button fullWidth variant="outline">
+        <Button key="close" fullWidth variant="outline">
           Cancel
         </Button>,
-        <Button fullWidth>Update</Button>,
+        <Button key="update" fullWidth>
+          Update
+        </Button>,
       ]}
     >
       <DeviceSelect />
diff --git a/dailyjs/shared/components/DeviceSelectModal/index.js b/custom/shared/components/DeviceSelectModal/index.js
similarity index 61%
rename from dailyjs/shared/components/DeviceSelectModal/index.js
rename to custom/shared/components/DeviceSelectModal/index.js
index 22feecd..60adbfc 100644
--- a/dailyjs/shared/components/DeviceSelectModal/index.js
+++ b/custom/shared/components/DeviceSelectModal/index.js
@@ -1,3 +1,2 @@
-export { DeviceSelectModal as default } from './DeviceSelectModal';
 export { DeviceSelectModal } from './DeviceSelectModal';
 export { DEVICE_MODAL } from './DeviceSelectModal';
diff --git a/dailyjs/shared/components/ExpiryTimer/ExpiryTimer.js b/custom/shared/components/ExpiryTimer/ExpiryTimer.js
similarity index 100%
rename from dailyjs/shared/components/ExpiryTimer/ExpiryTimer.js
rename to custom/shared/components/ExpiryTimer/ExpiryTimer.js
diff --git a/dailyjs/shared/components/ExpiryTimer/index.js b/custom/shared/components/ExpiryTimer/index.js
similarity index 100%
rename from dailyjs/shared/components/ExpiryTimer/index.js
rename to custom/shared/components/ExpiryTimer/index.js
diff --git a/dailyjs/shared/components/Field/Field.js b/custom/shared/components/Field/Field.js
similarity index 100%
rename from dailyjs/shared/components/Field/Field.js
rename to custom/shared/components/Field/Field.js
diff --git a/dailyjs/shared/components/Field/index.js b/custom/shared/components/Field/index.js
similarity index 57%
rename from dailyjs/shared/components/Field/index.js
rename to custom/shared/components/Field/index.js
index 5308bf3..b5baff8 100644
--- a/dailyjs/shared/components/Field/index.js
+++ b/custom/shared/components/Field/index.js
@@ -1,2 +1 @@
 export { Field as default } from './Field';
-export { Field } from './Field';
diff --git a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js b/custom/shared/components/GlobalStyle/GlobalStyle.js
similarity index 100%
rename from dailyjs/shared/components/GlobalStyle/GlobalStyle.js
rename to custom/shared/components/GlobalStyle/GlobalStyle.js
diff --git a/dailyjs/shared/components/GlobalStyle/index.js b/custom/shared/components/GlobalStyle/index.js
similarity index 100%
rename from dailyjs/shared/components/GlobalStyle/index.js
rename to custom/shared/components/GlobalStyle/index.js
diff --git a/dailyjs/shared/components/HairCheck/HairCheck.js b/custom/shared/components/HairCheck/HairCheck.js
similarity index 91%
rename from dailyjs/shared/components/HairCheck/HairCheck.js
rename to custom/shared/components/HairCheck/HairCheck.js
index e07307e..4646036 100644
--- a/dailyjs/shared/components/HairCheck/HairCheck.js
+++ b/custom/shared/components/HairCheck/HairCheck.js
@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import Button from '@dailyjs/shared/components/Button';
-import { DEVICE_MODAL } from '@dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal';
-import { TextInput } from '@dailyjs/shared/components/Input';
-import Loader from '@dailyjs/shared/components/Loader';
-import { MuteButton } from '@dailyjs/shared/components/MuteButtons';
-import { Tile } from '@dailyjs/shared/components/Tile';
-import { ACCESS_STATE_LOBBY } from '@dailyjs/shared/constants';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useMediaDevices } from '@dailyjs/shared/contexts/MediaDeviceProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import Button from '@custom/shared/components/Button';
+import { DEVICE_MODAL } from '@custom/shared/components/DeviceSelectModal/DeviceSelectModal';
+import { TextInput } from '@custom/shared/components/Input';
+import Loader from '@custom/shared/components/Loader';
+import MuteButton from '@custom/shared/components/MuteButton';
+import Tile from '@custom/shared/components/Tile';
+import { ACCESS_STATE_LOBBY } from '@custom/shared/constants';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useMediaDevices } from '@custom/shared/contexts/MediaDeviceProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import {
   DEVICE_STATE_BLOCKED,
   DEVICE_STATE_NOT_FOUND,
@@ -17,8 +17,8 @@ import {
   DEVICE_STATE_PENDING,
   DEVICE_STATE_LOADING,
   DEVICE_STATE_GRANTED,
-} from '@dailyjs/shared/contexts/useDevices';
-import IconSettings from '@dailyjs/shared/icons/settings-sm.svg';
+} from '@custom/shared/contexts/useDevices';
+import IconSettings from '@custom/shared/icons/settings-sm.svg';
 
 import { useDeepCompareMemo } from 'use-deep-compare';
 
diff --git a/dailyjs/shared/components/HairCheck/index.js b/custom/shared/components/HairCheck/index.js
similarity index 100%
rename from dailyjs/shared/components/HairCheck/index.js
rename to custom/shared/components/HairCheck/index.js
diff --git a/dailyjs/shared/components/HeaderCapsule/HeaderCapsule.js b/custom/shared/components/HeaderCapsule/HeaderCapsule.js
similarity index 100%
rename from dailyjs/shared/components/HeaderCapsule/HeaderCapsule.js
rename to custom/shared/components/HeaderCapsule/HeaderCapsule.js
diff --git a/dailyjs/shared/components/HeaderCapsule/index.js b/custom/shared/components/HeaderCapsule/index.js
similarity index 100%
rename from dailyjs/shared/components/HeaderCapsule/index.js
rename to custom/shared/components/HeaderCapsule/index.js
diff --git a/dailyjs/shared/components/Input/Input.js b/custom/shared/components/Input/Input.js
similarity index 100%
rename from dailyjs/shared/components/Input/Input.js
rename to custom/shared/components/Input/Input.js
diff --git a/dailyjs/shared/components/Input/index.js b/custom/shared/components/Input/index.js
similarity index 57%
rename from dailyjs/shared/components/Input/index.js
rename to custom/shared/components/Input/index.js
index c38d7b3..057037e 100644
--- a/dailyjs/shared/components/Input/index.js
+++ b/custom/shared/components/Input/index.js
@@ -1,2 +1 @@
-export { TextInput as default } from './Input';
 export { TextInput, BooleanInput, SelectInput } from './Input';
diff --git a/dailyjs/shared/components/Loader/Loader.js b/custom/shared/components/Loader/Loader.js
similarity index 100%
rename from dailyjs/shared/components/Loader/Loader.js
rename to custom/shared/components/Loader/Loader.js
diff --git a/dailyjs/shared/components/Loader/index.js b/custom/shared/components/Loader/index.js
similarity index 100%
rename from dailyjs/shared/components/Loader/index.js
rename to custom/shared/components/Loader/index.js
diff --git a/dailyjs/shared/components/MessageCard/MessageCard.js b/custom/shared/components/MessageCard/MessageCard.js
similarity index 79%
rename from dailyjs/shared/components/MessageCard/MessageCard.js
rename to custom/shared/components/MessageCard/MessageCard.js
index 19edbc7..ad48d65 100644
--- a/dailyjs/shared/components/MessageCard/MessageCard.js
+++ b/custom/shared/components/MessageCard/MessageCard.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import Button from '@dailyjs/shared/components/Button';
+import Button from '@custom/shared/components/Button';
 import {
   Card,
   CardBody,
   CardFooter,
   CardHeader,
-} from '@dailyjs/shared/components/Card';
+} from '@custom/shared/components/Card';
 import PropTypes from 'prop-types';
 
 export const MessageCard = ({
@@ -15,7 +15,7 @@ export const MessageCard = ({
   hideBack = false,
   onBack,
 }) => (
-  <Card className={error && 'error'}>
+  <Card className={error ? 'error' : ''}>
     {header && <CardHeader>{header}</CardHeader>}
     {children && <CardBody>{children}</CardBody>}
     {!hideBack && (
@@ -23,7 +23,7 @@ export const MessageCard = ({
         {onBack ? (
           <Button onClick={() => onBack()}>Go back</Button>
         ) : (
-          <Button href="/">Go back</Button>
+          <Button onClick={() => window.location.reload()}>Go back</Button>
         )}
       </CardFooter>
     )}
diff --git a/dailyjs/shared/components/MessageCard/index.js b/custom/shared/components/MessageCard/index.js
similarity index 100%
rename from dailyjs/shared/components/MessageCard/index.js
rename to custom/shared/components/MessageCard/index.js
diff --git a/dailyjs/shared/components/Modal/Modal.js b/custom/shared/components/Modal/Modal.js
similarity index 99%
rename from dailyjs/shared/components/Modal/Modal.js
rename to custom/shared/components/Modal/Modal.js
index 89d3f64..3e3442f 100644
--- a/dailyjs/shared/components/Modal/Modal.js
+++ b/custom/shared/components/Modal/Modal.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import noScroll from 'no-scroll';
 import { createPortal } from 'react-dom';
 import { ReactComponent as IconClose } from '../../icons/close-sm.svg';
-import { Button } from '../Button';
+import Button from '../Button';
 import { Card, CardBody, CardFooter, CardHeader } from '../Card';
 
 const transitionMs = 350;
diff --git a/dailyjs/shared/components/Modal/index.js b/custom/shared/components/Modal/index.js
similarity index 100%
rename from dailyjs/shared/components/Modal/index.js
rename to custom/shared/components/Modal/index.js
diff --git a/dailyjs/shared/components/MuteButtons/MuteButton.js b/custom/shared/components/MuteButton/MuteButton.js
similarity index 65%
rename from dailyjs/shared/components/MuteButtons/MuteButton.js
rename to custom/shared/components/MuteButton/MuteButton.js
index 501c83c..3004ce7 100644
--- a/dailyjs/shared/components/MuteButtons/MuteButton.js
+++ b/custom/shared/components/MuteButton/MuteButton.js
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { ReactComponent as IconCameraOff } from '@dailyjs/shared/icons/camera-off-md.svg';
-import { ReactComponent as IconCameraOn } from '@dailyjs/shared/icons/camera-on-md.svg';
-import { ReactComponent as IconMicOff } from '@dailyjs/shared/icons/mic-off-md.svg';
-import { ReactComponent as IconMicOn } from '@dailyjs/shared/icons/mic-on-md.svg';
+import { ReactComponent as IconCameraOff } from '@custom/shared/icons/camera-off-md.svg';
+import { ReactComponent as IconCameraOn } from '@custom/shared/icons/camera-on-md.svg';
+import { ReactComponent as IconMicOff } from '@custom/shared/icons/mic-off-md.svg';
+import { ReactComponent as IconMicOn } from '@custom/shared/icons/mic-on-md.svg';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useCallState } from '../../contexts/CallProvider';
-import { Button } from '../Button';
+import Button from '../Button';
 
 export const MuteButton = ({ isMuted, mic = false, className, ...props }) => {
   const { callObject } = useCallState();
@@ -23,8 +23,8 @@ export const MuteButton = ({ isMuted, mic = false, className, ...props }) => {
   };
 
   const Icon = mic
-    ? [<IconMicOff />, <IconMicOn />]
-    : [<IconCameraOff />, <IconCameraOn />];
+    ? [<IconMicOff key="mic-off" />, <IconMicOn key="mic-on" />]
+    : [<IconCameraOff key="cam-off" />, <IconCameraOn key="cam-on" />];
 
   if (!callObject) return null;
 
diff --git a/dailyjs/shared/components/MuteButtons/index.js b/custom/shared/components/MuteButton/index.js
similarity index 55%
rename from dailyjs/shared/components/MuteButtons/index.js
rename to custom/shared/components/MuteButton/index.js
index df9740c..da40de3 100644
--- a/dailyjs/shared/components/MuteButtons/index.js
+++ b/custom/shared/components/MuteButton/index.js
@@ -1,2 +1 @@
 export { MuteButton as default } from './MuteButton';
-export { MuteButton } from './MuteButton';
diff --git a/dailyjs/shared/components/ParticipantBar/ParticipantBar.js b/custom/shared/components/ParticipantBar/ParticipantBar.js
similarity index 93%
rename from dailyjs/shared/components/ParticipantBar/ParticipantBar.js
rename to custom/shared/components/ParticipantBar/ParticipantBar.js
index 416c27f..781b76a 100644
--- a/dailyjs/shared/components/ParticipantBar/ParticipantBar.js
+++ b/custom/shared/components/ParticipantBar/ParticipantBar.js
@@ -5,17 +5,17 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Tile } from '@dailyjs/shared/components/Tile';
-import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useTracks } from '@dailyjs/shared/contexts/TracksProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { isLocalId } from '@dailyjs/shared/contexts/participantsState';
-import { useActiveSpeaker } from '@dailyjs/shared/hooks/useActiveSpeaker';
-import { useCamSubscriptions } from '@dailyjs/shared/hooks/useCamSubscriptions';
-import { useResize } from '@dailyjs/shared/hooks/useResize';
-import { useScrollbarWidth } from '@dailyjs/shared/hooks/useScrollbarWidth';
+import { Tile } from '@custom/shared/components/Tile';
+import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useTracks } from '@custom/shared/contexts/TracksProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { isLocalId } from '@custom/shared/contexts/participantsState';
+import { useActiveSpeaker } from '@custom/shared/hooks/useActiveSpeaker';
+import { useCamSubscriptions } from '@custom/shared/hooks/useCamSubscriptions';
+import { useResize } from '@custom/shared/hooks/useResize';
+import { useScrollbarWidth } from '@custom/shared/hooks/useScrollbarWidth';
 import classnames from 'classnames';
 import debounce from 'debounce';
 import PropTypes from 'prop-types';
diff --git a/dailyjs/shared/components/ParticipantBar/index.js b/custom/shared/components/ParticipantBar/index.js
similarity index 54%
rename from dailyjs/shared/components/ParticipantBar/index.js
rename to custom/shared/components/ParticipantBar/index.js
index 92bde7d..556ae53 100644
--- a/dailyjs/shared/components/ParticipantBar/index.js
+++ b/custom/shared/components/ParticipantBar/index.js
@@ -1,2 +1 @@
 export { ParticipantBar as default } from './ParticipantBar';
-export { ParticipantBar } from './ParticipantBar';
diff --git a/dailyjs/shared/components/ParticipantBar/useBlockScrolling.js b/custom/shared/components/ParticipantBar/useBlockScrolling.js
similarity index 100%
rename from dailyjs/shared/components/ParticipantBar/useBlockScrolling.js
rename to custom/shared/components/ParticipantBar/useBlockScrolling.js
diff --git a/dailyjs/shared/components/Tile/Tile.js b/custom/shared/components/Tile/Tile.js
similarity index 96%
rename from dailyjs/shared/components/Tile/Tile.js
rename to custom/shared/components/Tile/Tile.js
index 31c3924..a65b0f4 100644
--- a/dailyjs/shared/components/Tile/Tile.js
+++ b/custom/shared/components/Tile/Tile.js
@@ -1,10 +1,10 @@
 import React, { memo, useEffect, useState, useRef } from 'react';
-import useVideoTrack from '@dailyjs/shared/hooks/useVideoTrack';
-import { ReactComponent as IconMicMute } from '@dailyjs/shared/icons/mic-off-sm.svg';
+import useVideoTrack from '@custom/shared/hooks/useVideoTrack';
+import { ReactComponent as IconMicMute } from '@custom/shared/icons/mic-off-sm.svg';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { DEFAULT_ASPECT_RATIO } from '../../constants';
-import { Video } from './Video';
+import Video from './Video';
 import { ReactComponent as Avatar } from './avatar.svg';
 
 const SM_TILE_MAX_WIDTH = 300;
diff --git a/dailyjs/shared/components/Tile/Video/Video.js b/custom/shared/components/Tile/Video.js
similarity index 98%
rename from dailyjs/shared/components/Tile/Video/Video.js
rename to custom/shared/components/Tile/Video.js
index 7b0008c..660c8cc 100644
--- a/dailyjs/shared/components/Tile/Video/Video.js
+++ b/custom/shared/components/Tile/Video.js
@@ -50,6 +50,8 @@ export const Video = memo(
   (p, n) => shallowEqualObjects(p, n)
 );
 
+Video.displayName = 'Video';
+
 Video.propTypes = {
   videoTrack: PropTypes.any,
   mirrored: PropTypes.bool,
diff --git a/dailyjs/shared/components/Tile/avatar.svg b/custom/shared/components/Tile/avatar.svg
similarity index 100%
rename from dailyjs/shared/components/Tile/avatar.svg
rename to custom/shared/components/Tile/avatar.svg
diff --git a/dailyjs/shared/components/Tile/index.js b/custom/shared/components/Tile/index.js
similarity index 56%
rename from dailyjs/shared/components/Tile/index.js
rename to custom/shared/components/Tile/index.js
index 7059d99..ca181eb 100644
--- a/dailyjs/shared/components/Tile/index.js
+++ b/custom/shared/components/Tile/index.js
@@ -1,2 +1,2 @@
 export { Tile as default } from './Tile';
-export { Tile } from './Tile';
+export { Video } from './Video';
diff --git a/dailyjs/shared/components/Tray/BasicTray.js b/custom/shared/components/Tray/BasicTray.js
similarity index 53%
rename from dailyjs/shared/components/Tray/BasicTray.js
rename to custom/shared/components/Tray/BasicTray.js
index b7f5aaf..d9a80fb 100644
--- a/dailyjs/shared/components/Tray/BasicTray.js
+++ b/custom/shared/components/Tray/BasicTray.js
@@ -1,16 +1,18 @@
 import React from 'react';
-import { PEOPLE_ASIDE } from '@dailyjs/shared/components/Aside/PeopleAside';
-import { DEVICE_MODAL } from '@dailyjs/shared/components/DeviceSelectModal';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useMediaDevices } from '@dailyjs/shared/contexts/MediaDeviceProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { ReactComponent as IconCameraOff } from '@dailyjs/shared/icons/camera-off-md.svg';
-import { ReactComponent as IconCameraOn } from '@dailyjs/shared/icons/camera-on-md.svg';
-import { ReactComponent as IconLeave } from '@dailyjs/shared/icons/leave-md.svg';
-import { ReactComponent as IconMicOff } from '@dailyjs/shared/icons/mic-off-md.svg';
-import { ReactComponent as IconMicOn } from '@dailyjs/shared/icons/mic-on-md.svg';
-import { ReactComponent as IconPeople } from '@dailyjs/shared/icons/people-md.svg';
-import { ReactComponent as IconSettings } from '@dailyjs/shared/icons/settings-md.svg';
+import { NETWORK_ASIDE } from '@custom/shared/components/Aside/NetworkAside';
+import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
+import { DEVICE_MODAL } from '@custom/shared/components/DeviceSelectModal';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useMediaDevices } from '@custom/shared/contexts/MediaDeviceProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { ReactComponent as IconCameraOff } from '@custom/shared/icons/camera-off-md.svg';
+import { ReactComponent as IconCameraOn } from '@custom/shared/icons/camera-on-md.svg';
+import { ReactComponent as IconLeave } from '@custom/shared/icons/leave-md.svg';
+import { ReactComponent as IconMicOff } from '@custom/shared/icons/mic-off-md.svg';
+import { ReactComponent as IconMicOn } from '@custom/shared/icons/mic-on-md.svg';
+import { ReactComponent as IconNetwork } from '@custom/shared/icons/network-md.svg';
+import { ReactComponent as IconPeople } from '@custom/shared/icons/people-md.svg';
+import { ReactComponent as IconSettings } from '@custom/shared/icons/settings-md.svg';
 import { Tray, TrayButton } from './Tray';
 
 export const BasicTray = () => {
@@ -47,7 +49,9 @@ export const BasicTray = () => {
       <TrayButton label="Settings" onClick={() => openModal(DEVICE_MODAL)}>
         <IconSettings />
       </TrayButton>
-
+      <TrayButton label="Network" onClick={() => toggleAside(NETWORK_ASIDE)}>
+        <IconNetwork />
+      </TrayButton>
       <TrayButton label="People" onClick={() => toggleAside(PEOPLE_ASIDE)}>
         <IconPeople />
       </TrayButton>
diff --git a/dailyjs/shared/components/Tray/Tray.js b/custom/shared/components/Tray/Tray.js
similarity index 97%
rename from dailyjs/shared/components/Tray/Tray.js
rename to custom/shared/components/Tray/Tray.js
index 8c540a4..df5c2b8 100644
--- a/dailyjs/shared/components/Tray/Tray.js
+++ b/custom/shared/components/Tray/Tray.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '@dailyjs/shared/components/Button';
+import Button from '@custom/shared/components/Button';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
diff --git a/dailyjs/shared/components/Tray/TrayButton.js b/custom/shared/components/Tray/TrayButton.js
similarity index 93%
rename from dailyjs/shared/components/Tray/TrayButton.js
rename to custom/shared/components/Tray/TrayButton.js
index dffece5..a39399b 100644
--- a/dailyjs/shared/components/Tray/TrayButton.js
+++ b/custom/shared/components/Tray/TrayButton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '@dailyjs/shared/components/Button';
+import Button from '@custom/shared/components/Button';
 import PropTypes from 'prop-types';
 
 export const TrayButton = ({ children, label, onClick, orange = false }) => (
diff --git a/dailyjs/shared/components/Tray/TrayMicButton.js b/custom/shared/components/Tray/TrayMicButton.js
similarity index 59%
rename from dailyjs/shared/components/Tray/TrayMicButton.js
rename to custom/shared/components/Tray/TrayMicButton.js
index 68bea2a..f88a476 100644
--- a/dailyjs/shared/components/Tray/TrayMicButton.js
+++ b/custom/shared/components/Tray/TrayMicButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { TrayButton } from '@dailyjs/shared/components/Tray';
-import { useAudioLevel } from '@dailyjs/shared/hooks/useAudioLevel';
-import { ReactComponent as IconMicOff } from '@dailyjs/shared/icons/mic-off-md.svg';
-import { ReactComponent as IconMicOn } from '@dailyjs/shared/icons/mic-on-md.svg';
+import { TrayButton } from '@custom/shared/components/Tray';
+import { useAudioLevel } from '@custom/shared/hooks/useAudioLevel';
+import { ReactComponent as IconMicOff } from '@custom/shared/icons/mic-off-md.svg';
+import { ReactComponent as IconMicOn } from '@custom/shared/icons/mic-on-md.svg';
 
 import PropTypes from 'prop-types';
 
diff --git a/dailyjs/shared/components/Tray/index.js b/custom/shared/components/Tray/index.js
similarity index 66%
rename from dailyjs/shared/components/Tray/index.js
rename to custom/shared/components/Tray/index.js
index 45e5fb6..0354e7d 100644
--- a/dailyjs/shared/components/Tray/index.js
+++ b/custom/shared/components/Tray/index.js
@@ -1,3 +1,2 @@
-export { Tray as default } from './Tray';
 export { Tray, TrayButton } from './Tray';
 export { BasicTray } from './BasicTray';
diff --git a/dailyjs/shared/components/VideoContainer/VideoContainer.js b/custom/shared/components/VideoContainer/VideoContainer.js
similarity index 100%
rename from dailyjs/shared/components/VideoContainer/VideoContainer.js
rename to custom/shared/components/VideoContainer/VideoContainer.js
diff --git a/custom/shared/components/VideoContainer/index.js b/custom/shared/components/VideoContainer/index.js
new file mode 100644
index 0000000..73b64e2
--- /dev/null
+++ b/custom/shared/components/VideoContainer/index.js
@@ -0,0 +1 @@
+export { VideoContainer as default } from './VideoContainer';
diff --git a/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js b/custom/shared/components/WaitingRoom/WaitingParticipantRow.js
similarity index 100%
rename from dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js
rename to custom/shared/components/WaitingRoom/WaitingParticipantRow.js
diff --git a/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js b/custom/shared/components/WaitingRoom/WaitingRoomModal.js
similarity index 66%
rename from dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js
rename to custom/shared/components/WaitingRoom/WaitingRoomModal.js
index 05f2088..f77f2b5 100644
--- a/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js
+++ b/custom/shared/components/WaitingRoom/WaitingRoomModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import Modal from '@dailyjs/shared/components/Modal';
-import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
+import Modal from '@custom/shared/components/Modal';
+import { useWaitingRoom } from '@custom/shared/contexts/WaitingRoomProvider';
 import PropTypes from 'prop-types';
-import { Button } from '../Button';
+import Button from '../Button';
 import { WaitingParticipantRow } from './WaitingParticipantRow';
 
 export const WaitingRoomModal = ({ onClose }) => {
@@ -23,10 +23,20 @@ export const WaitingRoomModal = ({ onClose }) => {
       isOpen
       onClose={() => onClose()}
       actions={[
-        <Button fullWidth onClick={handleAllowAllClick} variant="success">
+        <Button
+          key="allow-all"
+          fullWidth
+          onClick={handleAllowAllClick}
+          variant="success"
+        >
           Allow all
         </Button>,
-        <Button fullWidth onClick={handleDenyAllClick} variant="warning">
+        <Button
+          key="deny-all"
+          fullWidth
+          onClick={handleDenyAllClick}
+          variant="warning"
+        >
           Deny all
         </Button>,
       ]}
diff --git a/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js b/custom/shared/components/WaitingRoom/WaitingRoomNotification.js
similarity index 100%
rename from dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js
rename to custom/shared/components/WaitingRoom/WaitingRoomNotification.js
diff --git a/dailyjs/shared/components/WaitingRoom/index.js b/custom/shared/components/WaitingRoom/index.js
similarity index 100%
rename from dailyjs/shared/components/WaitingRoom/index.js
rename to custom/shared/components/WaitingRoom/index.js
diff --git a/dailyjs/shared/components/Well/Well.js b/custom/shared/components/Well/Well.js
similarity index 100%
rename from dailyjs/shared/components/Well/Well.js
rename to custom/shared/components/Well/Well.js
diff --git a/dailyjs/shared/components/Well/index.js b/custom/shared/components/Well/index.js
similarity index 57%
rename from dailyjs/shared/components/Well/index.js
rename to custom/shared/components/Well/index.js
index c8a68c0..f92fb64 100644
--- a/dailyjs/shared/components/Well/index.js
+++ b/custom/shared/components/Well/index.js
@@ -1,2 +1 @@
 export { Well as default } from './Well';
-export { Well } from './Well';
diff --git a/dailyjs/shared/constants.js b/custom/shared/constants.js
similarity index 100%
rename from dailyjs/shared/constants.js
rename to custom/shared/constants.js
diff --git a/dailyjs/shared/contexts/CallProvider.js b/custom/shared/contexts/CallProvider.js
similarity index 100%
rename from dailyjs/shared/contexts/CallProvider.js
rename to custom/shared/contexts/CallProvider.js
diff --git a/dailyjs/shared/contexts/MediaDeviceProvider.js b/custom/shared/contexts/MediaDeviceProvider.js
similarity index 61%
rename from dailyjs/shared/contexts/MediaDeviceProvider.js
rename to custom/shared/contexts/MediaDeviceProvider.js
index 0563392..2e5e6e7 100644
--- a/dailyjs/shared/contexts/MediaDeviceProvider.js
+++ b/custom/shared/contexts/MediaDeviceProvider.js
@@ -1,15 +1,15 @@
-import React, { useState, useEffect, createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { useCallState } from './CallProvider';
+import { useParticipants } from './ParticipantsProvider';
 import { useDevices } from './useDevices';
 
 export const MediaDeviceContext = createContext();
 
 export const MediaDeviceProvider = ({ children }) => {
   const { callObject } = useCallState();
-  const [isCamMuted, setIsCamMuted] = useState(false);
-  const [isMicMuted, setIsMicMuted] = useState(false);
+  const { localParticipant } = useParticipants();
 
   const {
     cams,
@@ -24,20 +24,6 @@ export const MediaDeviceProvider = ({ children }) => {
     setSpeakersDevice,
   } = useDevices(callObject);
 
-  useEffect(() => {
-    if (!callObject) return false;
-
-    const handleNewDeviceState = () => {
-      setIsCamMuted(!callObject.participants()?.local?.video);
-      setIsMicMuted(!callObject.participants()?.local?.audio);
-    };
-
-    callObject.on('participant-updated', handleNewDeviceState);
-    return () => {
-      callObject.off('participant-updated', handleNewDeviceState);
-    };
-  }, [callObject]);
-
   return (
     <MediaDeviceContext.Provider
       value={{
@@ -48,8 +34,8 @@ export const MediaDeviceProvider = ({ children }) => {
         micError,
         currentDevices,
         deviceState,
-        isCamMuted,
-        isMicMuted,
+        isCamMuted: localParticipant.isCamMuted,
+        isMicMuted: localParticipant.isMicMuted,
         setMicDevice,
         setCamDevice,
         setSpeakersDevice,
diff --git a/dailyjs/shared/contexts/ParticipantsProvider.js b/custom/shared/contexts/ParticipantsProvider.js
similarity index 99%
rename from dailyjs/shared/contexts/ParticipantsProvider.js
rename to custom/shared/contexts/ParticipantsProvider.js
index 81b6a94..f6c9428 100644
--- a/dailyjs/shared/contexts/ParticipantsProvider.js
+++ b/custom/shared/contexts/ParticipantsProvider.js
@@ -10,7 +10,7 @@ import React, {
 import {
   useUIState,
   VIEW_MODE_SPEAKER,
-} from '@dailyjs/shared/contexts/UIStateProvider';
+} from '@custom/shared/contexts/UIStateProvider';
 import PropTypes from 'prop-types';
 
 import {
diff --git a/dailyjs/shared/contexts/TracksProvider.js b/custom/shared/contexts/TracksProvider.js
similarity index 74%
rename from dailyjs/shared/contexts/TracksProvider.js
rename to custom/shared/contexts/TracksProvider.js
index 4021d43..c92067c 100644
--- a/dailyjs/shared/contexts/TracksProvider.js
+++ b/custom/shared/contexts/TracksProvider.js
@@ -11,6 +11,7 @@ import React, {
 
 import PropTypes from 'prop-types';
 
+import { useDeepCompareEffect } from 'use-deep-compare';
 import { sortByKey } from '../lib/sortByKey';
 import { useCallState } from './CallProvider';
 import { useParticipants } from './ParticipantsProvider';
@@ -20,6 +21,8 @@ import {
   REMOVE_TRACKS,
   TRACK_STARTED,
   TRACK_STOPPED,
+  TRACK_VIDEO_UPDATED,
+  TRACK_AUDIO_UPDATED,
   tracksReducer,
 } from './tracksState';
 
@@ -111,17 +114,15 @@ export const TracksProvider = ({ children }) => {
         // participant's cam
         if (desiredSubscription === currentSubscription) return u;
 
-        return {
-          ...u,
-          [id]: {
-            setSubscribedTracks: {
-              audio: true,
-              screenAudio: true,
-              screenVideo: true,
-              video: desiredSubscription,
-            },
+        u[id] = {
+          setSubscribedTracks: {
+            audio: true,
+            screenAudio: true,
+            screenVideo: true,
+            video: desiredSubscription,
           },
         };
+        return u;
       }, {});
 
       if (Object.keys(updates).length === 0) return;
@@ -181,26 +182,25 @@ export const TracksProvider = ({ children }) => {
       joinedSubscriptionQueue.push(participant.session_id);
     };
 
-    const joinBatchInterval = setInterval(() => {
+    const joinBatchInterval = setInterval(async () => {
       if (!joinedSubscriptionQueue.length) return;
       const ids = joinedSubscriptionQueue.splice(0);
-      const callParticipants = callObject.participants();
+      const participants = callObject.participants();
+      const topology = (await callObject.getNetworkTopology())?.topology;
       const updates = ids.reduce((o, id) => {
-        const { subscribed } = callParticipants?.[id]?.tracks?.audio;
-        const result = { ...o[id] };
-        if (!subscribed) {
-          result.setSubscribedTracks = {
-            audio: true,
-            screenAudio: true,
-            screenVideo: true,
+        if (!participants?.[id]?.tracks?.audio?.subscribed) {
+          o[id] = {
+            setSubscribedTracks: {
+              audio: true,
+              screenAudio: true,
+              screenVideo: true,
+            },
           };
         }
-
-        if (rtcpeers?.getCurrentType?.() === 'peer-to-peer') {
-          result.setSubscribedTracks = true;
+        if (topology === 'peer') {
+          o[id] = { setSubscribedTracks: true };
         }
-
-        return { [id]: result };
+        return o;
       }, {});
 
       if (!subscribeToTracksAutomatically && Object.keys(updates).length0) {
@@ -222,6 +222,62 @@ export const TracksProvider = ({ children }) => {
     };
   }, [callObject, subscribeToTracksAutomatically]);
 
+  useDeepCompareEffect(() => {
+    if (!callObject) return;
+
+    const handleParticipantUpdated = ({ participant }) => {
+      const hasAudioChanged =
+        // State changed
+        participant.tracks.audio.state !==
+          state.audioTracks?.[participant.user_id]?.state ||
+        // Off/blocked reason changed
+        !deepEqual(
+          {
+            ...(participant.tracks.audio?.blocked ?? {}),
+            ...(participant.tracks.audio?.off ?? {}),
+          },
+          {
+            ...(state.audioTracks?.[participant.user_id].blocked ?? {}),
+            ...(state.audioTracks?.[participant.user_id].off ?? {}),
+          }
+        );
+      const hasVideoChanged =
+        // State changed
+        participant.tracks.video.state !==
+          state.videoTracks?.[participant.user_id]?.state ||
+        // Off/blocked reason changed
+        !deepEqual(
+          {
+            ...(participant.tracks.video?.blocked ?? {}),
+            ...(participant.tracks.video?.off ?? {}),
+          },
+          {
+            ...(state.videoTracks?.[participant.user_id].blocked ?? {}),
+            ...(state.videoTracks?.[participant.user_id].off ?? {}),
+          }
+        );
+      if (hasAudioChanged) {
+        // Update audio track state
+        dispatch({
+          type: TRACK_AUDIO_UPDATED,
+          participant,
+        });
+      }
+      if (hasVideoChanged) {
+        // Update video track state
+        dispatch({
+          type: TRACK_VIDEO_UPDATED,
+          participant,
+        });
+      }
+    };
+
+    callObject.on('participant-updated', handleParticipantUpdated);
+    return () => {
+      callObject.off('participant-updated', handleParticipantUpdated);
+    };
+  }, [callObject, state.audioTracks, state.videoTracks]);
+
   return (
     <TracksContext.Provider
       value={{
diff --git a/dailyjs/shared/contexts/UIStateProvider.js b/custom/shared/contexts/UIStateProvider.js
similarity index 100%
rename from dailyjs/shared/contexts/UIStateProvider.js
rename to custom/shared/contexts/UIStateProvider.js
diff --git a/dailyjs/shared/contexts/WaitingRoomProvider.js b/custom/shared/contexts/WaitingRoomProvider.js
similarity index 100%
rename from dailyjs/shared/contexts/WaitingRoomProvider.js
rename to custom/shared/contexts/WaitingRoomProvider.js
diff --git a/dailyjs/shared/contexts/callState.js b/custom/shared/contexts/callState.js
similarity index 100%
rename from dailyjs/shared/contexts/callState.js
rename to custom/shared/contexts/callState.js
diff --git a/dailyjs/shared/contexts/participantsState.js b/custom/shared/contexts/participantsState.js
similarity index 100%
rename from dailyjs/shared/contexts/participantsState.js
rename to custom/shared/contexts/participantsState.js
diff --git a/dailyjs/shared/contexts/tracksState.js b/custom/shared/contexts/tracksState.js
similarity index 73%
rename from dailyjs/shared/contexts/tracksState.js
rename to custom/shared/contexts/tracksState.js
index a168fc5..e6bdfc2 100644
--- a/dailyjs/shared/contexts/tracksState.js
+++ b/custom/shared/contexts/tracksState.js
@@ -8,20 +8,22 @@
 
 import { getId, getScreenId } from './participantsState';
 
-const initialTracksState = {
+export const initialTracksState = {
   audioTracks: {},
   videoTracks: {},
 };
 
 // --- Actions ---
 
-const TRACK_STARTED = 'TRACK_STARTED';
-const TRACK_STOPPED = 'TRACK_STOPPED';
-const REMOVE_TRACKS = 'REMOVE_TRACKS';
+export const TRACK_STARTED = 'TRACK_STARTED';
+export const TRACK_STOPPED = 'TRACK_STOPPED';
+export const TRACK_VIDEO_UPDATED = 'TRACK_VIDEO_UPDATED';
+export const TRACK_AUDIO_UPDATED = 'TRACK_AUDIO_UPDATED';
+export const REMOVE_TRACKS = 'REMOVE_TRACKS';
 
 // --- Reducer and helpers --
 
-function tracksReducer(prevState, action) {
+export function tracksReducer(prevState, action) {
   switch (action.type) {
     case TRACK_STARTED: {
       const id = getId(action.participant);
@@ -94,6 +96,34 @@ function tracksReducer(prevState, action) {
       };
     }
 
+    case TRACK_VIDEO_UPDATED: {
+      const id = getId(action.participant);
+      if (action.participant?.local) {
+        // Ignore local audio from mic and screen share
+        return prevState;
+      }
+      const newAudioTracks = {
+        ...prevState.audioTracks,
+        [id]: action.participant.tracks.audio,
+      };
+      return {
+        ...prevState,
+        audioTracks: newAudioTracks,
+      };
+    }
+
+    case TRACK_AUDIO_UPDATED: {
+      const id = getId(action.participant);
+      const newVideoTracks = {
+        ...prevState.videoTracks,
+        [id]: action.participant.tracks.video,
+      };
+      return {
+        ...prevState,
+        videoTracks: newVideoTracks,
+      };
+    }
+
     case REMOVE_TRACKS: {
       const { audioTracks, videoTracks } = prevState;
       const id = getId(action.participant);
@@ -114,11 +144,3 @@ function tracksReducer(prevState, action) {
       throw new Error();
   }
 }
-
-export {
-  initialTracksState,
-  tracksReducer,
-  REMOVE_TRACKS,
-  TRACK_STARTED,
-  TRACK_STOPPED,
-};
diff --git a/dailyjs/shared/contexts/useCallMachine.js b/custom/shared/contexts/useCallMachine.js
similarity index 97%
rename from dailyjs/shared/contexts/useCallMachine.js
rename to custom/shared/contexts/useCallMachine.js
index 848e1fd..f691796 100644
--- a/dailyjs/shared/contexts/useCallMachine.js
+++ b/custom/shared/contexts/useCallMachine.js
@@ -53,6 +53,7 @@ export const useCallMachine = ({
    */
   const prejoinUIEnabled = async (co) => {
     const dailyRoomInfo = await co.room();
+    const { access } = co.accessState();
 
     const prejoinEnabled =
       dailyRoomInfo?.config?.enable_prejoin_ui === null
@@ -61,7 +62,12 @@ export const useCallMachine = ({
 
     const knockingEnabled = !!dailyRoomInfo?.config?.enable_knocking;
 
-    return prejoinEnabled || knockingEnabled;
+    return (
+      prejoinEnabled ||
+      (access !== ACCESS_STATE_UNKNOWN &&
+        access?.level === ACCESS_STATE_LOBBY &&
+        knockingEnabled)
+    );
   };
 
   // --- Callbacks ---
diff --git a/dailyjs/shared/contexts/useDevices.js b/custom/shared/contexts/useDevices.js
similarity index 100%
rename from dailyjs/shared/contexts/useDevices.js
rename to custom/shared/contexts/useDevices.js
diff --git a/dailyjs/shared/hooks/useActiveSpeaker.js b/custom/shared/hooks/useActiveSpeaker.js
similarity index 100%
rename from dailyjs/shared/hooks/useActiveSpeaker.js
rename to custom/shared/hooks/useActiveSpeaker.js
diff --git a/dailyjs/shared/hooks/useAudioLevel.js b/custom/shared/hooks/useAudioLevel.js
similarity index 100%
rename from dailyjs/shared/hooks/useAudioLevel.js
rename to custom/shared/hooks/useAudioLevel.js
diff --git a/dailyjs/shared/hooks/useAudioTrack.js b/custom/shared/hooks/useAudioTrack.js
similarity index 100%
rename from dailyjs/shared/hooks/useAudioTrack.js
rename to custom/shared/hooks/useAudioTrack.js
diff --git a/dailyjs/shared/hooks/useCallUI.js b/custom/shared/hooks/useCallUI.js
similarity index 87%
rename from dailyjs/shared/hooks/useCallUI.js
rename to custom/shared/hooks/useCallUI.js
index ae28715..9e07a27 100644
--- a/dailyjs/shared/hooks/useCallUI.js
+++ b/custom/shared/hooks/useCallUI.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
-import Loader from '@dailyjs/shared/components/Loader';
-import MessageCard from '@dailyjs/shared/components/MessageCard';
+import Loader from '@custom/shared/components/Loader';
+import MessageCard from '@custom/shared/components/MessageCard';
 import {
   CALL_STATE_ENDED,
   CALL_STATE_JOINED,
@@ -12,7 +12,7 @@ import {
   CALL_STATE_REDIRECTING,
   CALL_STATE_NOT_ALLOWED,
   CALL_STATE_EXPIRED,
-} from '@dailyjs/shared/contexts/useCallMachine';
+} from '@custom/shared/contexts/useCallMachine';
 import { useRouter } from 'next/router';
 import HairCheck from '../components/HairCheck';
 
@@ -66,7 +66,7 @@ export const useCallUI = ({
         return haircheck ? haircheck() : <HairCheck />;
       case CALL_STATE_JOINED:
         return room ? (
-          room()
+          room
         ) : (
           <MessageCard error header="No room component declared" />
         );
@@ -81,7 +81,8 @@ export const useCallUI = ({
           callEnded()
         ) : (
           <MessageCard>
-            You have left the call. We hope you had fun!
+            You have left the call (either manually or because the room
+            expired). We hope you had fun!
           </MessageCard>
         );
       default:
@@ -89,11 +90,7 @@ export const useCallUI = ({
     }
 
     return (
-      <MessageCard
-        error
-        header="An unknown error occured"
-        onBack={() => window.location.reload()}
-      >
+      <MessageCard error header="An unknown error occured">
         A fatal error occured in the call loop. Please check you have entered a
         valid <code>DAILY_DOMAIN</code> and <code>DAILY_API_KEY</code>{' '}
         environmental variables.
diff --git a/dailyjs/shared/hooks/useCamSubscriptions.js b/custom/shared/hooks/useCamSubscriptions.js
similarity index 100%
rename from dailyjs/shared/hooks/useCamSubscriptions.js
rename to custom/shared/hooks/useCamSubscriptions.js
diff --git a/dailyjs/shared/hooks/useJoinSound.js b/custom/shared/hooks/useJoinSound.js
similarity index 100%
rename from dailyjs/shared/hooks/useJoinSound.js
rename to custom/shared/hooks/useJoinSound.js
diff --git a/dailyjs/shared/hooks/useNetworkState.js b/custom/shared/hooks/useNetworkState.js
similarity index 100%
rename from dailyjs/shared/hooks/useNetworkState.js
rename to custom/shared/hooks/useNetworkState.js
diff --git a/dailyjs/shared/hooks/useResize.js b/custom/shared/hooks/useResize.js
similarity index 100%
rename from dailyjs/shared/hooks/useResize.js
rename to custom/shared/hooks/useResize.js
diff --git a/dailyjs/shared/hooks/useScrollbarWidth.js b/custom/shared/hooks/useScrollbarWidth.js
similarity index 100%
rename from dailyjs/shared/hooks/useScrollbarWidth.js
rename to custom/shared/hooks/useScrollbarWidth.js
diff --git a/dailyjs/shared/hooks/useSound.js b/custom/shared/hooks/useSound.js
similarity index 100%
rename from dailyjs/shared/hooks/useSound.js
rename to custom/shared/hooks/useSound.js
diff --git a/dailyjs/shared/hooks/useVideoTrack.js b/custom/shared/hooks/useVideoTrack.js
similarity index 100%
rename from dailyjs/shared/hooks/useVideoTrack.js
rename to custom/shared/hooks/useVideoTrack.js
diff --git a/dailyjs/shared/icons/add-md.svg b/custom/shared/icons/add-md.svg
similarity index 100%
rename from dailyjs/shared/icons/add-md.svg
rename to custom/shared/icons/add-md.svg
diff --git a/dailyjs/shared/icons/add-person-lg.svg b/custom/shared/icons/add-person-lg.svg
similarity index 100%
rename from dailyjs/shared/icons/add-person-lg.svg
rename to custom/shared/icons/add-person-lg.svg
diff --git a/dailyjs/shared/icons/avatar-md.svg b/custom/shared/icons/avatar-md.svg
similarity index 100%
rename from dailyjs/shared/icons/avatar-md.svg
rename to custom/shared/icons/avatar-md.svg
diff --git a/dailyjs/shared/icons/camera-off-md.svg b/custom/shared/icons/camera-off-md.svg
similarity index 100%
rename from dailyjs/shared/icons/camera-off-md.svg
rename to custom/shared/icons/camera-off-md.svg
diff --git a/dailyjs/shared/icons/camera-off-sm.svg b/custom/shared/icons/camera-off-sm.svg
similarity index 100%
rename from dailyjs/shared/icons/camera-off-sm.svg
rename to custom/shared/icons/camera-off-sm.svg
diff --git a/dailyjs/shared/icons/camera-on-md.svg b/custom/shared/icons/camera-on-md.svg
similarity index 100%
rename from dailyjs/shared/icons/camera-on-md.svg
rename to custom/shared/icons/camera-on-md.svg
diff --git a/dailyjs/shared/icons/camera-on-sm.svg b/custom/shared/icons/camera-on-sm.svg
similarity index 100%
rename from dailyjs/shared/icons/camera-on-sm.svg
rename to custom/shared/icons/camera-on-sm.svg
diff --git a/dailyjs/shared/icons/chat-md.svg b/custom/shared/icons/chat-md.svg
similarity index 100%
rename from dailyjs/shared/icons/chat-md.svg
rename to custom/shared/icons/chat-md.svg
diff --git a/dailyjs/shared/icons/close-sm.svg b/custom/shared/icons/close-sm.svg
similarity index 100%
rename from dailyjs/shared/icons/close-sm.svg
rename to custom/shared/icons/close-sm.svg
diff --git a/dailyjs/shared/icons/leave-md.svg b/custom/shared/icons/leave-md.svg
similarity index 100%
rename from dailyjs/shared/icons/leave-md.svg
rename to custom/shared/icons/leave-md.svg
diff --git a/dailyjs/shared/icons/mic-off-md.svg b/custom/shared/icons/mic-off-md.svg
similarity index 100%
rename from dailyjs/shared/icons/mic-off-md.svg
rename to custom/shared/icons/mic-off-md.svg
diff --git a/dailyjs/shared/icons/mic-off-sm.svg b/custom/shared/icons/mic-off-sm.svg
similarity index 100%
rename from dailyjs/shared/icons/mic-off-sm.svg
rename to custom/shared/icons/mic-off-sm.svg
diff --git a/dailyjs/shared/icons/mic-on-md.svg b/custom/shared/icons/mic-on-md.svg
similarity index 100%
rename from dailyjs/shared/icons/mic-on-md.svg
rename to custom/shared/icons/mic-on-md.svg
diff --git a/dailyjs/shared/icons/mic-on-sm.svg b/custom/shared/icons/mic-on-sm.svg
similarity index 100%
rename from dailyjs/shared/icons/mic-on-sm.svg
rename to custom/shared/icons/mic-on-sm.svg
diff --git a/custom/shared/icons/network-md.svg b/custom/shared/icons/network-md.svg
new file mode 100644
index 0000000..1259c14
--- /dev/null
+++ b/custom/shared/icons/network-md.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="none" stroke="currentColor"><polyline points="5 14 8 17 11 14" stroke="currentColor"></polyline><line x1="8" y1="17" x2="8" y2="1.751" stroke="currentColor"></line><polyline points="13 10 16 7 19 10" stroke="currentColor"></polyline><line x1="16" y1="7" x2="16" y2="22.246" stroke="currentColor"></line><circle cx="12" cy="12" r="11"></circle></g></svg>
\ No newline at end of file
diff --git a/dailyjs/shared/icons/people-md.svg b/custom/shared/icons/people-md.svg
similarity index 100%
rename from dailyjs/shared/icons/people-md.svg
rename to custom/shared/icons/people-md.svg
diff --git a/dailyjs/shared/icons/raquo-md.svg b/custom/shared/icons/raquo-md.svg
similarity index 100%
rename from dailyjs/shared/icons/raquo-md.svg
rename to custom/shared/icons/raquo-md.svg
diff --git a/dailyjs/shared/icons/record-md.svg b/custom/shared/icons/record-md.svg
similarity index 100%
rename from dailyjs/shared/icons/record-md.svg
rename to custom/shared/icons/record-md.svg
diff --git a/dailyjs/shared/icons/settings-md.svg b/custom/shared/icons/settings-md.svg
similarity index 100%
rename from dailyjs/shared/icons/settings-md.svg
rename to custom/shared/icons/settings-md.svg
diff --git a/dailyjs/shared/icons/settings-sm.svg b/custom/shared/icons/settings-sm.svg
similarity index 100%
rename from dailyjs/shared/icons/settings-sm.svg
rename to custom/shared/icons/settings-sm.svg
diff --git a/dailyjs/shared/icons/star-md.svg b/custom/shared/icons/star-md.svg
similarity index 100%
rename from dailyjs/shared/icons/star-md.svg
rename to custom/shared/icons/star-md.svg
diff --git a/dailyjs/shared/icons/streaming-md.svg b/custom/shared/icons/streaming-md.svg
similarity index 100%
rename from dailyjs/shared/icons/streaming-md.svg
rename to custom/shared/icons/streaming-md.svg
diff --git a/dailyjs/recording/index.js b/custom/shared/index.js
similarity index 100%
rename from dailyjs/recording/index.js
rename to custom/shared/index.js
diff --git a/dailyjs/shared/lib/demoProps.js b/custom/shared/lib/demoProps.js
similarity index 83%
rename from dailyjs/shared/lib/demoProps.js
rename to custom/shared/lib/demoProps.js
index ba814bb..757128c 100644
--- a/dailyjs/shared/lib/demoProps.js
+++ b/custom/shared/lib/demoProps.js
@@ -3,8 +3,6 @@ export default function getDemoProps() {
     domain: process.env.DAILY_DOMAIN || null,
     // Check that both domain and key env vars are set
     isConfigured: !!process.env.DAILY_DOMAIN && !!process.env.DAILY_API_KEY,
-    // Have we predefined a room to use?
-    predefinedRoom: process.env.DAILY_ROOM || '',
     // Manual or automatic track subscriptions
     subscribeToTracksAutomatically: !process.env.MANUAL_TRACK_SUBS,
     // Are we running in demo mode? (automatically creates a short-expiry room)
diff --git a/dailyjs/shared/lib/mediaUtils.js b/custom/shared/lib/mediaUtils.js
similarity index 100%
rename from dailyjs/shared/lib/mediaUtils.js
rename to custom/shared/lib/mediaUtils.js
diff --git a/dailyjs/shared/lib/sortByKey.js b/custom/shared/lib/sortByKey.js
similarity index 100%
rename from dailyjs/shared/lib/sortByKey.js
rename to custom/shared/lib/sortByKey.js
diff --git a/dailyjs/shared/lib/sortLastActive.js b/custom/shared/lib/sortLastActive.js
similarity index 100%
rename from dailyjs/shared/lib/sortLastActive.js
rename to custom/shared/lib/sortLastActive.js
diff --git a/dailyjs/shared/lib/token.js b/custom/shared/lib/token.js
similarity index 100%
rename from dailyjs/shared/lib/token.js
rename to custom/shared/lib/token.js
diff --git a/dailyjs/shared/package.json b/custom/shared/package.json
similarity index 86%
rename from dailyjs/shared/package.json
rename to custom/shared/package.json
index 0c0a123..d4d542b 100644
--- a/dailyjs/shared/package.json
+++ b/custom/shared/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "@dailyjs/shared",
+  "name": "@custom/shared",
   "version": "0.1.0",
   "private": true,
   "main": "index.js",
   "dependencies": {
-    "@daily-co/daily-js": "^0.18.0",
+    "@daily-co/daily-js": "^0.19.0",
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "debounce": "^1.2.1",
diff --git a/dailyjs/shared/styles/defaultTheme.js b/custom/shared/styles/defaultTheme.js
similarity index 100%
rename from dailyjs/shared/styles/defaultTheme.js
rename to custom/shared/styles/defaultTheme.js
diff --git a/dailyjs/shared/styles/global.js b/custom/shared/styles/global.js
similarity index 100%
rename from dailyjs/shared/styles/global.js
rename to custom/shared/styles/global.js
diff --git a/dailyjs/recording/.babelrc b/custom/text-chat/.babelrc
similarity index 100%
rename from dailyjs/recording/.babelrc
rename to custom/text-chat/.babelrc
diff --git a/dailyjs/text-chat/README.md b/custom/text-chat/README.md
similarity index 93%
rename from dailyjs/text-chat/README.md
rename to custom/text-chat/README.md
index 6703492..47e5b37 100644
--- a/dailyjs/text-chat/README.md
+++ b/custom/text-chat/README.md
@@ -4,7 +4,7 @@
 
 ### Live example
 
-**[See it in action here ➡️](https://dailyjs-text-chat.vercel.app)**
+**[See it in action here ➡️](https://custom-text-chat.vercel.app)**
 
 ---
 
@@ -25,7 +25,7 @@ Please note: this demo is not currently mobile optimised
 mv env.example .env.local
 
 yarn
-yarn workspace @dailyjs/text-chat dev
+yarn workspace @custom/text-chat dev
 ```
 
 ## How does this example work?
diff --git a/dailyjs/text-chat/components/App/App.js b/custom/text-chat/components/App.js
similarity index 64%
rename from dailyjs/text-chat/components/App/App.js
rename to custom/text-chat/components/App.js
index 7a9a4ce..39292cf 100644
--- a/dailyjs/text-chat/components/App/App.js
+++ b/custom/text-chat/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import App from '@dailyjs/basic-call/components/App';
-import { ChatProvider } from '../../contexts/ChatProvider';
+import App from '@custom/basic-call/components/App';
+import { ChatProvider } from '../contexts/ChatProvider';
 
 // Extend our basic call app component with the chat context
 export const AppWithChat = () => (
diff --git a/dailyjs/text-chat/components/ChatAside/ChatAside.js b/custom/text-chat/components/ChatAside.js
similarity index 89%
rename from dailyjs/text-chat/components/ChatAside/ChatAside.js
rename to custom/text-chat/components/ChatAside.js
index 2c88d3e..16ae754 100644
--- a/dailyjs/text-chat/components/ChatAside/ChatAside.js
+++ b/custom/text-chat/components/ChatAside.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
-import Aside from '@dailyjs/shared/components/Aside';
-import { Button } from '@dailyjs/shared/components/Button';
-import { TextInput } from '@dailyjs/shared/components/Input';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { useChat } from '../../contexts/ChatProvider';
-import { useMessageSound } from '../../hooks/useMessageSound';
+import { Aside } from '@custom/shared/components/Aside';
+import Button from '@custom/shared/components/Button';
+import { TextInput } from '@custom/shared/components/Input';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { useChat } from '../contexts/ChatProvider';
+import { useMessageSound } from '../hooks/useMessageSound';
 
 export const CHAT_ASIDE = 'chat';
 
diff --git a/dailyjs/text-chat/components/Tray/Tray.js b/custom/text-chat/components/Tray.js
similarity index 52%
rename from dailyjs/text-chat/components/Tray/Tray.js
rename to custom/text-chat/components/Tray.js
index b9b12c8..e6904ac 100644
--- a/dailyjs/text-chat/components/Tray/Tray.js
+++ b/custom/text-chat/components/Tray.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { TrayButton } from '@dailyjs/shared/components/Tray';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { ReactComponent as IconChat } from '@dailyjs/shared/icons/chat-md.svg';
-import { useChat } from '../../contexts/ChatProvider';
-import { CHAT_ASIDE } from '../ChatAside/ChatAside';
+import { TrayButton } from '@custom/shared/components/Tray';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { ReactComponent as IconChat } from '@custom/shared/icons/chat-md.svg';
+import { useChat } from '../contexts/ChatProvider';
+import { CHAT_ASIDE } from './ChatAside';
 
 export const Tray = () => {
   const { toggleAside } = useUIState();
diff --git a/dailyjs/text-chat/contexts/ChatProvider.js b/custom/text-chat/contexts/ChatProvider.js
similarity index 96%
rename from dailyjs/text-chat/contexts/ChatProvider.js
rename to custom/text-chat/contexts/ChatProvider.js
index 6ad611a..db90609 100644
--- a/dailyjs/text-chat/contexts/ChatProvider.js
+++ b/custom/text-chat/contexts/ChatProvider.js
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 
diff --git a/dailyjs/live-streaming/env.example b/custom/text-chat/env.example
similarity index 100%
rename from dailyjs/live-streaming/env.example
rename to custom/text-chat/env.example
diff --git a/dailyjs/text-chat/hooks/useMessageSound.js b/custom/text-chat/hooks/useMessageSound.js
similarity index 87%
rename from dailyjs/text-chat/hooks/useMessageSound.js
rename to custom/text-chat/hooks/useMessageSound.js
index 3324693..7449e10 100644
--- a/dailyjs/text-chat/hooks/useMessageSound.js
+++ b/custom/text-chat/hooks/useMessageSound.js
@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 
-import { useSound } from '@dailyjs/shared/hooks/useSound';
+import { useSound } from '@custom/shared/hooks/useSound';
 import { debounce } from 'debounce';
 
 /**
diff --git a/dailyjs/text-chat/image.png b/custom/text-chat/image.png
similarity index 100%
rename from dailyjs/text-chat/image.png
rename to custom/text-chat/image.png
diff --git a/dailyjs/shared/index.js b/custom/text-chat/index.js
similarity index 100%
rename from dailyjs/shared/index.js
rename to custom/text-chat/index.js
diff --git a/dailyjs/live-streaming/next.config.js b/custom/text-chat/next.config.js
similarity index 84%
rename from dailyjs/live-streaming/next.config.js
rename to custom/text-chat/next.config.js
index 9a0a6ee..9140e28 100644
--- a/dailyjs/live-streaming/next.config.js
+++ b/custom/text-chat/next.config.js
@@ -1,7 +1,7 @@
 const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')([
-  '@dailyjs/shared',
-  '@dailyjs/basic-call',
+  '@custom/shared',
+  '@custom/basic-call',
 ]);
 
 const packageJson = require('./package.json');
diff --git a/dailyjs/text-chat/package.json b/custom/text-chat/package.json
similarity index 84%
rename from dailyjs/text-chat/package.json
rename to custom/text-chat/package.json
index cd719e9..c2a4c9a 100644
--- a/dailyjs/text-chat/package.json
+++ b/custom/text-chat/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/text-chat",
+  "name": "@custom/text-chat",
   "description": "Basic Call + Chat Example",
   "version": "0.1.0",
   "private": true,
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dailyjs/shared": "*",
-    "@dailyjs/basic-call": "*",
+    "@custom/shared": "*",
+    "@custom/basic-call": "*",
     "next": "^11.0.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",
diff --git a/dailyjs/text-chat/pages/_app.js b/custom/text-chat/pages/_app.js
similarity index 85%
rename from dailyjs/text-chat/pages/_app.js
rename to custom/text-chat/pages/_app.js
index ad38f4e..64121fa 100644
--- a/dailyjs/text-chat/pages/_app.js
+++ b/custom/text-chat/pages/_app.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import App from '@dailyjs/basic-call/pages/_app';
+import App from '@custom/basic-call/pages/_app';
 import AppWithChat from '../components/App';
 
 import ChatAside from '../components/ChatAside';
diff --git a/custom/text-chat/pages/_document.js b/custom/text-chat/pages/_document.js
new file mode 100644
index 0000000..31f6c1f
--- /dev/null
+++ b/custom/text-chat/pages/_document.js
@@ -0,0 +1,3 @@
+import Doc from '@custom/basic-call/pages/_document';
+
+export default Doc;
diff --git a/dailyjs/recording/pages/api b/custom/text-chat/pages/api
similarity index 100%
rename from dailyjs/recording/pages/api
rename to custom/text-chat/pages/api
diff --git a/dailyjs/text-chat/pages/index.js b/custom/text-chat/pages/index.js
similarity index 63%
rename from dailyjs/text-chat/pages/index.js
rename to custom/text-chat/pages/index.js
index d25e77e..84a3f53 100644
--- a/dailyjs/text-chat/pages/index.js
+++ b/custom/text-chat/pages/index.js
@@ -1,5 +1,5 @@
-import Index from '@dailyjs/basic-call/pages';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import Index from '@custom/basic-call/pages';
+import getDemoProps from '@custom/shared/lib/demoProps';
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
diff --git a/dailyjs/recording/public/assets/daily-logo-dark.svg b/custom/text-chat/public/assets/daily-logo-dark.svg
similarity index 100%
rename from dailyjs/recording/public/assets/daily-logo-dark.svg
rename to custom/text-chat/public/assets/daily-logo-dark.svg
diff --git a/dailyjs/recording/public/assets/daily-logo.svg b/custom/text-chat/public/assets/daily-logo.svg
similarity index 100%
rename from dailyjs/recording/public/assets/daily-logo.svg
rename to custom/text-chat/public/assets/daily-logo.svg
diff --git a/dailyjs/recording/public/assets/join.mp3 b/custom/text-chat/public/assets/join.mp3
similarity index 100%
rename from dailyjs/recording/public/assets/join.mp3
rename to custom/text-chat/public/assets/join.mp3
diff --git a/dailyjs/recording/public/assets/message.mp3 b/custom/text-chat/public/assets/message.mp3
similarity index 100%
rename from dailyjs/recording/public/assets/message.mp3
rename to custom/text-chat/public/assets/message.mp3
diff --git a/dailyjs/recording/public/assets/pattern-bg.png b/custom/text-chat/public/assets/pattern-bg.png
similarity index 100%
rename from dailyjs/recording/public/assets/pattern-bg.png
rename to custom/text-chat/public/assets/pattern-bg.png
diff --git a/dailyjs/basic-call/components/CreatingRoom/index.js b/dailyjs/basic-call/components/CreatingRoom/index.js
deleted file mode 100644
index c92b6f2..0000000
--- a/dailyjs/basic-call/components/CreatingRoom/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CreatingRoom as default } from './CreatingRoom';
-export { CreatingRoom } from './CreatingRoom';
diff --git a/dailyjs/basic-call/components/Intro/index.js b/dailyjs/basic-call/components/Intro/index.js
deleted file mode 100644
index 7994320..0000000
--- a/dailyjs/basic-call/components/Intro/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Intro as default } from './Intro';
-export { Intro } from './Intro';
-export { NotConfigured } from './NotConfigured';
diff --git a/dailyjs/basic-call/components/Room/Room.js b/dailyjs/basic-call/components/Room/Room.js
deleted file mode 100644
index 8efc0bb..0000000
--- a/dailyjs/basic-call/components/Room/Room.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import VideoContainer from '@dailyjs/shared/components/VideoContainer/VideoContainer';
-
-import { VideoGrid } from '../VideoGrid';
-import { Header } from './Header';
-import { RoomContainer } from './RoomContainer';
-
-export const Room = () => (
-  <RoomContainer>
-    <Header />
-    <VideoContainer>
-      <VideoGrid />
-    </VideoContainer>
-  </RoomContainer>
-);
-
-export default Room;
diff --git a/dailyjs/basic-call/components/Room/index.js b/dailyjs/basic-call/components/Room/index.js
deleted file mode 100644
index 2dc7fcb..0000000
--- a/dailyjs/basic-call/components/Room/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Room as default } from './Room';
-export { RoomContainer } from './RoomContainer';
diff --git a/dailyjs/basic-call/components/VideoGrid/index.js b/dailyjs/basic-call/components/VideoGrid/index.js
deleted file mode 100644
index 5285614..0000000
--- a/dailyjs/basic-call/components/VideoGrid/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { VideoGrid as default } from './VideoGrid';
-export { VideoGrid } from './VideoGrid';
diff --git a/dailyjs/basic-call/components/WaitingRoom/index.js b/dailyjs/basic-call/components/WaitingRoom/index.js
deleted file mode 100644
index 48d19f6..0000000
--- a/dailyjs/basic-call/components/WaitingRoom/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { WaitingRoom as default } from './WaitingRoom';
diff --git a/dailyjs/flying-emojis/components/App/index.js b/dailyjs/flying-emojis/components/App/index.js
deleted file mode 100644
index 8887a4b..0000000
--- a/dailyjs/flying-emojis/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithEmojis as default } from './App';
diff --git a/dailyjs/flying-emojis/components/FlyingEmojis/index.js b/dailyjs/flying-emojis/components/FlyingEmojis/index.js
deleted file mode 100644
index 6e98cc3..0000000
--- a/dailyjs/flying-emojis/components/FlyingEmojis/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { FlyingEmojisOverlay } from './FlyingEmojisOverlay';
-export { FlyingEmojisOverlay as default } from './FlyingEmojisOverlay';
diff --git a/dailyjs/flying-emojis/components/Tray/index.js b/dailyjs/flying-emojis/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/dailyjs/flying-emojis/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/dailyjs/live-streaming/README.md b/dailyjs/live-streaming/README.md
deleted file mode 100644
index c5e7974..0000000
--- a/dailyjs/live-streaming/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Live Streaming
-
-![Live Streaming](./image.png)
-
-### Live example
-
-**[See it in action here ➡️](https://dailyjs-live-streaming.vercel.app)**
-
----
-
-## What does this demo do?
-
-- Use [startLiveStreaming](https://docs.daily.co/reference#%EF%B8%8F-startlivestreaming) to send video and audio to specified RTMP endpoint
-- Listen for stream started / stopped / error events
-- Allows call owner to specify stream layout (grid, single participant or active speaker) and maximum cams
-- Extends the basic call demo with a live streaming provider, tray button and modal
-- Show a notification bubble at the top of the screen when live streaming is in progress
-
-Please note: this demo is not currently mobile optimised
-
-### Getting started
-
-```
-# set both DAILY_API_KEY and DAILY_DOMAIN
-mv env.example .env.local
-
-yarn
-yarn workspace @dailyjs/live-streaming dev
-```
-
-## How does this example work?
-
-In this example we extend the [basic call demo](../basic-call) with live streaming functionality.
-
-We pass a custom tray object, a custom app object (wrapping the original in a new `LiveStreamingProvider`) and a custom modal. We also symlink both the `public` and `pages/api` folders from the basic call.
-
-Single live streaming is only available to call owners, you must create a token when joining the call (for simplicity, we have disabled the abiltiy to join the call as a guest.)
-
-## Deploy your own on Vercel
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/daily-co/clone-flow?repository-url=https%3A%2F%2Fgithub.com%2Fdaily-demos%2Fexamples.git&env=DAILY_DOMAIN%2CDAILY_API_KEY&envDescription=Your%20Daily%20domain%20and%20API%20key%20can%20be%20found%20on%20your%20account%20dashboard&envLink=https%3A%2F%2Fdashboard.daily.co&project-name=daily-examples&repo-name=daily-examples)
diff --git a/dailyjs/live-streaming/components/App/App.js b/dailyjs/live-streaming/components/App/App.js
deleted file mode 100644
index 4749551..0000000
--- a/dailyjs/live-streaming/components/App/App.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-import App from '@dailyjs/basic-call/components/App';
-import { LiveStreamingProvider } from '../../contexts/LiveStreamingProvider';
-
-// Extend our basic call app component with the live streaming context
-export const AppWithLiveStreaming = () => (
-  <LiveStreamingProvider>
-    <App />
-  </LiveStreamingProvider>
-);
-
-export default AppWithLiveStreaming;
diff --git a/dailyjs/live-streaming/components/App/index.js b/dailyjs/live-streaming/components/App/index.js
deleted file mode 100644
index c46acf2..0000000
--- a/dailyjs/live-streaming/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithLiveStreaming as default } from './App';
diff --git a/dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js b/dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js
deleted file mode 100644
index 2cee300..0000000
--- a/dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from '@dailyjs/shared/components/Button';
-import { CardBody } from '@dailyjs/shared/components/Card';
-import Field from '@dailyjs/shared/components/Field';
-import { TextInput, SelectInput } from '@dailyjs/shared/components/Input';
-import Modal from '@dailyjs/shared/components/Modal';
-import { Well } from '@dailyjs/shared/components/Well';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { useLiveStreaming } from '../../contexts/LiveStreamingProvider';
-
-export const LIVE_STREAMING_MODAL = 'live-streaming';
-
-const LAYOUTS = [
-  { label: 'Grid (default)', value: 'default' },
-  { label: 'Single participant', value: 'single-participant' },
-  { label: 'Active participant', value: 'active-participant' },
-];
-
-export const LiveStreamingModal = () => {
-  const { callObject } = useCallState();
-  const { allParticipants } = useParticipants();
-  const { currentModals, closeModal } = useUIState();
-  const { isStreaming, streamError } = useLiveStreaming();
-  const [pending, setPending] = useState(false);
-  const [rtmpUrl, setRtmpUrl] = useState('');
-  const [layout, setLayout] = useState(0);
-  const [maxCams, setMaxCams] = useState(9);
-  const [participant, setParticipant] = useState(0);
-
-  useEffect(() => {
-    // Reset pending state whenever stream state changes
-    setPending(false);
-  }, [isStreaming]);
-
-  function startLiveStream() {
-    setPending(true);
-
-    const opts =
-      layout === 'single-participant'
-        ? { session_id: participant.id }
-        : { max_cam_streams: maxCams };
-    callObject.startLiveStreaming({ rtmpUrl, preset: layout, ...opts });
-  }
-
-  function stopLiveStreaming() {
-    setPending(true);
-    callObject.stopLiveStreaming();
-  }
-
-  return (
-    <Modal
-      title="Live stream"
-      isOpen={currentModals[LIVE_STREAMING_MODAL]}
-      onClose={() => closeModal(LIVE_STREAMING_MODAL)}
-      actions={[
-        <Button fullWidth variant="outline">
-          Close
-        </Button>,
-        !isStreaming ? (
-          <Button
-            fullWidth
-            disabled={!rtmpUrl || pending}
-            onClick={() => startLiveStream()}
-          >
-            {pending ? 'Starting stream...' : 'Start live streaming'}
-          </Button>
-        ) : (
-          <Button
-            fullWidth
-            variant="warning"
-            onClick={() => stopLiveStreaming()}
-          >
-            Stop live streaming
-          </Button>
-        ),
-      ]}
-    >
-      {streamError && (
-        <Well variant="error">
-          Unable to start stream. Error message: {streamError}
-        </Well>
-      )}
-      <CardBody>
-        <Field label="Layout">
-          <SelectInput
-            onChange={(e) => setLayout(Number(e.target.value))}
-            value={layout}
-          >
-            {LAYOUTS.map((l, i) => (
-              <option value={i} key={l.value}>
-                {l.label}
-              </option>
-            ))}
-          </SelectInput>
-        </Field>
-
-        {layout !==
-          LAYOUTS.findIndex((l) => l.value === 'single-participant') && (
-          <Field label="Additional cameras">
-            <SelectInput
-              onChange={(e) => setMaxCams(Number(e.target.value))}
-              value={maxCams}
-            >
-              <option value={9}>9 cameras</option>
-              <option value={8}>8 cameras</option>
-              <option value={7}>7 cameras</option>
-              <option value={6}>6 cameras</option>
-              <option value={5}>5 cameras</option>
-              <option value={4}>4 cameras</option>
-              <option value={3}>3 cameras</option>
-              <option value={2}>2 cameras</option>
-              <option value={1}>1 camera</option>
-            </SelectInput>
-          </Field>
-        )}
-
-        {layout ===
-          LAYOUTS.findIndex((l) => l.value === 'single-participant') && (
-          <Field label="Select participant">
-            <SelectInput
-              onChange={(e) => setParticipant(e.target.value)}
-              value={participant}
-            >
-              {allParticipants.map((p) => (
-                <option value={p.id} key={p.id}>
-                  {p.name}
-                </option>
-              ))}
-            </SelectInput>
-          </Field>
-        )}
-
-        <Field label="Enter RTMP endpoint">
-          <TextInput
-            type="text"
-            placeholder="RTMP URL"
-            required
-            onChange={(e) => setRtmpUrl(e.target.value)}
-          />
-        </Field>
-      </CardBody>
-    </Modal>
-  );
-};
-
-export default LiveStreamingModal;
diff --git a/dailyjs/live-streaming/components/LiveStreamingModal/index.js b/dailyjs/live-streaming/components/LiveStreamingModal/index.js
deleted file mode 100644
index 12ffdf0..0000000
--- a/dailyjs/live-streaming/components/LiveStreamingModal/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { LiveStreamingModal as default } from './LiveStreamingModal';
-export { LiveStreamingModal } from './LiveStreamingModal';
-export { LIVE_STREAMING_MODAL } from './LiveStreamingModal';
diff --git a/dailyjs/live-streaming/components/Tray/Tray.js b/dailyjs/live-streaming/components/Tray/Tray.js
deleted file mode 100644
index fa22345..0000000
--- a/dailyjs/live-streaming/components/Tray/Tray.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { TrayButton } from '@dailyjs/shared/components/Tray';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { ReactComponent as IconStream } from '@dailyjs/shared/icons/streaming-md.svg';
-
-import { useLiveStreaming } from '../../contexts/LiveStreamingProvider';
-import { LIVE_STREAMING_MODAL } from '../LiveStreamingModal';
-
-export const Tray = () => {
-  const { openModal } = useUIState();
-  const { isStreaming } = useLiveStreaming();
-
-  return (
-    <TrayButton
-      label={isStreaming ? 'Live' : 'Stream'}
-      orange={isStreaming}
-      onClick={() => openModal(LIVE_STREAMING_MODAL)}
-    >
-      <IconStream />
-    </TrayButton>
-  );
-};
-
-export default Tray;
diff --git a/dailyjs/live-streaming/components/Tray/index.js b/dailyjs/live-streaming/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/dailyjs/live-streaming/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/dailyjs/live-streaming/contexts/LiveStreamingProvider.js b/dailyjs/live-streaming/contexts/LiveStreamingProvider.js
deleted file mode 100644
index f0c4a51..0000000
--- a/dailyjs/live-streaming/contexts/LiveStreamingProvider.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, {
-  useState,
-  createContext,
-  useContext,
-  useEffect,
-  useCallback,
-} from 'react';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import PropTypes from 'prop-types';
-
-export const LiveStreamingContext = createContext();
-
-export const LiveStreamingProvider = ({ children }) => {
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [streamError, setStreamError] = useState();
-  const { setCustomCapsule } = useUIState();
-  const { callObject } = useCallState();
-
-  const handleStreamStarted = useCallback(() => {
-    console.log('📺 Live stream started');
-    setIsStreaming(true);
-    setStreamError(null);
-    setCustomCapsule({ variant: 'recording', label: 'Live streaming' });
-  }, [setCustomCapsule]);
-
-  const handleStreamStopped = useCallback(() => {
-    console.log('📺 Live stream stopped');
-    setIsStreaming(false);
-    setCustomCapsule(null);
-  }, [setCustomCapsule]);
-
-  const handleStreamError = useCallback(
-    (e) => {
-      setIsStreaming(false);
-      setCustomCapsule(null);
-      setStreamError(e.errorMsg);
-    },
-    [setCustomCapsule]
-  );
-
-  useEffect(() => {
-    if (!callObject) {
-      return false;
-    }
-
-    console.log('📺 Live streaming provider listening for stream events');
-
-    callObject.on('live-streaming-started', handleStreamStarted);
-    callObject.on('live-streaming-stopped', handleStreamStopped);
-    callObject.on('live-streaming-error', handleStreamError);
-
-    return () => {
-      callObject.off('live-streaming-started', handleStreamStarted);
-      callObject.off('live-streaming-stopped', handleStreamStopped);
-      callObject.on('live-streaming-error', handleStreamError);
-    };
-  }, [callObject, handleStreamStarted, handleStreamStopped, handleStreamError]);
-
-  return (
-    <LiveStreamingContext.Provider value={{ isStreaming, streamError }}>
-      {children}
-    </LiveStreamingContext.Provider>
-  );
-};
-
-LiveStreamingProvider.propTypes = {
-  children: PropTypes.node,
-};
-
-export const useLiveStreaming = () => useContext(LiveStreamingContext);
diff --git a/dailyjs/live-streaming/image.png b/dailyjs/live-streaming/image.png
deleted file mode 100644
index 9781261..0000000
Binary files a/dailyjs/live-streaming/image.png and /dev/null differ
diff --git a/dailyjs/live-streaming/package.json b/dailyjs/live-streaming/package.json
deleted file mode 100644
index a255016..0000000
--- a/dailyjs/live-streaming/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "@dailyjs/live-streaming",
-  "description": "Basic Call + Live Streaming",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@dailyjs/shared": "*",
-    "@dailyjs/basic-call": "*",
-    "next": "^11.0.0",
-    "pluralize": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "devDependencies": {
-    "babel-plugin-module-resolver": "^4.1.0",
-    "next-compose-plugins": "^2.2.1",
-    "next-transpile-modules": "^8.0.0"
-  }
-}
diff --git a/dailyjs/live-streaming/pages/_app.js b/dailyjs/live-streaming/pages/_app.js
deleted file mode 100644
index 7a097c4..0000000
--- a/dailyjs/live-streaming/pages/_app.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import App from '@dailyjs/basic-call/pages/_app';
-import AppWithLiveStreaming from '../components/App';
-
-import { LiveStreamingModal } from '../components/LiveStreamingModal';
-import Tray from '../components/Tray';
-
-App.modals = [LiveStreamingModal];
-App.customAppComponent = <AppWithLiveStreaming />;
-App.customTrayComponent = <Tray />;
-
-export default App;
diff --git a/dailyjs/pagination/components/App/index.js b/dailyjs/pagination/components/App/index.js
deleted file mode 100644
index 2851771..0000000
--- a/dailyjs/pagination/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithPagination as default } from './App';
diff --git a/dailyjs/pagination/components/PaginatedVideoGrid/index.js b/dailyjs/pagination/components/PaginatedVideoGrid/index.js
deleted file mode 100644
index ea21f7a..0000000
--- a/dailyjs/pagination/components/PaginatedVideoGrid/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { PaginatedVideoGrid as default } from './PaginatedVideoGrid';
diff --git a/dailyjs/pagination/components/Tray/index.js b/dailyjs/pagination/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/dailyjs/pagination/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/dailyjs/recording/components/App/index.js b/dailyjs/recording/components/App/index.js
deleted file mode 100644
index 82a89dc..0000000
--- a/dailyjs/recording/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithRecording as default } from './App';
diff --git a/dailyjs/recording/components/RecordingModal/index.js b/dailyjs/recording/components/RecordingModal/index.js
deleted file mode 100644
index 0a0deca..0000000
--- a/dailyjs/recording/components/RecordingModal/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { RecordingModal as default } from './RecordingModal';
-export { RecordingModal } from './RecordingModal';
-export { RECORDING_MODAL } from './RecordingModal';
diff --git a/dailyjs/recording/components/Tray/index.js b/dailyjs/recording/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/dailyjs/recording/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/dailyjs/recording/pages/index.js b/dailyjs/recording/pages/index.js
deleted file mode 100644
index 2668138..0000000
--- a/dailyjs/recording/pages/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Index from '@dailyjs/basic-call/pages';
-import getDemoProps from '@dailyjs/shared/lib/demoProps';
-
-export async function getStaticProps() {
-  const defaultProps = getDemoProps();
-
-  return {
-    props: {
-      ...defaultProps,
-      forceFetchToken: true,
-      forceOwner: true,
-    },
-  };
-}
-
-export default Index;
diff --git a/dailyjs/shared/assets/daily-logo-dark.svg b/dailyjs/shared/assets/daily-logo-dark.svg
deleted file mode 100644
index ef3a565..0000000
--- a/dailyjs/shared/assets/daily-logo-dark.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="#121A24"/>
-<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="#121A24"/>
-<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="#121A24"/>
-<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="#121A24"/>
-<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="#121A24"/>
-<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1BEBB9"/>
-<stop offset="1" stop-color="#FF9254"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/dailyjs/shared/assets/daily-logo.svg b/dailyjs/shared/assets/daily-logo.svg
deleted file mode 100644
index 534a18a..0000000
--- a/dailyjs/shared/assets/daily-logo.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="white"/>
-<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="white"/>
-<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="white"/>
-<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="white"/>
-<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="white"/>
-<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1BEBB9"/>
-<stop offset="1" stop-color="#FF9254"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/dailyjs/shared/assets/join.mp3 b/dailyjs/shared/assets/join.mp3
deleted file mode 100644
index 7657915..0000000
Binary files a/dailyjs/shared/assets/join.mp3 and /dev/null differ
diff --git a/dailyjs/shared/assets/message.mp3 b/dailyjs/shared/assets/message.mp3
deleted file mode 100644
index a067315..0000000
Binary files a/dailyjs/shared/assets/message.mp3 and /dev/null differ
diff --git a/dailyjs/shared/assets/pattern-bg.png b/dailyjs/shared/assets/pattern-bg.png
deleted file mode 100644
index 01e0d0d..0000000
Binary files a/dailyjs/shared/assets/pattern-bg.png and /dev/null differ
diff --git a/dailyjs/shared/components/Audio/AudioTrack.js b/dailyjs/shared/components/Audio/AudioTrack.js
deleted file mode 100644
index e8e53ce..0000000
--- a/dailyjs/shared/components/Audio/AudioTrack.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-const AudioTrack = React.memo(
-  ({ track }) => {
-    const audioRef = useRef(null);
-
-    useEffect(() => {
-      if (!audioRef.current) return false;
-      let playTimeout;
-
-      const handleCanPlay = () => {
-        playTimeout = setTimeout(() => {
-          console.log('Unable to autoplay audio element');
-        }, 1500);
-      };
-      const handlePlay = () => {
-        clearTimeout(playTimeout);
-      };
-      audioRef.current.addEventListener('canplay', handleCanPlay);
-      audioRef.current.addEventListener('play', handlePlay);
-      audioRef.current.srcObject = new MediaStream([track]);
-
-      const audioEl = audioRef.current;
-
-      return () => {
-        audioEl?.removeEventListener('canplay', handleCanPlay);
-        audioEl?.removeEventListener('play', handlePlay);
-      };
-    }, [track]);
-
-    return track ? (
-      <audio autoPlay playsInline ref={audioRef}>
-        <track kind="captions" />
-      </audio>
-    ) : null;
-  },
-  () => true
-);
-
-AudioTrack.propTypes = {
-  track: PropTypes.object,
-};
-
-export default AudioTrack;
diff --git a/dailyjs/shared/components/Audio/index.js b/dailyjs/shared/components/Audio/index.js
deleted file mode 100644
index de613b3..0000000
--- a/dailyjs/shared/components/Audio/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Audio as default } from './Audio';
-export { Audio } from './Audio';
diff --git a/dailyjs/shared/components/GlobalHead/GlobalHead.js b/dailyjs/shared/components/GlobalHead/GlobalHead.js
deleted file mode 100644
index dc4660a..0000000
--- a/dailyjs/shared/components/GlobalHead/GlobalHead.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-export const GlobalHead = () => (
-  <Head>
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=optional"
-      rel="stylesheet"
-    />
-  </Head>
-);
-
-export default GlobalHead;
diff --git a/dailyjs/shared/components/GlobalHead/index.js b/dailyjs/shared/components/GlobalHead/index.js
deleted file mode 100644
index 2d9ccec..0000000
--- a/dailyjs/shared/components/GlobalHead/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { GlobalHead as default } from './GlobalHead';
-export { GlobalHead } from './GlobalHead';
diff --git a/dailyjs/shared/components/Tile/Video/index.js b/dailyjs/shared/components/Tile/Video/index.js
deleted file mode 100644
index ff5c13f..0000000
--- a/dailyjs/shared/components/Tile/Video/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Video as default } from './Video';
-export { Video } from './Video';
diff --git a/dailyjs/shared/components/VideoContainer/index.js b/dailyjs/shared/components/VideoContainer/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/dailyjs/text-chat/.babelrc b/dailyjs/text-chat/.babelrc
deleted file mode 100644
index a6f4434..0000000
--- a/dailyjs/text-chat/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "presets": ["next/babel"],
-  "plugins": ["inline-react-svg"]
-}
diff --git a/dailyjs/text-chat/components/App/index.js b/dailyjs/text-chat/components/App/index.js
deleted file mode 100644
index 770f031..0000000
--- a/dailyjs/text-chat/components/App/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { AppWithChat as default } from './App';
diff --git a/dailyjs/text-chat/components/ChatAside/index.js b/dailyjs/text-chat/components/ChatAside/index.js
deleted file mode 100644
index 8e15e50..0000000
--- a/dailyjs/text-chat/components/ChatAside/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ChatAside as default } from './ChatAside';
diff --git a/dailyjs/text-chat/components/Tray/index.js b/dailyjs/text-chat/components/Tray/index.js
deleted file mode 100644
index 100bcc8..0000000
--- a/dailyjs/text-chat/components/Tray/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tray as default } from './Tray';
diff --git a/dailyjs/text-chat/env.example b/dailyjs/text-chat/env.example
deleted file mode 100644
index 5ab7e03..0000000
--- a/dailyjs/text-chat/env.example
+++ /dev/null
@@ -1,8 +0,0 @@
-# Domain excluding 'https://' and 'daily.co' e.g. 'somedomain'
-DAILY_DOMAIN=
-
-# Obtained from https://dashboard.daily.co/developers
-DAILY_API_KEY=
-
-# Daily REST API endpoint
-DAILY_REST_DOMAIN=https://api.daily.co/v1
diff --git a/dailyjs/text-chat/index.js b/dailyjs/text-chat/index.js
deleted file mode 100644
index 9044efc..0000000
--- a/dailyjs/text-chat/index.js
+++ /dev/null
@@ -1 +0,0 @@
-// Note: I am here because next-transpile-modules requires a mainfile
diff --git a/dailyjs/text-chat/next.config.js b/dailyjs/text-chat/next.config.js
deleted file mode 100644
index 9a0a6ee..0000000
--- a/dailyjs/text-chat/next.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const withPlugins = require('next-compose-plugins');
-const withTM = require('next-transpile-modules')([
-  '@dailyjs/shared',
-  '@dailyjs/basic-call',
-]);
-
-const packageJson = require('./package.json');
-
-module.exports = withPlugins([withTM], {
-  env: {
-    PROJECT_TITLE: packageJson.description,
-  },
-});
diff --git a/dailyjs/text-chat/pages/api b/dailyjs/text-chat/pages/api
deleted file mode 120000
index 999f604..0000000
--- a/dailyjs/text-chat/pages/api
+++ /dev/null
@@ -1 +0,0 @@
-../../basic-call/pages/api
\ No newline at end of file
diff --git a/dailyjs/text-chat/public/assets/daily-logo-dark.svg b/dailyjs/text-chat/public/assets/daily-logo-dark.svg
deleted file mode 100644
index ef3a565..0000000
--- a/dailyjs/text-chat/public/assets/daily-logo-dark.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="#121A24"/>
-<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="#121A24"/>
-<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="#121A24"/>
-<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="#121A24"/>
-<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="#121A24"/>
-<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1BEBB9"/>
-<stop offset="1" stop-color="#FF9254"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/dailyjs/text-chat/public/assets/daily-logo.svg b/dailyjs/text-chat/public/assets/daily-logo.svg
deleted file mode 100644
index 534a18a..0000000
--- a/dailyjs/text-chat/public/assets/daily-logo.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="white"/>
-<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="white"/>
-<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="white"/>
-<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="white"/>
-<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="white"/>
-<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1BEBB9"/>
-<stop offset="1" stop-color="#FF9254"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/dailyjs/text-chat/public/assets/join.mp3 b/dailyjs/text-chat/public/assets/join.mp3
deleted file mode 100644
index 7657915..0000000
Binary files a/dailyjs/text-chat/public/assets/join.mp3 and /dev/null differ
diff --git a/dailyjs/text-chat/public/assets/message.mp3 b/dailyjs/text-chat/public/assets/message.mp3
deleted file mode 100644
index a067315..0000000
Binary files a/dailyjs/text-chat/public/assets/message.mp3 and /dev/null differ
diff --git a/dailyjs/text-chat/public/assets/pattern-bg.png b/dailyjs/text-chat/public/assets/pattern-bg.png
deleted file mode 100644
index 01e0d0d..0000000
Binary files a/dailyjs/text-chat/public/assets/pattern-bg.png and /dev/null differ
diff --git a/package.json b/package.json
index 6ac8fe8..185400a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "license": "MIT",
   "private": true,
   "workspaces": [
-    "dailyjs/*",
+    "custom/*",
     "prebuilt-ui/*"
   ],
   "engines": {
@@ -15,13 +15,9 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "eslint": "^7.25.0",
-    "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-config-next": "^11.0.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 073555d..66c15fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,6 +46,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-split-export-declaration@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
@@ -58,6 +63,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
+  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
@@ -82,6 +92,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
   integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
 
+"@babel/plugin-syntax-jsx@7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.13.17"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.13.17.tgz#9baf45f03d4d013f021760b992d6349a9d27deaf"
@@ -97,6 +114,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.15.3":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
+  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2":
   version "7.13.17"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
@@ -134,6 +158,14 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/types@7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
+  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -160,10 +192,10 @@
     "@babel/helper-validator-identifier" "^7.12.11"
     to-fast-properties "^2.0.0"
 
-"@daily-co/daily-js@^0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@daily-co/daily-js/-/daily-js-0.18.0.tgz#b8341c2ac12b6e27fec2ab187be6cca699e60dce"
-  integrity sha512-MXY6mpC0bJ1RCbVLlNioOfoNFhMX8lwoI/G9t3d/CAQqO9brxnp73t2Ltyaf2SXMIR+S88flgtfMcRtEBnFsjQ==
+"@daily-co/daily-js@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@daily-co/daily-js/-/daily-js-0.19.0.tgz#86ff62156c7ec25a1c49df5ca8edb3b7c078fb45"
+  integrity sha512-0Ixg80NUeHQX6Z044ZhKIYd0ppo5kK8SmEWbrmsjWAB01zaYQTshA+dY4HgkJfc6pG59LzZ8maziwpNEPLyliA==
   dependencies:
     "@babel/runtime" "^7.12.5"
     bowser "^2.8.1"
@@ -206,11 +238,21 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"
   integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==
 
+"@napi-rs/triples@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
+  integrity sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==
+
 "@next/env@11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-11.0.0.tgz#bdd306a45e88ba3e4e7a36aa91806f6486bb61d0"
   integrity sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA==
 
+"@next/env@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-11.1.2.tgz#27996efbbc54c5f949f5e8c0a156e3aa48369b99"
+  integrity sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA==
+
 "@next/eslint-plugin-next@11.0.1":
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-11.0.1.tgz#5dd3264a40fadcf28eba00d914d69103422bb7e6"
@@ -221,6 +263,11 @@
   resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.0.0.tgz#cb2f46b323bbe7f8a337ccd80fb82314d4039403"
   integrity sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg==
 
+"@next/polyfill-module@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.1.2.tgz#1fe92c364fdc81add775a16c678f5057c6aace98"
+  integrity sha512-xZmixqADM3xxtqBV0TpAwSFzWJP0MOQzRfzItHXf1LdQHWb0yofHHC+7eOrPFic8+ZGz5y7BdPkkgR1S25OymA==
+
 "@next/react-dev-overlay@11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz#6befb4d00d952551db1b3909023074eb5778ac5d"
@@ -238,11 +285,60 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
+"@next/react-dev-overlay@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.1.2.tgz#73795dc5454b7af168bac93df7099965ebb603be"
+  integrity sha512-rDF/mGY2NC69mMg2vDqzVpCOlWqnwPUXB2zkARhvknUHyS6QJphPYv9ozoPJuoT/QBs49JJd9KWaAzVBvq920A==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    anser "1.4.9"
+    chalk "4.0.0"
+    classnames "2.2.6"
+    css.escape "1.5.1"
+    data-uri-to-buffer "3.0.1"
+    platform "1.3.6"
+    shell-quote "1.7.2"
+    source-map "0.8.0-beta.0"
+    stacktrace-parser "0.1.10"
+    strip-ansi "6.0.0"
+
 "@next/react-refresh-utils@11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz#cb671723c50b904eaa44b4b45c0845476ecd8825"
   integrity sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==
 
+"@next/react-refresh-utils@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz#44ea40d8e773e4b77bad85e24f6ac041d5e4b4a5"
+  integrity sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==
+
+"@next/swc-darwin-arm64@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.2.tgz#93226c38db488c4b62b30a53b530e87c969b8251"
+  integrity sha512-hZuwOlGOwBZADA8EyDYyjx3+4JGIGjSHDHWrmpI7g5rFmQNltjlbaefAbiU5Kk7j3BUSDwt30quJRFv3nyJQ0w==
+
+"@next/swc-darwin-x64@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.2.tgz#792003989f560c00677b5daeff360b35b510db83"
+  integrity sha512-PGOp0E1GisU+EJJlsmJVGE+aPYD0Uh7zqgsrpD3F/Y3766Ptfbe1lEPPWnRDl+OzSSrSrX1lkyM/Jlmh5OwNvA==
+
+"@next/swc-linux-x64-gnu@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.2.tgz#8216b2ae1f21f0112958735c39dd861088108f37"
+  integrity sha512-YcDHTJjn/8RqvyJVB6pvEKXihDcdrOwga3GfMv/QtVeLphTouY4BIcEUfrG5+26Nf37MP1ywN3RRl1TxpurAsQ==
+
+"@next/swc-win32-x64-msvc@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.2.tgz#e15824405df137129918205e43cb5e9339589745"
+  integrity sha512-e/pIKVdB+tGQYa1cW3sAeHm8gzEri/HYLZHT4WZojrUxgWXqx8pk7S7Xs47uBcFTqBDRvK3EcQpPLf3XdVsDdg==
+
+"@node-rs/helper@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@node-rs/helper/-/helper-1.2.1.tgz#e079b05f21ff4329d82c4e1f71c0290e4ecdc70c"
+  integrity sha512-R5wEmm8nbuQU0YGGmYVjEc0OHtYsuXdpRG+Ut/3wZ9XAvQWyThN08bTh2cBJgoZxHQUPtvRfeQuxcAgLuiBISg==
+  dependencies:
+    "@napi-rs/triples" "^1.0.3"
+
 "@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"
@@ -838,11 +934,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-confusing-browser-globals@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz#30d1e7f3d1b882b25ec4933d1d1adac353d20a59"
-  integrity sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==
-
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -968,6 +1059,13 @@ cssnano-preset-simple@^2.0.0:
   dependencies:
     caniuse-lite "^1.0.30001202"
 
+cssnano-preset-simple@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz#e95d0012699ca2c741306e9a3b8eeb495a348dbe"
+  integrity sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==
+  dependencies:
+    caniuse-lite "^1.0.30001202"
+
 cssnano-simple@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-2.0.0.tgz#930d9dcd8ba105c5a62ce719cb00854da58b5c05"
@@ -975,6 +1073,13 @@ cssnano-simple@2.0.0:
   dependencies:
     cssnano-preset-simple "^2.0.0"
 
+cssnano-simple@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-3.0.0.tgz#a4b8ccdef4c7084af97e19bc5b93b4ecf211e90f"
+  integrity sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==
+  dependencies:
+    cssnano-preset-simple "^3.0.0"
+
 csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
@@ -1254,24 +1359,6 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-eslint-config-airbnb-base@^14.2.1:
-  version "14.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e"
-  integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==
-  dependencies:
-    confusing-browser-globals "^1.0.10"
-    object.assign "^4.1.2"
-    object.entries "^1.1.2"
-
-eslint-config-airbnb@^18.2.1:
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
-  integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg==
-  dependencies:
-    eslint-config-airbnb-base "^14.2.1"
-    object.assign "^4.1.2"
-    object.entries "^1.1.2"
-
 eslint-config-next@^11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-11.0.1.tgz#abdd2565a6fa5841556a89ba935f044bec173d0b"
@@ -1385,24 +1472,6 @@ eslint-plugin-react@^7.23.1:
     resolve "^2.0.0-next.3"
     string.prototype.matchall "^4.0.5"
 
-eslint-plugin-react@^7.23.2:
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz#2d2291b0f95c03728b55869f01102290e792d494"
-  integrity sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==
-  dependencies:
-    array-includes "^3.1.3"
-    array.prototype.flatmap "^1.2.4"
-    doctrine "^2.1.0"
-    has "^1.0.3"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.0.4"
-    object.entries "^1.1.3"
-    object.fromentries "^2.0.4"
-    object.values "^1.1.3"
-    prop-types "^15.7.2"
-    resolve "^2.0.0-next.3"
-    string.prototype.matchall "^4.0.4"
-
 eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -2388,6 +2457,67 @@ next@^11.0.0:
     vm-browserify "1.1.2"
     watchpack "2.1.1"
 
+next@^11.1.2:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/next/-/next-11.1.2.tgz#527475787a9a362f1bc916962b0c0655cc05bc91"
+  integrity sha512-azEYL0L+wFjv8lstLru3bgvrzPvK0P7/bz6B/4EJ9sYkXeW8r5Bjh78D/Ol7VOg0EIPz0CXoe72hzAlSAXo9hw==
+  dependencies:
+    "@babel/runtime" "7.15.3"
+    "@hapi/accept" "5.0.2"
+    "@next/env" "11.1.2"
+    "@next/polyfill-module" "11.1.2"
+    "@next/react-dev-overlay" "11.1.2"
+    "@next/react-refresh-utils" "11.1.2"
+    "@node-rs/helper" "1.2.1"
+    assert "2.0.0"
+    ast-types "0.13.2"
+    browserify-zlib "0.2.0"
+    browserslist "4.16.6"
+    buffer "5.6.0"
+    caniuse-lite "^1.0.30001228"
+    chalk "2.4.2"
+    chokidar "3.5.1"
+    constants-browserify "1.0.0"
+    crypto-browserify "3.12.0"
+    cssnano-simple "3.0.0"
+    domain-browser "4.19.0"
+    encoding "0.1.13"
+    etag "1.8.1"
+    find-cache-dir "3.3.1"
+    get-orientation "1.1.2"
+    https-browserify "1.0.0"
+    image-size "1.0.0"
+    jest-worker "27.0.0-next.5"
+    native-url "0.3.4"
+    node-fetch "2.6.1"
+    node-html-parser "1.4.9"
+    node-libs-browser "^2.2.1"
+    os-browserify "0.3.0"
+    p-limit "3.1.0"
+    path-browserify "1.0.1"
+    pnp-webpack-plugin "1.6.4"
+    postcss "8.2.15"
+    process "0.11.10"
+    querystring-es3 "0.2.1"
+    raw-body "2.4.1"
+    react-is "17.0.2"
+    react-refresh "0.8.3"
+    stream-browserify "3.0.0"
+    stream-http "3.1.1"
+    string_decoder "1.3.0"
+    styled-jsx "4.0.1"
+    timers-browserify "2.0.12"
+    tty-browserify "0.0.1"
+    use-subscription "1.5.1"
+    util "0.12.4"
+    vm-browserify "1.1.2"
+    watchpack "2.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "11.1.2"
+    "@next/swc-darwin-x64" "11.1.2"
+    "@next/swc-linux-x64-gnu" "11.1.2"
+    "@next/swc-win32-x64-msvc" "11.1.2"
+
 no-scroll@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/no-scroll/-/no-scroll-2.1.1.tgz#f37e08cb159b75a5bdbfc0a87cd9223e120e6e27"
@@ -2499,16 +2629,6 @@ object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.2, object.entries@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
-  integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has "^1.0.3"
-
 object.entries@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd"
@@ -2528,7 +2648,7 @@ object.fromentries@^2.0.4:
     es-abstract "^1.18.0-next.2"
     has "^1.0.3"
 
-object.values@^1.1.1, object.values@^1.1.3:
+object.values@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
   integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
@@ -2773,6 +2893,15 @@ postcss@8.2.13:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
+postcss@8.2.15:
+  version "8.2.15"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
+  integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map "^0.6.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -3280,19 +3409,6 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.matchall@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29"
-  integrity sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has-symbols "^1.0.1"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.3.1"
-    side-channel "^1.0.4"
-
 string.prototype.matchall@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz#59370644e1db7e4c0c045277690cf7b01203c4da"
@@ -3368,6 +3484,20 @@ styled-jsx@3.3.2:
     stylis "3.5.4"
     stylis-rule-sheet "0.0.10"
 
+styled-jsx@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.1.tgz#ae3f716eacc0792f7050389de88add6d5245b9e9"
+  integrity sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "7.14.5"
+    "@babel/types" "7.15.0"
+    convert-source-map "1.7.0"
+    loader-utils "1.2.3"
+    source-map "0.7.3"
+    string-hash "1.1.3"
+    stylis "3.5.4"
+    stylis-rule-sheet "0.0.10"
+
 stylis-rule-sheet@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
@@ -3598,6 +3728,18 @@ util@0.12.3, util@^0.12.0:
     safe-buffer "^5.1.2"
     which-typed-array "^1.1.2"
 
+util@0.12.4:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
+  integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
+  dependencies:
+    inherits "^2.0.3"
+    is-arguments "^1.0.4"
+    is-generator-function "^1.0.7"
+    is-typed-array "^1.1.3"
+    safe-buffer "^5.1.2"
+    which-typed-array "^1.1.2"
+
 util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"