From dacd95987fc5f5a36e11218ad9ff486e8a1ec3e2 Mon Sep 17 00:00:00 2001
From: witt <unix.bio@gmail.com>
Date: Sat, 26 Jun 2021 23:49:06 +0800
Subject: [PATCH] docs: improve the copywriting content of the document (#571)

* docs: export individual style types for each component

* docs: improve the copywriting content of the document

* docs: optimize the document site experience on mobile devices
---
 components/use-toasts/index.ts             |  2 +-
 components/use-toasts/use-toast.tsx        |  4 +-
 lib/components/layout.tsx                  | 14 +++----
 lib/components/menu/menu-links.tsx         |  2 +-
 lib/components/menu/menu-sticker.tsx       | 38 +++++++++++++----
 lib/components/sidebar/active-catalog.tsx  | 13 ++++++
 lib/components/sidebar/active-link.tsx     | 26 +++++++++++-
 lib/components/sidebar/index.tsx           |  2 +-
 lib/components/sidebar/tabbar-mobile.tsx   | 21 ++++++----
 lib/data/metadata-en-us.json               |  2 +-
 pages/_app.tsx                             | 15 ++-----
 pages/en-us/components/auto-complete.mdx   | 46 +++++++++++---------
 pages/en-us/components/badge.mdx           |  6 +--
 pages/en-us/components/button-dropdown.mdx | 32 ++++++++------
 pages/en-us/components/card.mdx            |  4 +-
 pages/en-us/components/checkbox.mdx        | 36 ++++++++--------
 pages/en-us/components/dot.mdx             | 14 +++++--
 pages/en-us/components/fieldset.mdx        | 38 ++++++++---------
 pages/en-us/components/input.mdx           | 32 +++++++-------
 pages/en-us/components/link.mdx            | 18 ++++----
 pages/en-us/components/loading.mdx         |  6 +--
 pages/en-us/components/note.mdx            | 18 +++++---
 pages/en-us/components/progress.mdx        | 24 +++++++----
 pages/en-us/components/radio.mdx           | 24 +++++------
 pages/en-us/components/select.mdx          |  6 +--
 pages/en-us/components/slider.mdx          |  6 +--
 pages/en-us/components/snippet.mdx         | 38 +++++++++++------
 pages/en-us/components/tabs.mdx            | 18 ++++----
 pages/en-us/components/text.mdx            |  2 +-
 pages/en-us/components/textarea.mdx        | 36 +++++++++-------
 pages/en-us/components/toast.mdx           | 16 +++----
 pages/en-us/components/toggle.mdx          |  6 +--
 pages/en-us/components/tooltip.mdx         |  2 +-
 pages/en-us/components/user.mdx            |  2 +-
 pages/zh-cn/components/auto-complete.mdx   | 44 ++++++++++---------
 pages/zh-cn/components/badge.mdx           |  6 +--
 pages/zh-cn/components/button-dropdown.mdx | 32 ++++++++------
 pages/zh-cn/components/dot.mdx             | 14 +++++--
 pages/zh-cn/components/input.mdx           | 49 +++++++++++-----------
 pages/zh-cn/components/loading.mdx         |  6 +--
 pages/zh-cn/components/note.mdx            | 18 +++++---
 pages/zh-cn/components/progress.mdx        | 24 +++++++----
 pages/zh-cn/components/snippet.mdx         | 38 +++++++++++------
 pages/zh-cn/components/text.mdx            |  2 +-
 pages/zh-cn/components/textarea.mdx        | 38 ++++++++++-------
 pages/zh-cn/components/toast.mdx           |  6 +--
 pages/zh-cn/components/tooltip.mdx         |  2 +-
 pages/zh-cn/components/user.mdx            |  2 +-
 48 files changed, 499 insertions(+), 351 deletions(-)

diff --git a/components/use-toasts/index.ts b/components/use-toasts/index.ts
index a559ff2..ff8b50e 100644
--- a/components/use-toasts/index.ts
+++ b/components/use-toasts/index.ts
@@ -1,4 +1,4 @@
 import useToasts from './use-toast'
 
-export type { ToastAction, Toast, ToastType } from './use-toast'
+export type { ToastAction, Toast, ToastTypes } from './use-toast'
 export default useToasts
diff --git a/components/use-toasts/use-toast.tsx b/components/use-toasts/use-toast.tsx
index bca6d9b..8abc782 100644
--- a/components/use-toasts/use-toast.tsx
+++ b/components/use-toasts/use-toast.tsx
@@ -10,10 +10,10 @@ export interface ToastAction {
   handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void
   passive?: boolean
 }
-export type ToastType = NormalTypes
+export type ToastTypes = NormalTypes
 export interface Toast {
   text?: string | React.ReactNode
-  type?: ToastType
+  type?: ToastTypes
   delay?: number
   actions?: Array<ToastAction>
 }
diff --git a/lib/components/layout.tsx b/lib/components/layout.tsx
index f2c2c76..e33a697 100644
--- a/lib/components/layout.tsx
+++ b/lib/components/layout.tsx
@@ -62,7 +62,6 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             display: flex;
             box-sizing: border-box;
           }
-
           .sidebar {
             width: 200px;
             margin-right: 20px;
@@ -76,13 +75,11 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             transition: transform 200ms ease-out;
             z-index: 100;
           }
-
           .side-shadow {
             width: 220px;
             flex-shrink: 0;
             height: 100vh;
           }
-
           .main {
             display: flex;
             max-width: calc(100% - 220px);
@@ -97,7 +94,7 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             .layout {
               max-width: 100%;
               width: 100%;
-              padding: 5rem 1rem;
+              padding: 20px 1rem;
             }
 
             .sidebar {
@@ -107,11 +104,14 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
               right: 0;
               z-index: 10;
               width: 100vw;
-              height: ${expanded ? '100vh' : '0'};
-              background-color: ${theme.palette.background};
-              padding: 0;
+              box-sizing: border-box;
+              height: ${expanded ? '90vh' : '0'};
+              background-color: transparent;
+              backdrop-filter: invert(15%) blur(5px);
+              padding: var(--geist-page-nav-height) 0 0 0;
               overflow: hidden;
               transition: height 250ms ease;
+              box-shadow: ${expanded ? theme.expressiveness.shadowSmall : 'none'};
             }
 
             .main {
diff --git a/lib/components/menu/menu-links.tsx b/lib/components/menu/menu-links.tsx
index 78b9378..672a38a 100644
--- a/lib/components/menu/menu-links.tsx
+++ b/lib/components/menu/menu-links.tsx
@@ -33,7 +33,7 @@ const MenuLinks = () => {
           position: relative;
           margin: 0 auto;
           padding: 0 ${theme.layout.gap};
-          height: 60px;
+          height: var(--geist-page-nav-height);
         }
 
         .site-name {
diff --git a/lib/components/menu/menu-sticker.tsx b/lib/components/menu/menu-sticker.tsx
index dec89f9..6fa7bad 100644
--- a/lib/components/menu/menu-sticker.tsx
+++ b/lib/components/menu/menu-sticker.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react'
-import { Tabs, useTheme } from 'components'
+import { useMediaQuery, Tabs, useTheme } from 'components'
 import useCurrentState from 'components/utils/use-current-state'
 import Router from 'next/router'
 import Metadatas from 'lib/data'
@@ -12,10 +12,13 @@ const MenuSticker = () => {
   const { tabbar: currentUrlTabValue, locale } = useLocale()
   const [tabValue, setTabValue, tabValueRef] = useCurrentState<string>('')
   const [fixed, setFixed, fixedRef] = useCurrentState<boolean>(false)
+  const isSM = useMediaQuery('sm', { match: 'down' })
+  const isXS = useMediaQuery('xs', { match: 'down' })
+  const isFixedTabs = fixed && !isXS
 
   const tabbarData = useMemo(() => Metadatas[locale], [locale])
 
-  useEffect(() => updateTabbarFixed(fixed), [fixed])
+  useEffect(() => updateTabbarFixed(isFixedTabs), [isFixedTabs])
   useEffect(() => setTabValue(currentUrlTabValue), [currentUrlTabValue])
   useEffect(() => {
     const scrollHandler = () => {
@@ -36,15 +39,18 @@ const MenuSticker = () => {
 
   return (
     <>
-      <div className={`nav-fill ${fixed ? 'active' : ''}`} />
-      <nav className={fixed ? 'fixed' : ''}>
+      <div className={`nav-fill ${isFixedTabs ? 'active' : ''}`} />
+      <nav className={isFixedTabs ? 'fixed' : ''}>
         <div className="sticker">
-          <div className="inner">
-            <Tabs height="46px" value={tabValue} onChange={val => setTabValue(val)}>
+          <div className={`inner ${isSM && 'sm'}`}>
+            <Tabs
+              height="calc(var(--geist-page-tab-height) - 2px)"
+              value={tabValue}
+              onChange={val => setTabValue(val)}>
               {tabbarData
                 ? tabbarData.map((tab, index) => (
                     <Tabs.Item
-                      height="46px"
+                      height="calc(var(--geist-page-tab-height) - 2px)"
                       font="14px"
                       py={0}
                       label={tab.localeName || tab.name}
@@ -68,14 +74,14 @@ const MenuSticker = () => {
         }
 
         .nav-fill.active {
-          height: 48px;
+          height: var(--geist-page-tab-height);
           visibility: visible;
         }
 
         nav {
           position: relative;
           width: 100%;
-          height: 48px;
+          height: var(--geist-page-tab-height);
           background-color: ${theme.palette.background};
         }
 
@@ -113,6 +119,20 @@ const MenuSticker = () => {
           margin: 0 auto;
         }
 
+        .inner.sm {
+          width: 100%;
+        }
+        .inner.sm :global(.tab) {
+          width: 33.333%;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          margin: 0;
+        }
+        .inner.sm :global(.tab.active) {
+          background-color: ${theme.palette.accents_2};
+        }
+
         .inner :global(.content) {
           display: none;
         }
diff --git a/lib/components/sidebar/active-catalog.tsx b/lib/components/sidebar/active-catalog.tsx
index 6aa0883..e8897bf 100644
--- a/lib/components/sidebar/active-catalog.tsx
+++ b/lib/components/sidebar/active-catalog.tsx
@@ -27,6 +27,19 @@ const ActiveCatalog: React.FC<Props> = React.memo(({ name, localeName, ...props
         .active {
           color: ${theme.palette.foreground};
         }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          span {
+            letter-spacing: 0.3px;
+            display: inline-block;
+            font-weight: 800;
+            font-size: 17px;
+            padding: 15px 10px 10px;
+            width: 100%;
+            text-align: center;
+            color: ${theme.palette.accents_6};
+          }
+        }
       `}</style>
     </span>
   )
diff --git a/lib/components/sidebar/active-link.tsx b/lib/components/sidebar/active-link.tsx
index 0ee1f49..12bd694 100644
--- a/lib/components/sidebar/active-link.tsx
+++ b/lib/components/sidebar/active-link.tsx
@@ -20,7 +20,7 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
   const isActive = pathname === href
 
   return (
-    <div className="link">
+    <div className={`link ${isActive ? 'active' : ''}`}>
       <Link href={href}>
         <a className={isActive ? 'active' : ''}>
           {title}
@@ -61,6 +61,30 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
           color: ${theme.palette.accents_4};
           font-weight: 400;
         }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          .link {
+            background-color: ${theme.palette.accents_1};
+            margin-bottom: 22px;
+            padding: 0 25px;
+            border-radius: 30px;
+            height: 64px;
+            user-select: none;
+          }
+          .link.active {
+            border: 8px solid ${theme.palette.accents_5};
+            background-color: ${theme.palette.background};
+          }
+          a {
+            font-weight: bold;
+            font-size: 22px;
+            color: ${theme.palette.accents_6};
+          }
+          a.active {
+            font-size: 22px;
+            color: ${theme.palette.accents_5};
+          }
+        }
       `}</style>
     </div>
   )
diff --git a/lib/components/sidebar/index.tsx b/lib/components/sidebar/index.tsx
index d4b2918..a0d8e12 100644
--- a/lib/components/sidebar/index.tsx
+++ b/lib/components/sidebar/index.tsx
@@ -76,7 +76,7 @@ export const Sidebar: React.FC<Props> = React.memo(() => {
 
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
           .box {
-            padding: calc(3.5 * ${theme.layout.gap}) 15vw;
+            padding: 20px 35px 10px;
             width: 100vw;
             height: 100%;
           }
diff --git a/lib/components/sidebar/tabbar-mobile.tsx b/lib/components/sidebar/tabbar-mobile.tsx
index 77b8ba2..15ae288 100644
--- a/lib/components/sidebar/tabbar-mobile.tsx
+++ b/lib/components/sidebar/tabbar-mobile.tsx
@@ -15,9 +15,9 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
   return (
     <div className="tabbar">
       <Button className="toggle" auto type="abort" onClick={handler}>
-        <SlidersIcon size={16} />
+        <SlidersIcon size={14} />
       </Button>
-      <span>Geist UI</span>
+      <span className="geist-ui">Geist UI</span>
       <style jsx>{`
         .tabbar {
           position: fixed;
@@ -25,14 +25,15 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
           left: 0;
           right: 0;
           z-index: 950;
-          height: 3.7rem;
-          background-color: ${theme.palette.background};
+          height: var(--geist-page-nav-height);
+          background-color: ${theme.palette.accents_1};
           display: flex;
           align-items: center;
-          padding: 0 calc(${theme.layout.gap} * 2);
+          padding: 0 20px;
           box-sizing: border-box;
           justify-content: space-between;
           border-bottom: 1px solid ${theme.palette.border};
+          box-shadow: ${theme.expressiveness.shadowSmall};
         }
 
         .tabbar :global(.toggle) {
@@ -45,11 +46,15 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
           color: ${theme.palette.accents_6};
         }
 
-        span {
-          color: ${theme.palette.accents_7};
-          font-size: 0.75rem;
+        .geist-ui {
+          color: ${theme.palette.foreground};
+          font-size: 17px;
+          font-weight: bold;
+          padding-right: 5px;
           display: inline-flex;
           text-transform: capitalize;
+          user-select: none;
+          letter-spacing: 0.4px;
         }
 
         @media only screen and (min-width: ${theme.layout.breakpointMobile}) {
diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json
index e7da0ec..54f3340 100644
--- a/lib/data/metadata-en-us.json
+++ b/lib/data/metadata-en-us.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Autocomplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"AutoComplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f513ee3..c0070b1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -72,51 +72,44 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
           <Component {...pageProps} />
         </ConfigContext>
         <style global jsx>{`
+          html {
+            --geist-page-nav-height: 60px;
+            --geist-page-tab-height: 48px;
+          }
           .tag {
             color: ${theme.palette.accents_5};
           }
-
           .punctuation {
             color: ${theme.palette.accents_5};
           }
-
           .attr-name {
             color: ${theme.palette.accents_6};
           }
-
           .attr-value {
             color: ${theme.palette.accents_4};
           }
-
           .language-javascript {
             color: ${theme.palette.accents_4};
           }
-
           span.class-name {
             color: ${theme.palette.warning};
           }
-
           span.maybe-class-name {
             color: ${theme.palette.purple};
           }
-
           span.token.string {
             color: ${theme.palette.accents_5};
           }
-
           span.keyword {
             color: ${theme.palette.success};
           }
-
           span.plain-text {
             color: ${theme.palette.accents_3};
           }
-
           body::-webkit-scrollbar {
             width: 0;
             background-color: ${theme.palette.accents_1};
           }
-
           body::-webkit-scrollbar-thumb {
             background-color: ${theme.palette.accents_2};
             border-radius: ${theme.layout.radius};
diff --git a/pages/en-us/components/auto-complete.mdx b/pages/en-us/components/auto-complete.mdx
index 900850a..5c5849c 100644
--- a/pages/en-us/components/auto-complete.mdx
+++ b/pages/en-us/components/auto-complete.mdx
@@ -3,7 +3,7 @@ import { AutoComplete, Spacer, Badge, Grid, Text, Code } from 'components'
 import { useState, useRef, useEffect } from 'react'
 
 export const meta = {
-  title: 'Autocomplete',
+  title: 'AutoComplete',
   group: 'Data Entry',
 }
 
@@ -265,25 +265,25 @@ AutoComplete control of input field.
 <Attributes edit="/pages/en-us/components/auto-complete.mdx">
 <Attributes.Title>AutoComplete.Props</Attributes.Title>
 
-| Attribute             | Description                                           | Type                                             | Accepted values                                         | Default   |
-| --------------------- | ----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | --------- |
-| **options**           | options of input                                      | [AutoCompleteOptions](#type-autocompleteoptions) | -                                                       | -         |
-| **type**              | input type                                            | `NormalTypes`                                    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **initialValue**      | initial value                                         | `string`                                         | -                                                       | -         |
-| **value**             | current value                                         | `string`                                         | -                                                       | -         |
-| **width**             | container width                                       | `string`                                         | -                                                       | -         |
-| **clearable**         | show clear icon                                       | `boolean`                                        | -                                                       | `false`   |
-| **searching**         | show loading icon for search                          | `boolean`                                        | -                                                       | `false`   |
-| **onChange**          | value of input is changed                             | `(value: string) => void`                        | -                                                       | -         |
-| **onSearch**          | called when searching items                           | `(value: string) => void`                        | -                                                       | -         |
-| **onSelect**          | called when a option is selected                      | `(value: string) => void`                        | -                                                       | -         |
-| **dropdownClassName** | className of dropdown box                             | `string`                                         | -                                                       | -         |
-| **dropdownStyle**     | style of dropdown box                                 | `object`                                         | -                                                       | -         |
-| **disableMatchWidth** | disable Option from follow parent width               | `boolean`                                        | -                                                       | `false`   |
-| **disableFreeSolo**   | only values can be changed through Select             | `boolean`                                        | -                                                       | `false`   |
-| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement`                              | -                                                       | `body`    |
-| **ref**               | forwardRef                                            | <Code>Ref<HTMLInputElement &#124; null></Code>   | -                                                       | -         |
-| ...                   | native props                                          | `InputHTMLAttributes`                            | `'id', 'className', ...`                                | -         |
+| Attribute             | Description                                           | Type                                           | Accepted values                                  | Default   |
+| --------------------- | ----------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------ | --------- |
+| **options**           | options of input                                      | `AutoCompleteOptions`                          | [AutoCompleteOptions](#type-autocompleteoptions) | -         |
+| **type**              | input type                                            | `AutoCompleteTypes`                            | [AutoCompleteTypes](#autocompletetypes)          | `default` |
+| **initialValue**      | initial value                                         | `string`                                       | -                                                | -         |
+| **value**             | current value                                         | `string`                                       | -                                                | -         |
+| **width**             | container width                                       | `string`                                       | -                                                | -         |
+| **clearable**         | show clear icon                                       | `boolean`                                      | -                                                | `false`   |
+| **searching**         | show loading icon for search                          | `boolean`                                      | -                                                | `false`   |
+| **onChange**          | value of input is changed                             | `(value: string) => void`                      | -                                                | -         |
+| **onSearch**          | called when searching items                           | `(value: string) => void`                      | -                                                | -         |
+| **onSelect**          | called when a option is selected                      | `(value: string) => void`                      | -                                                | -         |
+| **dropdownClassName** | className of dropdown box                             | `string`                                       | -                                                | -         |
+| **dropdownStyle**     | style of dropdown box                                 | `object`                                       | -                                                | -         |
+| **disableMatchWidth** | disable Option from follow parent width               | `boolean`                                      | -                                                | `false`   |
+| **disableFreeSolo**   | only values can be changed through Select             | `boolean`                                      | -                                                | `false`   |
+| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement`                            | -                                                | `body`    |
+| **ref**               | forwardRef                                            | <Code>Ref<HTMLInputElement &#124; null></Code> | -                                                | -         |
+| ...                   | native props                                          | `InputHTMLAttributes`                          | `'id', ...`                                      | -         |
 
 <Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>
 
@@ -314,6 +314,12 @@ Array<{
 } | AutoComplete.Item>
 ```
 
+<Attributes.Title>AutoCompleteTypes</Attributes.Title>
+
+```ts
+type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
 </Attributes>
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>
diff --git a/pages/en-us/components/badge.mdx b/pages/en-us/components/badge.mdx
index 51652f6..cd634df 100644
--- a/pages/en-us/components/badge.mdx
+++ b/pages/en-us/components/badge.mdx
@@ -106,7 +106,7 @@ Display an indicator that requires attention.
 
 | Attribute | Description                 | Type             | Accepted values                 | Default   |
 | --------- | --------------------------- | ---------------- | ------------------------------- | --------- |
-| **type**  | badge type                  | `NormalTypes`    | [NormalTypes](#normaltypes)     | `default` |
+| **type**  | badge type                  | `BadgeTypes`     | [BadgeTypes](#badgetypes)       | `default` |
 | **dot**   | show dot and ignore content | `boolean`        | -                               | `false`   |
 | ...       | native props                | `HTMLAttributes` | `'alt', 'id', 'className', ...` | -         |
 
@@ -117,10 +117,10 @@ Display an indicator that requires attention.
 | **placement** | fixe position of Badge | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |
 | ...           | native props           | `HTMLAttributes`  | `'alt', 'id', 'className', ...`     | -          |
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>BadgeTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type BadgeTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 <Attributes.Title>AnchorPlacement</Attributes.Title>
diff --git a/pages/en-us/components/button-dropdown.mdx b/pages/en-us/components/button-dropdown.mdx
index 30aab65..9f77bd6 100644
--- a/pages/en-us/components/button-dropdown.mdx
+++ b/pages/en-us/components/button-dropdown.mdx
@@ -92,22 +92,28 @@ Display related but alternate actions for a button.
 <Attributes edit="/pages/en-us/components/button-dropdown.mdx">
 <Attributes.Title>ButtonDropdown.Props</Attributes.Title>
 
-| Attribute    | Description               | Type             | Accepted values                                         | Default   |
-| ------------ | ------------------------- | ---------------- | ------------------------------------------------------- | --------- |
-| **type**     | button type               | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **loading**  | display loading indicator | `boolean`        | -                                                       | `false`   |
-| **auto**     | autoscale width           | `boolean`        | -                                                       | `false`   |
-| **disabled** | disable button            | `boolean`        | -                                                       | `false`   |
-| ...          | native props              | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...`                 | -         |
+| Attribute    | Description               | Type                  | Accepted values                             | Default   |
+| ------------ | ------------------------- | --------------------- | ------------------------------------------- | --------- |
+| **type**     | button type               | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
+| **loading**  | display loading indicator | `boolean`             | -                                           | `false`   |
+| **auto**     | autoscale width           | `boolean`             | -                                           | `false`   |
+| **disabled** | disable button            | `boolean`             | -                                           | `false`   |
+| ...          | native props              | `HTMLAttributes`      | `'autoFocus', 'name', 'className', ...`     | -         |
 
 <Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>
 
-| Attribute   | Description     | Type                   | Accepted values                                         | Default   |
-| ----------- | --------------- | ---------------------- | ------------------------------------------------------- | --------- |
-| **type**    | button type     | `NormalTypes`          | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **main**    | the main action | `boolean`              | -                                                       | `false`   |
-| **onClick** | event handler   | `MouseEventHandler`    | -                                                       | -         |
-| ...         | native props    | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...`                        | -         |
+| Attribute   | Description     | Type                   | Accepted values                             | Default   |
+| ----------- | --------------- | ---------------------- | ------------------------------------------- | --------- |
+| **type**    | button type     | `ButtonDropdownTypes`  | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
+| **main**    | the main action | `boolean`              | -                                           | `false`   |
+| **onClick** | event handler   | `MouseEventHandler`    | -                                           | -         |
+| ...         | native props    | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...`            | -         |
+
+<Attributes.Title>ButtonDropdownTypes</Attributes.Title>
+
+```ts
+type ButtonDropdownTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/en-us/components/card.mdx b/pages/en-us/components/card.mdx
index 7f412c8..464740a 100644
--- a/pages/en-us/components/card.mdx
+++ b/pages/en-us/components/card.mdx
@@ -35,8 +35,8 @@ A common container component.
   scope={{ Card }}
   code={`
 <Card shadow>
-  <h4>The Evil Rabbit</h4>
-  <p>shadow card.</p>
+  <h4>HTTP is extensible</h4>
+  <p>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.</p>
 </Card>
 `}
 />
diff --git a/pages/en-us/components/checkbox.mdx b/pages/en-us/components/checkbox.mdx
index c73b68e..ecaf506 100644
--- a/pages/en-us/components/checkbox.mdx
+++ b/pages/en-us/components/checkbox.mdx
@@ -84,30 +84,30 @@ Displays a boolean value.
 <Attributes edit="/pages/en-us/components/checkbox.mdx">
 <Attributes.Title>Checkbox.Props</Attributes.Title>
 
-| Attribute          | Description                                 | Type                                           | Accepted values               | Default   |
-| ------------------ | ------------------------------------------- | ---------------------------------------------- | ----------------------------- | --------- |
-| **checked**        | checked or not                              | `boolean`                                      | -                             | -         |
-| **initialChecked** | checked or not on initial                   | `boolean`                                      | -                             | `false`   |
-| **onChange**       | change event handler                        | `CheckboxEvent`                                | -                             | -         |
-| **value**          | unique identification value (only in group) | `string`                                       | -                             | -         |
-| **disabled**       | disable checkbox                            | `boolean`                                      | -                             | `false`   |
-| **type**           | current type                                | `NormalTypes`                                  | [CheckboxType](#checkboxtype) | `default` |
-| **ref**            | forwardRef                                  | <Code>Ref<HTMLInputElement &#124; null></Code> | -                             | -         |
-| ...                | native props                                | `LabelHTMLAttributes`                          | `'form', 'className', ...`    | -         |
+| Attribute          | Description                                 | Type                                           | Accepted values                 | Default   |
+| ------------------ | ------------------------------------------- | ---------------------------------------------- | ------------------------------- | --------- |
+| **checked**        | checked or not                              | `boolean`                                      | -                               | -         |
+| **initialChecked** | checked or not on initial                   | `boolean`                                      | -                               | `false`   |
+| **onChange**       | change event handler                        | `CheckboxEvent`                                | -                               | -         |
+| **value**          | unique identification value (only in group) | `string`                                       | -                               | -         |
+| **disabled**       | disable checkbox                            | `boolean`                                      | -                               | `false`   |
+| **type**           | current type                                | `CheckboxTypes`                                | [CheckboxTypes](#checkboxtypes) | `default` |
+| **ref**            | forwardRef                                  | <Code>Ref<HTMLInputElement &#124; null></Code> | -                               | -         |
+| ...                | native props                                | `LabelHTMLAttributes`                          | `'form' ...`                    | -         |
 
 <Attributes.Title>Checkbox.Group.Props</Attributes.Title>
 
-| Attribute    | Description            | Type                         | Accepted values          | Default |
-| ------------ | ---------------------- | ---------------------------- | ------------------------ | ------- |
-| **value**    | checked children       | `Array<string>`              | -                        | `[]`    |
-| **disabled** | disable checkbox group | `boolean`                    | -                        | `false` |
-| **onChange** | change event handler   | `(values: string[]) => void` | -                        | -       |
-| ...          | native props           | `HTMLAttributes`             | `'id', 'className', ...` | -       |
+| Attribute    | Description            | Type                         | Accepted values | Default |
+| ------------ | ---------------------- | ---------------------------- | --------------- | ------- |
+| **value**    | checked children       | `Array<string>`              | -               | `[]`    |
+| **disabled** | disable checkbox group | `boolean`                    | -               | `false` |
+| **onChange** | change event handler   | `(values: string[]) => void` | -               | -       |
+| ...          | native props           | `HTMLAttributes`             | `'id', ...`     | -       |
 
-<Attributes.Title>CheckboxType</Attributes.Title>
+<Attributes.Title>CheckboxTypes</Attributes.Title>
 
 ```ts
-type CheckboxType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type CheckboxTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 <Attributes.Title>CheckboxEvent</Attributes.Title>
diff --git a/pages/en-us/components/dot.mdx b/pages/en-us/components/dot.mdx
index 1783e38..5121e18 100644
--- a/pages/en-us/components/dot.mdx
+++ b/pages/en-us/components/dot.mdx
@@ -37,10 +37,16 @@ Display an indicator of standardization status.
 <Attributes edit="/pages/en-us/components/dot.mdx">
 <Attributes.Title>Dot.Props</Attributes.Title>
 
-| Attribute | Description  | Type             | Accepted values                                         | Default   |
-| --------- | ------------ | ---------------- | ------------------------------------------------------- | --------- |
-| **type**  | dot type     | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| ...       | native props | `HTMLAttributes` | -                                                       | -         |
+| Attribute | Description  | Type             | Accepted values       | Default   |
+| --------- | ------------ | ---------------- | --------------------- | --------- |
+| **type**  | dot type     | `DotTypes`       | [DotTypes](#dottypes) | `default` |
+| ...       | native props | `HTMLAttributes` | -                     | -         |
+
+<Attributes.Title>DotTypes</Attributes.Title>
+
+```ts
+type DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/en-us/components/fieldset.mdx b/pages/en-us/components/fieldset.mdx
index 4237761..3f8af8a 100644
--- a/pages/en-us/components/fieldset.mdx
+++ b/pages/en-us/components/fieldset.mdx
@@ -16,11 +16,11 @@ Display a collection of related information in a single unit.
   scope={{ Fieldset, Button }}
   code={`
 <Fieldset>
-  <Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
-  <Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
+  <Fieldset.Title>HTTP is simple</Fieldset.Title>
+  <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.</Fieldset.Subtitle>
   <Fieldset.Footer>
-      The Evil Rabbit Jumped over the Fence
-      <Button auto scale={1/3}>Actions</Button>
+      HTTP Knowledge Base
+      <Button auto scale={1/3}>OK</Button>
     </Fieldset.Footer>
   </Fieldset>
 `}
@@ -32,8 +32,8 @@ Display a collection of related information in a single unit.
   scope={{ Fieldset, Button, Text }}
   code={`
 <Fieldset>
-  <Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
-  <Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
+  <Fieldset.Title>HTTP is extensible</Fieldset.Title>
+  <Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. </Fieldset.Subtitle>
   <Fieldset.Footer>
       <Text type="error">An error has occurred.</Text>
       <Button auto scale={1/3} type="error">Revert</Button>
@@ -50,28 +50,28 @@ Display a collection of related information in a single unit.
 () => {
   const handler = v => console.log(v)
   return (
-    <Fieldset.Group value="two" onChange={handler}>
-    <Fieldset label="one">
-      <Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
-      <Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
+    <Fieldset.Group value="extensible" onChange={handler}>
+    <Fieldset label="simple">
+      <Fieldset.Title>HTTP is simple</Fieldset.Title>
+      <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames.</Fieldset.Subtitle>
       <Fieldset.Footer>
-        The Evil Rabbit Jumped over the Fence
+        HTTP Knowledge Base
         <Button auto scale={1/3}>Actions</Button>
       </Fieldset.Footer>
     </Fieldset>
-    <Fieldset label="two">
-      <Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
-      <Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
+    <Fieldset label="extensible">
+      <Fieldset.Title>HTTP is extensible</Fieldset.Title>
+      <Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Fieldset.Subtitle>
       <Fieldset.Footer>
-      The Fence Jumped over The Evil Rabbit
+      HTTP Knowledge Base
         <Button auto scale={1/3}>Actions</Button>
       </Fieldset.Footer>
     </Fieldset>
-    <Fieldset label="three">
-      <Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
-      <Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
+    <Fieldset label="stateless">
+      <Fieldset.Title>HTTP is stateless</Fieldset.Title>
+      <Fieldset.Subtitle>HTTP is stateless: there is no link between two requests being successively carried out on the same connection. </Fieldset.Subtitle>
       <Fieldset.Footer>
-        The Fence Jumped over The Evil Rabbit
+        HTTP Knowledge Base
         <Button auto scale={1/3}>Actions</Button>
       </Fieldset.Footer>
     </Fieldset>
diff --git a/pages/en-us/components/input.mdx b/pages/en-us/components/input.mdx
index 09706b2..65946ce 100644
--- a/pages/en-us/components/input.mdx
+++ b/pages/en-us/components/input.mdx
@@ -16,7 +16,7 @@ Retrieve text input from a user.
   desc="Basic input field."
   scope={{ Input }}
   code={`
-<Input placeholder="The Evil Rabbit" />
+<Input placeholder="Geist UI" />
 `}
 />
 
@@ -39,7 +39,7 @@ Retrieve text input from a user.
   desc="Specify width or other styles."
   scope={{ Input }}
   code={`
-<Input placeholder="The Evil Rabbit" width="100%" />
+<Input placeholder="Geist UI" width="100%" />
 `}
 />
 
@@ -62,7 +62,7 @@ Retrieve text input from a user.
   scope={{ Input, Spacer }}
   code={`
 <>
-  <Input label="username" placeholder="The Evil Rabbit" />
+  <Input label="username" placeholder="Geist UI" />
   <Spacer h={.5} />
   <Input labelRight=".com" placeholder="https://github" />
 </>
@@ -75,7 +75,7 @@ Retrieve text input from a user.
   scope={{ Input, Spacer, Text, Code, Dot }}
   code={`
 <>
-  <Input placeholder="Evil Rabbit">
+  <Input placeholder="Geist UI">
     Username
   </Input>
   <Spacer />
@@ -98,13 +98,13 @@ Retrieve text input from a user.
   scope={{ Input, Spacer }}
   code={`
 <>
-  <Input type="secondary" initialValue="The Evil Rabbit" />
+  <Input type="secondary" initialValue="Geist UI" />
   <Spacer h={.5} />
-  <Input type="success" initialValue="The Evil Rabbit" />
+  <Input type="success" initialValue="Geist UI" />
   <Spacer h={.5} />
-  <Input type="warning" initialValue="The Evil Rabbit" />
+  <Input type="warning" initialValue="Geist UI" />
   <Spacer h={.5} />
-  <Input type="error" initialValue="The Evil Rabbit" />
+  <Input type="error" initialValue="Geist UI" />
 </>
 `}
 />
@@ -128,7 +128,7 @@ Retrieve text input from a user.
   scope={{ Input }}
   code={`
 <>
-  <Input clearable initialValue="The Evil Rabbit" placeholder="The Evil Rabbit" />
+  <Input clearable initialValue="Geist UI" placeholder="Geist UI" />
 </>
 `}
 />
@@ -153,7 +153,7 @@ Retrieve text input from a user.
     console.log(e.target.value)
   }
   return (
-    <Input value={value} onChange={handler} placeholder="The Evil Rabbit" />
+    <Input value={value} onChange={handler} placeholder="Geist UI" />
   )
 }
 `}
@@ -169,7 +169,7 @@ Retrieve text input from a user.
   scope={{ Input, useInput, useEffect, Button, Spacer }}
   code={`
 () => {
-  const { state, setState, reset, bindings } = useInput('The Evil Rabbit')
+  const { state, setState, reset, bindings } = useInput('Geist UI')
   useEffect(() => console.log(state), [state])
   return (
     <>
@@ -212,7 +212,7 @@ Retrieve text input from a user.
 | **value**         | input value                   | `string`                                       | -                                 | -         |
 | **initialValue**  | initial value                 | `string`                                       | -                                 | -         |
 | **placeholder**   | placeholder                   | `string`                                       | -                                 | -         |
-| **type**          | current type                  | `NormalTypes`                                  | [InputType](#inputtype)           | `default` |
+| **type**          | current type                  | `InputTypes`                                   | [InputTypes](#inputtypes)         | `default` |
 | **htmlType**      | native type attr              | `string`                                       | -                                 | `text`    |
 | **readOnly**      | native attr                   | `boolean`                                      | -                                 | `false`   |
 | **disabled**      | disable input                 | `boolean`                                      | -                                 | `false`   |
@@ -235,18 +235,16 @@ Retrieve text input from a user.
 | **hideToggle** | hide toggle icon | `boolean`     | -                           | `false` |
 | ...            | input props      | `Input.Props` | [Input.Props](#input.props) | -       |
 
-<Attributes.Title>InputType</Attributes.Title>
+<Attributes.Title>InputTypes</Attributes.Title>
 
 ```ts
-type InputType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 <Attributes.Title>useInput</Attributes.Title>
 
 ```ts
-type useInput = (
-  initialValue: string,
-) => {
+type useInput = (initialValue: string) => {
   state: string
   setState: Dispatch<SetStateAction<string>>
   currentRef: MutableRefObject<string>
diff --git a/pages/en-us/components/link.mdx b/pages/en-us/components/link.mdx
index a5257e5..040bbe2 100644
--- a/pages/en-us/components/link.mdx
+++ b/pages/en-us/components/link.mdx
@@ -14,7 +14,7 @@ Hyperlinks between pages.
 <Playground
   scope={{ Link }}
   code={`
-<Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
+<Link href="#">HTTP is stateless, but not sessionless.</Link>
 `}
 />
 
@@ -23,7 +23,7 @@ Hyperlinks between pages.
   desc="Distinguish links with different colors."
   scope={{ Link }}
   code={`
-<Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
+<Link href="#" color>HTTP is stateless, but not sessionless.</Link>
 `}
 />
 
@@ -33,9 +33,9 @@ Hyperlinks between pages.
   scope={{ Link, Spacer }}
   code={`
 <>
-  <Link href="#" icon>The Evil Rabbit Jumped over the Fence.</Link>
+  <Link href="#" icon>HTTP is stateless, but not sessionless.</Link>
   <Spacer h={.5} />
-  <Link href="#" icon color>The Evil Rabbit Jumped over the Fence.</Link>
+  <Link href="#" icon color>HTTP is stateless, but not sessionless.</Link>
 </>
 `}
 />
@@ -46,10 +46,10 @@ Hyperlinks between pages.
   scope={{ Link, Text }}
   code={`
 <>
-  <Text><Link href="#">The Evil Rabbit Jumped over the Fence.</Link></Text>
-  <Text><Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link></Text>
-  <Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
-  <Text><Link href="#" color underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#">HTTP is stateless, but not sessionless.</Link></Text>
+  <Text><Link href="#" color>HTTP is stateless, but not sessionless.</Link></Text>
+  <Text><Link href="#" underline>HTTP is stateless, but not sessionless.</Link></Text>
+  <Text><Link href="#" color underline>HTTP is stateless, but not sessionless.</Link></Text>
 </>
 `}
 />
@@ -59,7 +59,7 @@ Hyperlinks between pages.
   desc="Display as a separate block."
   scope={{ Link }}
   code={`
-<Link href="#" block>The Evil Rabbit Jumped over the Fence.</Link>
+<Link href="#" block>HTTP is stateless, but not sessionless.</Link>
 `}
 />
 
diff --git a/pages/en-us/components/loading.mdx b/pages/en-us/components/loading.mdx
index 6d5f6eb..bae6f26 100644
--- a/pages/en-us/components/loading.mdx
+++ b/pages/en-us/components/loading.mdx
@@ -69,15 +69,15 @@ Indicate an action running in the background.
 
 | Attribute      | Description                        | Type             | Accepted values                   | Default   |
 | -------------- | ---------------------------------- | ---------------- | --------------------------------- | --------- |
-| **type**       | bg-color type                      | `NormalTypes`    | [NormalTypes](#mormaltypes)       | `default` |
+| **type**       | bg-color type                      | `LoadingTypes`   | [LoadingTypes](#loadingtypes)     | `default` |
 | **color**      | custom bg color                    | `string`         | -                                 | -         |
 | **spaceRatio** | percentage of space between points | `number`         | -                                 | 1         |
 | ...            | native props                       | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>LoadingTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/note.mdx b/pages/en-us/components/note.mdx
index d9a7ebe..d4908f3 100644
--- a/pages/en-us/components/note.mdx
+++ b/pages/en-us/components/note.mdx
@@ -79,12 +79,18 @@ Display text that requires attention or provides additional information.
 <Attributes edit="/pages/en-us/components/note.mdx">
 <Attributes.Title>Note.Props</Attributes.Title>
 
-| Attribute  | Description               | Type                 | Accepted values                                         | Default   |
-| ---------- | ------------------------- | -------------------- | ------------------------------------------------------- | --------- |
-| **type**   | note type                 | `NormalTypes`        | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **label**  | show label or custom text | `boolean` / `string` | -                                                       | -         |
-| **filled** | fill color                | `boolean`            | -                                                       | `false`   |
-| ...        | native props              | `HTMLAttributes`     | `'id', 'className', ...`                                | -         |
+| Attribute  | Description               | Type                 | Accepted values          | Default   |
+| ---------- | ------------------------- | -------------------- | ------------------------ | --------- |
+| **type**   | note type                 | `NoteTypes`          | [NoteTypes](#nodetypes)  | `default` |
+| **label**  | show label or custom text | `boolean` / `string` | -                        | -         |
+| **filled** | fill color                | `boolean`            | -                        | `false`   |
+| ...        | native props              | `HTMLAttributes`     | `'id', 'className', ...` | -         |
+
+<Attributes.Title>NoteTypes</Attributes.Title>
+
+```ts
+type NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/en-us/components/progress.mdx b/pages/en-us/components/progress.mdx
index da05390..263b621 100644
--- a/pages/en-us/components/progress.mdx
+++ b/pages/en-us/components/progress.mdx
@@ -74,15 +74,21 @@ Display progress relative to a limit or related to a task.
 <Attributes edit="/pages/en-us/components/progress.mdx">
 <Attributes.Title>Progress.Props</Attributes.Title>
 
-| Attribute       | Description            | Type                        | Accepted values                                         | Default   |
-| --------------- | ---------------------- | --------------------------- | ------------------------------------------------------- | --------- |
-| **value**       | current value          | `number`                    | -                                                       | 0         |
-| **max**         | max value              | `number`                    | -                                                       | 100       |
-| **fixedTop**    | fix progress to top    | `boolean`                   | -                                                       | `false`   |
-| **fixedBottom** | fix progress to bottom | `boolean`                   | -                                                       | `false`   |
-| **colors**      | custom colors          | `{ [key: number]: string }` | -                                                       | -         |
-| **type**        | predefined state types | `NormalTypes`               | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| ...             | native props           | `ProgressHTMLAttributes`    | `'aria-busy', 'className', ...`                         | -         |
+| Attribute       | Description            | Type                        | Accepted values                 | Default   |
+| --------------- | ---------------------- | --------------------------- | ------------------------------- | --------- |
+| **value**       | current value          | `number`                    | -                               | 0         |
+| **max**         | max value              | `number`                    | -                               | 100       |
+| **fixedTop**    | fix progress to top    | `boolean`                   | -                               | `false`   |
+| **fixedBottom** | fix progress to bottom | `boolean`                   | -                               | `false`   |
+| **colors**      | custom colors          | `{ [key: number]: string }` | -                               | -         |
+| **type**        | predefined state types | `ProgressTypes`             | [ProgressTypes](#progresstypes) | `default` |
+| ...             | native props           | `ProgressHTMLAttributes`    | `'aria-busy', ...`              | -         |
+
+<Attributes.Title>ProgressTypes</Attributes.Title>
+
+```ts
+type ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/en-us/components/radio.mdx b/pages/en-us/components/radio.mdx
index 0e7c3de..a239433 100644
--- a/pages/en-us/components/radio.mdx
+++ b/pages/en-us/components/radio.mdx
@@ -109,16 +109,16 @@ Provides single user input from a selection of options.
 <Attributes edit="/pages/en-us/components/radio.mdx">
 <Attributes.Title>Radio.Props</Attributes.Title>
 
-| Attribute    | Description                   | Type                                           | Accepted values          | Default   |
-| ------------ | ----------------------------- | ---------------------------------------------- | ------------------------ | --------- |
-| **checked**  | selected or not (in single)   | `boolean`                                      | -                        | `false`   |
-| **value**    | unique ident value (in group) | `string`                                       | -                        | -         |
-| **id**       | native attr                   | `string`                                       | -                        | -         |
-| **disabled** | disable current radio         | `boolean`                                      | -                        | `false`   |
-| **type**     | current type                  | `NormalTypes`                                  | [RadioType](#radiotype)  | `default` |
-| **onChange** | change event                  | `(e: RadioEvent) => void`                      | -                        | -         |
-| **ref**      | forwardRef                    | <Code>Ref<HTMLInputElement &#124; null></Code> | -                        | -         |
-| ...          | native props                  | `InputHTMLAttributes`                          | `'id', 'className', ...` | -         |
+| Attribute    | Description                   | Type                                           | Accepted values           | Default   |
+| ------------ | ----------------------------- | ---------------------------------------------- | ------------------------- | --------- |
+| **checked**  | selected or not (in single)   | `boolean`                                      | -                         | `false`   |
+| **value**    | unique ident value (in group) | `string`                                       | -                         | -         |
+| **id**       | native attr                   | `string`                                       | -                         | -         |
+| **disabled** | disable current radio         | `boolean`                                      | -                         | `false`   |
+| **type**     | current type                  | `RadioTypes`                                   | [RadioTypes](#radiotypes) | `default` |
+| **onChange** | change event                  | `(e: RadioEvent) => void`                      | -                         | -         |
+| **ref**      | forwardRef                    | <Code>Ref<HTMLInputElement &#124; null></Code> | -                         | -         |
+| ...          | native props                  | `InputHTMLAttributes`                          | `'id', 'className', ...`  | -         |
 
 <Attributes.Title>Radio.Group.Props</Attributes.Title>
 
@@ -137,10 +137,10 @@ Provides single user input from a selection of options.
 | --------- | ------------ | ---------------- | ------------------------ | ------- |
 | ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |
 
-<Attributes.Title>RadioType</Attributes.Title>
+<Attributes.Title>RadioTypes</Attributes.Title>
 
 ```ts
-type RadioType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type RadioTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/select.mdx b/pages/en-us/components/select.mdx
index a6bc198..6f4261e 100644
--- a/pages/en-us/components/select.mdx
+++ b/pages/en-us/components/select.mdx
@@ -231,7 +231,7 @@ Display a dropdown list of items.
 | **initialValue**      | initial value                                            | `string`, `string[]`                                | -                                 | -               |
 | **placeholder**       | placeholder string                                       | `string`                                            | -                                 | -               |
 | **width**             | css width value of select                                | `string`                                            | -                                 | `initial`       |
-| **type**              | current type                                             | `NormalTypes`                                       | [SelectType](#selecttype)         | `default`       |
+| **type**              | current type                                             | `SelectTypes`                                       | [SelectTypes](#selecttypes)       | `default`       |
 | **icon**              | icon component                                           | `ComponentType`                                     | -                                 | `SVG Component` |
 | **pure**              | remove icon component                                    | `boolean`                                           | -                                 | `false`         |
 | **multiple**          | support multiple selection                               | `boolean`                                           | -                                 | `false`         |
@@ -252,10 +252,10 @@ Display a dropdown list of items.
 | **disabled**        | disable current option | `boolean`        | -                                | `false` |
 | ...                 | native props           | `HTMLAttributes` | `'name', 'id', 'className', ...` | -       |
 
-<Attributes.Title>SelectType</Attributes.Title>
+<Attributes.Title>SelectTypes</Attributes.Title>
 
 ```ts
-type SelectType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type SelectTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/slider.mdx b/pages/en-us/components/slider.mdx
index 55bd147..8742895 100644
--- a/pages/en-us/components/slider.mdx
+++ b/pages/en-us/components/slider.mdx
@@ -90,7 +90,7 @@ Display the current value and an inputable range.
 | ---------------- | -------------------------------------------------- | ----------------------- | -------------------------------- | --------- |
 | **initialValue** | initial value                                      | `number`                | -                                | 0         |
 | **value**        | slider value                                       | `number`                | -                                | 0         |
-| **type**         | current type                                       | `NormalTypes`           | [SliderType](#slidertype)        | `default` |
+| **type**         | current type                                       | `SliderTypes`           | [SliderTypes](#slidertypes)      | `default` |
 | **step**         | the granularity the slider can step through values | `number`                | -                                | 1         |
 | **max**          | the maximum value of slider                        | `number`                | -                                | 100       |
 | **min**          | the minimum value of slider                        | `number`                | -                                | 0         |
@@ -100,10 +100,10 @@ Display the current value and an inputable range.
 | **onChange**     | called when the value of silder changes            | `(val: number) => void` | -                                | -         |
 | ...              | native props                                       | `HTMLAttributes`        | `'id', 'name', 'className', ...` | -         |
 
-<Attributes.Title>SliderType</Attributes.Title>
+<Attributes.Title>SliderTypes</Attributes.Title>
 
 ```ts
-type SliderType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type SliderTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/snippet.mdx b/pages/en-us/components/snippet.mdx
index 85eebf9..d13bcb0 100644
--- a/pages/en-us/components/snippet.mdx
+++ b/pages/en-us/components/snippet.mdx
@@ -100,17 +100,17 @@ Display a snippet of copyable code for the command line.
 <Attributes edit="/pages/en-us/components/snippet.mdx">
 <Attributes.Title>Snippet.Props</Attributes.Title>
 
-| Attribute     | Description             | Type                          | Accepted values                  | Default                |
-| ------------- | ----------------------- | ----------------------------- | -------------------------------- | ---------------------- |
-| **text**      | code snippet            | `string` `Array<string>`      | -                                | -                      |
-| **type**      | snippet types           | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes)    | `default`              |
-| **filled**    | filled style            | `boolean`                     | -                                | `false`                |
-| **width**     | set CSS string          | `string`                      | -                                | `initial`              |
-| **copy**      | function of copy button | `CopyTypes`                   | `'default', 'silent', 'prevent'` | `default`              |
-| **symbol**    | symbol snippet          | `string`                      | -                                | `$`                    |
-| **toastText** | toast text              | `string`                      | -                                | `Copied to clipboard!` |
-| **toastType** | toast type              | `NormalTypes`                 | [NormalTypes](#normaltypes)      | `success`              |
-| ...           | native props            | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -                      |
+| Attribute     | Description             | Type                | Accepted values                  | Default                |
+| ------------- | ----------------------- | ------------------- | -------------------------------- | ---------------------- |
+| **text**      | code snippet            | `string` `string[]` | -                                | -                      |
+| **type**      | snippet types           | `SnippetTypes`      | [SnippetTypes](#snippettypes)    | `default`              |
+| **filled**    | filled style            | `boolean`           | -                                | `false`                |
+| **width**     | set CSS string          | `string`            | -                                | `initial`              |
+| **copy**      | function of copy button | `CopyTypes`         | [CopyTypes](#copytypes)          | `default`              |
+| **symbol**    | symbol snippet          | `string`            | -                                | `$`                    |
+| **toastText** | toast text              | `string`            | -                                | `Copied to clipboard!` |
+| **toastType** | toast type              | `ToastTypes`        | [ToastTypes](#toasttypes)        | `success`              |
+| ...           | native props            | `HTMLAttributes`    | `'id', 'name', 'className', ...` | -                      |
 
 <Attributes.Title>SnippetTypes</Attributes.Title>
 
@@ -125,10 +125,22 @@ type SnippetTypes =
   | 'lite'
 ```
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>CopyTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type CopyTypes = 'default' | 'silent' | 'prevent'
+```
+
+<Attributes.Title>SnippetTypes</Attributes.Title>
+
+```ts
+type SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>ToastTypes</Attributes.Title>
+
+```ts
+type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/tabs.mdx b/pages/en-us/components/tabs.mdx
index 0e49ba8..947cdee 100644
--- a/pages/en-us/components/tabs.mdx
+++ b/pages/en-us/components/tabs.mdx
@@ -18,8 +18,8 @@ Display tab content.
   desc="Toggle display of different templates."
   code={`
 <Tabs initialValue="1">
-  <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
-  <Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
+  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
+  <Tabs.Item label="proxies" value="2">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item>
 </Tabs>
 `}
 />
@@ -29,7 +29,7 @@ Display tab content.
   scope={{ Tabs }}
   code={`
 <Tabs initialValue="1">
-  <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
+  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
   <Tabs.Item label="jumped" value="2" disabled />
 </Tabs>
 `}
@@ -122,8 +122,8 @@ Display tab content.
       <Button scale={1/3} onClick={switchHandler}><Text>Select  <Code>Jumped</Code></Text></Button>
       <Spacer h={.5} />
       <Tabs value={value} onChange={changeHandler}>
-        <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
-        <Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
+        <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
+        <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
       </Tabs>
     </>
   )
@@ -149,8 +149,8 @@ Display tab content.
       </Button>
       <Spacer h={.5} />
       <Tabs {...bindings}>
-        <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
-        <Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
+        <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
+        <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
       </Tabs>
     </>
   )
@@ -180,9 +180,7 @@ Display tab content.
 <Attributes.Title>useTabs</Attributes.Title>
 
 ```ts
-type useTabs = (
-  initialValue: string,
-) => {
+type useTabs = (initialValue: string) => {
   state: string
   setState: Dispatch<SetStateAction<string>>
   currentRef: MutableRefObject<string>
diff --git a/pages/en-us/components/text.mdx b/pages/en-us/components/text.mdx
index 3a08836..bcba15d 100644
--- a/pages/en-us/components/text.mdx
+++ b/pages/en-us/components/text.mdx
@@ -132,7 +132,7 @@ Display text using well-defined typographic styles.
 | **em**         | component name | `boolean`        | -                        | `false`   |
 | **b**          | component name | `boolean`        | -                        | `false`   |
 | **blockquote** | component name | `boolean`        | -                        | `false`   |
-| **type**       | text type      | `NormalTypes`    | [TextTypes](#texttypes)  | `default` |
+| **type**       | text type      | `TextTypes`      | [TextTypes](#texttypes)  | `default` |
 | ...            | native props   | `HTMLAttributes` | `'id', 'className', ...` | -         |
 
 <Attributes.Title>TextTypes</Attributes.Title>
diff --git a/pages/en-us/components/textarea.mdx b/pages/en-us/components/textarea.mdx
index a4453cd..1d966a4 100644
--- a/pages/en-us/components/textarea.mdx
+++ b/pages/en-us/components/textarea.mdx
@@ -114,24 +114,22 @@ Retrieve multi-line user input.
 <Attributes edit="/pages/en-us/components/textarea.mdx">
 <Attributes.Title alias="Input.Textarea">Textarea.Props</Attributes.Title>
 
-| Attribute        | Description    | Type                             | Accepted values                                                  | Default   |
-| ---------------- | -------------- | -------------------------------- | ---------------------------------------------------------------- | --------- |
-| **value**        | textarea value | `string`                         | -                                                                | -         |
-| **initialValue** | textarea value | `string`                         | -                                                                | -         |
-| **placeholder**  | placeholder    | `string`                         | -                                                                | -         |
-| **type**         | current type   | `NormalTypes`                    | [TextareaType](#textareatype)                                    | `default` |
-| **readOnly**     | native attr    | `boolean`                        | -                                                                | `false`   |
-| **disabled**     | disable input  | `boolean`                        | -                                                                | `false`   |
-| **onChange**     | change event   | `(e: React.ChangeEvent) => void` | -                                                                | -         |
-| **resize**       | CSS attribute  | `string`                         | `'none', 'both', 'horizontal', 'vertical', 'initial', 'inherit'` | `none`    |
-| ...              | native props   | `TextareaHTMLAttributes`         | `'form', 'id', 'className', ...`                                 | -         |
+| Attribute        | Description    | Type                             | Accepted values                  | Default   |
+| ---------------- | -------------- | -------------------------------- | -------------------------------- | --------- |
+| **value**        | textarea value | `string`                         | -                                | -         |
+| **initialValue** | textarea value | `string`                         | -                                | -         |
+| **placeholder**  | placeholder    | `string`                         | -                                | -         |
+| **type**         | current type   | `TextareaTypes`                  | [TextareaTypes](#textareatypes)  | `default` |
+| **readOnly**     | native attr    | `boolean`                        | -                                | `false`   |
+| **disabled**     | disable input  | `boolean`                        | -                                | `false`   |
+| **onChange**     | change event   | `(e: React.ChangeEvent) => void` | -                                | -         |
+| **resize**       | CSS attribute  | `CSSResize`                      | [CSSResize](#cssresize)          | `none`    |
+| ...              | native props   | `TextareaHTMLAttributes`         | `'form', 'id', 'className', ...` | -         |
 
 <Attributes.Title>useInput</Attributes.Title>
 
 ```ts
-type useInput = (
-  initialValue: string,
-) => {
+type useInput = (initialValue: string) => {
   state: string
   setState: Dispatch<SetStateAction<string>>
   currentRef: MutableRefObject<string>
@@ -143,10 +141,16 @@ type useInput = (
 }
 ```
 
-<Attributes.Title>TextareaType</Attributes.Title>
+<Attributes.Title>TextareaTypes</Attributes.Title>
 
 ```ts
-type TextareaType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type TextareaTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>CSSResize</Attributes.Title>
+
+```ts
+type CSSResize = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/toast.mdx b/pages/en-us/components/toast.mdx
index 6ad2f35..00bc130 100644
--- a/pages/en-us/components/toast.mdx
+++ b/pages/en-us/components/toast.mdx
@@ -16,7 +16,7 @@ Display an important message globally.
   code={`
 () => {
   const [toasts, setToast] = useToasts()
-  const click = () => setToast({ text: 'The Evil Rabbit jumped over the fence.' })
+  const click = () => setToast({ text: 'HTTP is stateless, but not sessionless.' })
   return <Button onClick={click}>Show Toast</Button>
 }
 `}
@@ -29,7 +29,7 @@ Display an important message globally.
   code={`
 () => {
   const [toasts, setToast] = useToasts()
-  const click = () => setToast({ text: 'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence.' })
+  const click = () => setToast({ text: 'HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.' })
   return <Button onClick={click}>Show Toast</Button>
 }
 `}
@@ -47,7 +47,7 @@ Display an important message globally.
     handler: () => alert('alert from toast')
   }
   const click = () => setToast({
-    text: 'The Evil Rabbit jumped over the fence.',
+    text: 'HTTP is stateless, but not sessionless.',
     actions: [action],
   })
   return <Button onClick={click} type="secondary">Show Action</Button>
@@ -68,7 +68,7 @@ Display an important message globally.
     handler: (event, cancel) => cancel()
   }
   const click = () => setToast({
-    text: 'The Evil Rabbit jumped over the fence.',
+    text: 'HTTP is stateless, but not sessionless.',
     actions: [action],
   })
   return <Button onClick={click}>Show Toast</Button>
@@ -83,7 +83,7 @@ Display an important message globally.
 () => {
   const [, setToast] = useToasts()
   const click = type => setToast({
-    text: 'The Evil Rabbit jumped over the fence.',
+    text: 'HTTP is stateless, but not sessionless.',
     type,
   })
   return (
@@ -109,7 +109,7 @@ const [toasts: Array<Toast>, setToast: (toast: Toast) => void] = useToasts()
 ```ts
 interface Toast {
   text?: string
-  type?: NormalTypes
+  type?: ToastTypes
   delay?: number
   actions?: Array<ToastAction>
 }
@@ -125,10 +125,10 @@ interface ToastAction {
 }
 ```
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>ToastTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/toggle.mdx b/pages/en-us/components/toggle.mdx
index 857b9f2..2c451b4 100644
--- a/pages/en-us/components/toggle.mdx
+++ b/pages/en-us/components/toggle.mdx
@@ -73,7 +73,7 @@ Displays a boolean value.
 | **checked**        | checked or not            | `boolean`             | -                                  | -         |
 | **initialChecked** | checked or not on initial | `boolean`             | -                                  | `false`   |
 | **onChange**       | change event handler      | `ToggleEvent`         | -                                  | -         |
-| **type**           | current type              | `NormalTypes`         | [ToggleType](#toggletype)          | `default` |
+| **type**           | current type              | `ToggleTypes`         | [ToggleTypes](#toggletypes)        | `default` |
 | **disabled**       | disable toggle            | `boolean`             | -                                  | `false`   |
 | ...                | native props              | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | -         |
 
@@ -92,10 +92,10 @@ export interface ToggleEvent {
 }
 ```
 
-<Attributes.Title>ToggleType</Attributes.Title>
+<Attributes.Title>ToggleTypes</Attributes.Title>
 
 ```ts
-type ToggleType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type ToggleTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/en-us/components/tooltip.mdx b/pages/en-us/components/tooltip.mdx
index 5f7cfdd..16f38f2 100644
--- a/pages/en-us/components/tooltip.mdx
+++ b/pages/en-us/components/tooltip.mdx
@@ -119,7 +119,7 @@ Displays additional information on hover.
   scope={{ Tooltip, Spacer, Grid }}
   code={`
 () => {
-  const text = 'The Evil Rabbit Jumped over the Fence'
+  const text = 'HTTP is stateless, but not sessionless'
   return (
     <Grid.Container gap={1.5} justify="center" alignItems="center">
       <Grid xs={8} justify="flex-end">
diff --git a/pages/en-us/components/user.mdx b/pages/en-us/components/user.mdx
index 9076107..25ab5a5 100644
--- a/pages/en-us/components/user.mdx
+++ b/pages/en-us/components/user.mdx
@@ -14,7 +14,7 @@ Display user profile or social information.
   desc="Show username."
   scope={{ User, Spacer }}
   code={`
-<User src="/images/avatar.png" name="Evil Rabbit" />
+<User src="/images/avatar.png" name="Witt" />
 `}
 />
 
diff --git a/pages/zh-cn/components/auto-complete.mdx b/pages/zh-cn/components/auto-complete.mdx
index ee10898..009f1ef 100644
--- a/pages/zh-cn/components/auto-complete.mdx
+++ b/pages/zh-cn/components/auto-complete.mdx
@@ -244,25 +244,25 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/auto-complete.mdx">
 <Attributes.Title>AutoComplete.Props</Attributes.Title>
 
-| 属性                  | 描述                                                 | 类型                                             | 推荐值                                                  | 默认      |
-| --------------------- | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | --------- |
-| **options**           | 输入框的可选项                                       | [AutoCompleteOptions](#type-autocompleteoptions) | -                                                       | -         |
-| **status**            | 输入框类型                                           | `NormalTypes`                                    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **initialValue**      | 初始值                                               | `string`                                         | -                                                       | -         |
-| **value**             | 命令式的输入框的值                                   | `string`                                         | -                                                       | -         |
-| **width**             | 组件容器的宽度                                       | `string`                                         | -                                                       | -         |
-| **clearable**         | 是否显示清除按钮                                     | `boolean`                                        | -                                                       | `false`   |
-| **searching**         | 是否显示正在搜索中                                   | `boolean`                                        | -                                                       | `false`   |
-| **onChange**          | 输入框的值发生变化触发此事件                         | `(value: string) => void`                        | -                                                       | -         |
-| **onSearch**          | 搜索事件，当用户手动输入时触发                       | `(value: string) => void`                        | -                                                       | -         |
-| **onSelect**          | 当备选框被选中后触发的事件                           | `(value: string) => void`                        | -                                                       | -         |
-| **dropdownClassName** | 自定义下拉框的类名                                   | `string`                                         | -                                                       | -         |
-| **dropdownStyle**     | 自定义下拉框的样式                                   | `object`                                         | -                                                       | -         |
-| **disableMatchWidth** | 禁止 Option 跟随父元素的宽度                         | `boolean`                                        | -                                                       | `false`   |
-| **disableFreeSolo**   | 只允许通过 Select 事件更改值 (禁止 Input 输入随意值) | `boolean`                                        | -                                                       | `false`   |
-| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body`                    | `() => HTMLElement`                              | -                                                       | `body`    |
-| **ref**               | 转发的原生输入框 Ref                                 | <Code>Ref<HTMLInputElement &#124; null></Code>   | -                                                       | -         |
-| ...                   | 原生属性                                             | `InputHTMLAttributes`                            | `'id', 'className', ...`                                | -         |
+| 属性                  | 描述                                             | 类型                                             | 推荐值                                  | 默认      |
+| --------------------- | ------------------------------------------------ | ------------------------------------------------ | --------------------------------------- | --------- |
+| **options**           | 输入框的可选项                                   | [AutoCompleteOptions](#type-autocompleteoptions) | -                                       | -         |
+| **status**            | 输入框类型                                       | `AutoCompleteTypes`                              | [AutoCompleteTypes](#autocompletetypes) | `default` |
+| **initialValue**      | 初始值                                           | `string`                                         | -                                       | -         |
+| **value**             | 命令式的输入框的值                               | `string`                                         | -                                       | -         |
+| **width**             | 组件容器的宽度                                   | `string`                                         | -                                       | -         |
+| **clearable**         | 是否显示清除按钮                                 | `boolean`                                        | -                                       | `false`   |
+| **searching**         | 是否显示正在搜索中                               | `boolean`                                        | -                                       | `false`   |
+| **onChange**          | 输入框的值发生变化触发此事件                     | `(value: string) => void`                        | -                                       | -         |
+| **onSearch**          | 搜索事件，当用户手动输入时触发                   | `(value: string) => void`                        | -                                       | -         |
+| **onSelect**          | 当备选框被选中后触发的事件                       | `(value: string) => void`                        | -                                       | -         |
+| **dropdownClassName** | 自定义下拉框的类名                               | `string`                                         | -                                       | -         |
+| **dropdownStyle**     | 自定义下拉框的样式                               | `object`                                         | -                                       | -         |
+| **disableMatchWidth** | 禁止 Option 跟随父元素的宽度                     | `boolean`                                        | -                                       | `false`   |
+| **disableFreeSolo**   | 只允许 Select 事件更改值 (禁止 Input 输入随意值) | `boolean`                                        | -                                       | `false`   |
+| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body`                | `() => HTMLElement`                              | -                                       | `body`    |
+| **ref**               | 转发的原生输入框 Ref                             | <Code>Ref<HTMLInputElement &#124; null></Code>   | -                                       | -         |
+| ...                   | 原生属性                                         | `InputHTMLAttributes`                            | `'id', 'className', ...`                | -         |
 
 <Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>
 
@@ -293,6 +293,12 @@ Array<{
 } | AutoComplete.Item>
 ```
 
+<Attributes.Title>AutoCompleteTypes</Attributes.Title>
+
+```ts
+type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
 </Attributes>
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>
diff --git a/pages/zh-cn/components/badge.mdx b/pages/zh-cn/components/badge.mdx
index 07e1f03..2f6a754 100644
--- a/pages/zh-cn/components/badge.mdx
+++ b/pages/zh-cn/components/badge.mdx
@@ -106,7 +106,7 @@ export const meta = {
 
 | 属性     | 描述               | 类型             | 推荐值                          | 默认      |
 | -------- | ------------------ | ---------------- | ------------------------------- | --------- |
-| **type** | 徽章的类型         | `NormalTypes`    | [NormalTypes](#normaltypes)     | `default` |
+| **type** | 徽章的类型         | `BadgeTypes`     | [BadgeTypes](#badgetypes)       | `default` |
 | **dot**  | 忽略内容并显示圆点 | `boolean`        | -                               | `false`   |
 | ...      | 原生属性           | `HTMLAttributes` | `'alt', 'id', 'className', ...` | -         |
 
@@ -117,10 +117,10 @@ export const meta = {
 | **placement** | 固定徽章的位置 | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |
 | ...           | 原生属性       | `HTMLAttributes`  | `'alt', 'id', 'className', ...`     | -          |
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>BadgeTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type BadgeTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 <Attributes.Title>AnchorPlacement</Attributes.Title>
diff --git a/pages/zh-cn/components/button-dropdown.mdx b/pages/zh-cn/components/button-dropdown.mdx
index 659edf8..942b9b5 100644
--- a/pages/zh-cn/components/button-dropdown.mdx
+++ b/pages/zh-cn/components/button-dropdown.mdx
@@ -91,22 +91,28 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/button-dropdown.mdx">
 <Attributes.Title>ButtonDropdown.Props</Attributes.Title>
 
-| 属性         | 描述               | 类型             | 推荐值                                                  | 默认      |
-| ------------ | ------------------ | ---------------- | ------------------------------------------------------- | --------- |
-| **type**     | 按钮类型           | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **loading**  | 显示加载中的指示器 | `boolean`        | -                                                       | `false`   |
-| **auto**     | 自动缩放宽度       | `boolean`        | -                                                       | `false`   |
-| **disabled** | 禁用所有按钮       | `boolean`        | -                                                       | `false`   |
-| ...          | 原生属性           | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...`                 | -         |
+| 属性         | 描述               | 类型                  | 推荐值                                      | 默认      |
+| ------------ | ------------------ | --------------------- | ------------------------------------------- | --------- |
+| **type**     | 按钮类型           | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
+| **loading**  | 显示加载中的指示器 | `boolean`             | -                                           | `false`   |
+| **auto**     | 自动缩放宽度       | `boolean`             | -                                           | `false`   |
+| **disabled** | 禁用所有按钮       | `boolean`             | -                                           | `false`   |
+| ...          | 原生属性           | `HTMLAttributes`      | `'autoFocus', 'name', ...`                  | -         |
 
 <Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>
 
-| 属性        | 描述             | 类型                   | 推荐值                                                  | 默认      |
-| ----------- | ---------------- | ---------------------- | ------------------------------------------------------- | --------- |
-| **type**    | 当前单个按钮类型 | `NormalTypes`          | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **main**    | 是否为主要按钮   | `boolean`              | -                                                       | `false`   |
-| **onClick** | 按钮的点击事件   | `MouseEventHandler`    | -                                                       | -         |
-| ...         | 原生属性         | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...`                        | -         |
+| 属性        | 描述             | 类型                   | 推荐值                                      | 默认      |
+| ----------- | ---------------- | ---------------------- | ------------------------------------------- | --------- |
+| **type**    | 当前单个按钮类型 | `ButtonDropdownTypes`  | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
+| **main**    | 是否为主要按钮   | `boolean`              | -                                           | `false`   |
+| **onClick** | 按钮的点击事件   | `MouseEventHandler`    | -                                           | -         |
+| ...         | 原生属性         | `ButtonHTMLAttributes` | `'id', 'name', ...`                         | -         |
+
+<Attributes.Title>ButtonDropdownTypes</Attributes.Title>
+
+```ts
+type ButtonDropdownTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/zh-cn/components/dot.mdx b/pages/zh-cn/components/dot.mdx
index 8cf21ec..d84b764 100644
--- a/pages/zh-cn/components/dot.mdx
+++ b/pages/zh-cn/components/dot.mdx
@@ -37,10 +37,16 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/dot.mdx">
 <Attributes.Title>Dot.Props</Attributes.Title>
 
-| 属性     | 描述     | 类型             | 推荐值                                                  | 默认      |
-| -------- | -------- | ---------------- | ------------------------------------------------------- | --------- |
-| **type** | 点的类型 | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| ...      | 原生属性 | `HTMLAttributes` | -                                                       | -         |
+| 属性     | 描述     | 类型             | 推荐值                | 默认      |
+| -------- | -------- | ---------------- | --------------------- | --------- |
+| **type** | 点的类型 | `DotTypes`       | [DotTypes](#dottypes) | `default` |
+| ...      | 原生属性 | `HTMLAttributes` | -                     | -         |
+
+<Attributes.Title>DotTypes</Attributes.Title>
+
+```ts
+type DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/zh-cn/components/input.mdx b/pages/zh-cn/components/input.mdx
index 7dfcff4..bfa5084 100644
--- a/pages/zh-cn/components/input.mdx
+++ b/pages/zh-cn/components/input.mdx
@@ -170,7 +170,7 @@ export const meta = {
   scope={{ Input, useInput, useEffect, Button, Spacer }}
   code={`
 () => {
-  const { state, setState, reset, bindings } = useInput('The Evil Rabbit')
+  const { state, setState, reset, bindings } = useInput('Geist UI')
   useEffect(() => console.log(state), [state])
   return (
     <>
@@ -208,25 +208,26 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/input.mdx">
 <Attributes.Title>Input.Props</Attributes.Title>
 
-| 属性              | 描述                 | 类型                                           | 推荐值                      | 默认      |
-| ----------------- | -------------------- | ---------------------------------------------- | --------------------------- | --------- |
-| **value**         | 命令式设定输入框的值 | `string`                                       | -                           | -         |
-| **initialValue**  | 初始值               | `string`                                       | -                           | -         |
-| **placeholder**   | 占位文本             | `string`                                       | -                           | -         |
-| **status**        | 输入框状态           | `NormalTypes`                                  | [InputStatus](#inputstatus) | `default` |
-| **readOnly**      | 是否设置输入框为只读 | `boolean`                                      | -                           | `false`   |
-| **disabled**      | 是否禁用输入框       | `boolean`                                      | -                           | `false`   |
-| **clearable**     | 是否展示清除按钮     | `boolean`                                      | -                           | `false`   |
-| **label**         | 文本标签             | `string`                                       | -                           | -         |
-| **icon**          | 输入框图标           | `React.ReactNode`                              | -                           | -         |
-| **labelRight**    | 居于右侧的文本标签   | `string`                                       | -                           | -         |
-| **iconRight**     | 居于右侧的图标       | `React.ReactNode`                              | -                           | -         |
-| **iconClickable** | 图标是否可点击       | `boolean`                                      | -                           | `false`   |
-| **onIconClick**   | 图标点击事件         | `(e: React.ChangeEvent) => void`               | -                           | -         |
-| **onChange**      | 输入框变化事件       | `(e: React.ChangeEvent) => void`               | -                           | -         |
-| **onClearClick**  | 清除按钮的点击事件   | `(e: React.MouseEvent) => void`                | -                           | -         |
-| **ref**           | 转发的原生输入框 Ref | <Code>Ref<HTMLInputElement &#124; null></Code> | -                           | -         |
-| ...               | 原生属性             | `InputHTMLAttributes`                          | `'id', 'className', ...`    | -         |
+| 属性              | 描述                  | 类型                                           | 推荐值                    | 默认      |
+| ----------------- | --------------------- | ---------------------------------------------- | ------------------------- | --------- |
+| **value**         | 命令式设定输入框的值  | `string`                                       | -                         | -         |
+| **initialValue**  | 初始值                | `string`                                       | -                         | -         |
+| **placeholder**   | 占位文本              | `string`                                       | -                         | -         |
+| **type**          | 输入框状态            | `InputTypes`                                   | [InputTypes](#inputtypes) | `default` |
+| **htmlType**      | 原生 HTML `type` 属性 | `string`                                       | -                         | `text`    |
+| **readOnly**      | 是否设置输入框为只读  | `boolean`                                      | -                         | `false`   |
+| **disabled**      | 是否禁用输入框        | `boolean`                                      | -                         | `false`   |
+| **clearable**     | 是否展示清除按钮      | `boolean`                                      | -                         | `false`   |
+| **label**         | 文本标签              | `string`                                       | -                         | -         |
+| **icon**          | 输入框图标            | `React.ReactNode`                              | -                         | -         |
+| **labelRight**    | 居于右侧的文本标签    | `string`                                       | -                         | -         |
+| **iconRight**     | 居于右侧的图标        | `React.ReactNode`                              | -                         | -         |
+| **iconClickable** | 图标是否可点击        | `boolean`                                      | -                         | `false`   |
+| **onIconClick**   | 图标点击事件          | `(e: React.ChangeEvent) => void`               | -                         | -         |
+| **onChange**      | 输入框变化事件        | `(e: React.ChangeEvent) => void`               | -                         | -         |
+| **onClearClick**  | 清除按钮的点击事件    | `(e: React.MouseEvent) => void`                | -                         | -         |
+| **ref**           | 转发的原生输入框 Ref  | <Code>Ref<HTMLInputElement &#124; null></Code> | -                         | -         |
+| ...               | 原生属性              | `InputHTMLAttributes`                          | `'id', 'className', ...`  | -         |
 
 <Attributes.Title>Input.Password.Props</Attributes.Title>
 
@@ -235,18 +236,16 @@ export const meta = {
 | **hideToggle** | 隐藏切换密码的按钮 | `boolean`     | -                           | `false` |
 | ...            | 输入框组件属性     | `Input.Props` | [Input.Props](#input.props) | -       |
 
-<Attributes.Title>InputStatus</Attributes.Title>
+<Attributes.Title>InputTypes</Attributes.Title>
 
 ```ts
-type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 <Attributes.Title>useInput</Attributes.Title>
 
 ```ts
-type useInput = (
-  initialValue: string,
-) => {
+type useInput = (initialValue: string) => {
   state: string
   setState: Dispatch<SetStateAction<string>>
   currentRef: MutableRefObject<string>
diff --git a/pages/zh-cn/components/loading.mdx b/pages/zh-cn/components/loading.mdx
index a22b517..f9cb2b7 100644
--- a/pages/zh-cn/components/loading.mdx
+++ b/pages/zh-cn/components/loading.mdx
@@ -69,15 +69,15 @@ export const meta = {
 
 | 属性           | 描述               | 类型             | 推荐值                            | 默认      |
 | -------------- | ------------------ | ---------------- | --------------------------------- | --------- |
-| **type**       | 指示器的类型       | `NormalTypes`    | [NormalTypes](#mormaltypes)       | `default` |
+| **type**       | 指示器的类型       | `LoadingTypes`   | [LoadingTypes](#loadingtypes)     | `default` |
 | **color**      | 自定义指示器的色彩 | `string`         | -                                 | -         |
 | **spaceRatio** | 点之间的空间比例   | `number`         | -                                 | 1         |
 | ...            | 原生属性           | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>LoadingTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/zh-cn/components/note.mdx b/pages/zh-cn/components/note.mdx
index adef9a8..c1c63e3 100644
--- a/pages/zh-cn/components/note.mdx
+++ b/pages/zh-cn/components/note.mdx
@@ -79,12 +79,18 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/note.mdx">
 <Attributes.Title>Note.Props</Attributes.Title>
 
-| 属性       | 描述                         | 类型                 | 推荐值                                                  | 默认      |
-| ---------- | ---------------------------- | -------------------- | ------------------------------------------------------- | --------- |
-| **type**   | 提示类型                     | `NormalTypes`        | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **label**  | 是否显示标签，或是自定义标签 | `boolean` / `string` | -                                                       | -         |
-| **filled** | 填充色彩的变体提示框         | `boolean`            | -                                                       | `false`   |
-| ...        | 原生属性                     | `HTMLAttributes`     | `'id', 'className', ...`                                | -         |
+| 属性       | 描述                         | 类型               | 推荐值                   | 默认      |
+| ---------- | ---------------------------- | ------------------ | ------------------------ | --------- |
+| **type**   | 提示类型                     | `NoteTypes`        | [NoteTypes](#nodetypes)  | `default` |
+| **label**  | 是否显示标签，或是自定义标签 | `boolean / string` | -                        | -         |
+| **filled** | 填充色彩的变体提示框         | `boolean`          | -                        | `false`   |
+| ...        | 原生属性                     | `HTMLAttributes`   | `'id', 'className', ...` | -         |
+
+<Attributes.Title>NoteTypes</Attributes.Title>
+
+```ts
+type NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/zh-cn/components/progress.mdx b/pages/zh-cn/components/progress.mdx
index e93b26c..5ef9983 100644
--- a/pages/zh-cn/components/progress.mdx
+++ b/pages/zh-cn/components/progress.mdx
@@ -74,15 +74,21 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/progress.mdx">
 <Attributes.Title>Progress.Props</Attributes.Title>
 
-| 属性            | 描述               | 类型                        | 推荐值                                                  | 默认      |
-| --------------- | ------------------ | --------------------------- | ------------------------------------------------------- | --------- |
-| **value**       | 进度条当前数值     | `number`                    | -                                                       | 0         |
-| **max**         | 最大值             | `number`                    | -                                                       | 100       |
-| **fixedTop**    | 固定进度条在顶部   | `boolean`                   | -                                                       | `false`   |
-| **fixedBottom** | 固定进度条在底部   | `boolean`                   | -                                                       | `false`   |
-| **colors**      | 在范围内自定义颜色 | `{ [key: number]: string }` | -                                                       | -         |
-| **type**        | 预定义的状体类型   | `NormalTypes`               | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| ...             | 原生属性           | `ProgressHTMLAttributes`    | `'aria-busy', 'className', ...`                         | -         |
+| 属性            | 描述               | 类型                        | 推荐值                          | 默认      |
+| --------------- | ------------------ | --------------------------- | ------------------------------- | --------- |
+| **value**       | 进度条当前数值     | `number`                    | -                               | 0         |
+| **max**         | 最大值             | `number`                    | -                               | 100       |
+| **fixedTop**    | 固定进度条在顶部   | `boolean`                   | -                               | `false`   |
+| **fixedBottom** | 固定进度条在底部   | `boolean`                   | -                               | `false`   |
+| **colors**      | 在范围内自定义颜色 | `{ [key: number]: string }` | -                               | -         |
+| **type**        | 预定义的状体类型   | `ProgressTypes`             | [ProgressTypes](#progresstypes) | `default` |
+| ...             | 原生属性           | `ProgressHTMLAttributes`    | `'aria-busy', 'className', ...` | -         |
+
+<Attributes.Title>ProgressTypes</Attributes.Title>
+
+```ts
+type ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
 
 </Attributes>
 
diff --git a/pages/zh-cn/components/snippet.mdx b/pages/zh-cn/components/snippet.mdx
index 1d37f07..b1987b6 100644
--- a/pages/zh-cn/components/snippet.mdx
+++ b/pages/zh-cn/components/snippet.mdx
@@ -84,17 +84,17 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/snippet.mdx">
 <Attributes.Title>Snippet.Props</Attributes.Title>
 
-| 属性          | 描述               | 类型                          | 推荐值                           | 默认                   |
-| ------------- | ------------------ | ----------------------------- | -------------------------------- | ---------------------- |
-| **text**      | 命令文本           | `string` `Array<string>`      | -                                | -                      |
-| **type**      | 组件类型           | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes)    | `default`              |
-| **filled**    | 填充风格的样式     | `boolean`                     | -                                | `false`                |
-| **width**     | 设置 CSS 宽度      | `string`                      | -                                | `initial`              |
-| **copy**      | 拷贝按钮的工作方式 | `CopyTypes`                   | `'default', 'silent', 'prevent'` | `default`              |
-| **symbol**    | 组件左侧显示的字符 | `string`                      | -                                | `$`                    |
-| **toastText** | 拷贝提示的字符     | `string`                      | -                                | `Copied to clipboard!` |
-| **toastType** | 拷贝提示的类型     | `NormalTypes`                 | [NormalTypes](#normaltypes)      | `success`              |
-| ...           | 原生属性           | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -                      |
+| 属性          | 描述               | 类型                     | 推荐值                        | 默认                   |
+| ------------- | ------------------ | ------------------------ | ----------------------------- | ---------------------- |
+| **text**      | 命令文本           | `string` `Array<string>` | -                             | -                      |
+| **type**      | 组件类型           | `SnippetTypes`           | [SnippetTypes](#snippettypes) | `default`              |
+| **filled**    | 填充风格的样式     | `boolean`                | -                             | `false`                |
+| **width**     | 设置 CSS 宽度      | `string`                 | -                             | `initial`              |
+| **copy**      | 拷贝按钮的工作方式 | `CopyTypes`              | [CopyTypes](#copytypes)       | `default`              |
+| **symbol**    | 组件左侧显示的字符 | `string`                 | -                             | `$`                    |
+| **toastText** | 拷贝提示的字符     | `string`                 | -                             | `Copied to clipboard!` |
+| **toastType** | 拷贝提示的类型     | `ToastTypes`             | [ToastTypes](#toasttypes)     | `success`              |
+| ...           | 原生属性           | `HTMLAttributes`         | `'id', 'name', ...`           | -                      |
 
 <Attributes.Title>SnippetTypes</Attributes.Title>
 
@@ -109,10 +109,22 @@ type SnippetTypes =
   | 'lite'
 ```
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>CopyTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type CopyTypes = 'default' | 'silent' | 'prevent'
+```
+
+<Attributes.Title>SnippetTypes</Attributes.Title>
+
+```ts
+type SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>ToastTypes</Attributes.Title>
+
+```ts
+type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/zh-cn/components/text.mdx b/pages/zh-cn/components/text.mdx
index e8c54df..19dcd20 100644
--- a/pages/zh-cn/components/text.mdx
+++ b/pages/zh-cn/components/text.mdx
@@ -132,7 +132,7 @@ export const meta = {
 | **em**         | 渲染元素类型 | `boolean`        | -                        | `false`   |
 | **b**          | 渲染元素类型 | `boolean`        | -                        | `false`   |
 | **blockquote** | 渲染元素类型 | `boolean`        | -                        | `false`   |
-| **type**       | 文字类型     | `NormalTypes`    | [TextTypes](#texttypes)  | `default` |
+| **type**       | 文字类型     | `TextTypes`      | [TextTypes](#texttypes)  | `default` |
 | ...            | 原生属性     | `HTMLAttributes` | `'id', 'className', ...` | -         |
 
 <Attributes.Title>TextTypes</Attributes.Title>
diff --git a/pages/zh-cn/components/textarea.mdx b/pages/zh-cn/components/textarea.mdx
index d6f96ab..3d9dde4 100644
--- a/pages/zh-cn/components/textarea.mdx
+++ b/pages/zh-cn/components/textarea.mdx
@@ -115,24 +115,22 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/textarea.mdx">
 <Attributes.Title alias="Input.Textarea">Textarea.Props</Attributes.Title>
 
-| 属性             | 描述               | 类型                             | 推荐值                                                           | 默认      |
-| ---------------- | ------------------ | -------------------------------- | ---------------------------------------------------------------- | --------- |
-| **value**        | 设置文本框的值     | `string`                         | -                                                                | -         |
-| **initialValue** | 文本框的初始值     | `string`                         | -                                                                | -         |
-| **placeholder**  | 占位文本           | `string`                         | -                                                                | -         |
-| **status**       | 文本框当前状态     | `NormalTypes`                    | `'default', 'secondary', 'success', 'warning', 'error'`          | `default` |
-| **readOnly**     | 是否以只读方式显示 | `boolean`                        | -                                                                | `false`   |
-| **disabled**     | 是否禁用文本框     | `boolean`                        | -                                                                | `false`   |
-| **onChange**     | 文本变化事件       | `(e: React.ChangeEvent) => void` | -                                                                | -         |
-| **resize**       | CSS 属性           | `string`                         | `'none', 'both', 'horizontal', 'vertical', 'initial', 'inherit'` | `none`    |
-| ...              | 原生属性           | `TextareaHTMLAttributes`         | `'form', 'id', 'className', ...`                                 | -         |
+| 属性             | 描述               | 类型                             | 推荐值                           | 默认      |
+| ---------------- | ------------------ | -------------------------------- | -------------------------------- | --------- |
+| **value**        | 设置文本框的值     | `string`                         | -                                | -         |
+| **initialValue** | 文本框的初始值     | `string`                         | -                                | -         |
+| **placeholder**  | 占位文本           | `string`                         | -                                | -         |
+| **status**       | 文本框当前状态     | `TextareaTypes`                  | [TextareaTypes](#textareatypes)  | `default` |
+| **readOnly**     | 是否以只读方式显示 | `boolean`                        | -                                | `false`   |
+| **disabled**     | 是否禁用文本框     | `boolean`                        | -                                | `false`   |
+| **onChange**     | 文本变化事件       | `(e: React.ChangeEvent) => void` | -                                | -         |
+| **resize**       | CSS 属性           | `CSSResize`                      | [CSSResize](#cssresize)          | `none`    |
+| ...              | 原生属性           | `TextareaHTMLAttributes`         | `'form', 'id', 'className', ...` | -         |
 
 <Attributes.Title>useInput</Attributes.Title>
 
 ```ts
-type useInput = (
-  initialValue: string,
-) => {
+type useInput = (initialValue: string) => {
   state: string
   setState: Dispatch<SetStateAction<string>>
   currentRef: MutableRefObject<string>
@@ -144,6 +142,18 @@ type useInput = (
 }
 ```
 
+<Attributes.Title>TextareaTypes</Attributes.Title>
+
+```ts
+type TextareaTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>CSSResize</Attributes.Title>
+
+```ts
+type CSSResize = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'
+```
+
 </Attributes>
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>
diff --git a/pages/zh-cn/components/toast.mdx b/pages/zh-cn/components/toast.mdx
index d98b50d..ddebbe7 100644
--- a/pages/zh-cn/components/toast.mdx
+++ b/pages/zh-cn/components/toast.mdx
@@ -109,7 +109,7 @@ const [toasts: Array<Toast>, setToast: (toast: Toast) => void] = useToasts()
 ```ts
 interface Toast {
   text?: string
-  type?: NormalTypes
+  type?: ToastTypes
   delay?: number
   actions?: Array<ToastAction>
 }
@@ -125,10 +125,10 @@ interface ToastAction {
 }
 ```
 
-<Attributes.Title>NormalTypes</Attributes.Title>
+<Attributes.Title>ToastTypes</Attributes.Title>
 
 ```ts
-type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
 ```
 
 </Attributes>
diff --git a/pages/zh-cn/components/tooltip.mdx b/pages/zh-cn/components/tooltip.mdx
index 3f3fee7..e7db4ed 100644
--- a/pages/zh-cn/components/tooltip.mdx
+++ b/pages/zh-cn/components/tooltip.mdx
@@ -119,7 +119,7 @@ export const meta = {
   scope={{ Tooltip, Spacer, Grid }}
   code={`
 () => {
-  const text = 'The Evil Rabbit Jumped over the Fence'
+  const text = 'HTTP is stateless, but not sessionless'
   return (
     <Grid.Container gap={1.5} justify="center" alignItems="center">
       <Grid xs={8} justify="flex-end">
diff --git a/pages/zh-cn/components/user.mdx b/pages/zh-cn/components/user.mdx
index d5010bb..1d47b94 100644
--- a/pages/zh-cn/components/user.mdx
+++ b/pages/zh-cn/components/user.mdx
@@ -14,7 +14,7 @@ export const meta = {
   desc="仅展示用户名。"
   scope={{ User, Spacer }}
   code={`
-<User src="/images/avatar.png" name="Evil Rabbit" />
+<User src="/images/avatar.png" name="Witt" />
 `}
 />