From 3ebb6404d0449aa29e8ba064739a4041ab3e4917 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Wed, 6 Jan 2021 14:09:41 +0800
Subject: [PATCH 01/24] chore: bump version

---
 .changeset/nervous-moles-hide.md      |  6 ------
 .changeset/pre.json                   | 11 -----------
 packages/chakra-ui-core/CHANGELOG.md  |  8 ++++++++
 packages/chakra-ui-core/package.json  |  2 +-
 packages/chakra-ui-nuxt/CHANGELOG.md  | 11 +++++++++++
 packages/chakra-ui-nuxt/package.json  |  4 ++--
 packages/chakra-ui-theme/CHANGELOG.md |  2 ++
 packages/chakra-ui-theme/package.json |  2 +-
 website/CHANGELOG.md                  |  8 ++++++++
 website/package.json                  |  6 +++---
 10 files changed, 36 insertions(+), 24 deletions(-)
 delete mode 100644 .changeset/nervous-moles-hide.md
 delete mode 100644 .changeset/pre.json

diff --git a/.changeset/nervous-moles-hide.md b/.changeset/nervous-moles-hide.md
deleted file mode 100644
index b52d4125..00000000
--- a/.changeset/nervous-moles-hide.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@chakra-ui/vue': patch
-'@chakra-ui/nuxt': patch
----
-
-Added support for Feather Icons to Nuxt.js
diff --git a/.changeset/pre.json b/.changeset/pre.json
deleted file mode 100644
index 167ad68c..00000000
--- a/.changeset/pre.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "mode": "exit",
-  "tag": "next",
-  "initialVersions": {
-    "@chakra-ui/vue": "0.7.3",
-    "@chakra-ui/nuxt": "0.2.3",
-    "@chakra-ui/theme-vue": "0.2.9",
-    "chakra-ui-docs": "0.5.4"
-  },
-  "changesets": []
-}
diff --git a/packages/chakra-ui-core/CHANGELOG.md b/packages/chakra-ui-core/CHANGELOG.md
index a4bf155b..dcc51076 100644
--- a/packages/chakra-ui-core/CHANGELOG.md
+++ b/packages/chakra-ui-core/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.7.4
+
+### Patch Changes
+
+- [`951906a`](https://github.com/chakra-ui/chakra-ui-vue/commit/951906a61deabdcf1d3f04b7f8f9fdeaad1f3841) [#375](https://github.com/chakra-ui/chakra-ui-vue/pull/375) Thanks [@codebender828](https://github.com/codebender828)! - Added support for Feather Icons to Nuxt.js
+
+* fix(nuxt): nuxt module icon parsing
+
 ## 0.7.3
 
 ## 0.7.2
diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json
index 24297de1..4ee578e0 100644
--- a/packages/chakra-ui-core/package.json
+++ b/packages/chakra-ui-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/chakra-ui-nuxt/CHANGELOG.md b/packages/chakra-ui-nuxt/CHANGELOG.md
index bf6eb778..cd89235b 100644
--- a/packages/chakra-ui-nuxt/CHANGELOG.md
+++ b/packages/chakra-ui-nuxt/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Change Log
 
+## 0.2.4
+
+### Patch Changes
+
+- [`951906a`](https://github.com/chakra-ui/chakra-ui-vue/commit/951906a61deabdcf1d3f04b7f8f9fdeaad1f3841) [#375](https://github.com/chakra-ui/chakra-ui-vue/pull/375) Thanks [@codebender828](https://github.com/codebender828)! - Added support for Feather Icons to Nuxt.js
+
+* fix(nuxt): nuxt module icon parsing
+
+* Updated dependencies [[`951906a`](https://github.com/chakra-ui/chakra-ui-vue/commit/951906a61deabdcf1d3f04b7f8f9fdeaad1f3841)]:
+  - @chakra-ui/vue@0.7.4
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/packages/chakra-ui-nuxt/package.json b/packages/chakra-ui-nuxt/package.json
index 6b15ae41..a1e4bc6d 100644
--- a/packages/chakra-ui-nuxt/package.json
+++ b/packages/chakra-ui-nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/nuxt",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Chakra UI Module for Nuxt.js",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/vue": "^0.7.3",
+    "@chakra-ui/vue": "^0.7.4",
     "chakra-loader": "latest",
     "@emotion/css": "^11.0.0"
   },
diff --git a/packages/chakra-ui-theme/CHANGELOG.md b/packages/chakra-ui-theme/CHANGELOG.md
index 8f0c1e3a..ed5cb6e0 100644
--- a/packages/chakra-ui-theme/CHANGELOG.md
+++ b/packages/chakra-ui-theme/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Change Log
 
+## 0.2.10
+
 ## 0.2.9
 
 ## 0.2.8
diff --git a/packages/chakra-ui-theme/package.json b/packages/chakra-ui-theme/package.json
index 6d6d9d6e..c3959ce9 100644
--- a/packages/chakra-ui-theme/package.json
+++ b/packages/chakra-ui-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/theme-vue",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Default theme for @chakra-ui/vue default theme object",
   "author": {
     "name": "Jonathan Bakebwa",
diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md
index dba8c82c..f3827946 100644
--- a/website/CHANGELOG.md
+++ b/website/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.5.5
+
+### Patch Changes
+
+- Updated dependencies [[`951906a`](https://github.com/chakra-ui/chakra-ui-vue/commit/951906a61deabdcf1d3f04b7f8f9fdeaad1f3841)]:
+  - @chakra-ui/vue@0.7.4
+  - @chakra-ui/theme-vue@0.2.10
+
 ## 0.5.4
 
 ### Patch Changes
diff --git a/website/package.json b/website/package.json
index a7b1714c..0e7aabf0 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chakra-ui-docs",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Chakra UI Vue documentation site",
   "private": true,
   "scripts": {
@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "@chakra-ui/theme-vue": "^0.2.9",
-    "@chakra-ui/vue": "^0.7.3",
+    "@chakra-ui/theme-vue": "^0.2.10",
+    "@chakra-ui/vue": "^0.7.4",
     "@emotion/css": "^11.0.0",
     "@mdx-js/vue-loader": "^1.6.1",
     "@nuxtjs/dotenv": "^1.4.0",

From e76b6572210848876821692ab7fe6c3fd8f2b8bd Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Wed, 6 Jan 2021 14:19:12 +0800
Subject: [PATCH 02/24] ci: update changesets/action PR title

---
 .github/workflows/release.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 576ad960..1c1f326a 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -51,6 +51,7 @@ jobs:
       uses: changesets/action@master
       with:
         publish: yarn release
+        title: "chore(release): version packages"
         commit: "chore(release): version packages"
       env:
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

From 2f190b38a976d87328e20026154c5bafe37e3ce6 Mon Sep 17 00:00:00 2001
From: odan <odan3240@gmail.com>
Date: Wed, 20 Jan 2021 07:53:25 +0900
Subject: [PATCH 03/24] feat: add types of component

---
 packages/chakra-ui-core/package.json         |   4 +-
 packages/chakra-ui-core/types/component.d.ts | 150 +++++++++++++++++++
 packages/chakra-ui-core/types/index.d.ts     |   1 +
 3 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 packages/chakra-ui-core/types/component.d.ts
 create mode 100644 packages/chakra-ui-core/types/index.d.ts

diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json
index 4ee578e0..d495bdb8 100644
--- a/packages/chakra-ui-core/package.json
+++ b/packages/chakra-ui-core/package.json
@@ -4,6 +4,7 @@
   "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "types": "types/index.d.ts",
   "sideEffects": false,
   "maintainers": [
     "Jonathan Bakebwa <jonas@akkadu-team.com>"
@@ -27,7 +28,8 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "types"
   ],
   "bundle-phobia": {
     "max-size": "85KB",
diff --git a/packages/chakra-ui-core/types/component.d.ts b/packages/chakra-ui-core/types/component.d.ts
new file mode 100644
index 00000000..4733ad98
--- /dev/null
+++ b/packages/chakra-ui-core/types/component.d.ts
@@ -0,0 +1,150 @@
+declare module '@chakra-ui/vue' {
+  import Vue from 'vue'
+
+  export class CAccordion extends Vue {}
+  export class CAccordionHeader extends Vue {}
+  export class CAccordionIcon extends Vue {}
+  export class CAccordionItem extends Vue {}
+  export class CAccordionPanel extends Vue {}
+  export class CAlert extends Vue {}
+  export class CAlertDescription extends Vue {}
+  export class CAlertDialog extends Vue {}
+  export class CAlertDialogBody extends Vue {}
+  export class CAlertDialogCloseButton extends Vue {}
+  export class CAlertDialogContent extends Vue {}
+  export class CAlertDialogFooter extends Vue {}
+  export class CAlertDialogHeader extends Vue {}
+  export class CAlertDialogOverlay extends Vue {}
+  export class CAlertIcon extends Vue {}
+  export class CAlertTitle extends Vue {}
+  export class CAnimateHeight extends Vue {}
+  export class CAspectRatioBox extends Vue {}
+  export class CAvatar extends Vue {}
+  export class CAvatarBadge extends Vue {}
+  export class CAvatarGroup extends Vue {}
+  export class CBadge extends Vue {}
+  export class CBox extends Vue {}
+  export class CBreadcrumb extends Vue {}
+  export class CBreadcrumbItem extends Vue {}
+  export class CBreadcrumbLink extends Vue {}
+  export class CBreadcrumbSeparator extends Vue {}
+  export class CButton extends Vue {}
+  export class CButtonGroup extends Vue {}
+  export class CCheckbox extends Vue {}
+  export class CCheckboxGroup extends Vue {}
+  export class CCircularProgress extends Vue {}
+  export class CCircularProgressLabel extends Vue {}
+  export class CCloseButton extends Vue {}
+  export class CCode extends Vue {}
+  export class CCollapse extends Vue {}
+  export class CColorModeProvider extends Vue {}
+  export class CControlBox extends Vue {}
+  export class CDarkMode extends Vue {}
+  export class CDivider extends Vue {}
+  export class CDrawer extends Vue {}
+  export class CDrawerBody extends Vue {}
+  export class CDrawerCloseButton extends Vue {}
+  export class CDrawerContent extends Vue {}
+  export class CDrawerFooter extends Vue {}
+  export class CDrawerHeader extends Vue {}
+  export class CDrawerOverlay extends Vue {}
+  export class CEditable extends Vue {}
+  export class CEditableInput extends Vue {}
+  export class CEditablePreview extends Vue {}
+  export class CFade extends Vue {}
+  export class CFlex extends Vue {}
+  export class CFormControl extends Vue {}
+  export class CFormErrorMessage extends Vue {}
+  export class CFormHelperText extends Vue {}
+  export class CFormLabel extends Vue {}
+  export class CFragment extends Vue {}
+  export class CGrid extends Vue {}
+  export class CHeading extends Vue {}
+  export class CIcon extends Vue {}
+  export class CIconButton extends Vue {}
+  export class CImage extends Vue {}
+  export class CInput extends Vue {}
+  export class CInputAddon extends Vue {}
+  export class CInputElement extends Vue {}
+  export class CInputGroup extends Vue {}
+  export class CInputLeftAddon extends Vue {}
+  export class CInputLeftElement extends Vue {}
+  export class CInputRightAddon extends Vue {}
+  export class CInputRightElement extends Vue {}
+  export class CLightMode extends Vue {}
+  export class CLink extends Vue {}
+  export class CList extends Vue {}
+  export class CListIcon extends Vue {}
+  export class CListItem extends Vue {}
+  export class CMenu extends Vue {}
+  export class CMenuButton extends Vue {}
+  export class CMenuDivider extends Vue {}
+  export class CMenuGroup extends Vue {}
+  export class CMenuItem extends Vue {}
+  export class CMenuItemOption extends Vue {}
+  export class CMenuList extends Vue {}
+  export class CMenuOptionGroup extends Vue {}
+  export class CModal extends Vue {}
+  export class CModalBody extends Vue {}
+  export class CModalCloseButton extends Vue {}
+  export class CModalContent extends Vue {}
+  export class CModalFooter extends Vue {}
+  export class CModalHeader extends Vue {}
+  export class CModalOverlay extends Vue {}
+  export class CNumberDecrementStepper extends Vue {}
+  export class CNumberIncrementStepper extends Vue {}
+  export class CNumberInput extends Vue {}
+  export class CNumberInputField extends Vue {}
+  export class CNumberInputStepper extends Vue {}
+  export class CPopover extends Vue {}
+  export class CPopoverArrow extends Vue {}
+  export class CPopoverBody extends Vue {}
+  export class CPopoverCloseButton extends Vue {}
+  export class CPopoverContent extends Vue {}
+  export class CPopoverFooter extends Vue {}
+  export class CPopoverHeader extends Vue {}
+  export class CPopoverTrigger extends Vue {}
+  export class CPopper extends Vue {}
+  export class CPopperArrow extends Vue {}
+  export class CPortal extends Vue {}
+  export class CProgress extends Vue {}
+  export class CProgressLabel extends Vue {}
+  export class CPseudoBox extends Vue {}
+  export class CRadio extends Vue {}
+  export class CRadioButtonGroup extends Vue {}
+  export class CRadioGroup extends Vue {}
+  export class CReset extends Vue {}
+  export class CRevealHeight extends Vue {}
+  export class CScale extends Vue {}
+  export class CSelect extends Vue {}
+  export class CSimpleGrid extends Vue {}
+  export class CSlide extends Vue {}
+  export class CSlideIn extends Vue {}
+  export class CSlider extends Vue {}
+  export class CSliderFilledTrack extends Vue {}
+  export class CSliderThumb extends Vue {}
+  export class CSliderTrack extends Vue {}
+  export class CSpinner extends Vue {}
+  export class CStack extends Vue {}
+  export class CStat extends Vue {}
+  export class CStatArrow extends Vue {}
+  export class CStatGroup extends Vue {}
+  export class CStatHelperText extends Vue {}
+  export class CStatLabel extends Vue {}
+  export class CStatNumber extends Vue {}
+  export class CSwitch extends Vue {}
+  export class CTab extends Vue {}
+  export class CTabList extends Vue {}
+  export class CTabPanel extends Vue {}
+  export class CTabPanels extends Vue {}
+  export class CTabs extends Vue {}
+  export class CTag extends Vue {}
+  export class CTagCloseButton extends Vue {}
+  export class CTagIcon extends Vue {}
+  export class CTagLabel extends Vue {}
+  export class CText extends Vue {}
+  export class CTextarea extends Vue {}
+  export class CThemeProvider extends Vue {}
+  export class CTooltip extends Vue {}
+  export class CVisuallyHidden extends Vue {}
+}
diff --git a/packages/chakra-ui-core/types/index.d.ts b/packages/chakra-ui-core/types/index.d.ts
new file mode 100644
index 00000000..b72a8d63
--- /dev/null
+++ b/packages/chakra-ui-core/types/index.d.ts
@@ -0,0 +1 @@
+import './component'

From 65739fb4041ad458f9c9c49edd42ef7b139897b8 Mon Sep 17 00:00:00 2001
From: IHIutch <jbhutch01@gmail.com>
Date: Wed, 3 Feb 2021 21:16:19 -0500
Subject: [PATCH 04/24] Set ccollapse height to auto on enter complete, unless
 finalHeight was specifiied

---
 packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js | 1 +
 packages/chakra-ui-core/src/CTransition/Transition.js        | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js b/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js
index 1949c5bb..ca906410 100644
--- a/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js
+++ b/packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js
@@ -32,6 +32,7 @@ storiesOf('UI | Accordion', module)
           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
           veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
           commodo consequat.
+        </CAccordionPanel>
       </CAccordionItem>
     </CAccordion>
     `
diff --git a/packages/chakra-ui-core/src/CTransition/Transition.js b/packages/chakra-ui-core/src/CTransition/Transition.js
index 4962ab46..74093c86 100644
--- a/packages/chakra-ui-core/src/CTransition/Transition.js
+++ b/packages/chakra-ui-core/src/CTransition/Transition.js
@@ -486,7 +486,7 @@ const CAnimateHeight = {
           height: [this.initialHeight || 0, this.finalHeight || height],
           easing: this.enterEasing,
           duration: this.duration,
-          complete
+          complete: () => { el.style.height = this.finalHeight || 'auto' }
         })
       })
     },

From 415b89559054d402a2dfe261bfe44546eaae8836 Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Fri, 5 Feb 2021 09:28:39 +0100
Subject: [PATCH 05/24] docs(*): add missing comma in colormode import

---
 website/pages/color-mode.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/pages/color-mode.mdx b/website/pages/color-mode.mdx
index bfa0a612..e6246286 100644
--- a/website/pages/color-mode.mdx
+++ b/website/pages/color-mode.mdx
@@ -18,7 +18,7 @@ Below is an example of how to use the above variables:
 In your main.js
 ```js
 import Vue from 'vue'
-import Chakra, { CThemeProvider, CColorModeProvider CReset } from '@chakra-ui/vue'
+import Chakra, { CThemeProvider, CColorModeProvider, CReset } from '@chakra-ui/vue'
 import App from './App.vue'
 
 Vue.use(Chakra)

From 15ed202bec791dbc91dec69daf46601fcf470ecd Mon Sep 17 00:00:00 2001
From: odan <odan3240@gmail.com>
Date: Sat, 6 Feb 2021 18:36:34 +0900
Subject: [PATCH 06/24] feat: add type of Chakra

---
 packages/chakra-ui-core/src/Chakra/index.js | 32 +-------------------
 packages/chakra-ui-core/types/chakra.d.ts   | 33 +++++++++++++++++++++
 packages/chakra-ui-core/types/index.d.ts    |  3 ++
 3 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 packages/chakra-ui-core/types/chakra.d.ts

diff --git a/packages/chakra-ui-core/src/Chakra/index.js b/packages/chakra-ui-core/src/Chakra/index.js
index 207687de..e1920b17 100644
--- a/packages/chakra-ui-core/src/Chakra/index.js
+++ b/packages/chakra-ui-core/src/Chakra/index.js
@@ -6,39 +6,9 @@ import { createClientDirective } from '../directives'
 import defaultTheme from '../../../chakra-ui-theme/src'
 import useToast from '../CToast'
 
-/**
- * @typedef {Object} Theme Chakra UI Theme object
- * @property {Object} breakpoints
- * @property {Object} zIndices
- * @property {Object} radii
- * @property {Object} opacity
- * @property {Object} borders
- * @property {Object} colors
- * @property {Object} borderWidths
- * @property {Object} sizes
- * @property {Object} shadows
- * @property {Object} space
- * @property {Object} fontSizes
- * @property {Object} fonts
- * @property {Object} fontWeights
- * @property {Object} lineHeights
- * @property {Object} letterSpacings
- */
-
-/**
- * @typedef {Object} Options
- * @property {Theme} theme
- * @property {Theme} extendTheme
- * @property {Object} icons
- * @property {Object} icons.extend
- * @property {String} icons.iconPack
- * @property {Object} icons.iconSet
- *
- */
-
 /**
  * Chakra-ui Component library plugin
- * @type {Chakra}
+ * @type {import("../../types").default}
  */
 const Chakra = {
   /**
diff --git a/packages/chakra-ui-core/types/chakra.d.ts b/packages/chakra-ui-core/types/chakra.d.ts
new file mode 100644
index 00000000..153d7510
--- /dev/null
+++ b/packages/chakra-ui-core/types/chakra.d.ts
@@ -0,0 +1,33 @@
+import { PluginObject } from "vue"
+
+export type Theme = {
+  breakpoints: any
+  zIndices: any
+  radii: any
+  opacity: any
+  borders: any
+  colors: any
+  borderWidths: any
+  sizes: any
+  shadows: any
+  space: any
+  fontSizes: any
+  fonts: any
+  fontWeights: any
+  lineHeights: any
+  letterSpacings: any
+}
+
+export type Options = {
+  theme: Theme
+  extendTheme: Theme
+  icons: {
+      extend: any
+      iconPack: string
+      iconSet: any
+  }
+}
+
+type Chakra = PluginObject<Options>
+
+export default Chakra
\ No newline at end of file
diff --git a/packages/chakra-ui-core/types/index.d.ts b/packages/chakra-ui-core/types/index.d.ts
index b72a8d63..89696d83 100644
--- a/packages/chakra-ui-core/types/index.d.ts
+++ b/packages/chakra-ui-core/types/index.d.ts
@@ -1 +1,4 @@
 import './component'
+import Chakra from "./chakra"
+
+export default Chakra
\ No newline at end of file

From b7c938969b11d4128c004b687c9ba6b20704ad37 Mon Sep 17 00:00:00 2001
From: odan <odan3240@gmail.com>
Date: Sun, 7 Feb 2021 00:25:27 +0900
Subject: [PATCH 07/24] fix: fix importing of types

---
 packages/chakra-ui-core/types/chakra.d.ts    |   5 +-
 packages/chakra-ui-core/types/component.d.ts | 296 +++++++++----------
 packages/chakra-ui-core/types/index.d.ts     |   2 +-
 3 files changed, 151 insertions(+), 152 deletions(-)

diff --git a/packages/chakra-ui-core/types/chakra.d.ts b/packages/chakra-ui-core/types/chakra.d.ts
index 153d7510..681fe134 100644
--- a/packages/chakra-ui-core/types/chakra.d.ts
+++ b/packages/chakra-ui-core/types/chakra.d.ts
@@ -28,6 +28,7 @@ export type Options = {
   }
 }
 
-type Chakra = PluginObject<Options>
+export type Chakra = PluginObject<Options>
 
-export default Chakra
\ No newline at end of file
+declare let chakra: Chakra
+export default chakra
\ No newline at end of file
diff --git a/packages/chakra-ui-core/types/component.d.ts b/packages/chakra-ui-core/types/component.d.ts
index 4733ad98..e5707b6b 100644
--- a/packages/chakra-ui-core/types/component.d.ts
+++ b/packages/chakra-ui-core/types/component.d.ts
@@ -1,150 +1,148 @@
-declare module '@chakra-ui/vue' {
-  import Vue from 'vue'
+import Vue from 'vue'
 
-  export class CAccordion extends Vue {}
-  export class CAccordionHeader extends Vue {}
-  export class CAccordionIcon extends Vue {}
-  export class CAccordionItem extends Vue {}
-  export class CAccordionPanel extends Vue {}
-  export class CAlert extends Vue {}
-  export class CAlertDescription extends Vue {}
-  export class CAlertDialog extends Vue {}
-  export class CAlertDialogBody extends Vue {}
-  export class CAlertDialogCloseButton extends Vue {}
-  export class CAlertDialogContent extends Vue {}
-  export class CAlertDialogFooter extends Vue {}
-  export class CAlertDialogHeader extends Vue {}
-  export class CAlertDialogOverlay extends Vue {}
-  export class CAlertIcon extends Vue {}
-  export class CAlertTitle extends Vue {}
-  export class CAnimateHeight extends Vue {}
-  export class CAspectRatioBox extends Vue {}
-  export class CAvatar extends Vue {}
-  export class CAvatarBadge extends Vue {}
-  export class CAvatarGroup extends Vue {}
-  export class CBadge extends Vue {}
-  export class CBox extends Vue {}
-  export class CBreadcrumb extends Vue {}
-  export class CBreadcrumbItem extends Vue {}
-  export class CBreadcrumbLink extends Vue {}
-  export class CBreadcrumbSeparator extends Vue {}
-  export class CButton extends Vue {}
-  export class CButtonGroup extends Vue {}
-  export class CCheckbox extends Vue {}
-  export class CCheckboxGroup extends Vue {}
-  export class CCircularProgress extends Vue {}
-  export class CCircularProgressLabel extends Vue {}
-  export class CCloseButton extends Vue {}
-  export class CCode extends Vue {}
-  export class CCollapse extends Vue {}
-  export class CColorModeProvider extends Vue {}
-  export class CControlBox extends Vue {}
-  export class CDarkMode extends Vue {}
-  export class CDivider extends Vue {}
-  export class CDrawer extends Vue {}
-  export class CDrawerBody extends Vue {}
-  export class CDrawerCloseButton extends Vue {}
-  export class CDrawerContent extends Vue {}
-  export class CDrawerFooter extends Vue {}
-  export class CDrawerHeader extends Vue {}
-  export class CDrawerOverlay extends Vue {}
-  export class CEditable extends Vue {}
-  export class CEditableInput extends Vue {}
-  export class CEditablePreview extends Vue {}
-  export class CFade extends Vue {}
-  export class CFlex extends Vue {}
-  export class CFormControl extends Vue {}
-  export class CFormErrorMessage extends Vue {}
-  export class CFormHelperText extends Vue {}
-  export class CFormLabel extends Vue {}
-  export class CFragment extends Vue {}
-  export class CGrid extends Vue {}
-  export class CHeading extends Vue {}
-  export class CIcon extends Vue {}
-  export class CIconButton extends Vue {}
-  export class CImage extends Vue {}
-  export class CInput extends Vue {}
-  export class CInputAddon extends Vue {}
-  export class CInputElement extends Vue {}
-  export class CInputGroup extends Vue {}
-  export class CInputLeftAddon extends Vue {}
-  export class CInputLeftElement extends Vue {}
-  export class CInputRightAddon extends Vue {}
-  export class CInputRightElement extends Vue {}
-  export class CLightMode extends Vue {}
-  export class CLink extends Vue {}
-  export class CList extends Vue {}
-  export class CListIcon extends Vue {}
-  export class CListItem extends Vue {}
-  export class CMenu extends Vue {}
-  export class CMenuButton extends Vue {}
-  export class CMenuDivider extends Vue {}
-  export class CMenuGroup extends Vue {}
-  export class CMenuItem extends Vue {}
-  export class CMenuItemOption extends Vue {}
-  export class CMenuList extends Vue {}
-  export class CMenuOptionGroup extends Vue {}
-  export class CModal extends Vue {}
-  export class CModalBody extends Vue {}
-  export class CModalCloseButton extends Vue {}
-  export class CModalContent extends Vue {}
-  export class CModalFooter extends Vue {}
-  export class CModalHeader extends Vue {}
-  export class CModalOverlay extends Vue {}
-  export class CNumberDecrementStepper extends Vue {}
-  export class CNumberIncrementStepper extends Vue {}
-  export class CNumberInput extends Vue {}
-  export class CNumberInputField extends Vue {}
-  export class CNumberInputStepper extends Vue {}
-  export class CPopover extends Vue {}
-  export class CPopoverArrow extends Vue {}
-  export class CPopoverBody extends Vue {}
-  export class CPopoverCloseButton extends Vue {}
-  export class CPopoverContent extends Vue {}
-  export class CPopoverFooter extends Vue {}
-  export class CPopoverHeader extends Vue {}
-  export class CPopoverTrigger extends Vue {}
-  export class CPopper extends Vue {}
-  export class CPopperArrow extends Vue {}
-  export class CPortal extends Vue {}
-  export class CProgress extends Vue {}
-  export class CProgressLabel extends Vue {}
-  export class CPseudoBox extends Vue {}
-  export class CRadio extends Vue {}
-  export class CRadioButtonGroup extends Vue {}
-  export class CRadioGroup extends Vue {}
-  export class CReset extends Vue {}
-  export class CRevealHeight extends Vue {}
-  export class CScale extends Vue {}
-  export class CSelect extends Vue {}
-  export class CSimpleGrid extends Vue {}
-  export class CSlide extends Vue {}
-  export class CSlideIn extends Vue {}
-  export class CSlider extends Vue {}
-  export class CSliderFilledTrack extends Vue {}
-  export class CSliderThumb extends Vue {}
-  export class CSliderTrack extends Vue {}
-  export class CSpinner extends Vue {}
-  export class CStack extends Vue {}
-  export class CStat extends Vue {}
-  export class CStatArrow extends Vue {}
-  export class CStatGroup extends Vue {}
-  export class CStatHelperText extends Vue {}
-  export class CStatLabel extends Vue {}
-  export class CStatNumber extends Vue {}
-  export class CSwitch extends Vue {}
-  export class CTab extends Vue {}
-  export class CTabList extends Vue {}
-  export class CTabPanel extends Vue {}
-  export class CTabPanels extends Vue {}
-  export class CTabs extends Vue {}
-  export class CTag extends Vue {}
-  export class CTagCloseButton extends Vue {}
-  export class CTagIcon extends Vue {}
-  export class CTagLabel extends Vue {}
-  export class CText extends Vue {}
-  export class CTextarea extends Vue {}
-  export class CThemeProvider extends Vue {}
-  export class CTooltip extends Vue {}
-  export class CVisuallyHidden extends Vue {}
-}
+export class CAccordion extends Vue {}
+export class CAccordionHeader extends Vue {}
+export class CAccordionIcon extends Vue {}
+export class CAccordionItem extends Vue {}
+export class CAccordionPanel extends Vue {}
+export class CAlert extends Vue {}
+export class CAlertDescription extends Vue {}
+export class CAlertDialog extends Vue {}
+export class CAlertDialogBody extends Vue {}
+export class CAlertDialogCloseButton extends Vue {}
+export class CAlertDialogContent extends Vue {}
+export class CAlertDialogFooter extends Vue {}
+export class CAlertDialogHeader extends Vue {}
+export class CAlertDialogOverlay extends Vue {}
+export class CAlertIcon extends Vue {}
+export class CAlertTitle extends Vue {}
+export class CAnimateHeight extends Vue {}
+export class CAspectRatioBox extends Vue {}
+export class CAvatar extends Vue {}
+export class CAvatarBadge extends Vue {}
+export class CAvatarGroup extends Vue {}
+export class CBadge extends Vue {}
+export class CBox extends Vue {}
+export class CBreadcrumb extends Vue {}
+export class CBreadcrumbItem extends Vue {}
+export class CBreadcrumbLink extends Vue {}
+export class CBreadcrumbSeparator extends Vue {}
+export class CButton extends Vue {}
+export class CButtonGroup extends Vue {}
+export class CCheckbox extends Vue {}
+export class CCheckboxGroup extends Vue {}
+export class CCircularProgress extends Vue {}
+export class CCircularProgressLabel extends Vue {}
+export class CCloseButton extends Vue {}
+export class CCode extends Vue {}
+export class CCollapse extends Vue {}
+export class CColorModeProvider extends Vue {}
+export class CControlBox extends Vue {}
+export class CDarkMode extends Vue {}
+export class CDivider extends Vue {}
+export class CDrawer extends Vue {}
+export class CDrawerBody extends Vue {}
+export class CDrawerCloseButton extends Vue {}
+export class CDrawerContent extends Vue {}
+export class CDrawerFooter extends Vue {}
+export class CDrawerHeader extends Vue {}
+export class CDrawerOverlay extends Vue {}
+export class CEditable extends Vue {}
+export class CEditableInput extends Vue {}
+export class CEditablePreview extends Vue {}
+export class CFade extends Vue {}
+export class CFlex extends Vue {}
+export class CFormControl extends Vue {}
+export class CFormErrorMessage extends Vue {}
+export class CFormHelperText extends Vue {}
+export class CFormLabel extends Vue {}
+export class CFragment extends Vue {}
+export class CGrid extends Vue {}
+export class CHeading extends Vue {}
+export class CIcon extends Vue {}
+export class CIconButton extends Vue {}
+export class CImage extends Vue {}
+export class CInput extends Vue {}
+export class CInputAddon extends Vue {}
+export class CInputElement extends Vue {}
+export class CInputGroup extends Vue {}
+export class CInputLeftAddon extends Vue {}
+export class CInputLeftElement extends Vue {}
+export class CInputRightAddon extends Vue {}
+export class CInputRightElement extends Vue {}
+export class CLightMode extends Vue {}
+export class CLink extends Vue {}
+export class CList extends Vue {}
+export class CListIcon extends Vue {}
+export class CListItem extends Vue {}
+export class CMenu extends Vue {}
+export class CMenuButton extends Vue {}
+export class CMenuDivider extends Vue {}
+export class CMenuGroup extends Vue {}
+export class CMenuItem extends Vue {}
+export class CMenuItemOption extends Vue {}
+export class CMenuList extends Vue {}
+export class CMenuOptionGroup extends Vue {}
+export class CModal extends Vue {}
+export class CModalBody extends Vue {}
+export class CModalCloseButton extends Vue {}
+export class CModalContent extends Vue {}
+export class CModalFooter extends Vue {}
+export class CModalHeader extends Vue {}
+export class CModalOverlay extends Vue {}
+export class CNumberDecrementStepper extends Vue {}
+export class CNumberIncrementStepper extends Vue {}
+export class CNumberInput extends Vue {}
+export class CNumberInputField extends Vue {}
+export class CNumberInputStepper extends Vue {}
+export class CPopover extends Vue {}
+export class CPopoverArrow extends Vue {}
+export class CPopoverBody extends Vue {}
+export class CPopoverCloseButton extends Vue {}
+export class CPopoverContent extends Vue {}
+export class CPopoverFooter extends Vue {}
+export class CPopoverHeader extends Vue {}
+export class CPopoverTrigger extends Vue {}
+export class CPopper extends Vue {}
+export class CPopperArrow extends Vue {}
+export class CPortal extends Vue {}
+export class CProgress extends Vue {}
+export class CProgressLabel extends Vue {}
+export class CPseudoBox extends Vue {}
+export class CRadio extends Vue {}
+export class CRadioButtonGroup extends Vue {}
+export class CRadioGroup extends Vue {}
+export class CReset extends Vue {}
+export class CRevealHeight extends Vue {}
+export class CScale extends Vue {}
+export class CSelect extends Vue {}
+export class CSimpleGrid extends Vue {}
+export class CSlide extends Vue {}
+export class CSlideIn extends Vue {}
+export class CSlider extends Vue {}
+export class CSliderFilledTrack extends Vue {}
+export class CSliderThumb extends Vue {}
+export class CSliderTrack extends Vue {}
+export class CSpinner extends Vue {}
+export class CStack extends Vue {}
+export class CStat extends Vue {}
+export class CStatArrow extends Vue {}
+export class CStatGroup extends Vue {}
+export class CStatHelperText extends Vue {}
+export class CStatLabel extends Vue {}
+export class CStatNumber extends Vue {}
+export class CSwitch extends Vue {}
+export class CTab extends Vue {}
+export class CTabList extends Vue {}
+export class CTabPanel extends Vue {}
+export class CTabPanels extends Vue {}
+export class CTabs extends Vue {}
+export class CTag extends Vue {}
+export class CTagCloseButton extends Vue {}
+export class CTagIcon extends Vue {}
+export class CTagLabel extends Vue {}
+export class CText extends Vue {}
+export class CTextarea extends Vue {}
+export class CThemeProvider extends Vue {}
+export class CTooltip extends Vue {}
+export class CVisuallyHidden extends Vue {}
diff --git a/packages/chakra-ui-core/types/index.d.ts b/packages/chakra-ui-core/types/index.d.ts
index 89696d83..95e86dc0 100644
--- a/packages/chakra-ui-core/types/index.d.ts
+++ b/packages/chakra-ui-core/types/index.d.ts
@@ -1,4 +1,4 @@
-import './component'
 import Chakra from "./chakra"
 
+export * from './component'
 export default Chakra
\ No newline at end of file

From 0688ea972745f085a55b78ae6efe2e87fcb9f180 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 7 Feb 2021 07:30:49 +0000
Subject: [PATCH 08/24] docs: update README.md [skip ci]


From 40927112df5325a67ec03c2f80f1b6189f4f8c87 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 7 Feb 2021 07:30:50 +0000
Subject: [PATCH 09/24] docs: update .all-contributorsrc [skip ci]


From 64a15090d99aa555f72a8de0082fb80ac7379d9f Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 7 Feb 2021 07:38:26 +0000
Subject: [PATCH 10/24] docs: update README.md [skip ci]

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 91a687ba..4e14febb 100644
--- a/README.md
+++ b/README.md
@@ -215,6 +215,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
     <td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
   </tr>
 </table>
 

From cd878f55d4be3e04106c53c76fccbd9343a98067 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 7 Feb 2021 07:38:27 +0000
Subject: [PATCH 11/24] docs: update .all-contributorsrc [skip ci]

---
 .all-contributorsrc | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index deaf753b..48a4ebdd 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -195,6 +195,16 @@
         "example",
         "code"
       ]
+    },
+    {
+      "login": "odanado",
+      "name": "odanado",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6040962?v=4",
+      "profile": "https://github.com/odanado",
+      "contributions": [
+        "code",
+        "tool"
+      ]
     }
   ],
   "contributorsPerLine": 7,

From 50906dd2034ead4cf92e551b00f05bf854e2d931 Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Thu, 4 Mar 2021 12:04:37 +0100
Subject: [PATCH 12/24] fix(docs): add pt and pl in navbar instead of using css
 file

---
 package.json                  | 2 ++
 website/components/Navbar.vue | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 7156a32c..4e839c8b 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
     "docs:lint": "yarn workspace chakra-ui-docs lint",
     "theme:dev": "yarn workspace @chakra-ui/theme-vue build",
     "docs-dev": "yarn workspace chakra-ui-docs dev",
+    "docs-build": "yarn workspace chakra-ui-docs build",
+    "docs-serve": "yarn workspace chakra-ui-docs nuxt start",
     "evalbundle": "bundlesize"
   },
   "dependencies": {
diff --git a/website/components/Navbar.vue b/website/components/Navbar.vue
index 8e3ffbc5..70ea066a 100644
--- a/website/components/Navbar.vue
+++ b/website/components/Navbar.vue
@@ -28,6 +28,8 @@
       d="flex"
       align-items="center"
       list-style-type="none"
+      pt="8px"
+      pl="16px"
     >
       <CBox :display="['none', 'none', 'block']" as="li" mr="2">
         <span id="github-star-button" />

From 5854694907dbe0ec21db81b21e0dc0207a28c07f Mon Sep 17 00:00:00 2001
From: HoukasaurusRex <jt@houk.space>
Date: Sat, 6 Mar 2021 16:56:42 +0800
Subject: [PATCH 13/24] docs: add vuepress installation guide

---
 website/pages/with-vuepress.mdx | 140 ++++++++++++++++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 website/pages/with-vuepress.mdx

diff --git a/website/pages/with-vuepress.mdx b/website/pages/with-vuepress.mdx
new file mode 100644
index 00000000..0ebcfc04
--- /dev/null
+++ b/website/pages/with-vuepress.mdx
@@ -0,0 +1,140 @@
+import SEO from '../components/SEO'
+import { CodeGroup, CodeTab } from '~/components/code'
+
+<SEO
+  title="Using UI with Vuepress"
+  description="Getting started with Chakra UI and Vuepress"
+/>
+
+# Usage with Vuepress
+
+If you use Vuepress, you can extend your theme to install Chakra globally using Vuepress's [theme inheritance](https://vuepress.vuejs.org/theme/inheritance.html).
+
+<carbon-ad />
+
+## Installation
+
+Install Chakra UI Vue and its peer dependency, `@emotion/css`
+
+<br/>
+
+<CodeGroup lang="bash">
+  <CodeTab label="Yarn">
+    yarn add @chakra-ui/vue @emotion/css
+  </CodeTab>
+  <CodeTab label="NPM">
+    npm install @chakra-ui/vue @emotion/css
+  </CodeTab>
+</CodeGroup>
+
+## Usage
+
+### Extend Your Theme
+
+First create a `theme` folder in your .vuepress directory and extend you Vuepress theme in your `theme/index.js` file.
+
+```js
+module.exports = {
+  extend: '@vuepress/theme-default' // whichever vuepress theme you use
+}
+```
+
+### Add Chakra's Global Mixins
+
+Add the Chakra UI providers in your `theme/enhanceApp.js` file as shown.
+
+```js
+import Chakra, { internalIcons, defaultTheme, parsePackIcons } from '@chakra-ui/vue'
+import { faHandHoldingHeart } from '@fortawesome/free-solid-svg-icons'
+
+export default ({
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData, // site metadata
+  isServer // is this enhancement applied in server-rendering or client
+}) => {
+  Vue.use(Chakra)
+  Vue.mixin({
+    provide () {
+      return {
+        $chakraTheme: () => defaultTheme,
+        $chakraColorMode: () => this.colorMode,
+        $toggleColorMode: this.toggleColorMode,
+        // icons must be parsed and spread into the icons provider to be available globally
+        $chakraIcons: {
+          ...internalIcons,
+          ...parsePackIcons({ faHandHoldingHeart })
+        }
+      }
+    },
+    methods: {
+      toggleColorMode () {
+        this.colorMode = this.colorMode === 'light' ? 'dark' : 'light'
+      }
+    }
+  })
+})
+```
+
+Now you can wrap your main application inside the Chakra `CThemeProvider` component by creating a layout wrapper in `theme/layouts/Layout.vue`.
+
+```vue
+<template>
+  <CThemeProvider>
+    <CReset />  <!-- NOTE: Resetting styles may have adverse effects on some themes -->
+    <Layout />
+  </CThemeProvider>
+</template>
+
+<script>
+import { CThemeProvider, CReset } from '@chakra-ui/vue'
+import Layout from '@parent-theme/layouts/Layout.vue'
+
+export default {
+  name: 'ChakraLayout',
+  components: {
+    CThemeProvider,
+    CReset,
+    Layout
+  }
+}
+</script>
+```
+
+
+## Using Chakra components
+
+_In your `App.vue` file._
+
+```vue
+<template>
+  <c-box>
+    <c-button>
+      Chakra Consumed! ⚡️
+    </c-button>
+  </c-box>
+</template>
+
+<script lang="js">
+import { CBox, CButton } from '@chakra-ui/vue'
+
+export default {
+  name: 'App',
+  components: {
+    CBox,
+    CButton
+  }
+}
+</script>
+```
+
+### Codesandbox starters
+
+- [Vue Starter](https://codesandbox.io/s/chakra-ui-vue-starter-2sy0g)
+- [Nuxt Starter](https://codesandbox.io/s/chakra-ui-nuxt-demo-f8tq4)
+- [Gridsome Starter](https://codesandbox.io/s/chakra-ui-gridsome-demo-038c9)
+
+### Storybook Components
+
+You can also view all developed components in [Storybook](https://chakra-ui-vue.netlify.com)!

From 2a9207a57448d1e4647b366429b84dcfa2864893 Mon Sep 17 00:00:00 2001
From: IHIutch <jbhutch01@gmail.com>
Date: Sat, 6 Mar 2021 10:28:42 -0500
Subject: [PATCH 14/24] Add position: relative to switch label

---
 packages/chakra-ui-core/src/CSwitch/CSwitch.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/chakra-ui-core/src/CSwitch/CSwitch.js b/packages/chakra-ui-core/src/CSwitch/CSwitch.js
index e53f870c..cf353621 100644
--- a/packages/chakra-ui-core/src/CSwitch/CSwitch.js
+++ b/packages/chakra-ui-core/src/CSwitch/CSwitch.js
@@ -125,6 +125,7 @@ const CSwitch = {
         as: 'label'
       },
       attrs: {
+        position: 'relative',
         display: 'inline-block',
         verticalAlign: 'middle',
         ...data.attrs,

From ef8a6d411e216628c34afb0a454891a3822622d5 Mon Sep 17 00:00:00 2001
From: IHIutch <jbhutch01@gmail.com>
Date: Sat, 6 Mar 2021 10:46:59 -0500
Subject: [PATCH 15/24] Update the snapshot

---
 .../src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
index 706cf836..232edfb8 100644
--- a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
+++ b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <label
-    class="css-v7ibj3"
+    class="css-lncjus"
     data-chakra-component="CSwitch"
     data-testid="switch"
   >

From d4e0620c4560cd52adc29619143119cfa2a34182 Mon Sep 17 00:00:00 2001
From: IHIutch <jbhutch01@gmail.com>
Date: Sun, 7 Mar 2021 02:58:40 -0500
Subject: [PATCH 16/24] Pass children elements to inside aspect ratio component

---
 .../src/CAspectRatioBox/CAspectRatioBox.js    |  2 +-
 .../CAspectRatioBox.stories.js                | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js
index 5cbb1432..4fab0d4d 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js
@@ -65,7 +65,7 @@ const CAspectRatioBox = {
         left: 0,
         ...vnode.data.attrs
       }
-    })
+    }, vnode.componentOptions.children || [])
 
     return h('div', {
       class: this.className,
diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js
index 4f70bfbe..ff1ee77c 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js
@@ -22,3 +22,23 @@ storiesOf('UI | AspectRatioBox', module)
       }
     }
   }))
+  .add('Nested Elements', () => ({
+    components: { CAspectRatioBox, CBox },
+    template: `
+      <div style="width: 100vh; height: 100vw;">
+        <CAspectRatioBox maxW="560px" :ratio="16 / 9" bg="gray.200">
+          <CFlex align="center" justify="center">
+            <CBox text-align="center">
+              <CHeading>See the Vue</CHeading>
+              <CText mt="4">Vue makes front-end development a breeze.</CText>
+            </CBox>
+          </CFlex>
+        </CAspectRatioBox>
+      </div>
+    `,
+    data () {
+      return {
+        showCollapsed: true
+      }
+    }
+  }))

From fce8a5fb707245a3fe980b5d25fe8d8b8337fb9c Mon Sep 17 00:00:00 2001
From: IHIutch <jbhutch01@gmail.com>
Date: Sun, 7 Mar 2021 10:55:48 -0500
Subject: [PATCH 17/24] Write tests for updated CAspectRatioBox

---
 .../tests/CAspectRatioBox.test.js             | 31 ++++++++++++++-----
 .../CAspectRatioBox.test.js.snap              | 18 +++++++----
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index 2e8752c9..9cdeb4f8 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -6,7 +6,9 @@ const renderComponent = (props) => {
     components: { CAspectRatioBox, CBox },
     template: `
     <CAspectRatioBox maxW="400px" data-testid="aspectRatioBox" ${inlineAttrs}>
-      <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" data-testid="image" />
+      <CBox data-testid="child">
+        <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" h="100%" w="100%" data-testid="image" />
+      </CBox>
     </CAspectRatioBox>
     `,
     ...props
@@ -22,9 +24,11 @@ it('should render correctly', () => {
   const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 100%
-  `.trim())
+  `.trim()
+  )
 })
 
 it('should have correct styles', () => {
@@ -32,25 +36,38 @@ it('should have correct styles', () => {
   renderComponent({ inlineAttrs })
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')
+  const child = screen.getByTestId('child')
 
   const [emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 50%
-  `.trim())
+  `.trim()
+  )
 
   expect(aspectRatioBox).toHaveStyle(`
     max-width: 400px;
     position: relative;
   `)
 
-  expect(image).toHaveStyle(`
-    object-fit: cover;
+  // aspectRatioBox should contain exactly 1 immediate child
+  expect(aspectRatioBox.childElementCount).toEqual(1)
+
+  expect(child).toHaveStyle(`
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
   `)
+
+  expect(child).not.toBeEmpty()
+
+  expect(image).toHaveStyle(`
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  `)
 })
diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap b/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
index 3b939e55..532a905a 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
@@ -7,13 +7,19 @@ exports[`should render correctly 1`] = `
     data-chakra-component="CAspectRatioBox"
     data-testid="aspectRatioBox"
   >
-    <img
-      alt="naruto"
-      class="css-1mlkgdx"
+    <div
+      class="css-k57fb3"
       data-chakra-component="CBox"
-      data-testid="image"
-      src="https://bit.ly/naruto-sage"
-    />
+      data-testid="child"
+    >
+      <img
+        alt="naruto"
+        class="css-ygtapu"
+        data-chakra-component="CBox"
+        data-testid="image"
+        src="https://bit.ly/naruto-sage"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;

From d6e68c32919d81e690f44fb7073224881906b8c5 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 14 Mar 2021 20:42:04 +0800
Subject: [PATCH 18/24] chore: fix route links

---
 website/pages/with-vuepress.mdx | 10 ----------
 website/utils/all-routes.js     |  1 +
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/website/pages/with-vuepress.mdx b/website/pages/with-vuepress.mdx
index 0ebcfc04..9e47cf92 100644
--- a/website/pages/with-vuepress.mdx
+++ b/website/pages/with-vuepress.mdx
@@ -128,13 +128,3 @@ export default {
 }
 </script>
 ```
-
-### Codesandbox starters
-
-- [Vue Starter](https://codesandbox.io/s/chakra-ui-vue-starter-2sy0g)
-- [Nuxt Starter](https://codesandbox.io/s/chakra-ui-nuxt-demo-f8tq4)
-- [Gridsome Starter](https://codesandbox.io/s/chakra-ui-gridsome-demo-038c9)
-
-### Storybook Components
-
-You can also view all developed components in [Storybook](https://chakra-ui-vue.netlify.com)!
diff --git a/website/utils/all-routes.js b/website/utils/all-routes.js
index 33ffcbe1..bb160f96 100644
--- a/website/utils/all-routes.js
+++ b/website/utils/all-routes.js
@@ -60,6 +60,7 @@ export const components = [
 export const topNavLinks = [
   'Getting Started',
   'With Nuxt',
+  'With Vuepress',
   'Plugin Options',
   'Principles',
   'Style Props',

From 4c298db44f136f633619cdc80de32d7195bbc7fb Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 14 Mar 2021 12:44:37 +0000
Subject: [PATCH 19/24] docs: update README.md [skip ci]

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 4e14febb..ea4be88e 100644
--- a/README.md
+++ b/README.md
@@ -217,6 +217,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/IHIutch"><img src="https://avatars.githubusercontent.com/u/20825047?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jonathan Hutchison</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/issues?q=author%3AIHIutch" title="Bug reports">🐛</a> <a href="#ideas-IHIutch" title="Ideas, Planning, & Feedback">🤔</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

From 007469c0a6e1a392c21a313b3d986fec3a405aa8 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 14 Mar 2021 12:44:38 +0000
Subject: [PATCH 20/24] docs: update .all-contributorsrc [skip ci]

---
 .all-contributorsrc | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 48a4ebdd..6c29dafe 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -205,6 +205,17 @@
         "code",
         "tool"
       ]
+    },
+    {
+      "login": "IHIutch",
+      "name": "Jonathan Hutchison",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20825047?v=4",
+      "profile": "https://github.com/IHIutch",
+      "contributions": [
+        "code",
+        "bug",
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

From b05f884e63f77053061304d98eb32230e741ea82 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 14 Mar 2021 12:45:30 +0000
Subject: [PATCH 21/24] docs: update README.md [skip ci]

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 4e14febb..011bdd97 100644
--- a/README.md
+++ b/README.md
@@ -217,6 +217,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://jt.houk.space/"><img src="https://avatars.githubusercontent.com/u/23695312?v=4?s=50" width="50px;" alt=""/><br /><sub><b>JT Houk</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=HoukasaurusRex" title="Documentation">📖</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

From a6b8c3bde46e4351beb0fee36ede514f7375b183 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Sun, 14 Mar 2021 12:45:31 +0000
Subject: [PATCH 22/24] docs: update .all-contributorsrc [skip ci]

---
 .all-contributorsrc | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 48a4ebdd..23d58808 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -205,6 +205,15 @@
         "code",
         "tool"
       ]
+    },
+    {
+      "login": "HoukasaurusRex",
+      "name": "JT Houk",
+      "avatar_url": "https://avatars.githubusercontent.com/u/23695312?v=4",
+      "profile": "https://jt.houk.space/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

From 8af1c07404d2cfa94bb338e4268c5e0869a50776 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Mon, 15 Mar 2021 01:49:03 +0800
Subject: [PATCH 23/24] chore: create changeset

---
 .changeset/strange-queens-warn.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/strange-queens-warn.md

diff --git a/.changeset/strange-queens-warn.md b/.changeset/strange-queens-warn.md
new file mode 100644
index 00000000..924d1240
--- /dev/null
+++ b/.changeset/strange-queens-warn.md
@@ -0,0 +1,6 @@
+---
+'@chakra-ui/vue': minor
+'@chakra-ui/nuxt': minor
+---
+
+Adds type definitions, aspect-ratio-box fixes, switch fixes and collapse fixes

From 3bee95435c1b86aaf4ffb4e76350d498f9f8409c Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Mon, 15 Mar 2021 02:17:58 +0800
Subject: [PATCH 24/24] chore: version ppackages

---
 .changeset/strange-queens-warn.md    |  6 ------
 packages/chakra-ui-core/CHANGELOG.md | 11 +++++++++++
 packages/chakra-ui-core/package.json |  2 +-
 packages/chakra-ui-nuxt/CHANGELOG.md | 16 ++++++++++++++++
 packages/chakra-ui-nuxt/package.json |  4 ++--
 website/CHANGELOG.md                 |  7 +++++++
 website/package.json                 |  4 ++--
 7 files changed, 39 insertions(+), 11 deletions(-)
 delete mode 100644 .changeset/strange-queens-warn.md

diff --git a/.changeset/strange-queens-warn.md b/.changeset/strange-queens-warn.md
deleted file mode 100644
index 924d1240..00000000
--- a/.changeset/strange-queens-warn.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@chakra-ui/vue': minor
-'@chakra-ui/nuxt': minor
----
-
-Adds type definitions, aspect-ratio-box fixes, switch fixes and collapse fixes
diff --git a/packages/chakra-ui-core/CHANGELOG.md b/packages/chakra-ui-core/CHANGELOG.md
index dcc51076..6becd138 100644
--- a/packages/chakra-ui-core/CHANGELOG.md
+++ b/packages/chakra-ui-core/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Change Log
 
+## 0.8.0
+
+### Minor Changes
+
+- [`8af1c07`](https://github.com/chakra-ui/chakra-ui-vue/commit/8af1c07404d2cfa94bb338e4268c5e0869a50776) Thanks [@codebender828](https://github.com/codebender828)! - Adds type definitions, aspect-ratio-box fixes, switch fixes and collapse fixes
+- feat: add type definition of component #380 by @odanado 
+- feat: CCollapse now renders with collapsed height if initially closed by @codebender828 . closes #269
+- fix: Set ccollapse height to auto on enter complete, unless finalHeight wa... #384  by @IHIutch 
+- fix: Add position: relative to switch label #396 by @IHIutch 
+- fix: Deeply nested aspect-ratio by @IHIutch 
+
 ## 0.7.4
 
 ### Patch Changes
diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json
index d495bdb8..fbd0085b 100644
--- a/packages/chakra-ui-core/package.json
+++ b/packages/chakra-ui-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/chakra-ui-nuxt/CHANGELOG.md b/packages/chakra-ui-nuxt/CHANGELOG.md
index cd89235b..697dadf5 100644
--- a/packages/chakra-ui-nuxt/CHANGELOG.md
+++ b/packages/chakra-ui-nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Change Log
 
+## 0.3.0
+
+### Minor Changes
+
+- [`8af1c07`](https://github.com/chakra-ui/chakra-ui-vue/commit/8af1c07404d2cfa94bb338e4268c5e0869a50776) Thanks [@codebender828](https://github.com/codebender828)! - Adds type definitions, aspect-ratio-box fixes, switch fixes and collapse fixes
+- feat: add type definition of component #380 by @odanado 
+- feat: CCollapse now renders with collapsed height if initially closed by @codebender828 . closes #269
+- fix: Set ccollapse height to auto on enter complete, unless finalHeight wa... #384  by @IHIutch 
+- fix: Add position: relative to switch label #396 by @IHIutch 
+- fix: Deeply nested aspect-ratio by @IHIutch 
+
+### Patch Changes
+
+- Updated dependencies [[`8af1c07`](https://github.com/chakra-ui/chakra-ui-vue/commit/8af1c07404d2cfa94bb338e4268c5e0869a50776)]:
+  - @chakra-ui/vue@0.8.0
+
 ## 0.2.4
 
 ### Patch Changes
diff --git a/packages/chakra-ui-nuxt/package.json b/packages/chakra-ui-nuxt/package.json
index a1e4bc6d..1b1325b8 100644
--- a/packages/chakra-ui-nuxt/package.json
+++ b/packages/chakra-ui-nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/nuxt",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Chakra UI Module for Nuxt.js",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/vue": "^0.7.4",
+    "@chakra-ui/vue": "^0.8.0",
     "chakra-loader": "latest",
     "@emotion/css": "^11.0.0"
   },
diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md
index f3827946..c4595238 100644
--- a/website/CHANGELOG.md
+++ b/website/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.5.6
+
+### Patch Changes
+
+- Updated dependencies [[`8af1c07`](https://github.com/chakra-ui/chakra-ui-vue/commit/8af1c07404d2cfa94bb338e4268c5e0869a50776)]:
+  - @chakra-ui/vue@0.8.0
+
 ## 0.5.5
 
 ### Patch Changes
diff --git a/website/package.json b/website/package.json
index 0e7aabf0..388cd79a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chakra-ui-docs",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Chakra UI Vue documentation site",
   "private": true,
   "scripts": {
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@chakra-ui/theme-vue": "^0.2.10",
-    "@chakra-ui/vue": "^0.7.4",
+    "@chakra-ui/vue": "^0.8.0",
     "@emotion/css": "^11.0.0",
     "@mdx-js/vue-loader": "^1.6.1",
     "@nuxtjs/dotenv": "^1.4.0",