From e257f70916abe58fa0f5587b14a4546dc9af4bdb Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Thu, 29 Jun 2023 08:46:55 +0100
Subject: [PATCH 1/3] feat: wrap component documentation

---
 .../content/examples/wrap/AlignWrap.vue       |  33 ++++
 .../content/examples/wrap/JustifyWrap.vue     |  33 ++++
 .../content/examples/wrap/SimpleWrap.vue      |  33 ++++
 .../content/examples/wrap/SpacingWrap.vue     |  33 ++++
 content/4.components/wrap.md                  | 176 ++++++++++++++++++
 5 files changed, 308 insertions(+)
 create mode 100644 components/content/examples/wrap/AlignWrap.vue
 create mode 100644 components/content/examples/wrap/JustifyWrap.vue
 create mode 100644 components/content/examples/wrap/SimpleWrap.vue
 create mode 100644 components/content/examples/wrap/SpacingWrap.vue
 create mode 100644 content/4.components/wrap.md

diff --git a/components/content/examples/wrap/AlignWrap.vue b/components/content/examples/wrap/AlignWrap.vue
new file mode 100644
index 0000000..359b18c
--- /dev/null
+++ b/components/content/examples/wrap/AlignWrap.vue
@@ -0,0 +1,33 @@
+<template>
+  <c-wrap spacing='30px' align='center'>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='40px' bg='green.200'>
+        Box 2
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='60px' bg='blue.200'>
+        Box 4
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+      </c-center>
+    </c-wrap-item>
+  </c-wrap>
+</template>
+
+<script setup>
+import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
+</script>
diff --git a/components/content/examples/wrap/JustifyWrap.vue b/components/content/examples/wrap/JustifyWrap.vue
new file mode 100644
index 0000000..f5c6348
--- /dev/null
+++ b/components/content/examples/wrap/JustifyWrap.vue
@@ -0,0 +1,33 @@
+<template>
+  <c-wrap spacing='30px' justify='center'>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='green.200'>
+        Box 2
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='blue.200'>
+        Box 4
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+      </c-center>
+    </c-wrap-item>
+  </c-wrap>
+</template>
+
+<script setup>
+import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
+</script>
diff --git a/components/content/examples/wrap/SimpleWrap.vue b/components/content/examples/wrap/SimpleWrap.vue
new file mode 100644
index 0000000..8bec415
--- /dev/null
+++ b/components/content/examples/wrap/SimpleWrap.vue
@@ -0,0 +1,33 @@
+<template>
+  <c-wrap spacing='10px'>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='green.200'>
+        Box 2
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='blue.200'>
+        Box 4
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+      </c-center>
+    </c-wrap-item>
+  </c-wrap>
+</template>
+
+<script setup>
+import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
+</script>
diff --git a/components/content/examples/wrap/SpacingWrap.vue b/components/content/examples/wrap/SpacingWrap.vue
new file mode 100644
index 0000000..dede0de
--- /dev/null
+++ b/components/content/examples/wrap/SpacingWrap.vue
@@ -0,0 +1,33 @@
+<template>
+  <c-wrap spacing='30px'>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='green.200'>
+        Box 2
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='blue.200'>
+        Box 4
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+      </c-center>
+    </c-wrap-item>
+  </c-wrap>
+</template>
+
+<script setup>
+import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
+</script>
diff --git a/content/4.components/wrap.md b/content/4.components/wrap.md
new file mode 100644
index 0000000..a451c16
--- /dev/null
+++ b/content/4.components/wrap.md
@@ -0,0 +1,176 @@
+---
+title: Wrap
+description: Wrap component
+version: 2.0+
+---
+
+# Wrap
+
+Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.
+
+## Import
+
+```js
+import { CWrap, CWrapItem } from '@chakra-ui/vue-next';
+```
+
+- Wrap: Wrap composes the Box component and renders a <ul> tag
+- WrapItem: WrapItem composes the Box component and renders the HTML <li> tag
+
+## Usage
+
+The Wrap component is a `flex` box container that can wrap its children onto multiple lines with `flex-wrap` and `spacing` support. It is useful for displaying elements that are typically placed side-by-side, such as dialog buttons, tags, and chips.
+
+The example below shows how the last `Box` component wraps to the next line because there is not enough space to fit it on the same line as the other Box components.
+
+::showcase
+::simple-wrap
+::
+::
+
+```html
+<c-wrap spacing='10px'>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='green.200'>
+        Box 2
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='blue.200'>
+        Box 4
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+        </c-center>
+    </c-wrap-item>
+</c-wrap>
+```
+
+## Change the spacing
+
+To ensure that the spacing between each child is consistent, even if the children wrap, pass the `spacing` prop.
+
+> Pro Tip: You can pass responsive values for the spacing.
+
+::showcase
+::spacing-wrap
+::
+::
+
+```html
+<c-wrap spacing='30px'>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='green.200'>
+        Box 2
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='blue.200'>
+        Box 4
+        </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+        <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+        </c-center>
+    </c-wrap-item>
+</c-wrap>
+```
+
+## Change the alignment
+
+The `align` prop can be used to change the alignment of a child along the cross axis.
+
+::showcase
+::align-wrap
+::
+::
+
+```html
+<c-wrap spacing='30px' align='center'>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='40px' bg='green.200'>
+        Box 2
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='60px' bg='blue.200'>
+        Box 4
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+      </c-center>
+    </c-wrap-item>
+</c-wrap>
+```
+The `justify` prop specifies the alignment of a child along the main axis.
+
+::showcase
+::justify-wrap
+::
+::
+
+```html
+<c-wrap spacing='30px' justify='center'>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='red.200'>
+        Box 1
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='green.200'>
+        Box 2
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='tomato'>
+        Box 3
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='blue.200'>
+        Box 4
+      </c-center>
+    </c-wrap-item>
+    <c-wrap-item>
+      <c-center w='180px' h='80px' bg='purple.200'>
+        Box 5
+      </c-center>
+    </c-wrap-item>
+</c-wrap>
+```
+

From 9fa44f7a3cbeecba4d3e1d811ba9c5f194c42311 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 7 Jul 2023 08:34:30 +0100
Subject: [PATCH 2/3] refactor: change name casing wrap

---
 content/4.components/wrap.md | 176 +++++++++++++++++------------------
 1 file changed, 88 insertions(+), 88 deletions(-)

diff --git a/content/4.components/wrap.md b/content/4.components/wrap.md
index a451c16..ce744d3 100644
--- a/content/4.components/wrap.md
+++ b/content/4.components/wrap.md
@@ -29,33 +29,33 @@ The example below shows how the last `Box` component wraps to the next line beca
 ::
 
 ```html
-<c-wrap spacing='10px'>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='red.200'>
+<CWrap spacing='10px'>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='green.200'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='green.200'>
         Box 2
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='tomato'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='blue.200'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='blue.200'>
         Box 4
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='purple.200'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-        </c-center>
-    </c-wrap-item>
-</c-wrap>
+        </CCenter>
+    </CWrapItem>
+</CWrap>
 ```
 
 ## Change the spacing
@@ -70,33 +70,33 @@ To ensure that the spacing between each child is consistent, even if the childre
 ::
 
 ```html
-<c-wrap spacing='30px'>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='red.200'>
+<CWrap spacing='30px'>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='green.200'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='green.200'>
         Box 2
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='tomato'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='blue.200'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='blue.200'>
         Box 4
-        </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-        <c-center w='180px' h='80px' bg='purple.200'>
+        </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+        <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-        </c-center>
-    </c-wrap-item>
-</c-wrap>
+        </CCenter>
+    </CWrapItem>
+</CWrap>
 ```
 
 ## Change the alignment
@@ -109,33 +109,33 @@ The `align` prop can be used to change the alignment of a child along the cross
 ::
 
 ```html
-<c-wrap spacing='30px' align='center'>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='red.200'>
+<CWrap spacing='30px' align='center'>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='40px' bg='green.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapitem>
+      <CCenter w='180px' h='40px' bg='green.200'>
         Box 2
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='tomato'>
+      </CCenter>
+    </CWrapitem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='60px' bg='blue.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='60px' bg='blue.200'>
         Box 4
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='purple.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-      </c-center>
-    </c-wrap-item>
-</c-wrap>
+      </CCenter>
+    </CWrapItem>
+</CWrap>
 ```
 The `justify` prop specifies the alignment of a child along the main axis.
 
@@ -145,32 +145,32 @@ The `justify` prop specifies the alignment of a child along the main axis.
 ::
 
 ```html
-<c-wrap spacing='30px' justify='center'>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='red.200'>
+<CWrap spacing='30px' justify='center'>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='green.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='green.200'>
         Box 2
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='tomato'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='blue.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='blue.200'>
         Box 4
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='purple.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-      </c-center>
-    </c-wrap-item>
-</c-wrap>
+      </CCenter>
+    </CWrapItem>
+</CWrap>
 ```
 

From d3311eae6ba7d8f6d2e7c3d5f67250fa0376b58c Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 15:24:17 +0100
Subject: [PATCH 3/3] refactor: change name casing wrap

---
 .../content/examples/wrap/AlignWrap.vue       | 50 +++++++++----------
 .../content/examples/wrap/JustifyWrap.vue     | 50 +++++++++----------
 .../content/examples/wrap/SimpleWrap.vue      | 50 +++++++++----------
 .../content/examples/wrap/SpacingWrap.vue     | 50 +++++++++----------
 4 files changed, 92 insertions(+), 108 deletions(-)

diff --git a/components/content/examples/wrap/AlignWrap.vue b/components/content/examples/wrap/AlignWrap.vue
index 359b18c..765aede 100644
--- a/components/content/examples/wrap/AlignWrap.vue
+++ b/components/content/examples/wrap/AlignWrap.vue
@@ -1,33 +1,29 @@
 <template>
-  <c-wrap spacing='30px' align='center'>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='red.200'>
+  <CWrap spacing='30px' align='center'>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='40px' bg='green.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='40px' bg='green.200'>
         Box 2
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='tomato'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='60px' bg='blue.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='60px' bg='blue.200'>
         Box 4
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='purple.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-      </c-center>
-    </c-wrap-item>
-  </c-wrap>
-</template>
-
-<script setup>
-import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
-</script>
+      </CCenter>
+    </CWrapItem>
+  </CWrap>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/wrap/JustifyWrap.vue b/components/content/examples/wrap/JustifyWrap.vue
index f5c6348..5d9269c 100644
--- a/components/content/examples/wrap/JustifyWrap.vue
+++ b/components/content/examples/wrap/JustifyWrap.vue
@@ -1,33 +1,29 @@
 <template>
-  <c-wrap spacing='30px' justify='center'>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='red.200'>
+  <CWrap spacing='30px' justify='center'>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='green.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='green.200'>
         Box 2
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='tomato'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='blue.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='blue.200'>
         Box 4
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='purple.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-      </c-center>
-    </c-wrap-item>
-  </c-wrap>
-</template>
-
-<script setup>
-import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
-</script>
+      </CCenter>
+    </CWrapItem>
+  </CWrap>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/wrap/SimpleWrap.vue b/components/content/examples/wrap/SimpleWrap.vue
index 8bec415..5dfe29d 100644
--- a/components/content/examples/wrap/SimpleWrap.vue
+++ b/components/content/examples/wrap/SimpleWrap.vue
@@ -1,33 +1,29 @@
 <template>
-  <c-wrap spacing='10px'>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='red.200'>
+  <CWrap spacing='10px'>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='green.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='green.200'>
         Box 2
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='tomato'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='blue.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='blue.200'>
         Box 4
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='purple.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-      </c-center>
-    </c-wrap-item>
-  </c-wrap>
-</template>
-
-<script setup>
-import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
-</script>
+      </CCenter>
+    </CWrapItem>
+  </CWrap>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/wrap/SpacingWrap.vue b/components/content/examples/wrap/SpacingWrap.vue
index dede0de..5bcca14 100644
--- a/components/content/examples/wrap/SpacingWrap.vue
+++ b/components/content/examples/wrap/SpacingWrap.vue
@@ -1,33 +1,29 @@
 <template>
-  <c-wrap spacing='30px'>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='red.200'>
+  <CWrap spacing='30px'>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='red.200'>
         Box 1
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='green.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='green.200'>
         Box 2
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='tomato'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='tomato'>
         Box 3
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='blue.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='blue.200'>
         Box 4
-      </c-center>
-    </c-wrap-item>
-    <c-wrap-item>
-      <c-center w='180px' h='80px' bg='purple.200'>
+      </CCenter>
+    </CWrapItem>
+    <CWrapItem>
+      <CCenter w='180px' h='80px' bg='purple.200'>
         Box 5
-      </c-center>
-    </c-wrap-item>
-  </c-wrap>
-</template>
-
-<script setup>
-import { CWrap, CWrapItem, CCenter } from "@chakra-ui/vue-next"
-</script>
+      </CCenter>
+    </CWrapItem>
+  </CWrap>
+</template>
\ No newline at end of file