From 67623f93e126b361d10c243cf5fbde4356fe0926 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 27 Feb 2024 20:22:06 +0900
Subject: [PATCH 1/2] docs: update readme

---
 packages/bezier-icons/README.md |  6 ++++-
 packages/bezier-react/README.md | 45 +++++++++++++++++++++++----------
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/packages/bezier-icons/README.md b/packages/bezier-icons/README.md
index 6bf69920af..441df59c70 100644
--- a/packages/bezier-icons/README.md
+++ b/packages/bezier-icons/README.md
@@ -55,8 +55,12 @@ If you need to validate the icon source component, use the utility function `isB
 ```tsx
 import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'
 
+function FooIcon() {
+  return (<svg />)
+}
+
 console.log(isBezierIcon(AllIcon)) // true
-console.log(isBezierIcon(<svg />)) // false
+console.log(isBezierIcon(FooIcon)) // false
 ```
 
 ## Contributing
diff --git a/packages/bezier-react/README.md b/packages/bezier-react/README.md
index 825556d2ad..b339e8758c 100644
--- a/packages/bezier-react/README.md
+++ b/packages/bezier-react/README.md
@@ -7,46 +7,65 @@ Bezier React is a React components library that implements Bezier design system.
 ### npm
 
 ```bash
-npm i @channel.io/bezier-react styled-components@5
-npm i -D @types/styled-components@5
+npm i @channel.io/bezier-react
 ```
 
 ### yarn
 
 ```bash
-yarn add @channel.io/bezier-react styled-components@5
-yarn add -D @types/styled-components@5
+yarn add @channel.io/bezier-react
 ```
 
 ### pnpm
 
 ```bash
-pnpm install @channel.io/bezier-react styled-components@5
-pnpm install -D @types/styled-components@5
+pnpm install @channel.io/bezier-react
 ```
 
-**bezier-react has [styled-components](https://styled-components.com/) as peer dependency** so don't forget to install it.
-
 ## Usage
 
-1. Wrap `BezierProvider` at the root of your application.
-2. Pass the `foundation` value like `LightFoundation` or `DarkFoundation`.
+### 1. CSS import
+
+In order to use bezier-react's styles, you need to import CSS. If you're using the module bundler, you can import CSS directly from within your JavaScript file.
+
+```tsx
+import "@channel.io/bezier-react/styles.css"
+```
+
+Or if you're not using the module bundler, you can add the CSS directly to your HTML. We recommend referring to your styles file and copy-pasting it. As bezier-react updates, your styles should update with it.
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+### 2. Wrap `AppProvider`
+
+Wrap `AppProvider` at the root of your application. If necessary, you can change the theme by specifying the `themeName` property.
 
 ```tsx
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { BezierProvider, LightFoundation, Text } from '@channel.io/bezier-react'
+import { AppProvider, Text } from '@channel.io/bezier-react'
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
 
 root.render(
-  <BezierProvider foundation={LightFoundation}>
+  <AppProvider themeName="dark">
     <Text as="h1">Hello World</Text>
-  </BezierProvider>,
+  </AppProvider>,
 )
 ```
 
+### 3. Font import
+
+Import font from CDN of Channel Corp. Or you can import it from [Google Fonts](https://fonts.google.com/specimen/Inter).
+
+```html
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />
+```
+
 ## Contributing
 
 See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).

From 7152a8fc763191da6a6b80445a21c0f3e36b03c9 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 27 Feb 2024 20:23:00 +0900
Subject: [PATCH 2/2] chore(storybook): fix storybook asset preload config

---
 packages/bezier-react/.storybook/preview-head.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bezier-react/.storybook/preview-head.html b/packages/bezier-react/.storybook/preview-head.html
index 8cb0e1914f..dd48ab6b64 100644
--- a/packages/bezier-react/.storybook/preview-head.html
+++ b/packages/bezier-react/.storybook/preview-head.html
@@ -1 +1,2 @@
-<link rel="preload stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css">
\ No newline at end of file
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />