chore(deps): [docs] import @vvibe/vue-styled-components

Author: akinoccc

docs/guide/advances/theming.md

@@ -17,7 +17,7 @@ the `ThemeProvider`'s scope can access this theme object.
 
 ```vue
 <script setup lang="ts">
-import { styled, ThemeProvider } from '@vue-styled-components/core'
+import { styled, ThemeProvider } from '@vvibe/vue-styled-components'
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -54,7 +54,7 @@ and see the updates reflected in your styled components.
 
 ```vue
 <script setup lang="ts">
-import { styled, ThemeProvider } from '@vue-styled-components/core'
+import { styled, ThemeProvider } from '@vvibe/vue-styled-components'
 import { ref } from 'vue'
 
 const theme = ref<Record<string, string>>({ primary: 'blue' })
@@ -112,7 +112,7 @@ and use properties defined in the theme for their styles.
 
 ```vue
 <script setup lang="ts">
-import { ThemeProvider } from '@vue-styled-components/core'
+import { ThemeProvider } from '@vvibe/vue-styled-components'
 import { defineComponent, h, inject } from 'vue'
 
 const Link = defineComponent(() => {

docs/guide/api/core.md

@@ -21,7 +21,7 @@ It is a factory function.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledDiv = styled('div', { color: String })`
   width: 100%;
@@ -50,7 +50,7 @@ const StyledDiv = styled('div', { color: String })`
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledDiv = styled.div`
   width: 40px;
@@ -79,7 +79,7 @@ It is used for passing attributes to styled component.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const InputWithValue = styled.input.attrs({ value: "I'm input with default value. 🥺" })`
   width: 100%;

docs/guide/api/helper.md

@@ -21,7 +21,7 @@ A function to create a `style component` that can be used to handle global style
 ```vue
 
 <script setup>
-  import { createGlobalStyle } from '@vue-styled-components/core'
+  import { createGlobalStyle } from '@vvibe/vue-styled-components'
 
   const GlobalStyle = createGlobalStyle`
     body {
@@ -51,7 +51,7 @@ A function to generate keyframes. It takes a template literal as an argument and
 ```vue
 
 <script setup lang="ts">
-  import { styled, keyframes } from '@vue-styled-components/core'
+  import { styled, keyframes } from '@vvibe/vue-styled-components'
 
   const animation = keyframes`
     from {
@@ -89,7 +89,7 @@ A function to generate CSS from a template literal with interpolations.
 ```vue
 
 <script setup lang="ts">
-  import { styled, css } from '@vue-styled-components/core'
+  import { styled, css } from '@vvibe/vue-styled-components'
 
   const mixin = css`
     color: red;
@@ -123,7 +123,7 @@ A function to add attributes to a `ComponentInstance` or `HTMLElements`.
 ```vue
 
 <script setup lang="ts">
-  import { withAttrs } from '@vue-styled-components/core'
+  import { withAttrs } from '@vvibe/vue-styled-components'
 
   const DivWithAttrs = withAttrs('div', {
     class: 'div-with-attrs'

docs/guide/basic/animations.md

@@ -8,7 +8,7 @@ a styled component.
 
 ```vue
 <script setup lang="ts">
-import { styled, keyframes } from '@vue-styled-components/core'
+import { styled, keyframes } from '@vvibe/vue-styled-components'
 
 const rotate = keyframes`
   from {

docs/guide/basic/extending-styles.md

@@ -13,7 +13,7 @@ code reusability and maintainability.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components';
 
 const BlueButton = styled.button`
   width: 120px;
@@ -24,11 +24,11 @@ const BlueButton = styled.button`
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
   background-color: skyblue;
   font-weight: bold;
-`
+`;
 const RedButton = styled(BlueButton)`
   background-color: darkred;
   color: white;
-`
+`;
 </script>
 
 <template>
@@ -52,7 +52,7 @@ For more advanced use cases, you can pass the `as` props to the styled component
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components';
 
 const BlueButton = styled.button`
   width: 120px;
@@ -63,15 +63,16 @@ const BlueButton = styled.button`
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
   background-color: skyblue;
   font-weight: bold;
-`
+`;
 const RedButton = styled(BlueButton)`
   background-color: darkred;
   color: white;
-`
+`;
 const LinkButton = styled(BlueButton)`
   border: none;
-  color: blue;
-`
+  background-color: transparent;
+  box-shadow: none;
+`;
 </script>
 
 <template>

docs/guide/basic/passed-props.md

@@ -12,7 +12,7 @@ styled input.
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const borderColor = ref('darkred')
 const inputProps = { borderColor: String }

docs/guide/basic/quick-start.md

@@ -30,7 +30,7 @@ pnpm i vue-styled-components
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledDiv = styled.div`
   display: flex;

docs/guide/basic/styling-any-component.md

@@ -25,7 +25,7 @@ Using the `styled` function to style the `Link` component, you can achieve a `da
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 import Link from '/demo/Link.vue'
 
 const StyledLink = styled(Link)`
@@ -49,7 +49,7 @@ a `blue link`.
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+import { styled } from '@vvibe/vue-styled-components'
 
 const StyledLink = styled.a`
   color: darkred !important;