docs: fix by passing

Author: carwack

website/pages/accordion.mdx

@@ -256,7 +256,7 @@ Pressing **`space`** or **`enter`** when the focus is on the `CAccordionHeader`
 
 ### Props
 `CAccordionHeader` renders a `button` and composes `CPseudoBox`, this means you can
-style it bypassing the pseudo style props `_expanded`, `_disabled`, `_hover`,
+style it by passing the pseudo style props `_expanded`, `_disabled`, `_hover`,
 etc.
 
 ## `CAccordionPanel`

website/pages/badge.mdx

@@ -70,7 +70,7 @@ different style.
 
 <br />
 
-You can also change the size of the badge bypassing `fontSize` prop.
+You can also change the size of the badge by passing `fontSize` prop.
 
 ```vue live=true
 <c-text font-weight="bold">

website/pages/breadcrumb.mdx

@@ -86,7 +86,7 @@ on the `CBreadcrumb` to `false`, and manually add the `CBreadcrumbSeparator` as
 `CBreadcrumbItem`.
 
 You can then pass style props to change the styling of the `CBreadcrumbSeparator`. You can also override
-the content of the `CBreadcrumbSeparator` bypassing its default slot.
+the content of the `CBreadcrumbSeparator` by passing its default slot.
 
 ```vue live=true
 <c-breadcrumb :add-separator="false">

website/pages/checkbox.mdx

@@ -148,7 +148,7 @@ it's children.
 </c-checkbox-group>
 ```
 
-You can also make checkbox group appear horizontally bypassing the `isInline`
+You can also make checkbox group appear horizontally by passing the `isInline`
 prop.
 
 ```vue live=true

website/pages/code.mdx

@@ -27,7 +27,7 @@ import { CCode } from '@chakra-ui/vue';
 
 ### Colors
 
-You can change the color scheme of the component bypassing the `variantColor`
+You can change the color scheme of the component by passing the `variantColor`
 prop.
 
 ```vue live=true

website/pages/heading.mdx

@@ -67,7 +67,7 @@ Pass the `isTruncated` prop to render an ellipsis when the headings exceed
 
 ### Override style
 
-You can override the size of the Heading component bypassing the `fontSize`
+You can override the size of the Heading component by passing the `fontSize`
 prop.
 
 <br />

website/pages/icon.mdx

@@ -24,7 +24,7 @@ basic interface icons, to add your icons,
 import { CIcon } from "@chakra-ui/vue";
 ```
 
-Use an icon bypassing the `name` props. This name must match an icon key in
+Use an icon by passing the `name` props. This name must match an icon key in
 `theme.icons`. By default, the icon inherits the fontSize and color of its
 parent.
 

website/pages/image.mdx

@@ -84,7 +84,7 @@ Below is the correct way to `require` relative assets for the `CImage` and `CAva
 ## Fallback support
 
 You can provide a fallback image for when there is an error loading the `src` of
-the image. You can also opt-out of this behavior bypassing the `ignoreFallback`
+the image. You can also opt-out of this behavior by passing the `ignoreFallback`
 prop.
 
 ```vue live=true

website/pages/switch.mdx

@@ -42,7 +42,7 @@ Pass the size prop to change the `size` of the switch.
 
 ## Switch background color
 
-You can change the checked background color of the switch bypassing the `color` prop.
+You can change the checked background color of the switch by passing the `color` prop.
 
 ```vue live=true
 <c-stack is-inline>

website/pages/tabs.mdx

@@ -88,7 +88,7 @@ Tabs come in 6 different variants to style the tabs: `line`,`enclosed`,
 </c-box>
 ```
 
-You can also change the color for any specific variant bypassing the
+You can also change the color for any specific variant by passing the
 `variantColor`.
 
 > The value of `variantColor` must exist in the theme object and must be a key
@@ -120,7 +120,7 @@ You can also change the color for any specific variant bypassing the
 
 ### Tab sizes
 
-You can change the size of the tab bypassing `size` prop. We support three sizes
+You can change the size of the tab by passing `size` prop. We support three sizes
 `sm`, `md`, `lg`
 
 ```vue live=true
@@ -149,7 +149,7 @@ You can change the size of the tab bypassing `size` prop. We support three sizes
 
 ## Change the tabs alignment
 
-You can change the alignment of the `TabList` bypassing `align` prop. We
+You can change the alignment of the `TabList` by passing `align` prop. We
 support 3 sizes `start`, `center`, `end`.
 
 ```vue live=true