update indentation in examples

apps/docs/content/components/icons/Icon.mdx

@@ -28,7 +28,7 @@ Both `Icon` and `createIcon` enable you to style the icon using the styled syste
 
 The `createIcon` function is a convenience wrapper around the process of generating icons with `Icon`, allowing you to achieve the same functionality with less effort.
 
-```jsx
+```tsx
 import CustomIcon16 from "./path/to/custom-icon-16.svg";
 import CustomIcon24 from "./path/to/custom-icon-24.svg";
 import CustomIcon32 from "./path/to/custom-icon-32.svg";
@@ -39,7 +39,7 @@ const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomI
 
 ### Using the Icon component
 
-```jsx
+```tsx
 import CustomIcon16 from "./path/to/custom-icon-16.svg"
 import CustomIcon24 from "./path/to/custom-icon-24.svg"
 import CustomIcon32 from "./path/to/custom-icon-32.svg"

apps/docs/content/getting-started/guides/components.mdx

@@ -70,12 +70,12 @@ Append custom CSS classes to modify styles.
 <Expand title="Example: Creating an AI Card">
 ```tsx
 export function AICard({ children, className, ...rest }: CardProps) {
-  const classNames = clsx(className, "ai-gradiant-border");
-   return (
-       <Card className={classNames} {...rest}>
-           {children}
-       </Card>
-   );
+    const classNames = clsx(className, "ai-gradiant-border");
+    return (
+        <Card className={classNames} {...rest}>
+            {children}
+        </Card>
+    );
 }
 ```
 </Expand>
@@ -113,14 +113,14 @@ You can control the component&apos;s behavior by passing a controlled property.
 <Expand title="Example: Creating a popover that opens on hover.">
 ```tsx
 function MyCustomButtonPopoverTrigger({ children, ...rest }: PopoverTriggerProps) {
-   const ref = useRef();
-   const isHovered = useHover(ref);
-   return (
-       <PopoverTrigger {...rest} open={isHovered}>
-           <Button ref={ref}>Hoverable Button</Button>
-           {children}
-       </PopoverTrigger>
-   );
+    const ref = useRef();
+    const isHovered = useHover(ref);
+    return (
+        <PopoverTrigger {...rest} open={isHovered}>
+            <Button ref={ref}>Hoverable Button</Button>
+            {children}
+        </PopoverTrigger>
+    );
 }
 ```
 </Expand>

apps/docs/content/getting-started/guides/text-crop.mdx

@@ -32,7 +32,7 @@ If you need to implement this technique, you can use the following CSS. Keep in
 
 ```css title="component.css"
 .off-centered-text {
-  font-family: 'ABC Favorit Mono', sans-serif;
+    font-family: 'ABC Favorit Mono', sans-serif;
 }
 
 .off-centenred-text::before,

apps/docs/content/getting-started/installation-path/react.mdx

@@ -27,9 +27,9 @@ import { createRoot } from 'react-dom/client';
 
 const root = createRoot(document.getElementById('root'));
 root.render(
-  <HopperProvider withBodyStyle>
-    <App />
-  </HopperProvider>
+    <HopperProvider withBodyStyle>
+        <App />
+    </HopperProvider>
 );
 ```
 
@@ -48,12 +48,12 @@ Leverage Hopper's components and styled system to build user interfaces efficien
 import { Button, Stack } from "@hopper-ui/components";
 
 const Demo = () => {
-  return (
-    <Stack>
-      <Button>Click me</Button>
-      <Button>Click me</Button>
-    </Stack>
-  )
+    return (
+        <Stack>
+            <Button>Click me</Button>
+            <Button>Click me</Button>
+        </Stack>
+    );
 }
 ```