send new message

2022-05-20 02:45:07 +02:00 · 2022-05-20 02:45:07 +02:00 · 19a35bac92
commit 19a35bac92
parent 306572d947
7 changed files with 509 additions and 158 deletions
--- a/app/features/messages/components/empty-messages.tsx
+++ b/app/features/messages/components/empty-messages.tsx
@ -1,12 +1,11 @@
 import { IoCreateOutline, IoMailOutline } from "react-icons/io5";
-// import { useAtom } from "jotai";
+import { useAtom } from "jotai";

-// import { bottomSheetOpenAtom } from "../pages/messages";
+import { bottomSheetOpenAtom } from "~/routes/__app/messages";

 export default function EmptyMessages() {
-	// const setIsBottomSheetOpen = useAtom(bottomSheetOpenAtom)[1];
-	// const openNewMessageArea = () => setIsBottomSheetOpen(true);
-	const openNewMessageArea = () => void 0;
+	const setIsBottomSheetOpen = useAtom(bottomSheetOpenAtom)[1];
+	const openNewMessageArea = () => setIsBottomSheetOpen(true);

 	return (
 		<div className="text-center my-auto">
--- a/app/features/messages/components/new-message-area.tsx
+++ b/app/features/messages/components/new-message-area.tsx
@ -1,8 +1,14 @@
+import type { FunctionComponent } from "react";
 import { useEffect, useRef } from "react";
 import { Form, useTransition } from "@remix-run/react";
 import { IoSend } from "react-icons/io5";

-function NewMessageArea() {
+type Props = {
+	onSend?: () => void;
+	recipient: string;
+};
+
+const NewMessageArea: FunctionComponent<Props> = ({ onSend, recipient }) => {
 	const transition = useTransition();
 	const formRef = useRef<HTMLFormElement>(null);
 	const textFieldRef = useRef<HTMLTextAreaElement>(null);
@ -12,12 +18,14 @@ function NewMessageArea() {
 		if (isSendingMessage) {
 			formRef.current?.reset();
 			textFieldRef.current?.focus();
+			onSend?.();
 		}
-	}, [isSendingMessage]);
+	}, [isSendingMessage, onSend]);

 	return (
 		<Form
 			ref={formRef}
+			action={`/messages/${recipient}`}
 			method="post"
 			className="absolute bottom-0 w-screen backdrop-filter backdrop-blur-xl bg-white bg-opacity-75 border-t flex flex-row p-2 pr-0"
 			replace
@ -41,6 +49,6 @@ function NewMessageArea() {
 			</button>
 		</Form>
 	);
-}
+};

 export default NewMessageArea;
--- a/app/features/messages/components/new-message-bottom-sheet.tsx
+++ b/app/features/messages/components/new-message-bottom-sheet.tsx
@ -0,0 +1,54 @@
+import { Suspense, useRef, useState } from "react";
+import BottomSheet from "react-modal-sheet";
+import { useAtom } from "jotai";
+
+import NewMessageArea from "./new-message-area";
+import { bottomSheetOpenAtom } from "~/routes/__app/messages";
+
+export default function NewMessageBottomSheet() {
+	const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
+	const [recipient, setRecipient] = useState("");
+	const recipientRef = useRef<HTMLInputElement>(null);
+
+	return (
+		<BottomSheet
+			isOpen={isOpen}
+			onOpenEnd={() => {
+				// doesn't work with iOS safari *sigh*
+				recipientRef.current?.focus();
+			}}
+			onClose={() => setIsOpen(false)}
+			snapPoints={[0.5]}
+		>
+			<BottomSheet.Container>
+				<BottomSheet.Header>
+					<div className="w-full flex items-center justify-center p-4 text-black relative">
+						<span className="font-semibold text-base">New Message</span>
+
+						<button onClick={() => setIsOpen(false)} className="absolute right-4">
+							Cancel
+						</button>
+					</div>
+				</BottomSheet.Header>
+				<BottomSheet.Content>
+					<main className="flex flex-col h-full overflow-hidden">
+						<div className="flex items-center p-4 border-t border-b">
+							<span className="mr-4 text-[#333]">To:</span>
+							<input
+								ref={recipientRef}
+								onChange={(event) => setRecipient(event.target.value)}
+								className="bg-none border-none outline-none flex-1 text-black"
+								type="tel"
+							/>
+						</div>
+						<Suspense fallback={null}>
+							<NewMessageArea onSend={() => setIsOpen(false)} recipient={recipient} />
+						</Suspense>
+					</main>
+				</BottomSheet.Content>
+			</BottomSheet.Container>
+
+			<BottomSheet.Backdrop onTap={() => setIsOpen(false)} />
+		</BottomSheet>
+	);
+}
--- a/app/features/messages/components/new-message-button.tsx
+++ b/app/features/messages/components/new-message-button.tsx
@ -0,0 +1,20 @@
+import type { FunctionComponent, MouseEventHandler } from "react";
+import { IoCreateOutline } from "react-icons/io5";
+
+type Props = {
+	onClick: MouseEventHandler<HTMLButtonElement>;
+};
+
+const NewMessageButton: FunctionComponent<Props> = ({ onClick }) => {
+	return (
+		<button
+			onClick={onClick}
+			className="absolute bottom-20 right-6
+			w-14 h-14 bg-gray-800 rounded-full hover:bg-gray-900 active:shadow-lg shadow transition ease-in duration-200 focus:outline-none"
+		>
+			<IoCreateOutline className="m-auto pl-0.5 text-white w-8 h-8" />
+		</button>
+	);
+};
+
+export default NewMessageButton;
--- a/app/routes/__app/messages.tsx
+++ b/app/routes/__app/messages.tsx
@ -1,15 +1,18 @@
 import { useLoaderData } from "superjson-remix";
+import { atom, useAtom } from "jotai";

 import messagesLoader, { type MessagesLoaderData } from "~/features/messages/loaders/messages";
 import PageTitle from "~/features/core/components/page-title";
 import MissingTwilioCredentials from "~/features/core/components/missing-twilio-credentials";
 import ConversationsList from "~/features/messages/components/conversations-list";
 import NewMessageButton from "~/features/messages/components/new-message-button";
+import NewMessageBottomSheet from "~/features/messages/components/new-message-bottom-sheet";

 export const loader = messagesLoader;

 export default function MessagesPage() {
 	const { user } = useLoaderData<MessagesLoaderData>();
+	const setIsNewMessageSheetOpen = useAtom(bottomSheetOpenAtom)[1];

 	if (!user.hasPhoneNumber) {
 		return (
@ -26,6 +29,10 @@ export default function MessagesPage() {
 			<section className="flex flex-grow flex-col">
 				<ConversationsList />
 			</section>
+			<NewMessageButton onClick={() => setIsNewMessageSheetOpen(true)} />
+			<NewMessageBottomSheet />
 		</>
 	);
 }
+
+export const bottomSheetOpenAtom = atom(false);
--- a/package-lock.json
+++ b/package-lock.json
@ -35,6 +35,7 @@
 				"react": "18.1.0",
 				"react-dom": "18.1.0",
 				"react-icons": "4.3.1",
+				"react-modal-sheet": "1.5.1",
 				"remix-auth": "3.2.2",
 				"remix-auth-form": "1.1.2",
 				"remix-seo": "0.1.0",
@ -90,6 +91,68 @@
 				"node": "16"
 			}
 		},
+		"../react-spring-bottom-sheet": {
+			"name": "@m5r/react-spring-bottom-sheet",
+			"version": "3.4.1",
+			"extraneous": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/eslint-parser": "^7.17.0",
+				"@headlessui/react": "^1.6.2",
+				"@juggle/resize-observer": "^3.3.1",
+				"@use-gesture/react": "^10.2.14",
+				"@xstate/react": "^3.0.0",
+				"body-scroll-lock": "4.0.0-beta.0",
+				"focus-trap": "^6.9.2",
+				"postcss-import-svg": "^1.0.5",
+				"react-spring": "^9.4.5",
+				"xstate": "^4.32.1"
+			},
+			"devDependencies": {
+				"@react-spring/web": "^9.4.5",
+				"@rooks/use-raf": "^4.11.2",
+				"@semantic-release/changelog": "^6.0.1",
+				"@semantic-release/git": "^10.0.1",
+				"@tailwindcss/forms": "^0.5.1",
+				"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+				"@types/node": "^17.0.33",
+				"@types/react": "^18.0.9",
+				"@typescript-eslint/eslint-plugin": "^5.24.0",
+				"@typescript-eslint/parser": "^5.24.0",
+				"@use-it/interval": "^1.0.0",
+				"@xstate/inspect": "^0.7.0",
+				"autoprefixer": "^10.4.7",
+				"babel-plugin-transform-remove-console": "^6.9.4",
+				"clsx": "^1.1.1",
+				"eslint": "^8.15.0",
+				"eslint-config-react-app": "^7.0.1",
+				"eslint-plugin-flowtype": "^8.0.3",
+				"eslint-plugin-import": "^2.26.0",
+				"eslint-plugin-jsx-a11y": "^6.5.1",
+				"eslint-plugin-react": "^7.29.4",
+				"eslint-plugin-react-hooks": "^4.5.0",
+				"husky": "^8.0.1",
+				"lint-staged": "^12.4.1",
+				"microbundle": "^0.15.0",
+				"next": "^12.1.6",
+				"postcss": "^8.4.13",
+				"postcss-cli": "^9.1.0",
+				"postcss-nesting": "^10.1.5",
+				"postcss-preset-env": "^7.5.0",
+				"prettier": "^2.6.2",
+				"prettier-package-json": "^2.6.3",
+				"react": "^18.1.0",
+				"react-dom": "^18.1.0",
+				"rimraf": "^3.0.2",
+				"semantic-release": "^19.0.2",
+				"smooth-scroll-into-view-if-needed": "^1.1.33",
+				"tailwindcss": "^3.0.24",
+				"typescript": "^4.6.4"
+			},
+			"peerDependencies": {
+				"react": "^16.14.0 || 17 || 18"
+			}
+		},
 		"node_modules/@ampproject/remapping": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@ -441,9 +504,9 @@
 			}
 		},
 		"node_modules/@babel/helper-plugin-utils": {
-			"version": "7.16.7",
-			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-			"integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+			"version": "7.17.12",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
+			"integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
 			"dev": true,
 			"engines": {
 				"node": ">=6.9.0"
@ -2469,6 +2532,23 @@
 				"ms": "^2.1.1"
 			}
 		},
+		"node_modules/@emotion/is-prop-valid": {
+			"version": "0.8.8",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+			"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@emotion/memoize": "0.7.4"
+			}
+		},
+		"node_modules/@emotion/memoize": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/@esbuild-plugins/node-modules-polyfill": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/@esbuild-plugins/node-modules-polyfill/-/node-modules-polyfill-0.1.4.tgz",
@ -3748,9 +3828,9 @@
 			}
 		},
 		"node_modules/@socket.io/component-emitter": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
-			"integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+			"integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
 		},
 		"node_modules/@szmarczak/http-timer": {
 			"version": "4.0.6",
@ -5056,7 +5136,7 @@
 		"node_modules/async-each-series": {
 			"version": "0.1.1",
 			"resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz",
-			"integrity": "sha1-dhfBkXQB/Yykooqtzj266Yr+tDI=",
+			"integrity": "sha512-p4jj6Fws4Iy2m0iCmI2am2ZNZCgbdgE+P8F/8csmn2vx7ixXrO2zGcuNsD46X5uZSVecmkEy/M06X2vG8KD6dQ==",
 			"engines": {
 				"node": ">=0.8.0"
 			}
@ -5277,11 +5357,6 @@
 				"node": ">= 10.0.0"
 			}
 		},
-		"node_modules/backo2": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-			"integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
-		},
 		"node_modules/bail": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -5576,12 +5651,12 @@
 			}
 		},
 		"node_modules/browser-sync": {
-			"version": "2.27.9",
-			"resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.9.tgz",
-			"integrity": "sha512-3zBtggcaZIeU9so4ja9yxk7/CZu9B3DOL6zkxFpzHCHsQmkGBPVXg61jItbeoa+WXgNLnr1sYES/2yQwyEZ2+w==",
+			"version": "2.27.10",
+			"resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.10.tgz",
+			"integrity": "sha512-xKm+6KJmJu6RuMWWbFkKwOCSqQOxYe3nOrFkKI5Tr/ZzjPxyU3pFShKK3tWnazBo/3lYQzN7fzjixG8fwJh1Xw==",
 			"dependencies": {
-				"browser-sync-client": "^2.27.9",
-				"browser-sync-ui": "^2.27.9",
+				"browser-sync-client": "^2.27.10",
+				"browser-sync-ui": "^2.27.10",
 				"bs-recipes": "1.3.4",
 				"bs-snippet-injector": "^2.0.1",
 				"chokidar": "^3.5.1",
@ -5598,7 +5673,7 @@
 				"localtunnel": "^2.0.1",
 				"micromatch": "^4.0.2",
 				"opn": "5.3.0",
-				"portscanner": "2.1.1",
+				"portscanner": "2.2.0",
 				"qs": "6.2.3",
 				"raw-body": "^2.3.2",
 				"resp-modifier": "6.0.2",
@ -5619,23 +5694,24 @@
 			}
 		},
 		"node_modules/browser-sync-client": {
-			"version": "2.27.9",
-			"resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.9.tgz",
-			"integrity": "sha512-FHW8kydp7FXo6jnX3gXJCpHAHtWNLK0nx839nnK+boMfMI1n4KZd0+DmTxHBsHsF3OHud4V4jwoN8U5HExMIdQ==",
+			"version": "2.27.10",
+			"resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.10.tgz",
+			"integrity": "sha512-KCFKA1YDj6cNul0VsA28apohtBsdk5Wv8T82ClOZPZMZWxPj4Ny5AUbrj9UlAb/k6pdxE5HABrWDhP9+cjt4HQ==",
 			"dependencies": {
 				"etag": "1.8.1",
 				"fresh": "0.5.2",
 				"mitt": "^1.1.3",
-				"rxjs": "^5.5.6"
+				"rxjs": "^5.5.6",
+				"typescript": "^4.6.2"
 			},
 			"engines": {
 				"node": ">=8.0.0"
 			}
 		},
 		"node_modules/browser-sync-ui": {
-			"version": "2.27.9",
-			"resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.9.tgz",
-			"integrity": "sha512-rsduR2bRIwFvM8CX6iY/Nu5aWub0WB9zfSYg9Le/RV5N5DEyxJYey0VxdfWCnzDOoelassTDzYQo+r0iJno3qw==",
+			"version": "2.27.10",
+			"resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.10.tgz",
+			"integrity": "sha512-elbJILq4Uo6OQv6gsvS3Y9vRAJlWu+h8j0JDkF0X/ua+3S6SVbbiWnZc8sNOFlG7yvVGIwBED3eaYQ0iBo1Dtw==",
 			"dependencies": {
 				"async-each-series": "0.1.1",
 				"connect-history-api-fallback": "^1",
@ -8035,19 +8111,15 @@
 			}
 		},
 		"node_modules/engine.io-client": {
-			"version": "6.1.1",
-			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
-			"integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz",
+			"integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==",
 			"dependencies": {
-				"@socket.io/component-emitter": "~3.0.0",
+				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.1",
-				"engine.io-parser": "~5.0.0",
-				"has-cors": "1.1.0",
-				"parseqs": "0.0.6",
-				"parseuri": "0.0.6",
+				"engine.io-parser": "~5.0.3",
 				"ws": "~8.2.3",
-				"xmlhttprequest-ssl": "~2.0.0",
-				"yeast": "0.1.2"
+				"xmlhttprequest-ssl": "~2.0.0"
 			}
 		},
 		"node_modules/engine.io-client/node_modules/ws": {
@ -10328,6 +10400,47 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/framer-motion": {
+			"version": "6.3.3",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.3.3.tgz",
+			"integrity": "sha512-wo0dCnoq5vn4L8YVOPO9W54dliH78vDaX0Lj+bSPUys6Nt5QaehrS3uaYa0q5eVeikUgtTjz070UhQ94thI5Sw==",
+			"peer": true,
+			"dependencies": {
+				"framesync": "6.0.1",
+				"hey-listen": "^1.0.8",
+				"popmotion": "11.0.3",
+				"style-value-types": "5.0.0",
+				"tslib": "^2.1.0"
+			},
+			"optionalDependencies": {
+				"@emotion/is-prop-valid": "^0.8.2"
+			},
+			"peerDependencies": {
+				"react": ">=16.8 || ^17.0.0 || ^18.0.0",
+				"react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/framer-motion/node_modules/tslib": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+			"peer": true
+		},
+		"node_modules/framesync": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+			"integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+			"peer": true,
+			"dependencies": {
+				"tslib": "^2.1.0"
+			}
+		},
+		"node_modules/framesync/node_modules/tslib": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+			"peer": true
+		},
 		"node_modules/fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -10755,11 +10868,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/has-cors": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-			"integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
-		},
 		"node_modules/has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@ -10921,6 +11029,12 @@
 			"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
 			"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
 		},
+		"node_modules/hey-listen": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+			"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+			"peer": true
+		},
 		"node_modules/history": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
@ -15765,16 +15879,6 @@
 				"url": "https://ko-fi.com/killymxi"
 			}
 		},
-		"node_modules/parseqs": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
-			"integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
-		},
-		"node_modules/parseuri": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
-			"integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
-		},
 		"node_modules/parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@ -16024,12 +16128,30 @@
 			"resolved": "https://registry.npmjs.org/pop-iterate/-/pop-iterate-1.0.1.tgz",
 			"integrity": "sha1-zqz9q0q/NT16DyqqLB/Hs/lBO6M="
 		},
-		"node_modules/portscanner": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.1.1.tgz",
-			"integrity": "sha1-6rtAnk3iSVD1oqUW01rnaTQ/u5Y=",
+		"node_modules/popmotion": {
+			"version": "11.0.3",
+			"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+			"integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+			"peer": true,
 			"dependencies": {
-				"async": "1.5.2",
+				"framesync": "6.0.1",
+				"hey-listen": "^1.0.8",
+				"style-value-types": "5.0.0",
+				"tslib": "^2.1.0"
+			}
+		},
+		"node_modules/popmotion/node_modules/tslib": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+			"peer": true
+		},
+		"node_modules/portscanner": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
+			"integrity": "sha512-IFroCz/59Lqa2uBvzK3bKDbDDIEaAY8XJ1jFxcLWTqosrsc32//P4VuSB2vZXoHiHqOmx8B5L5hnKOxL/7FlPw==",
+			"dependencies": {
+				"async": "^2.6.0",
 				"is-number-like": "^1.0.3"
 			},
 			"engines": {
@ -16038,9 +16160,12 @@
 			}
 		},
 		"node_modules/portscanner/node_modules/async": {
-			"version": "1.5.2",
-			"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-			"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+			"version": "2.6.4",
+			"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+			"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+			"dependencies": {
+				"lodash": "^4.17.14"
+			}
 		},
 		"node_modules/posix-character-classes": {
 			"version": "0.1.1",
@ -17425,6 +17550,30 @@
 			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
 			"dev": true
 		},
+		"node_modules/react-merge-refs": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
+			"integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/react-modal-sheet": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/react-modal-sheet/-/react-modal-sheet-1.5.1.tgz",
+			"integrity": "sha512-3StI5MoYH/LZTK6ozUrYMfEtHJGd/niuNLAH44ihXqxNSihceANfEFB8ZpSxHKkuMXIBwrtMf9xPd1oROhZzuQ==",
+			"dependencies": {
+				"react-merge-refs": "1.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"framer-motion": "2.x || 3.x || 4.x || 5.x || 6.x",
+				"react": ">=16"
+			}
+		},
 		"node_modules/react-refresh": {
 			"version": "0.13.0",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz",
@ -18948,27 +19097,25 @@
 			"integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ=="
 		},
 		"node_modules/socket.io-client": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
-			"integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+			"version": "4.5.1",
+			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz",
+			"integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==",
 			"dependencies": {
-				"@socket.io/component-emitter": "~3.0.0",
-				"backo2": "~1.0.2",
+				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.2",
-				"engine.io-client": "~6.1.1",
-				"parseuri": "0.0.6",
-				"socket.io-parser": "~4.1.1"
+				"engine.io-client": "~6.2.1",
+				"socket.io-parser": "~4.2.0"
 			},
 			"engines": {
 				"node": ">=10.0.0"
 			}
 		},
 		"node_modules/socket.io-client/node_modules/socket.io-parser": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
-			"integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.0.tgz",
+			"integrity": "sha512-tLfmEwcEwnlQTxFB7jibL/q2+q8dlVQzj4JdRLJ/W/G1+Fu9VSxCx1Lo+n1HvXxKnM//dUuD0xgiA7tQf57Vng==",
 			"dependencies": {
-				"@socket.io/component-emitter": "~3.0.0",
+				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.1"
 			},
 			"engines": {
@ -19762,6 +19909,22 @@
 				"inline-style-parser": "0.1.1"
 			}
 		},
+		"node_modules/style-value-types": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+			"integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+			"peer": true,
+			"dependencies": {
+				"hey-listen": "^1.0.8",
+				"tslib": "^2.1.0"
+			}
+		},
+		"node_modules/style-value-types/node_modules/tslib": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+			"peer": true
+		},
 		"node_modules/stylehacks": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@ -21666,6 +21829,17 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/xstate": {
+			"version": "4.32.1",
+			"resolved": "https://registry.npmjs.org/xstate/-/xstate-4.32.1.tgz",
+			"integrity": "sha512-QYUd+3GkXZ8i6qdixnOn28bL3EvA++LONYL/EMWwKlFSh/hiLndJ8YTnz77FDs+JUXcwU7NZJg7qoezoRHc4GQ==",
+			"optional": true,
+			"peer": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/xstate"
+			}
+		},
 		"node_modules/xtend": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@ -21739,11 +21913,6 @@
 				"fd-slicer": "~1.1.0"
 			}
 		},
-		"node_modules/yeast": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-			"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
-		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@ -22042,9 +22211,9 @@
 			}
 		},
 		"@babel/helper-plugin-utils": {
-			"version": "7.16.7",
-			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-			"integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+			"version": "7.17.12",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
+			"integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
 			"dev": true
 		},
 		"@babel/helper-remap-async-to-generator": {
@ -23497,6 +23666,23 @@
 				}
 			}
 		},
+		"@emotion/is-prop-valid": {
+			"version": "0.8.8",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+			"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+			"optional": true,
+			"peer": true,
+			"requires": {
+				"@emotion/memoize": "0.7.4"
+			}
+		},
+		"@emotion/memoize": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+			"optional": true,
+			"peer": true
+		},
 		"@esbuild-plugins/node-modules-polyfill": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/@esbuild-plugins/node-modules-polyfill/-/node-modules-polyfill-0.1.4.tgz",
@ -24396,9 +24582,9 @@
 			"integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ=="
 		},
 		"@socket.io/component-emitter": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
-			"integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+			"integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
 		},
 		"@szmarczak/http-timer": {
 			"version": "4.0.6",
@ -25441,7 +25627,7 @@
 		"async-each-series": {
 			"version": "0.1.1",
 			"resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz",
-			"integrity": "sha1-dhfBkXQB/Yykooqtzj266Yr+tDI="
+			"integrity": "sha512-p4jj6Fws4Iy2m0iCmI2am2ZNZCgbdgE+P8F/8csmn2vx7ixXrO2zGcuNsD46X5uZSVecmkEy/M06X2vG8KD6dQ=="
 		},
 		"asynckit": {
 			"version": "0.4.0",
@ -25598,11 +25784,6 @@
 				"@babel/types": "^7.9.6"
 			}
 		},
-		"backo2": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-			"integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
-		},
 		"bail": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -25827,12 +26008,12 @@
 			}
 		},
 		"browser-sync": {
-			"version": "2.27.9",
-			"resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.9.tgz",
-			"integrity": "sha512-3zBtggcaZIeU9so4ja9yxk7/CZu9B3DOL6zkxFpzHCHsQmkGBPVXg61jItbeoa+WXgNLnr1sYES/2yQwyEZ2+w==",
+			"version": "2.27.10",
+			"resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.10.tgz",
+			"integrity": "sha512-xKm+6KJmJu6RuMWWbFkKwOCSqQOxYe3nOrFkKI5Tr/ZzjPxyU3pFShKK3tWnazBo/3lYQzN7fzjixG8fwJh1Xw==",
 			"requires": {
-				"browser-sync-client": "^2.27.9",
-				"browser-sync-ui": "^2.27.9",
+				"browser-sync-client": "^2.27.10",
+				"browser-sync-ui": "^2.27.10",
 				"bs-recipes": "1.3.4",
 				"bs-snippet-injector": "^2.0.1",
 				"chokidar": "^3.5.1",
@ -25849,7 +26030,7 @@
 				"localtunnel": "^2.0.1",
 				"micromatch": "^4.0.2",
 				"opn": "5.3.0",
-				"portscanner": "2.1.1",
+				"portscanner": "2.2.0",
 				"qs": "6.2.3",
 				"raw-body": "^2.3.2",
 				"resp-modifier": "6.0.2",
@ -25889,20 +26070,21 @@
 			}
 		},
 		"browser-sync-client": {
-			"version": "2.27.9",
-			"resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.9.tgz",
-			"integrity": "sha512-FHW8kydp7FXo6jnX3gXJCpHAHtWNLK0nx839nnK+boMfMI1n4KZd0+DmTxHBsHsF3OHud4V4jwoN8U5HExMIdQ==",
+			"version": "2.27.10",
+			"resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.10.tgz",
+			"integrity": "sha512-KCFKA1YDj6cNul0VsA28apohtBsdk5Wv8T82ClOZPZMZWxPj4Ny5AUbrj9UlAb/k6pdxE5HABrWDhP9+cjt4HQ==",
 			"requires": {
 				"etag": "1.8.1",
 				"fresh": "0.5.2",
 				"mitt": "^1.1.3",
-				"rxjs": "^5.5.6"
+				"rxjs": "^5.5.6",
+				"typescript": "^4.6.2"
 			}
 		},
 		"browser-sync-ui": {
-			"version": "2.27.9",
-			"resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.9.tgz",
-			"integrity": "sha512-rsduR2bRIwFvM8CX6iY/Nu5aWub0WB9zfSYg9Le/RV5N5DEyxJYey0VxdfWCnzDOoelassTDzYQo+r0iJno3qw==",
+			"version": "2.27.10",
+			"resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.10.tgz",
+			"integrity": "sha512-elbJILq4Uo6OQv6gsvS3Y9vRAJlWu+h8j0JDkF0X/ua+3S6SVbbiWnZc8sNOFlG7yvVGIwBED3eaYQ0iBo1Dtw==",
 			"requires": {
 				"async-each-series": "0.1.1",
 				"connect-history-api-fallback": "^1",
@ -27746,19 +27928,15 @@
 			}
 		},
 		"engine.io-client": {
-			"version": "6.1.1",
-			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
-			"integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz",
+			"integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==",
 			"requires": {
-				"@socket.io/component-emitter": "~3.0.0",
+				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.1",
-				"engine.io-parser": "~5.0.0",
-				"has-cors": "1.1.0",
-				"parseqs": "0.0.6",
-				"parseuri": "0.0.6",
+				"engine.io-parser": "~5.0.3",
 				"ws": "~8.2.3",
-				"xmlhttprequest-ssl": "~2.0.0",
-				"yeast": "0.1.2"
+				"xmlhttprequest-ssl": "~2.0.0"
 			},
 			"dependencies": {
 				"ws": {
@ -29368,6 +29546,45 @@
 				"map-cache": "^0.2.2"
 			}
 		},
+		"framer-motion": {
+			"version": "6.3.3",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.3.3.tgz",
+			"integrity": "sha512-wo0dCnoq5vn4L8YVOPO9W54dliH78vDaX0Lj+bSPUys6Nt5QaehrS3uaYa0q5eVeikUgtTjz070UhQ94thI5Sw==",
+			"peer": true,
+			"requires": {
+				"@emotion/is-prop-valid": "^0.8.2",
+				"framesync": "6.0.1",
+				"hey-listen": "^1.0.8",
+				"popmotion": "11.0.3",
+				"style-value-types": "5.0.0",
+				"tslib": "^2.1.0"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "2.4.0",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+					"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+					"peer": true
+				}
+			}
+		},
+		"framesync": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+			"integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+			"peer": true,
+			"requires": {
+				"tslib": "^2.1.0"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "2.4.0",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+					"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+					"peer": true
+				}
+			}
+		},
 		"fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -29686,11 +29903,6 @@
 			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
 			"integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
 		},
-		"has-cors": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-			"integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
-		},
 		"has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@ -29813,6 +30025,12 @@
 			"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
 			"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
 		},
+		"hey-listen": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+			"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+			"peer": true
+		},
 		"history": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
@ -33318,16 +33536,6 @@
 				"nearley": "^2.20.1"
 			}
 		},
-		"parseqs": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
-			"integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
-		},
-		"parseuri": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
-			"integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
-		},
 		"parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@ -33518,19 +33726,42 @@
 			"resolved": "https://registry.npmjs.org/pop-iterate/-/pop-iterate-1.0.1.tgz",
 			"integrity": "sha1-zqz9q0q/NT16DyqqLB/Hs/lBO6M="
 		},
-		"portscanner": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.1.1.tgz",
-			"integrity": "sha1-6rtAnk3iSVD1oqUW01rnaTQ/u5Y=",
+		"popmotion": {
+			"version": "11.0.3",
+			"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+			"integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+			"peer": true,
 			"requires": {
-				"async": "1.5.2",
+				"framesync": "6.0.1",
+				"hey-listen": "^1.0.8",
+				"style-value-types": "5.0.0",
+				"tslib": "^2.1.0"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "2.4.0",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+					"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+					"peer": true
+				}
+			}
+		},
+		"portscanner": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
+			"integrity": "sha512-IFroCz/59Lqa2uBvzK3bKDbDDIEaAY8XJ1jFxcLWTqosrsc32//P4VuSB2vZXoHiHqOmx8B5L5hnKOxL/7FlPw==",
+			"requires": {
+				"async": "^2.6.0",
 				"is-number-like": "^1.0.3"
 			},
 			"dependencies": {
 				"async": {
-					"version": "1.5.2",
-					"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-					"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+					"version": "2.6.4",
+					"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+					"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+					"requires": {
+						"lodash": "^4.17.14"
+					}
 				}
 			}
 		},
@ -34563,6 +34794,19 @@
 			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
 			"dev": true
 		},
+		"react-merge-refs": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
+			"integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
+		},
+		"react-modal-sheet": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/react-modal-sheet/-/react-modal-sheet-1.5.1.tgz",
+			"integrity": "sha512-3StI5MoYH/LZTK6ozUrYMfEtHJGd/niuNLAH44ihXqxNSihceANfEFB8ZpSxHKkuMXIBwrtMf9xPd1oROhZzuQ==",
+			"requires": {
+				"react-merge-refs": "1.1.0"
+			}
+		},
 		"react-refresh": {
 			"version": "0.13.0",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz",
@ -35796,24 +36040,22 @@
 			"integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ=="
 		},
 		"socket.io-client": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
-			"integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+			"version": "4.5.1",
+			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz",
+			"integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==",
 			"requires": {
-				"@socket.io/component-emitter": "~3.0.0",
-				"backo2": "~1.0.2",
+				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.2",
-				"engine.io-client": "~6.1.1",
-				"parseuri": "0.0.6",
-				"socket.io-parser": "~4.1.1"
+				"engine.io-client": "~6.2.1",
+				"socket.io-parser": "~4.2.0"
 			},
 			"dependencies": {
 				"socket.io-parser": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
-					"integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+					"version": "4.2.0",
+					"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.0.tgz",
+					"integrity": "sha512-tLfmEwcEwnlQTxFB7jibL/q2+q8dlVQzj4JdRLJ/W/G1+Fu9VSxCx1Lo+n1HvXxKnM//dUuD0xgiA7tQf57Vng==",
 					"requires": {
-						"@socket.io/component-emitter": "~3.0.0",
+						"@socket.io/component-emitter": "~3.1.0",
 						"debug": "~4.3.1"
 					}
 				}
@ -36450,6 +36692,24 @@
 				"inline-style-parser": "0.1.1"
 			}
 		},
+		"style-value-types": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+			"integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+			"peer": true,
+			"requires": {
+				"hey-listen": "^1.0.8",
+				"tslib": "^2.1.0"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "2.4.0",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+					"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+					"peer": true
+				}
+			}
+		},
 		"stylehacks": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@ -37889,6 +38149,13 @@
 			"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
 			"integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
 		},
+		"xstate": {
+			"version": "4.32.1",
+			"resolved": "https://registry.npmjs.org/xstate/-/xstate-4.32.1.tgz",
+			"integrity": "sha512-QYUd+3GkXZ8i6qdixnOn28bL3EvA++LONYL/EMWwKlFSh/hiLndJ8YTnz77FDs+JUXcwU7NZJg7qoezoRHc4GQ==",
+			"optional": true,
+			"peer": true
+		},
 		"xtend": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@ -37946,11 +38213,6 @@
 				"fd-slicer": "~1.1.0"
 			}
 		},
-		"yeast": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-			"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
-		},
 		"yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -76,6 +76,7 @@
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
 		"react-icons": "4.3.1",
+		"react-modal-sheet": "1.5.1",
 		"remix-auth": "3.2.2",
 		"remix-auth-form": "1.1.2",
 		"remix-seo": "0.1.0",