From 67446b2e9f8b5947218f3298f6f74f2fee276c26 Mon Sep 17 00:00:00 2001
From: yungblud <killi8n@gmail.com>
Date: Wed, 31 Jan 2024 17:01:07 +0900
Subject: [PATCH] feat: handled many issues about implementing hotsurf

---
 packages/accounts-ui/.eslintrc                |  13 -
 packages/accounts-ui/.gitignore               |   2 -
 packages/accounts-ui/.prettierrc.json         |   6 -
 packages/accounts-ui/package.json             |  53 ----
 packages/accounts-ui/src/LoginForm.tsx        |  96 -------
 packages/accounts-ui/src/LoginFormLoader.tsx  |  30 ---
 packages/accounts-ui/src/index.ts             |   2 -
 packages/accounts-ui/tsconfig.json            |   3 -
 .../app/auth/signin/page.tsx                  |  79 +++++-
 .../app/concert/[id]/page.tsx                 |   8 +-
 packages/billets-admin-client/app/page.tsx    |   3 +-
 .../app/registry/GlobalStylesRegistry.tsx     |  32 +--
 packages/billets-admin-client/next.config.js  |   3 +
 packages/billets-admin-client/package.json    |   4 +-
 packages/billets-admin-client/tsconfig.json   |   4 +
 .../ui/AuthRequestForm.tsx                    |   4 +-
 packages/billets-admin-client/ui/Loader.tsx   |  11 +-
 .../billets-admin-client/ui/LoginForm.tsx     | 130 ----------
 .../billets-admin-client/ui/UploadForm.tsx    |   5 +-
 packages/hotsurf/package.json                 |  24 +-
 packages/hotsurf/src/BottomSticky/index.ts    |   6 +
 .../src/BottomSticky/index.web.tsx}           |  12 +-
 packages/hotsurf/src/Button/Button.tsx        |   2 +-
 packages/hotsurf/src/CTAButton/index.ts       |   7 +
 packages/hotsurf/src/CTAButton/index.web.tsx  |   9 +
 packages/hotsurf/src/LoginForm/index.ts       |  12 +
 packages/hotsurf/src/LoginForm/index.web.tsx  | 124 +++++++++
 packages/hotsurf/src/LoginModal/index.ts      |   7 +
 .../src/LoginModal/index.web.tsx}             |  12 +-
 packages/hotsurf/src/Modal/index.ts           |   8 +
 .../src/Modal/index.web.tsx}                  |   7 +-
 packages/hotsurf/src/ModalPortal/index.ts     |   7 +
 .../hotsurf/src/ModalPortal/index.web.tsx     |   8 +
 packages/hotsurf/src/TextInput/TextInput.tsx  |   2 +-
 .../{surfers-ui => hotsurf}/src/constants.ts  |   0
 packages/hotsurf/src/index.ts                 |   6 +
 packages/hotsurf/tsconfig.json                |   2 +-
 .../app/item/[slug]/PageInner.tsx             |   4 +-
 packages/store-client/app/layout.tsx          |   5 +-
 .../app/registry/StyledComponentsRegistry.tsx |  54 ++++
 packages/store-client/components/Header.tsx   |  24 +-
 .../store-client/components/LayoutWrapper.tsx |   3 +-
 .../store-client/components/PaymentModal.tsx  |   9 +-
 packages/store-client/next.config.js          |   4 +
 packages/store-client/package.json            |   6 +-
 packages/surfers-ui/.eslintrc                 |  12 -
 packages/surfers-ui/.gitignore                |   2 -
 packages/surfers-ui/.prettierrc.json          |   6 -
 packages/surfers-ui/package.json              |  45 ----
 packages/surfers-ui/src/Button.tsx            |  21 --
 packages/surfers-ui/src/CTAButton.tsx         |  11 -
 packages/surfers-ui/src/ModalPortal.tsx       |  11 -
 packages/surfers-ui/src/index.ts              |   5 -
 packages/surfers-ui/tsconfig.json             | 101 --------
 tsconfig.paths.json                           |   6 -
 yarn.lock                                     | 237 ++++--------------
 56 files changed, 483 insertions(+), 826 deletions(-)
 delete mode 100644 packages/accounts-ui/.eslintrc
 delete mode 100644 packages/accounts-ui/.gitignore
 delete mode 100644 packages/accounts-ui/.prettierrc.json
 delete mode 100644 packages/accounts-ui/package.json
 delete mode 100644 packages/accounts-ui/src/LoginForm.tsx
 delete mode 100644 packages/accounts-ui/src/LoginFormLoader.tsx
 delete mode 100644 packages/accounts-ui/src/index.ts
 delete mode 100644 packages/accounts-ui/tsconfig.json
 delete mode 100644 packages/billets-admin-client/ui/LoginForm.tsx
 create mode 100644 packages/hotsurf/src/BottomSticky/index.ts
 rename packages/{surfers-ui/src/BottomSticky.tsx => hotsurf/src/BottomSticky/index.web.tsx} (59%)
 create mode 100644 packages/hotsurf/src/CTAButton/index.ts
 create mode 100644 packages/hotsurf/src/CTAButton/index.web.tsx
 create mode 100644 packages/hotsurf/src/LoginForm/index.ts
 create mode 100644 packages/hotsurf/src/LoginForm/index.web.tsx
 create mode 100644 packages/hotsurf/src/LoginModal/index.ts
 rename packages/{accounts-ui/src/LoginModal.tsx => hotsurf/src/LoginModal/index.web.tsx} (80%)
 create mode 100644 packages/hotsurf/src/Modal/index.ts
 rename packages/{surfers-ui/src/Modal.tsx => hotsurf/src/Modal/index.web.tsx} (88%)
 create mode 100644 packages/hotsurf/src/ModalPortal/index.ts
 create mode 100644 packages/hotsurf/src/ModalPortal/index.web.tsx
 rename packages/{surfers-ui => hotsurf}/src/constants.ts (100%)
 create mode 100644 packages/store-client/app/registry/StyledComponentsRegistry.tsx
 delete mode 100644 packages/surfers-ui/.eslintrc
 delete mode 100644 packages/surfers-ui/.gitignore
 delete mode 100644 packages/surfers-ui/.prettierrc.json
 delete mode 100644 packages/surfers-ui/package.json
 delete mode 100644 packages/surfers-ui/src/Button.tsx
 delete mode 100644 packages/surfers-ui/src/CTAButton.tsx
 delete mode 100644 packages/surfers-ui/src/ModalPortal.tsx
 delete mode 100644 packages/surfers-ui/src/index.ts
 delete mode 100644 packages/surfers-ui/tsconfig.json

diff --git a/packages/accounts-ui/.eslintrc b/packages/accounts-ui/.eslintrc
deleted file mode 100644
index 0293b3d..0000000
--- a/packages/accounts-ui/.eslintrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-    "extends": [
-      "coldsurfers", // for nodejs-typescript, or 'coldsurfers/nodejs-typescript'
-      "coldsurfers/react-typescript", // for react-typescript
-      "plugin:react-hooks/recommended"
-    ],
-    "plugins": ["@tanstack/query"],
-    "rules": {
-      "import/extensions": "off",
-      "import/no-unresolved": "off",
-      "no-undef": "off"
-    }
-}
\ No newline at end of file
diff --git a/packages/accounts-ui/.gitignore b/packages/accounts-ui/.gitignore
deleted file mode 100644
index 686d417..0000000
--- a/packages/accounts-ui/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-dist/
-.eslintcache
diff --git a/packages/accounts-ui/.prettierrc.json b/packages/accounts-ui/.prettierrc.json
deleted file mode 100644
index fa51da2..0000000
--- a/packages/accounts-ui/.prettierrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true
-}
diff --git a/packages/accounts-ui/package.json b/packages/accounts-ui/package.json
deleted file mode 100644
index 374bb16..0000000
--- a/packages/accounts-ui/package.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "name": "@coldsurfers/accounts-ui",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "source": "src/",
-  "files": [
-    "src",
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    }
-  },
-  "license": "MIT",
-  "scripts": {
-    "prebuild": "yarn workspace @coldsurfers/surfers-ui build",
-    "build": "rm -rf dist && tsc",
-    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\" --fix",
-    "lint:fix": "yarn lint --fix"
-  },
-  "peerDependencies": {
-    "@coldsurfers/surfers-ui": "1.0.0",
-    "@coldsurfers/hotsurf": ">= 0.2.6",
-    "@emotion/styled": "^11.11.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": ">= 0.69.0",
-    "react-spinners": "^0.13.8"
-  },
-  "devDependencies": {
-    "@coldsurfers/surfers-ui": "1.0.0",
-    "@coldsurfers/hotsurf": "0.2.6",
-    "@emotion/styled": "^11.11.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.56.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-coldsurfers": "^1.1.3",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.2.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.3.3",
-    "react-spinners": "^0.13.8"
-  }
-}
diff --git a/packages/accounts-ui/src/LoginForm.tsx b/packages/accounts-ui/src/LoginForm.tsx
deleted file mode 100644
index 9dbe70a..0000000
--- a/packages/accounts-ui/src/LoginForm.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Button, palette, Text, TextInput, Toast } from '@coldsurfers/hotsurf'
-import { memo, useState } from 'react'
-import styled from '@emotion/styled'
-import Loader from './LoginFormLoader'
-
-const Wrapper = styled.section`
-  position: absolute;
-  top: 50%; /* position the top  edge of the element at the middle of the parent */
-  left: 50%; /* position the left edge of the element at the middle of the parent */
-
-  transform: translate(-50%, -50%);
-
-  padding: 1rem;
-  border-radius: 3px;
-
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-`
-
-const ToastWrapper = styled.div`
-  position: absolute;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-`
-
-interface Props {
-  onClickLoginButton: () => void
-  isLoading?: boolean
-  withRequestButtonUI?: boolean
-  onClickRequestButtonUI?: () => void
-  errorMessage?: string
-}
-
-const LoginForm = ({
-  onClickLoginButton,
-  isLoading,
-  withRequestButtonUI,
-  onClickRequestButtonUI,
-  errorMessage,
-}: Props) => {
-  const [email, setEmail] = useState<string>('')
-  const [password, setPassword] = useState<string>('')
-
-  return (
-    <>
-      <Wrapper>
-        <Text
-          weight="bold"
-          style={{
-            fontSize: 18,
-            marginBottom: 14,
-          }}
-        >
-          Billets 어드민
-        </Text>
-        <TextInput
-          value={email}
-          onChangeText={(text) => setEmail(text)}
-          placeholder="이메일"
-          style={{ width: 300 }}
-        />
-        <TextInput
-          value={password}
-          onChangeText={(text) => setPassword(text)}
-          placeholder="패스워드"
-          secureTextEntry
-          style={{ width: 300, marginTop: 14 }}
-        />
-        <Button
-          text="로그인"
-          onPress={onClickLoginButton}
-          style={{ marginTop: 14 }}
-        />
-        {withRequestButtonUI && (
-          <Button
-            text="가입 요청하기"
-            onPress={onClickRequestButtonUI}
-            style={{ marginTop: 14, backgroundColor: palette.black }}
-          />
-        )}
-      </Wrapper>
-      {!!errorMessage && (
-        <ToastWrapper>
-          <Toast type="error" message={errorMessage} />
-        </ToastWrapper>
-      )}
-      {isLoading && <Loader />}
-    </>
-  )
-}
-
-export default memo(LoginForm)
diff --git a/packages/accounts-ui/src/LoginFormLoader.tsx b/packages/accounts-ui/src/LoginFormLoader.tsx
deleted file mode 100644
index 22b52f5..0000000
--- a/packages/accounts-ui/src/LoginFormLoader.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { palette } from '@coldsurfers/hotsurf'
-import { PulseLoader } from 'react-spinners'
-import styled from '@emotion/styled'
-
-const Background = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.1);
-`
-
-const Pulse = styled(PulseLoader)`
-  z-index: 2;
-  position: absolute;
-  top: 50%; /* position the top  edge of the element at the middle of the parent */
-  left: 50%; /* position the left edge of the element at the middle of the parent */
-
-  transform: translate(-50%, -50%);
-`
-
-const Loader = () => (
-  <Background>
-    <Pulse color={palette.pink} />
-  </Background>
-)
-
-export default Loader
diff --git a/packages/accounts-ui/src/index.ts b/packages/accounts-ui/src/index.ts
deleted file mode 100644
index e4a0c06..0000000
--- a/packages/accounts-ui/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as LoginModal } from './LoginModal'
-export { default as LoginForm } from './LoginForm'
diff --git a/packages/accounts-ui/tsconfig.json b/packages/accounts-ui/tsconfig.json
deleted file mode 100644
index f79110c..0000000
--- a/packages/accounts-ui/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": ["../../tsconfig.paths.json", "../../tsconfig.ui.json"],
-}
diff --git a/packages/billets-admin-client/app/auth/signin/page.tsx b/packages/billets-admin-client/app/auth/signin/page.tsx
index 681df2d..f633263 100644
--- a/packages/billets-admin-client/app/auth/signin/page.tsx
+++ b/packages/billets-admin-client/app/auth/signin/page.tsx
@@ -1,7 +1,80 @@
 'use client'
 
-import LoginForm from '../../../ui/LoginForm'
+import {
+  LoginForm as LoginFormUI,
+  type LoginFormRefHandle,
+} from '@coldsurfers/hotsurf'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState, useRef } from 'react'
+import useLoginMutation from '@hooks/useLoginMutation'
+import { ME_QUERY } from '@hooks/useMeQuery'
+import storage from '@utils/storage/storage'
+import Loader from '@ui/Loader'
 
-const SignInPage = () => <LoginForm />
+const SigninPage = () => {
+  const router = useRouter()
+  const formRef = useRef<LoginFormRefHandle>(null)
+  const [mutate, { data, loading, client }] = useLoginMutation()
+  const [errorMessage, setErrorMessage] = useState<string>('')
 
-export default SignInPage
+  const login = useCallback(
+    (params: { email: string; password: string }) =>
+      mutate({
+        variables: {
+          input: params,
+        },
+      }),
+    [mutate]
+  )
+
+  useEffect(() => {
+    if (!data?.login) return
+    // eslint-disable-next-line no-shadow
+    const { login } = data
+    switch (login.__typename) {
+      case 'HttpError':
+        setErrorMessage(login.message)
+        break
+      case 'UserWithToken':
+        storage.set('@billets/token', login.token)
+        client.refetchQueries({
+          include: [ME_QUERY],
+        })
+        break
+      default:
+        break
+    }
+  }, [client, data, router])
+
+  useEffect(() => {
+    const onKeypress = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        const currentInputValue = formRef.current?.currentInputValue()
+        if (currentInputValue) {
+          login(currentInputValue)
+        }
+      }
+    }
+    document.addEventListener('keypress', onKeypress)
+
+    return () => {
+      document.removeEventListener('keypress', onKeypress)
+    }
+  }, [login])
+
+  return (
+    <LoginFormUI
+      ref={formRef}
+      onPressLoginButton={login}
+      withRequestButtonUI
+      onPressRequestButtonUI={useCallback(() => {
+        router.push('/auth/request')
+      }, [router])}
+      isLoading={loading}
+      LoadingUI={<Loader />}
+      errorMessage={errorMessage}
+    />
+  )
+}
+
+export default SigninPage
diff --git a/packages/billets-admin-client/app/concert/[id]/page.tsx b/packages/billets-admin-client/app/concert/[id]/page.tsx
index 8a4d45d..8a1cd5d 100644
--- a/packages/billets-admin-client/app/concert/[id]/page.tsx
+++ b/packages/billets-admin-client/app/concert/[id]/page.tsx
@@ -308,7 +308,9 @@ const Thumbnail = styled.img`
   border-radius: 8px;
   margin-top: 12px;
   object-fit: contain;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 `
 
@@ -341,7 +343,9 @@ const SectionList = styled.div`
 const SectionCard = styled.div`
   margin-top: 6px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   background-color: ${palette.white};
   padding: 16px;
diff --git a/packages/billets-admin-client/app/page.tsx b/packages/billets-admin-client/app/page.tsx
index 0cf0651..6173292 100644
--- a/packages/billets-admin-client/app/page.tsx
+++ b/packages/billets-admin-client/app/page.tsx
@@ -258,7 +258,7 @@ export default function Page() {
           }}
         />
       </TableBottom>
-      {loading && <Loader />}
+      {/* {loading && <Loader />} */}
     </Wrapper>
   )
 }
@@ -301,7 +301,6 @@ const Td = styled.td`
   padding-right: 8px;
   background-color: ${palette.white};
   &:hover {
-    /* background-color: ${palette.pink}; */
   }
   & + & {
     border-left: 1px solid ${palette.yellow};
diff --git a/packages/billets-admin-client/app/registry/GlobalStylesRegistry.tsx b/packages/billets-admin-client/app/registry/GlobalStylesRegistry.tsx
index be667e8..f8dce0b 100644
--- a/packages/billets-admin-client/app/registry/GlobalStylesRegistry.tsx
+++ b/packages/billets-admin-client/app/registry/GlobalStylesRegistry.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, PropsWithChildren } from 'react'
 import { useServerInsertedHTML } from 'next/navigation'
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
-import { AppRegistry } from 'react-native'
+// import { AppRegistry } from 'react-native'
+
 const normalizeNextElements = `
   #__next {
     display: flex;
@@ -12,11 +13,9 @@ const normalizeNextElements = `
   }
 `
 
-export default function GlobalStylesRegistry({
+export default function StyledComponentsRegistry({
   children,
-}: {
-  children: React.ReactNode
-}) {
+}: PropsWithChildren) {
   // Only create stylesheet once with lazy initial state
   // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
   const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
@@ -25,20 +24,20 @@ export default function GlobalStylesRegistry({
     const styles = styledComponentsStyleSheet.getStyleElement()
     styledComponentsStyleSheet.instance.clearTag()
 
-    const Child = () => <>{children}</>
+    // const Child = () => <>{children}</>
+
+    // try {
+    //   AppRegistry.registerComponent('name', () => Child)
+    // } catch (e) {
+    //   console.error(e)
+    // }
 
-    try {
-      AppRegistry.registerComponent('name', () => Child)
-    } catch (e) {
-      console.error(e)
-    }
-    //@ts-ignore
-    const { getStyleElement } = AppRegistry.getApplication('name')
+    // const { getStyleElement } = AppRegistry.getApplication('name')
 
     return (
       <>
+        {/* {getStyleElement()} */}
         {styles}
-        {getStyleElement()}
         <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />
       </>
     )
@@ -48,7 +47,8 @@ export default function GlobalStylesRegistry({
 
   return (
     <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
-      {children as React.ReactChild}
+      {/* @ts-ignore */}
+      {children}
     </StyleSheetManager>
   )
 }
diff --git a/packages/billets-admin-client/next.config.js b/packages/billets-admin-client/next.config.js
index c818b14..262b5c7 100644
--- a/packages/billets-admin-client/next.config.js
+++ b/packages/billets-admin-client/next.config.js
@@ -21,6 +21,9 @@ const nextConfig = {
     return config
   },
   transpilePackages: ['@coldsurfers/hotsurf'],
+  compiler: {
+    styledComponents: true,
+  },
 }
 
 module.exports = nextConfig
diff --git a/packages/billets-admin-client/package.json b/packages/billets-admin-client/package.json
index 513389b..418d9fc 100644
--- a/packages/billets-admin-client/package.json
+++ b/packages/billets-admin-client/package.json
@@ -29,7 +29,7 @@
     "react-dom": "18.2.0",
     "react-native-web": "^0.18.12",
     "react-spinners": "^0.13.7",
-    "styled-components": "6.0.0-beta.2",
+    "styled-components": "6.1.8",
     "typescript": "5.3.3"
   },
   "devDependencies": {
@@ -44,7 +44,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.1",
+    "prettier": "^3.2.4",
     "react-native": "^0.70.6"
   }
 }
diff --git a/packages/billets-admin-client/tsconfig.json b/packages/billets-admin-client/tsconfig.json
index 8d20085..e4ec2fc 100644
--- a/packages/billets-admin-client/tsconfig.json
+++ b/packages/billets-admin-client/tsconfig.json
@@ -22,6 +22,10 @@
     ],
     "paths": {
       "react": ["./node_modules/@types/react"],
+      "@app/*": ["./packages/billets-admin-client/app/*"],
+      "@hooks/*": ["./packages/billets-admin-client/hooks/*"],
+      "@utils/*": ["./packages/billets-admin-client/utils/*"],
+      "@ui/*": ["./packages/billets-admin-client/ui/*"],
     },
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
diff --git a/packages/billets-admin-client/ui/AuthRequestForm.tsx b/packages/billets-admin-client/ui/AuthRequestForm.tsx
index 0ac2586..1d22612 100644
--- a/packages/billets-admin-client/ui/AuthRequestForm.tsx
+++ b/packages/billets-admin-client/ui/AuthRequestForm.tsx
@@ -232,7 +232,9 @@ const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
 
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 `
 
diff --git a/packages/billets-admin-client/ui/Loader.tsx b/packages/billets-admin-client/ui/Loader.tsx
index 365a585..ea6d321 100644
--- a/packages/billets-admin-client/ui/Loader.tsx
+++ b/packages/billets-admin-client/ui/Loader.tsx
@@ -2,11 +2,12 @@ import { palette } from '@coldsurfers/hotsurf'
 import { PulseLoader } from 'react-spinners'
 import styled from 'styled-components'
 
-const Loader = () => (
-  <Background>
-    <Pulse color={palette.pink} />
-  </Background>
-)
+const Loader = () => null
+// (
+//   <Background>
+//     <Pulse color={palette.pink} />
+//   </Background>
+// )
 
 const Background = styled.div`
   position: fixed;
diff --git a/packages/billets-admin-client/ui/LoginForm.tsx b/packages/billets-admin-client/ui/LoginForm.tsx
deleted file mode 100644
index 43b1cf0..0000000
--- a/packages/billets-admin-client/ui/LoginForm.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Button, palette, Text, TextInput, Toast } from '@coldsurfers/hotsurf'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { memo, useCallback, useEffect, useState } from 'react'
-import styled from 'styled-components'
-import useLoginMutation from '../hooks/useLoginMutation'
-import { ME_QUERY } from '../hooks/useMeQuery'
-import storage from '../utils/storage/storage'
-import Loader from './Loader'
-
-const LoginForm = () => {
-  const router = useRouter()
-  const [email, setEmail] = useState<string>('')
-  const [password, setPassword] = useState<string>('')
-  const [mutate, { data, loading, client }] = useLoginMutation()
-  const [errorMessage, setErrorMessage] = useState<string>('')
-
-  const login = useCallback(
-    () =>
-      mutate({
-        variables: {
-          input: {
-            email,
-            password,
-          },
-        },
-      }),
-    [email, mutate, password]
-  )
-
-  useEffect(() => {
-    if (!data?.login) return
-    // eslint-disable-next-line no-shadow
-    const { login } = data
-    switch (login.__typename) {
-      case 'HttpError':
-        setErrorMessage(login.message)
-        break
-      case 'UserWithToken':
-        storage.set('@billets/token', login.token)
-        client.refetchQueries({
-          include: [ME_QUERY],
-        })
-        break
-      default:
-        break
-    }
-  }, [client, data, router])
-
-  useEffect(() => {
-    const onKeypress = (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        login()
-      }
-    }
-    document.addEventListener('keypress', onKeypress)
-
-    return () => {
-      document.removeEventListener('keypress', onKeypress)
-    }
-  }, [login])
-
-  return (
-    <>
-      <Wrapper>
-        <Text
-          weight="bold"
-          style={{
-            fontSize: 18,
-            marginBottom: 14,
-          }}
-        >
-          Billets 어드민
-        </Text>
-        <TextInput
-          value={email}
-          onChangeText={(text) => setEmail(text)}
-          placeholder="이메일"
-          style={{ width: 300 }}
-        />
-        <TextInput
-          value={password}
-          onChangeText={(text) => setPassword(text)}
-          placeholder="패스워드"
-          secureTextEntry
-          style={{ width: 300, marginTop: 14 }}
-        />
-        <Button text="로그인" onPress={login} style={{ marginTop: 14 }} />
-        <Link href="/auth/request">
-          <Button
-            text="가입 요청하기"
-            style={{ marginTop: 14, backgroundColor: palette.black }}
-          />
-        </Link>
-      </Wrapper>
-      {!!errorMessage && (
-        <ToastWrapper>
-          <Toast type="error" message={errorMessage} />
-        </ToastWrapper>
-      )}
-      {loading && <Loader />}
-    </>
-  )
-}
-
-const Wrapper = styled.section`
-  position: absolute;
-  top: 50%; /* position the top  edge of the element at the middle of the parent */
-  left: 50%; /* position the left edge of the element at the middle of the parent */
-
-  transform: translate(-50%, -50%);
-
-  padding: 1rem;
-  border-radius: 3px;
-
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-`
-
-const ToastWrapper = styled.div`
-  position: absolute;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-`
-
-export default memo(LoginForm)
diff --git a/packages/billets-admin-client/ui/UploadForm.tsx b/packages/billets-admin-client/ui/UploadForm.tsx
index a50d8b9..a77283c 100644
--- a/packages/billets-admin-client/ui/UploadForm.tsx
+++ b/packages/billets-admin-client/ui/UploadForm.tsx
@@ -83,6 +83,7 @@ const InputWithLabel = memo(
     placeholder,
   }: {
     value: string
+    // eslint-disable-next-line no-unused-vars
     onChangeText: (text: string) => void
     label: string
     placeholder?: string
@@ -389,6 +390,7 @@ const UploadForm = () => {
         openDate: parseDate(item.opendate).toISOString(),
         seller: item.name,
         sellingURL: item.website,
+        // eslint-disable-next-line no-shadow
         ticketPrices: item.ticketPrices.map((item) => ({
           ...item,
           price: +item.price,
@@ -433,6 +435,7 @@ const UploadForm = () => {
             openDate: parseDate(item.opendate).toISOString(),
             seller: item.name,
             sellingURL: item.website,
+            // eslint-disable-next-line no-shadow
             ticketPrices: item.ticketPrices.map((item) => ({
               ...item,
               price: +item.price,
@@ -594,7 +597,7 @@ const UploadForm = () => {
                   marginBottom: 20,
                 }}
                 text="세부 가격 추가"
-                onPress={(e) => {
+                onPress={() => {
                   setFormState((prev) => {
                     const next = [...prev.tickets]
                     next[index] = {
diff --git a/packages/hotsurf/package.json b/packages/hotsurf/package.json
index eeeb643..ce869b6 100644
--- a/packages/hotsurf/package.json
+++ b/packages/hotsurf/package.json
@@ -2,8 +2,9 @@
   "name": "@coldsurfers/hotsurf",
   "private": true,
   "version": "0.2.6",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
   "files": [
     "dist"
   ],
@@ -14,15 +15,12 @@
     "rollup:all": "yarn rollup:native && yarn rollup:web",
     "build": "rm -rf dist && yarn rollup:all && tsc --emitDeclarationOnly",
     "build:token": "ts-node src/lib/token-builder/build.ts",
-    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "react": "18.2.0",
-    "style-dictionary": "^3.7.1",
-    "typescript": "^4.8.3"
+    "style-dictionary": "^3.7.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.3.0",
@@ -46,15 +44,21 @@
     "react-native-web": "^0.18.10",
     "rollup": "^3.9.0",
     "rollup-plugin-typescript2": "^0.34.1",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.1",
+    "styled-components": "6.1.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
-    "react-native": ">= 0.69.0"
+    "react-dom": ">= 18.2.0",
+    "react-native": ">= 0.69.0",
+    "styled-components": ">= 6.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "yarn run lint:fix",
+      "yarn run lint",
       "bash -c 'yarn typecheck'"
     ]
   }
diff --git a/packages/hotsurf/src/BottomSticky/index.ts b/packages/hotsurf/src/BottomSticky/index.ts
new file mode 100644
index 0000000..ced2eaa
--- /dev/null
+++ b/packages/hotsurf/src/BottomSticky/index.ts
@@ -0,0 +1,6 @@
+import { Platform } from 'react-native'
+import { BottomSticky as BottomStickyWebUI } from './index.web'
+
+export const BottomSticky: typeof BottomStickyWebUI = () => {
+  throw new Error(`BottomSticky is not implemented on ${Platform.OS}`)
+}
diff --git a/packages/surfers-ui/src/BottomSticky.tsx b/packages/hotsurf/src/BottomSticky/index.web.tsx
similarity index 59%
rename from packages/surfers-ui/src/BottomSticky.tsx
rename to packages/hotsurf/src/BottomSticky/index.web.tsx
index 8bf02d1..ba27c99 100644
--- a/packages/surfers-ui/src/BottomSticky.tsx
+++ b/packages/hotsurf/src/BottomSticky/index.web.tsx
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
+import styled from 'styled-components'
 import { PropsWithChildren } from 'react'
 
-const Wrapper = styled.div<{ withFade: boolean }>`
+const Wrapper = styled.div<{ $fade: boolean }>`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -14,20 +14,18 @@ const Wrapper = styled.div<{ withFade: boolean }>`
   display: flex;
   flex-direction: column;
   background: ${(p) =>
-    p.withFade
-      ? 'linear-gradient(0deg, #18181f, hsla(0, 50%, 50%, 0))'
-      : 'none'};
+    p.$fade ? 'linear-gradient(0deg, #18181f, hsla(0, 50%, 50%, 0))' : 'none'};
   z-index: 99;
   padding-bottom: 30px;
   padding-left: 30px;
   padding-right: 30px;
 `
 
-export default function BottomSticky({
+export function BottomSticky({
   children,
   withFade,
 }: PropsWithChildren<{
   withFade?: boolean
 }>) {
-  return <Wrapper withFade={!!withFade}>{children}</Wrapper>
+  return <Wrapper $fade={!!withFade}>{children}</Wrapper>
 }
diff --git a/packages/hotsurf/src/Button/Button.tsx b/packages/hotsurf/src/Button/Button.tsx
index 5e780ab..b801fbf 100644
--- a/packages/hotsurf/src/Button/Button.tsx
+++ b/packages/hotsurf/src/Button/Button.tsx
@@ -11,7 +11,7 @@ import { Text } from '../Text'
 import { ButtonColorProp } from '../types/button'
 import { buttonBackgroundColorStyles } from '../lib/styles'
 
-interface Props {
+export interface Props {
   text: string
   onPress?: (event: GestureResponderEvent) => void
   color?: ButtonColorProp
diff --git a/packages/hotsurf/src/CTAButton/index.ts b/packages/hotsurf/src/CTAButton/index.ts
new file mode 100644
index 0000000..b90fc2f
--- /dev/null
+++ b/packages/hotsurf/src/CTAButton/index.ts
@@ -0,0 +1,7 @@
+import { Platform } from 'react-native'
+import { CTAButton as CTAButtonWebUI } from './index.web'
+
+// @ts-ignore
+export const CTAButton: typeof CTAButtonWebUI = () => {
+  throw new Error(`CTAButton is not implemented on ${Platform.OS}`)
+}
diff --git a/packages/hotsurf/src/CTAButton/index.web.tsx b/packages/hotsurf/src/CTAButton/index.web.tsx
new file mode 100644
index 0000000..fddaf5d
--- /dev/null
+++ b/packages/hotsurf/src/CTAButton/index.web.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+import { Button } from '../Button'
+
+export const CTAButton = styled(Button)`
+  width: 100%;
+  height: 54px;
+  font-weight: 400;
+  font-size: 18px;
+`
diff --git a/packages/hotsurf/src/LoginForm/index.ts b/packages/hotsurf/src/LoginForm/index.ts
new file mode 100644
index 0000000..2b612d4
--- /dev/null
+++ b/packages/hotsurf/src/LoginForm/index.ts
@@ -0,0 +1,12 @@
+import { Platform } from 'react-native'
+import type {
+  LoginForm as LoginFormWebUI,
+  LoginFormRefHandle,
+} from './index.web'
+
+// @ts-ignore
+export const LoginForm: typeof LoginFormWebUI = () => {
+  throw new Error(`LoginForm is not implemented on ${Platform.OS}`)
+}
+
+export type { LoginFormRefHandle }
diff --git a/packages/hotsurf/src/LoginForm/index.web.tsx b/packages/hotsurf/src/LoginForm/index.web.tsx
new file mode 100644
index 0000000..d24f801
--- /dev/null
+++ b/packages/hotsurf/src/LoginForm/index.web.tsx
@@ -0,0 +1,124 @@
+import React, {
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useState,
+} from 'react'
+import styled from 'styled-components'
+import { Button, palette, Text, TextInput, Toast } from '..'
+
+const Wrapper = styled.section`
+  position: absolute;
+  top: 50%; /* position the top  edge of the element at the middle of the parent */
+  left: 50%; /* position the left edge of the element at the middle of the parent */
+
+  transform: translate(-50%, -50%);
+
+  padding: 1rem;
+  border-radius: 3px;
+
+  display: flex;
+  flex-direction: column;
+
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+`
+
+const ToastWrapper = styled.div`
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+`
+
+interface Props {
+  onPressLoginButton: (params: { email: string; password: string }) => void
+  isLoading?: boolean
+  withRequestButtonUI?: boolean
+  onPressRequestButtonUI?: () => void
+  errorMessage?: string
+  LoadingUI?: ReactNode
+}
+
+export interface LoginFormRefHandle {
+  currentInputValue: () => {
+    email: string
+    password: string
+  }
+}
+
+export const LoginForm = forwardRef<LoginFormRefHandle, Props>(
+  (
+    {
+      onPressLoginButton,
+      isLoading,
+      withRequestButtonUI,
+      onPressRequestButtonUI,
+      errorMessage,
+      LoadingUI,
+    },
+    ref
+  ) => {
+    const [email, setEmail] = useState<string>('')
+    const [password, setPassword] = useState<string>('')
+
+    useImperativeHandle(ref, () => ({
+      currentInputValue() {
+        return {
+          email,
+          password,
+        }
+      },
+    }))
+
+    return (
+      <div>
+        <Wrapper>
+          <Text
+            weight="bold"
+            style={{
+              fontSize: 18,
+              marginBottom: 14,
+            }}
+          >
+            Billets 어드민
+          </Text>
+          <TextInput
+            value={email}
+            onChangeText={(text) => setEmail(text)}
+            placeholder="이메일"
+            style={{ width: 300 }}
+          />
+          <TextInput
+            value={password}
+            onChangeText={(text) => setPassword(text)}
+            placeholder="패스워드"
+            secureTextEntry
+            style={{ width: 300, marginTop: 14 }}
+          />
+          <Button
+            text="로그인"
+            onPress={useCallback(() => {
+              onPressLoginButton({ email, password })
+            }, [email, onPressLoginButton, password])}
+            style={{ marginTop: 14 }}
+          />
+          {withRequestButtonUI && (
+            <Button
+              text="가입 요청하기"
+              onPress={onPressRequestButtonUI}
+              style={{ marginTop: 14, backgroundColor: palette.black }}
+            />
+          )}
+        </Wrapper>
+        {!!errorMessage && (
+          <ToastWrapper>
+            <Toast type="error" message={errorMessage} />
+          </ToastWrapper>
+        )}
+        {isLoading && !!LoadingUI && LoadingUI}
+      </div>
+    )
+  }
+)
diff --git a/packages/hotsurf/src/LoginModal/index.ts b/packages/hotsurf/src/LoginModal/index.ts
new file mode 100644
index 0000000..2652aca
--- /dev/null
+++ b/packages/hotsurf/src/LoginModal/index.ts
@@ -0,0 +1,7 @@
+import { Platform } from 'react-native'
+import { LoginModal as LoginModalWebUI } from './index.web'
+
+// @ts-ignore
+export const LoginModal: typeof LoginModalWebUI = () => {
+  throw new Error(`LoginModal is not implemented on ${Platform.OS}`)
+}
diff --git a/packages/accounts-ui/src/LoginModal.tsx b/packages/hotsurf/src/LoginModal/index.web.tsx
similarity index 80%
rename from packages/accounts-ui/src/LoginModal.tsx
rename to packages/hotsurf/src/LoginModal/index.web.tsx
index 40f4150..559e6f3 100644
--- a/packages/accounts-ui/src/LoginModal.tsx
+++ b/packages/hotsurf/src/LoginModal/index.web.tsx
@@ -1,8 +1,10 @@
 'use client'
 
-import styled from '@emotion/styled'
+import styled from 'styled-components'
 import { MouseEventHandler, useCallback, useRef } from 'react'
-import { Modal, ModalPortal, Button } from '@coldsurfers/surfers-ui'
+import { Button } from '..'
+import { Modal } from '../Modal/index.web'
+import { ModalPortal } from '../ModalPortal/index.web'
 
 const CustomModal = styled(Modal.Container)`
   width: 350px;
@@ -24,7 +26,7 @@ interface Props {
   onClickBackground?: MouseEventHandler<HTMLDivElement>
 }
 
-export default function LoginModal({
+export function LoginModal({
   isOpen = false,
   onClickGoogleLogin,
   onClickBackground,
@@ -37,7 +39,7 @@ export default function LoginModal({
         onClickBackground?.(e)
       }
     },
-    []
+    [onClickBackground]
   )
   return (
     isOpen && (
@@ -48,7 +50,7 @@ export default function LoginModal({
         >
           <CustomModal>
             <ModalTitle>ColdSurf Store</ModalTitle>
-            <Button onClick={onClickGoogleLogin}>Google Login</Button>
+            <Button text="Google Login" onPress={onClickGoogleLogin} />
           </CustomModal>
         </Modal.Background>
       </ModalPortal>
diff --git a/packages/hotsurf/src/Modal/index.ts b/packages/hotsurf/src/Modal/index.ts
new file mode 100644
index 0000000..280cb34
--- /dev/null
+++ b/packages/hotsurf/src/Modal/index.ts
@@ -0,0 +1,8 @@
+import { Platform } from 'react-native'
+// eslint-disable-next-line import/no-named-default
+import { Modal as ModalWebUI } from './index.web'
+
+// @ts-ignore
+export const Modal: typeof ModalWebUI = () => {
+  throw new Error(`Modal is not implemented on ${Platform.OS}`)
+}
diff --git a/packages/surfers-ui/src/Modal.tsx b/packages/hotsurf/src/Modal/index.web.tsx
similarity index 88%
rename from packages/surfers-ui/src/Modal.tsx
rename to packages/hotsurf/src/Modal/index.web.tsx
index 76c1927..7602d6a 100644
--- a/packages/surfers-ui/src/Modal.tsx
+++ b/packages/hotsurf/src/Modal/index.web.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable no-undef */
-import styled from '@emotion/styled'
+import styled from 'styled-components'
 import { MouseEventHandler, PropsWithChildren, forwardRef } from 'react'
 
 const ModalBackground = styled.div`
@@ -22,7 +21,7 @@ const ModalWrapper = styled.div`
   border-radius: 12px;
 `
 
-const Modal = () => null
+export const Modal = () => null
 
 Modal.Background = forwardRef<
   HTMLDivElement,
@@ -43,5 +42,3 @@ Modal.Background = forwardRef<
 Modal.Container = (props: PropsWithChildren<{ className?: string }>) => (
   <ModalWrapper className={props.className}>{props.children}</ModalWrapper>
 )
-
-export default Modal
diff --git a/packages/hotsurf/src/ModalPortal/index.ts b/packages/hotsurf/src/ModalPortal/index.ts
new file mode 100644
index 0000000..b75d6a4
--- /dev/null
+++ b/packages/hotsurf/src/ModalPortal/index.ts
@@ -0,0 +1,7 @@
+import { Platform } from 'react-native'
+import { ModalPortal as ModalPortalWebUI } from './index.web'
+
+// @ts-ignore
+export const ModalPortal: typeof ModalPortalWebUI = () => {
+  throw new Error(`ModalPortal is not implemented on ${Platform.OS}`)
+}
diff --git a/packages/hotsurf/src/ModalPortal/index.web.tsx b/packages/hotsurf/src/ModalPortal/index.web.tsx
new file mode 100644
index 0000000..c2441f5
--- /dev/null
+++ b/packages/hotsurf/src/ModalPortal/index.web.tsx
@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react'
+import { createPortal } from 'react-dom'
+import { MODAL_PORTAL_ID } from '../constants'
+
+export const ModalPortal = ({ children }: PropsWithChildren<{}>) =>
+  createPortal(children, document.getElementById(MODAL_PORTAL_ID)!)
+
+ModalPortal.Pillar = () => <div id={MODAL_PORTAL_ID} />
diff --git a/packages/hotsurf/src/TextInput/TextInput.tsx b/packages/hotsurf/src/TextInput/TextInput.tsx
index 0f4ff14..9a383b3 100644
--- a/packages/hotsurf/src/TextInput/TextInput.tsx
+++ b/packages/hotsurf/src/TextInput/TextInput.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import {
   StyleSheet,
   TextInput as RNTextInput,
diff --git a/packages/surfers-ui/src/constants.ts b/packages/hotsurf/src/constants.ts
similarity index 100%
rename from packages/surfers-ui/src/constants.ts
rename to packages/hotsurf/src/constants.ts
diff --git a/packages/hotsurf/src/index.ts b/packages/hotsurf/src/index.ts
index d4a6e99..0b786b5 100644
--- a/packages/hotsurf/src/index.ts
+++ b/packages/hotsurf/src/index.ts
@@ -6,4 +6,10 @@ export * from './Text'
 export * from './TextInput'
 export * from './Toast'
 export * from './Spinner'
+export * from './LoginForm'
+export * from './LoginModal'
+export * from './Modal'
+export * from './ModalPortal'
+export * from './BottomSticky'
+export * from './CTAButton'
 export const { palette } = variables
diff --git a/packages/hotsurf/tsconfig.json b/packages/hotsurf/tsconfig.json
index d5a6baf..42b152b 100644
--- a/packages/hotsurf/tsconfig.json
+++ b/packages/hotsurf/tsconfig.json
@@ -13,7 +13,7 @@
     /* Language and Environment */
     "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "react" /* Specify what JSX code is generated. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
diff --git a/packages/store-client/app/item/[slug]/PageInner.tsx b/packages/store-client/app/item/[slug]/PageInner.tsx
index 2f0fcd1..c84fad4 100644
--- a/packages/store-client/app/item/[slug]/PageInner.tsx
+++ b/packages/store-client/app/item/[slug]/PageInner.tsx
@@ -4,7 +4,7 @@
 import PaymentModal from '@coldsurfers/store-client/components/PaymentModal'
 import { useEffect, useState } from 'react'
 import styled from '@emotion/styled'
-import { BottomSticky, CTAButton } from '@coldsurfers/surfers-ui'
+import { BottomSticky, CTAButton } from '@coldsurfers/hotsurf'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { usePaymentStore } from '@coldsurfers/store-client/stores/paymentStore'
 import { nanoid } from 'nanoid'
@@ -49,7 +49,7 @@ export default function PageInner({
     <PageInnerLayout>
       <PageNotionBlock blocks={blocks} />
       <BottomSticky withFade>
-        <CTAButton onClick={() => setIsOpen(true)}>구매하기</CTAButton>
+        <CTAButton text="구매하기" onPress={() => setIsOpen(true)} />
       </BottomSticky>
       {typeof price === 'number' && (
         <PaymentModal
diff --git a/packages/store-client/app/layout.tsx b/packages/store-client/app/layout.tsx
index 83366a4..61dabb3 100644
--- a/packages/store-client/app/layout.tsx
+++ b/packages/store-client/app/layout.tsx
@@ -5,6 +5,7 @@ import { ReactNode } from 'react'
 import GlobalStyle from '@coldsurfers/store-client/components/GlobalStyle'
 import LayoutWrapper from '../components/LayoutWrapper'
 import { auth } from '../libs/auth'
+import StyledComponentsRegistry from './registry/StyledComponentsRegistry'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -25,7 +26,9 @@ export default async function RootLayout({
         <GlobalStyle />
       </head>
       <body className={inter.className}>
-        <LayoutWrapper session={session}>{children}</LayoutWrapper>
+        <StyledComponentsRegistry>
+          <LayoutWrapper session={session}>{children}</LayoutWrapper>
+        </StyledComponentsRegistry>
       </body>
     </html>
   )
diff --git a/packages/store-client/app/registry/StyledComponentsRegistry.tsx b/packages/store-client/app/registry/StyledComponentsRegistry.tsx
new file mode 100644
index 0000000..f8dce0b
--- /dev/null
+++ b/packages/store-client/app/registry/StyledComponentsRegistry.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import React, { useState, PropsWithChildren } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+// import { AppRegistry } from 'react-native'
+
+const normalizeNextElements = `
+  #__next {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`
+
+export default function StyledComponentsRegistry({
+  children,
+}: PropsWithChildren) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+
+    // const Child = () => <>{children}</>
+
+    // try {
+    //   AppRegistry.registerComponent('name', () => Child)
+    // } catch (e) {
+    //   console.error(e)
+    // }
+
+    // const { getStyleElement } = AppRegistry.getApplication('name')
+
+    return (
+      <>
+        {/* {getStyleElement()} */}
+        {styles}
+        <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />
+      </>
+    )
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {/* @ts-ignore */}
+      {children}
+    </StyleSheetManager>
+  )
+}
diff --git a/packages/store-client/components/Header.tsx b/packages/store-client/components/Header.tsx
index abd4444..cbfa66d 100644
--- a/packages/store-client/components/Header.tsx
+++ b/packages/store-client/components/Header.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import styled from '@emotion/styled'
+import styled from 'styled-components'
 import Link from 'next/link'
 import { signOut, useSession } from 'next-auth/react'
 import { useCallback } from 'react'
-import Button from './Button'
+import { Button } from '@coldsurfers/hotsurf'
 import { useLoginModalStore } from '../stores/loginModalStore'
 
 const Container = styled.div`
@@ -19,10 +19,6 @@ const CompanyLogo = styled.h2`
   font-weight: bold;
 `
 
-const LoginButtonWrapper = styled(Button)`
-  margin-left: auto;
-`
-
 export default function Header() {
   const { open } = useLoginModalStore()
   const { data: session } = useSession()
@@ -42,9 +38,21 @@ export default function Header() {
         <CompanyLogo>ColdSurf Store</CompanyLogo>
       </Link>
       {isLoggedIn ? (
-        <LoginButtonWrapper onClick={onClickLogout}>Log Out</LoginButtonWrapper>
+        <Button
+          onPress={onClickLogout}
+          text="Log Out"
+          style={{
+            marginLeft: 'auto',
+          }}
+        />
       ) : (
-        <LoginButtonWrapper onClick={open}>Log In</LoginButtonWrapper>
+        <Button
+          onPress={open}
+          text="Log In"
+          style={{
+            marginLeft: 'auto',
+          }}
+        />
       )}
     </Container>
   )
diff --git a/packages/store-client/components/LayoutWrapper.tsx b/packages/store-client/components/LayoutWrapper.tsx
index c98a129..0be1fec 100644
--- a/packages/store-client/components/LayoutWrapper.tsx
+++ b/packages/store-client/components/LayoutWrapper.tsx
@@ -4,8 +4,7 @@ import { PropsWithChildren } from 'react'
 import styled from '@emotion/styled'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { SessionProvider, signIn } from 'next-auth/react'
-import { LoginModal } from '@coldsurfers/accounts-ui'
-import { ModalPortal } from '@coldsurfers/surfers-ui'
+import { LoginModal, ModalPortal } from '@coldsurfers/hotsurf'
 import { Session } from 'next-auth'
 import Header from './Header'
 import Footer from './Footer'
diff --git a/packages/store-client/components/PaymentModal.tsx b/packages/store-client/components/PaymentModal.tsx
index 67b4d93..ea2de9c 100644
--- a/packages/store-client/components/PaymentModal.tsx
+++ b/packages/store-client/components/PaymentModal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { CTAButton, Modal, ModalPortal } from '@coldsurfers/surfers-ui'
+import { CTAButton, Modal, ModalPortal } from '@coldsurfers/hotsurf'
 import { nanoid } from 'nanoid'
 import { MouseEventHandler, useCallback, useEffect, useRef } from 'react'
 import { PaymentWidgetInstance } from '@tosspayments/payment-widget-sdk'
@@ -85,7 +85,7 @@ export default function PaymentModal({
             <div id="payment-widget" style={{ width: '100%' }} />
             <div id="agreement" style={{ width: '100%' }} />
             <CTAButton
-              onClick={async () => {
+              onPress={async () => {
                 try {
                   // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
                   // @docs https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보
@@ -103,9 +103,8 @@ export default function PaymentModal({
                   console.error(error)
                 }
               }}
-            >
-              구매하기
-            </CTAButton>
+              text="구매하기"
+            />
           </CustomModal>
         </Modal.Background>
       </ModalPortal>
diff --git a/packages/store-client/next.config.js b/packages/store-client/next.config.js
index f727ec2..ac43632 100644
--- a/packages/store-client/next.config.js
+++ b/packages/store-client/next.config.js
@@ -21,6 +21,10 @@ const nextConfig = {
 
     return config
   },
+  transpilePackages: ['@coldsurfers/hotsurf'],
+  compiler: {
+    styledComponents: true,
+  },
 }
 
 module.exports = nextConfig
diff --git a/packages/store-client/package.json b/packages/store-client/package.json
index 9044d4a..2045b6d 100644
--- a/packages/store-client/package.json
+++ b/packages/store-client/package.json
@@ -17,11 +17,10 @@
   "dependencies": {
     "@coldsurfers/accounts-kit": "1.0.0",
     "@coldsurfers/accounts-schema": "1.0.0",
-    "@coldsurfers/accounts-ui": "1.0.0",
     "@coldsurfers/notion-renderer": "1.0.0",
     "@coldsurfers/notion-utils": "1.0.1-rc.10",
     "@coldsurfers/ocean-road": "1.5.1-rc.4",
-    "@coldsurfers/surfers-ui": "1.0.0",
+    "@coldsurfers/hotsurf": "0.2.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@notionhq/client": "^2.2.14",
@@ -39,7 +38,8 @@
     "zod": "^3.22.4",
     "zustand": "^4.4.7",
     "react-native-web": "^0.18.12",
-    "react-spinners": "^0.13.7"
+    "react-spinners": "^0.13.7",
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.12.1",
diff --git a/packages/surfers-ui/.eslintrc b/packages/surfers-ui/.eslintrc
deleted file mode 100644
index ac72403..0000000
--- a/packages/surfers-ui/.eslintrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-    "extends": [
-      "coldsurfers", // for nodejs-typescript, or 'coldsurfers/nodejs-typescript'
-      "coldsurfers/react-typescript" // for react-typescript
-    ],
-    "plugins": ["@tanstack/query"],
-    "rules": {
-      "import/extensions": "off",
-      "import/no-unresolved": "off",
-      "no-undef": "off"
-    }
-}
\ No newline at end of file
diff --git a/packages/surfers-ui/.gitignore b/packages/surfers-ui/.gitignore
deleted file mode 100644
index 686d417..0000000
--- a/packages/surfers-ui/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-dist/
-.eslintcache
diff --git a/packages/surfers-ui/.prettierrc.json b/packages/surfers-ui/.prettierrc.json
deleted file mode 100644
index fa51da2..0000000
--- a/packages/surfers-ui/.prettierrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true
-}
diff --git a/packages/surfers-ui/package.json b/packages/surfers-ui/package.json
deleted file mode 100644
index 074066e..0000000
--- a/packages/surfers-ui/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "name": "@coldsurfers/surfers-ui",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "source": "src/",
-  "files": [
-    "src",
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    }
-  },
-  "license": "MIT",
-  "scripts": {
-    "build": "rm -rf dist && tsc",
-    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint:fix": "yarn lint --fix"
-  },
-  "devDependencies": {
-    "@emotion/styled": "^11.11.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.56.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-coldsurfers": "^1.1.3",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.3.3"
-  },
-  "peerDependencies": {
-    "@emotion/styled": "^11.11.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}
diff --git a/packages/surfers-ui/src/Button.tsx b/packages/surfers-ui/src/Button.tsx
deleted file mode 100644
index 7356788..0000000
--- a/packages/surfers-ui/src/Button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable no-undef */
-import styled from '@emotion/styled'
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
-
-export interface ButonProps
-  extends DetailedHTMLProps<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {}
-
-const ButtonBase = styled.button`
-  border-radius: 14px;
-  padding: 0.5rem;
-  border: none;
-  font-size: 14px;
-  cursor: pointer;
-`
-
-export default function Button(props: ButonProps) {
-  return <ButtonBase {...props} />
-}
diff --git a/packages/surfers-ui/src/CTAButton.tsx b/packages/surfers-ui/src/CTAButton.tsx
deleted file mode 100644
index 6c5f714..0000000
--- a/packages/surfers-ui/src/CTAButton.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from '@emotion/styled'
-import Button from './Button'
-
-const CTAButton = styled(Button)`
-  width: 100%;
-  height: 54px;
-  font-weight: 400;
-  font-size: 18px;
-`
-
-export default CTAButton
diff --git a/packages/surfers-ui/src/ModalPortal.tsx b/packages/surfers-ui/src/ModalPortal.tsx
deleted file mode 100644
index d104bde..0000000
--- a/packages/surfers-ui/src/ModalPortal.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PropsWithChildren } from 'react'
-import { createPortal } from 'react-dom'
-import { MODAL_PORTAL_ID } from './constants'
-
-const ModalPortal = ({ children }: PropsWithChildren<{}>) =>
-  // eslint-disable-next-line no-undef
-  createPortal(children, document.getElementById(MODAL_PORTAL_ID)!)
-
-ModalPortal.Pillar = () => <div id={MODAL_PORTAL_ID} />
-
-export default ModalPortal
diff --git a/packages/surfers-ui/src/index.ts b/packages/surfers-ui/src/index.ts
deleted file mode 100644
index 6935281..0000000
--- a/packages/surfers-ui/src/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Button } from './Button'
-export { default as Modal } from './Modal'
-export { default as ModalPortal } from './ModalPortal'
-export { default as CTAButton } from './CTAButton'
-export { default as BottomSticky } from './BottomSticky'
diff --git a/packages/surfers-ui/tsconfig.json b/packages/surfers-ui/tsconfig.json
deleted file mode 100644
index c9a4ad0..0000000
--- a/packages/surfers-ui/tsconfig.json
+++ /dev/null
@@ -1,101 +0,0 @@
-{
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-    /* Projects */
-    // "incremental": true,                              /* Enable incremental compilation */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-    /* Language and Environment */
-    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "preserve" /* Specify what JSX code is generated. */,
-    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
-    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-
-    /* Modules */
-    "module": "commonjs" /* Specify what module code is generated. */,
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files */
-    // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
-
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
-
-    /* Emit */
-    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
-    // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
-    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
-    /* Type Checking */
-    "strict": true /* Enable all strict type-checking options. */,
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
-    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
-    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
-  },
-}
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
index 03b56db..2787398 100644
--- a/tsconfig.paths.json
+++ b/tsconfig.paths.json
@@ -9,9 +9,6 @@
             "@coldsurfers/accounts-schema": [
                 "./packages/accounts-schema/src/index.ts"
             ],
-            "@coldsurfers/accounts-ui": [
-                "./packages/accounts-ui/src/index.ts"
-            ],
             "@coldsurfers/cloudinary-utils": [
                 "./packages/cloudinary-utils/src/index.ts"
             ],
@@ -24,9 +21,6 @@
             "@coldsurfers/shared-utils": [
                 "./packages/shared-utils/src/index.ts"
             ],
-            "@coldsurfers/surfers-ui": [
-                "./packages/surfers-ui/src/index.ts"
-            ],
             "@coldsurfers/store-client/*": [
                 "./packages/store-client/*"
             ],
diff --git a/yarn.lock b/yarn.lock
index c4ecc4d..3f542d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1415,22 +1415,6 @@
     "@smithy/types" "^2.9.1"
     tslib "^2.5.0"
 
-"@babel/cli@^7.18.6":
-  version "7.23.4"
-  resolved "https://registry.npmjs.org/@babel/cli/-/cli-7.23.4.tgz"
-  integrity sha512-j3luA9xGKCXVyCa5R7lJvOMM+Kc2JEnAEIgz2ggtjQ/j5YUVgfsg/WsG95bbsgq7YLHuiCOzMnoSasuY16qiCw==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
-    commander "^4.0.1"
-    convert-source-map "^2.0.0"
-    fs-readdir-recursive "^1.1.0"
-    glob "^7.2.0"
-    make-dir "^2.1.0"
-    slash "^2.0.0"
-  optionalDependencies:
-    "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
-    chokidar "^3.4.0"
-
 "@babel/code-frame@7.12.11":
   version "7.12.11"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz"
@@ -1451,7 +1435,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
 
-"@babel/core@^7.13.16", "@babel/core@^7.14.0", "@babel/core@^7.18.6":
+"@babel/core@^7.13.16", "@babel/core@^7.14.0":
   version "7.23.7"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz"
   integrity sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==
@@ -1625,7 +1609,7 @@
   dependencies:
     "@babel/types" "^7.23.0"
 
-"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.15":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15":
   version "7.22.15"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -1784,13 +1768,6 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-external-helpers@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.23.3.tgz"
-  integrity sha512-W2kdnFytYsSB0X49op/t9Re68rb3m+RN+sK7aD/8lCutepSm22Ms4MmPzMQZ2FYSpItsKlRXG3osVYfLWb83Ug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-proposal-async-generator-functions@^7.0.0":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz"
@@ -1801,7 +1778,7 @@
     "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.16.0", "@babel/plugin-proposal-class-properties@^7.18.6":
+"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.16.0":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz"
   integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
@@ -1842,7 +1819,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.18.6":
+"@babel/plugin-proposal-object-rest-spread@^7.0.0":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz"
   integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
@@ -2052,16 +2029,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-async-generator-functions@^7.23.7":
-  version "7.23.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz"
-  integrity sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-remap-async-to-generator" "^7.22.20"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
 "@babel/plugin-transform-async-generator-functions@^7.23.9":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz#9adaeb66fc9634a586c5df139c6240d41ed801ce"
@@ -2252,16 +2219,6 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz"
-  integrity sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.20"
-
 "@babel/plugin-transform-modules-systemjs@^7.23.9":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz#105d3ed46e4a21d257f83a2f9e2ee4203ceda6be"
@@ -2628,92 +2585,6 @@
     core-js-compat "^3.31.0"
     semver "^6.3.1"
 
-"@babel/preset-env@^7.18.6":
-  version "7.23.8"
-  resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.8.tgz"
-  integrity sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==
-  dependencies:
-    "@babel/compat-data" "^7.23.5"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-option" "^7.23.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.23.3"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.23.7"
-    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.23.3"
-    "@babel/plugin-syntax-import-attributes" "^7.23.3"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
-    "@babel/plugin-transform-arrow-functions" "^7.23.3"
-    "@babel/plugin-transform-async-generator-functions" "^7.23.7"
-    "@babel/plugin-transform-async-to-generator" "^7.23.3"
-    "@babel/plugin-transform-block-scoped-functions" "^7.23.3"
-    "@babel/plugin-transform-block-scoping" "^7.23.4"
-    "@babel/plugin-transform-class-properties" "^7.23.3"
-    "@babel/plugin-transform-class-static-block" "^7.23.4"
-    "@babel/plugin-transform-classes" "^7.23.8"
-    "@babel/plugin-transform-computed-properties" "^7.23.3"
-    "@babel/plugin-transform-destructuring" "^7.23.3"
-    "@babel/plugin-transform-dotall-regex" "^7.23.3"
-    "@babel/plugin-transform-duplicate-keys" "^7.23.3"
-    "@babel/plugin-transform-dynamic-import" "^7.23.4"
-    "@babel/plugin-transform-exponentiation-operator" "^7.23.3"
-    "@babel/plugin-transform-export-namespace-from" "^7.23.4"
-    "@babel/plugin-transform-for-of" "^7.23.6"
-    "@babel/plugin-transform-function-name" "^7.23.3"
-    "@babel/plugin-transform-json-strings" "^7.23.4"
-    "@babel/plugin-transform-literals" "^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.23.4"
-    "@babel/plugin-transform-member-expression-literals" "^7.23.3"
-    "@babel/plugin-transform-modules-amd" "^7.23.3"
-    "@babel/plugin-transform-modules-commonjs" "^7.23.3"
-    "@babel/plugin-transform-modules-systemjs" "^7.23.3"
-    "@babel/plugin-transform-modules-umd" "^7.23.3"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
-    "@babel/plugin-transform-new-target" "^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.23.4"
-    "@babel/plugin-transform-numeric-separator" "^7.23.4"
-    "@babel/plugin-transform-object-rest-spread" "^7.23.4"
-    "@babel/plugin-transform-object-super" "^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding" "^7.23.4"
-    "@babel/plugin-transform-optional-chaining" "^7.23.4"
-    "@babel/plugin-transform-parameters" "^7.23.3"
-    "@babel/plugin-transform-private-methods" "^7.23.3"
-    "@babel/plugin-transform-private-property-in-object" "^7.23.4"
-    "@babel/plugin-transform-property-literals" "^7.23.3"
-    "@babel/plugin-transform-regenerator" "^7.23.3"
-    "@babel/plugin-transform-reserved-words" "^7.23.3"
-    "@babel/plugin-transform-shorthand-properties" "^7.23.3"
-    "@babel/plugin-transform-spread" "^7.23.3"
-    "@babel/plugin-transform-sticky-regex" "^7.23.3"
-    "@babel/plugin-transform-template-literals" "^7.23.3"
-    "@babel/plugin-transform-typeof-symbol" "^7.23.3"
-    "@babel/plugin-transform-unicode-escapes" "^7.23.3"
-    "@babel/plugin-transform-unicode-property-regex" "^7.23.3"
-    "@babel/plugin-transform-unicode-regex" "^7.23.3"
-    "@babel/plugin-transform-unicode-sets-regex" "^7.23.3"
-    "@babel/preset-modules" "0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2 "^0.4.7"
-    babel-plugin-polyfill-corejs3 "^0.8.7"
-    babel-plugin-polyfill-regenerator "^0.5.4"
-    core-js-compat "^3.31.0"
-    semver "^6.3.1"
-
 "@babel/preset-flow@^7.13.13":
   version "7.23.3"
   resolved "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.23.3.tgz"
@@ -2732,7 +2603,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.16.0", "@babel/preset-react@^7.18.6":
+"@babel/preset-react@^7.16.0":
   version "7.23.3"
   resolved "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.23.3.tgz"
   integrity sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==
@@ -2744,7 +2615,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.22.5"
     "@babel/plugin-transform-react-pure-annotations" "^7.23.3"
 
-"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.0", "@babel/preset-typescript@^7.18.6":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.0":
   version "7.23.3"
   resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz"
   integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
@@ -2819,7 +2690,7 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
-"@babel/traverse@^7.14.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.18.8", "@babel/traverse@^7.23.7":
+"@babel/traverse@^7.14.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.23.7":
   version "7.23.7"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz"
   integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
@@ -3174,7 +3045,7 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@^1.2.1":
+"@emotion/is-prop-valid@1.2.1", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -3228,10 +3099,10 @@
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
     "@emotion/utils" "^1.2.1"
 
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/unitless@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
 
 "@emotion/unitless@^0.8.1":
   version "0.8.1"
@@ -4994,11 +4865,6 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz#e74892f1a9ccf41d3bf5979ad6d3d77c07b9cba1"
   integrity sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==
 
-"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
-  version "2.1.8-no-fsevents.3"
-  resolved "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz"
-  integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
-
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -7385,6 +7251,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/stylis@4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
+  integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
+
 "@types/uuid@8.3.4":
   version "8.3.4"
   resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz"
@@ -9645,7 +9516,7 @@ charm@~0.1.1:
   resolved "https://registry.npmjs.org/charm/-/charm-0.1.2.tgz"
   integrity sha512-syedaZ9cPe7r3hoQA9twWYKu5AIyCswN5+szkmPBe9ccdLrj4bYaCnLVPTLd2kgVRc7+zoX4tyPgRnFKCj5YjQ==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.5.2, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1, chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -9946,11 +9817,6 @@ commander@^3.0.2:
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
-commander@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
-  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
-
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
@@ -10462,9 +10328,9 @@ css-in-js-utils@^3.1.0:
   dependencies:
     hyphenate-style-name "^1.0.3"
 
-css-to-react-native@^3.0.0:
+css-to-react-native@3.2.0:
   version "3.2.0"
-  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
   dependencies:
     camelize "^1.0.0"
@@ -10481,6 +10347,11 @@ cssfilter@0.0.10:
   resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
   integrity sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==
 
+csstype@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
@@ -12719,11 +12590,6 @@ fs-extra@^9.1.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-readdir-recursive@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz"
-  integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==
-
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -18046,7 +17912,7 @@ react-shallow-renderer@^16.15.0:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
-react-spinners@^0.13.7, react-spinners@^0.13.8:
+react-spinners@^0.13.7:
   version "0.13.8"
   resolved "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz"
   integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
@@ -18992,9 +18858,9 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
 shebang-command@^1.2.0:
@@ -19074,11 +18940,6 @@ sisteransi@^1.0.5:
   resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
-slash@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz"
-  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
-
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -19666,25 +19527,20 @@ style-dictionary@^3.7.1:
     lodash "^4.17.15"
     tinycolor2 "^1.4.1"
 
-styled-components@6.0.0-beta.2:
-  version "6.0.0-beta.2"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-6.0.0-beta.2.tgz"
-  integrity sha512-mDlMPid4qxb7MiIFUpUf8lAHpIwMeur50WtotYaCx0jaJHn6xmuHt7sh2hmT6DZHTU+riVD4JG4Lqkmd9nrDmA==
-  dependencies:
-    "@babel/cli" "^7.18.6"
-    "@babel/core" "^7.18.6"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/plugin-external-helpers" "^7.18.6"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.18.6"
-    "@babel/preset-env" "^7.18.6"
-    "@babel/preset-react" "^7.18.6"
-    "@babel/preset-typescript" "^7.18.6"
-    "@babel/traverse" "^7.18.8"
-    "@emotion/unitless" "^0.7.4"
-    css-to-react-native "^3.0.0"
-    shallowequal "^1.1.0"
-    stylis "^4.1.1"
+styled-components@6.1.8:
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
+  integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.1"
+    "@emotion/unitless" "0.8.0"
+    "@types/stylis" "4.2.0"
+    css-to-react-native "3.2.0"
+    csstype "3.1.2"
+    postcss "8.4.31"
+    shallowequal "1.1.0"
+    stylis "4.3.1"
+    tslib "2.5.0"
 
 styled-jsx@5.0.1:
   version "5.0.1"
@@ -19708,9 +19564,9 @@ stylis@4.2.0:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-stylis@^4.1.1:
+stylis@4.3.1:
   version "4.3.1"
-  resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
   integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
 
 stylus@^0.59.0:
@@ -20229,6 +20085,11 @@ tslib@1.9.3:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslib@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"