update imports

Author: nasdan

docs/examples/basic-with-apply.mdx

@@ -2,13 +2,13 @@
 title: Basic example, apply button
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 This example is quite similar to the [basic example](basic), but instead of applying the changes real time, the user has to click on an 'apply' button to see the updates reflected.
 
 ## Live example
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs
   defaultValue="codesandbox"
   values={[

docs/examples/basic.mdx

@@ -2,15 +2,20 @@
 title: Basic
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Minimum example, here you can just drag the focal point and the example pictures focal point will be updated on real time.
 
 ## How to apply this feature in your code
 
 Import the library styles and the component:
 
-```jsx
+```jsx title="app.tsx" showLineNumbers
+// highlight-start
 import '@lemoncode/react-image-focal-point/style.css';
 import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+// highlight-end
 
 const App = () => {
   return (
@@ -22,28 +27,26 @@ const App = () => {
 
 Then use the component:
 
-```diff
+```jsx title="app.tsx" showLineNumbers
 import '@lemoncode/react-image-focal-point/style.css';
 import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
 
 const App = () => {
   return (
-+   <ImageFocalPoint
-+     src="your-image-src"
-+     onChange={(focalPoint) => {
-+       // Whatever you want to do when the user clicks on the image
-+     }}
-+   />
+    // highlight-start
+    <ImageFocalPoint
+      src="your-image-src"
+      onChange={focalPoint => {
+        // Whatever you want to do when the user clicks on the image
+      }}
+    />
+    // highlight-end
   );
-}
-
+};
 ```
 
 ## Live example
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs
   defaultValue="codesandbox"
   values={[

docs/examples/controlled.mdx

@@ -2,54 +2,60 @@
 title: Controlled
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 In this example you can check how to set an initial focal point value (by default it is show centered, but you can override it).
 
 ## How to apply this feature in your code
 
 Import the library styles and the component. Use it with minimal properties:
 
-```jsx
+```jsx title="app.tsx" showLineNumbers
+// highlight-start
 import '@lemoncode/react-image-focal-point/style.css';
 import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+// highlight-end
 
 const App = () => {
   return (
+    // highlight-start
     <ImageFocalPoint
       src="your-image-src"
       onChange={newFocalPoint => {
         // Whatever you want to do when the user clicks on the image
       }}
     />
+    // highlight-end
   );
 };
 ```
 
 Create a state to provide the initial focal point values and store the new ones:
 
-```diff
+```jsx title="app.tsx" showLineNumbers
 import '@lemoncode/react-image-focal-point/style.css';
 import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
 
 const App = () => {
-+ const [focalPoint, setFocalPoint] = useState({ x: 5, y: 10 });
+  // highlight-next-line
+  const [focalPoint, setFocalPoint] = useState({ x: 5, y: 10 });
   return (
     <ImageFocalPoint
-       src="your-image-src"
-+      focalPoint={focalPoint}
-       onChange={(newFocalPoint) => {
-+        setFocalPoint(newFocalPoint);
-       }}
-     />
+      src="your-image-src"
+      // highlight-next-line
+      focalPoint={focalPoint}
+      onChange={newFocalPoint => {
+        // highlight-next-line
+        setFocalPoint(newFocalPoint);
+      }}
+    />
   );
-}
-
+};
 ```
 
 ## Live example
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs
   defaultValue="codesandbox"
   values={[

docs/examples/styled.mdx

@@ -2,6 +2,9 @@
 title: Styled
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 This example shows how to provide styles to the image focal point component.
 
 ## How to apply this feature in your code
@@ -106,9 +109,6 @@ const App = () => {
 
 ## Live example
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs
   defaultValue="codesandbox"
   values={[

docs/examples/webpack-entry-point.mdx

@@ -2,6 +2,9 @@
 title: Webpack entry point
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 This example is the same as the [basic example](basic), but using the webpack entry point to import the library styles.
 
 ## How to apply this feature in your code
@@ -40,9 +43,6 @@ module.exports = {
 
 ## Live example
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs
   defaultValue="codesandbox"
   values={[