From 05bad5f45dca018a105590368bc276eace0a41a2 Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Sat, 7 Oct 2023 23:50:02 +0200
Subject: [PATCH 1/5] fix(components): Add missing as prop on some layout
 components

---
 @types/components.d.ts                  | 2 +-
 components.d.ts                         | 2 +-
 packages/layout/examples/base-stack.vue | 2 +-
 packages/layout/src/container.tsx       | 3 ++-
 packages/layout/src/kbd.tsx             | 1 +
 packages/layout/src/link.tsx            | 6 +-----
 packages/layout/src/stack.tsx           | 1 +
 packages/layout/src/text.tsx            | 1 +
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/@types/components.d.ts b/@types/components.d.ts
index 86c53590..31bed42b 100755
--- a/@types/components.d.ts
+++ b/@types/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-05-20T11:19:16.919Z
+ * This file was generated on 2023-09-11T16:17:50.573Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/components.d.ts b/components.d.ts
index 86c53590..31bed42b 100755
--- a/components.d.ts
+++ b/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-05-20T11:19:16.919Z
+ * This file was generated on 2023-09-11T16:17:50.573Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/packages/layout/examples/base-stack.vue b/packages/layout/examples/base-stack.vue
index 65811349..c5213c0d 100644
--- a/packages/layout/examples/base-stack.vue
+++ b/packages/layout/examples/base-stack.vue
@@ -20,7 +20,7 @@
 
     <chakra.div py="4">
       <chakra.div>Vertical</chakra.div>
-      <c-v-stack spacing="2" align="stretch">
+      <c-v-stack as="ul" spacing="2" align="stretch">
         <chakra.div h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div h="40px" bg="pink.100"> 3 </chakra.div>
diff --git a/packages/layout/src/container.tsx b/packages/layout/src/container.tsx
index 0d4157ab..68333fa1 100644
--- a/packages/layout/src/container.tsx
+++ b/packages/layout/src/container.tsx
@@ -12,7 +12,7 @@ import type * as CSS from "csstype"
 
 export interface ContainerProps
   extends HTMLChakraProps<"div">,
-  ThemingProps<"Container"> {
+    ThemingProps<"Container"> {
   /**
    * If `true`, container will center its children
    * regardless of their width.
@@ -54,6 +54,7 @@ export const CContainer = defineComponent({
     return () => (
       <chakra.div
         __label="container"
+        as={props.as}
         __css={{
           ...styles.value,
           ...(props.centerContent && {
diff --git a/packages/layout/src/kbd.tsx b/packages/layout/src/kbd.tsx
index 65485bd2..0f567463 100644
--- a/packages/layout/src/kbd.tsx
+++ b/packages/layout/src/kbd.tsx
@@ -47,6 +47,7 @@ export const CKbd = defineComponent({
     return () => (
       <chakra.kbd
         __label="kbd"
+        as={props.as}
         __css={{ fontFamily: "mono", ...styles.value }}
         {...attrs}
       >
diff --git a/packages/layout/src/link.tsx b/packages/layout/src/link.tsx
index aabca8ec..72004f9a 100644
--- a/packages/layout/src/link.tsx
+++ b/packages/layout/src/link.tsx
@@ -1,11 +1,7 @@
 import { vueThemingProps } from "@chakra-ui/vue-utils"
 import { HTMLChakraProps } from "@chakra-ui/vue-system"
 import { h, defineComponent, PropType, computed } from "vue"
-import {
-  chakra,
-  DOMElements,
-  useStyleConfig,
-} from "@chakra-ui/vue-system"
+import { chakra, DOMElements, useStyleConfig } from "@chakra-ui/vue-system"
 import { ThemingProps } from "@chakra-ui/styled-system"
 import { filterUndefined } from "@chakra-ui/utils"
 import type * as CSS from "csstype"
diff --git a/packages/layout/src/stack.tsx b/packages/layout/src/stack.tsx
index fe2b68f1..1afcd8aa 100644
--- a/packages/layout/src/stack.tsx
+++ b/packages/layout/src/stack.tsx
@@ -180,6 +180,7 @@ export const CStack = defineComponent({
       return (
         <chakra.div
           __label={"stack"}
+          as={props.as}
           display={"flex"}
           alignItems={props.align}
           justifyContent={props.justify}
diff --git a/packages/layout/src/text.tsx b/packages/layout/src/text.tsx
index ce519ca3..b41be2ba 100644
--- a/packages/layout/src/text.tsx
+++ b/packages/layout/src/text.tsx
@@ -68,6 +68,7 @@ export const CText = defineComponent({
     return () => {
       return (
         <chakra.p
+          as={props.as}
           __label="text"
           {...aliasedProps.value}
           __css={styles.value}

From b2c341b01891332aabc0f318026b419d354c7e9a Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Sat, 7 Oct 2023 23:54:59 +0200
Subject: [PATCH 2/5] fix(components): Add example for as prop

---
 packages/layout/examples/base-stack.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/layout/examples/base-stack.vue b/packages/layout/examples/base-stack.vue
index c5213c0d..e4d1f564 100644
--- a/packages/layout/examples/base-stack.vue
+++ b/packages/layout/examples/base-stack.vue
@@ -2,33 +2,43 @@
   <chakra.div py="4">
     <chakra.div py="4">
       <chakra.div>Stack Default</chakra.div>
-      <c-stack spacing="4" divider>
+      <CStack spacing="4" divider>
         <chakra.div w="40px" h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div w="40px" h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div w="40px" h="40px" bg="pink.100"> 3 </chakra.div>
-      </c-stack>
+      </CStack>
     </chakra.div>
 
     <chakra.div py="4">
       <chakra.div>Horizontal</chakra.div>
-      <c-h-stack spacing="10">
+      <CHStack spacing="10">
         <chakra.div w="40px" h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div w="40px" h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div w="40px" h="40px" bg="pink.100"> 3 </chakra.div>
-      </c-h-stack>
+      </CHStack>
     </chakra.div>
 
     <chakra.div py="4">
       <chakra.div>Vertical</chakra.div>
-      <c-v-stack as="ul" spacing="2" align="stretch">
+      <CVStack spacing="2" align="stretch">
         <chakra.div h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div h="40px" bg="pink.100"> 3 </chakra.div>
         <chakra.span></chakra.span>
-      </c-v-stack>
+      </CVStack>
+    </chakra.div>
+
+    <chakra.div py="4">
+      <chakra.div>As prop UL</chakra.div>
+      <CStack as="ul" spacing="2" align="stretch">
+        <chakra.li w="40px" h="40px" bg="yellow.200"> 1 </chakra.li>
+        <chakra.li w="40px" h="40px" bg="tomato"> 2 </chakra.li>
+        <chakra.li w="40px" h="40px" bg="pink.100"> 3 </chakra.li>
+      </CStack>
     </chakra.div>
   </chakra.div>
 </template>
+
 <script lang="ts" setup>
 import { CHStack, CVStack } from "../src"
 import { chakra } from "../../system/src"

From 9eafb7473a986409285e4b3f49277e1c398319a1 Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Sun, 8 Oct 2023 00:04:12 +0200
Subject: [PATCH 3/5] fix(components): Add as prop examples

---
 packages/layout/examples/base-container.vue | 21 +++++-----
 packages/layout/examples/base-stack.vue     |  3 +-
 packages/layout/examples/base-text.vue      | 43 +++++++++++----------
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/packages/layout/examples/base-container.vue b/packages/layout/examples/base-container.vue
index e15e7fb4..2692c0e8 100644
--- a/packages/layout/examples/base-container.vue
+++ b/packages/layout/examples/base-container.vue
@@ -1,17 +1,16 @@
 <template>
-  <c-container>
+  <CContainer>
     There are many benefits to a joint design and development system. Not only
     does it bring benefits to the design team, but it also brings benefits to
     engineering teams. It makes sure that our experiences have a consistent look
     and feel, not just in our design specs, but in production
-  </c-container>
-  <c-v-stack my="4">
-    <c-container max-w="container.xl">Extra-Large Container</c-container>
-    <c-container max-w="container.lg">Large Container</c-container>
-    <c-container max-w="container.md">Medium Container</c-container>
-    <c-container max-w="container.sm">Small Container</c-container>
-  </c-v-stack>
+  </CContainer>
+  <CVStack my="4">
+    <CContainer max-w="container.xl">Extra-Large Container</CContainer>
+    <CContainer max-w="container.lg">Large Container</CContainer>
+    <CContainer max-w="container.md">Medium Container</CContainer>
+    <CContainer max-w="container.sm">Small Container</CContainer>
+  </CVStack>
+
+  <CContainer as="span"> As prop span </CContainer>
 </template>
-<script setup>
-import { CVStack } from "../src"
-</script>
diff --git a/packages/layout/examples/base-stack.vue b/packages/layout/examples/base-stack.vue
index e4d1f564..158cefb4 100644
--- a/packages/layout/examples/base-stack.vue
+++ b/packages/layout/examples/base-stack.vue
@@ -39,7 +39,6 @@
   </chakra.div>
 </template>
 
-<script lang="ts" setup>
-import { CHStack, CVStack } from "../src"
+<script setup lang="ts">
 import { chakra } from "../../system/src"
 </script>
diff --git a/packages/layout/examples/base-text.vue b/packages/layout/examples/base-text.vue
index 744e5309..74a1509d 100644
--- a/packages/layout/examples/base-text.vue
+++ b/packages/layout/examples/base-text.vue
@@ -1,27 +1,30 @@
 <template>
-  <c-stack spacing="{3}">
-    <c-text fontSize="6xl">(6xl) In love with React & Next</c-text>
-    <c-text fontSize="5xl">(5xl) In love with React & Next</c-text>
-    <c-text fontSize="4xl">(4xl) In love with React & Next</c-text>
-    <c-text fontSize="3xl">(3xl) In love with React & Next</c-text>
-    <c-text fontSize="2xl">(2xl) In love with React & Next</c-text>
-    <c-text fontSize="xl">(xl) In love with React & Next</c-text>
-    <c-text fontSize="lg">(lg) In love with React & Next</c-text>
-    <c-text fontSize="md">(md) In love with React & Next</c-text>
-    <c-text fontSize="sm">(sm) In love with React & Next</c-text>
-    <c-text fontSize="xs">(xs) In love with React & Next</c-text>
-  </c-stack>
-  <c-divider my="4" />
-  <c-text>truncated:</c-text>
-  <c-text maxW="sm" isTruncated>
+  <CStack spacing="{3}">
+    <CText fontSize="6xl">(6xl) In love with React & Next</CText>
+    <CText fontSize="5xl">(5xl) In love with React & Next</CText>
+    <CText fontSize="4xl">(4xl) In love with React & Next</CText>
+    <CText fontSize="3xl">(3xl) In love with React & Next</CText>
+    <CText fontSize="2xl">(2xl) In love with React & Next</CText>
+    <CText fontSize="xl">(xl) In love with React & Next</CText>
+    <CText fontSize="lg">(lg) In love with React & Next</CText>
+    <CText fontSize="md">(md) In love with React & Next</CText>
+    <CText fontSize="sm">(sm) In love with React & Next</CText>
+    <CText fontSize="xs">(xs) In love with React & Next</CText>
+  </CStack>
+  <CDivider my="4" />
+  <CText>truncated:</CText>
+  <CText maxW="sm" isTruncated>
     Lorem ipsum is placeholder text commonly used in the graphic, print, and
     publishing industries for previewing layouts and visual mockups.
-  </c-text>
-  <c-divider my="4" />
-  <c-text>line clamp:</c-text>
-  <c-text :noOfLines="[1, 2, 3]" maxW="sm">
+  </CText>
+  <CDivider my="4" />
+  <CText>line clamp:</CText>
+  <CText :noOfLines="[1, 2, 3]" maxW="sm">
     "The quick brown fox jumps over the lazy dog" is an English-language
     pangram—a sentence that contains all of the letters of the English alphabet.
     Owing to its existence, Chakra was created.
-  </c-text>
+  </CText>
+  <CDivider my="4" />
+  <CText>As prop:</CText>
+  <CText as="h1" fontSize="xl"> As prop H1 </CText>
 </template>

From 2bfa6291e063a6a264b82a4910682e1f987f1210 Mon Sep 17 00:00:00 2001
From: Sybren W <sybren.willemot@gmail.com>
Date: Sun, 8 Oct 2023 00:07:27 +0200
Subject: [PATCH 4/5] Create lemon-toes-end.md

---
 .changeset/lemon-toes-end.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lemon-toes-end.md

diff --git a/.changeset/lemon-toes-end.md b/.changeset/lemon-toes-end.md
new file mode 100644
index 00000000..6c0ecb35
--- /dev/null
+++ b/.changeset/lemon-toes-end.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/vue-layout": patch
+---
+
+fix(components): Add missing `as` prop on some layout components

From 8c7d7ef54ed7fb77c1e733f7ab413a40baa29224 Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Mon, 9 Oct 2023 21:18:58 +0200
Subject: [PATCH 5/5] fix(components): Change default as prop of kbd to kdb
 from h2

---
 packages/layout/src/kbd.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/layout/src/kbd.tsx b/packages/layout/src/kbd.tsx
index 0f567463..746073f4 100644
--- a/packages/layout/src/kbd.tsx
+++ b/packages/layout/src/kbd.tsx
@@ -29,7 +29,7 @@ export const CKbd = defineComponent({
   props: {
     as: {
       type: [String, Object] as PropType<DOMElements>,
-      default: "h2",
+      default: "kbd",
     },
     ...vueThemingProps,
   },