diff --git a/README.md b/README.md
index 35af422f..f8b90b6f 100755
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@
 [![npm download][download-image]][download-url]
 ![minified](https://badgen.net/bundlephobia/min/react-tooltip)
 ![minified gzip](https://badgen.net/bundlephobia/minzip/react-tooltip)
+
 <!-- ![last commit](https://badgen.net/github/last-commit/reacttooltip/react-tooltip) -->
 
 [download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
@@ -17,7 +18,7 @@
   </a>
 </p>
 
-If you like the project, please give the project a GitHub 🌟 
+If you like the project, please give the project a GitHub 🌟
 
 ## Demo
 
@@ -55,20 +56,23 @@ yarn add react-tooltip
 
 ## Usage
 
+> :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer.
+> The `react-tooltip/dist/react-tooltip.css` file is only for style reference and doesn't need to be imported manually anymore if you are already using `v5.13.0` or upper.
+
 > :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
-In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
+> In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
 
 ### Using NPM package
 
 1 . Import the CSS file to set default styling.
 
-> :warning: You must import the CSS file or the tooltip won't show!
+> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
 
 ```js
 import 'react-tooltip/dist/react-tooltip.css'
 ```
 
-This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
+This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file.
 
 2 . Import `react-tooltip` after installation.
 
@@ -123,7 +127,7 @@ You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into yo
 
 mode: `esm` `cjs` `umd`
 
-Don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application.
+If you are using a version older than `v5.13.0` don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application. Version `v5.13.0` or newer already inject the default styles into the page by default.
 
 PS: all the files have a minified version and a non-minified version.
 
@@ -145,7 +149,7 @@ You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-d
 ```jsx
 import ReactDOMServer from 'react-dom/server';
 [...]
-<a 
+<a
   data-tooltip-id="my-tooltip"
   data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
 >
@@ -172,7 +176,7 @@ If there isn't, feel free to [submit a new issue](https://github.com/ReactToolti
 
 ### The tooltip is broken/not showing up
 
-Make sure you've imported the default styling. You only need to do this once on your application, `App.jsx`/`App.tsx` is usually a good place to do it.
+Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.
 
 ```jsx
 import 'react-tooltip/dist/react-tooltip.css'
@@ -184,7 +188,7 @@ If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have e
 
 ### Next.js `TypeError: f is not a function`
 
-This problem seems to be caused by a bug related to the SWC bundler used by Next.js. 
+This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
 The best way to solve this is to upgrade to `next@13.3.0` or later versions.
 
 Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
@@ -199,7 +203,7 @@ This is specially relevant when using components that are conditionally rendered
 
 Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.
 
-We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`). You can also move the `import 'react-tooltip/dist/react-tooltip.css'` there.
+We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).
 
 #### Dynamically generated anchor elements
 
@@ -212,18 +216,12 @@ Here's a simple example on how to improve performance when using dynamically gen
 ```jsx
 // ❌ BAD
 <div className="items-container">
-  {
-    myItems.map(({ id, content, tooltip }) => (
-      <div
-        key={id}
-        className="item"
-        data-tooltip-id={`tooltip-${id}`}
-      >
-        {content}
-        <Tooltip id={`tooltip-${id}`} content={tooltip} />
-      </div>
-    ))
-  }
+  {myItems.map(({ id, content, tooltip }) => (
+    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
+      {content}
+      <Tooltip id={`tooltip-${id}`} content={tooltip} />
+    </div>
+  ))}
 </div>
 ```
 
@@ -268,7 +266,6 @@ Here's a simple example on how to improve performance when using dynamically gen
 
 [wwayne](https://github.com/wwayne) (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)
 
-
 We would gladly accept a new maintainer to help out!
 
 ## Contributing
diff --git a/docs/docs/examples/anchor-select.mdx b/docs/docs/examples/anchor-select.mdx
index de4be7a9..2332d51c 100644
--- a/docs/docs/examples/anchor-select.mdx
+++ b/docs/docs/examples/anchor-select.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Using the ReactTooltip anchor select prop.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -48,7 +47,6 @@ A CSS selector for a specific id begins with a `#`. Don't forget to put it befor
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a id="my-anchor-element-id">◕‿‿◕</a>
 <Tooltip
@@ -59,10 +57,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <TooltipAnchor id="my-anchor-element-id">◕‿‿◕</TooltipAnchor>
-<Tooltip
-  anchorSelect="#my-anchor-element-id"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="#my-anchor-element-id" content="Hello world!" />
 
 #### Using class attribute
 
@@ -74,7 +69,6 @@ A CSS selector for a specific id begins with a `.`. Don't forget to put it befor
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a className="my-anchor-element-class">◕‿‿◕</a>
 <a className="my-anchor-element-class">◕‿‿◕</a>
@@ -88,23 +82,12 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor className="my-anchor-element-class">
-    ◕‿‿◕
-  </TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
 </div>
-<Tooltip
-  anchorSelect=".my-anchor-element-class"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect=".my-anchor-element-class" content="Hello world!" />
 
 ### Complex selectors
 
@@ -122,7 +105,6 @@ This example uses the name attribute, but it works for any HTML attribute (id, c
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a name="my-anchor-element-1">◕‿‿◕</a>
 <a name="my-anchor-element-2">◕‿‿◕</a>
@@ -135,23 +117,12 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
-  <TooltipAnchor name="my-anchor-element-1">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor name="my-anchor-element-2">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor name="my-anchor-element-3">
-    ◕‿‿◕
-  </TooltipAnchor>
-  <TooltipAnchor name="my-anchor-element-4">
-    ◕‿‿◕
-  </TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-1">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-2">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-3">◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor name="my-anchor-element-4">◕‿‿◕</TooltipAnchor>
 </div>
-<Tooltip
-  anchorSelect="[name^='my-anchor-element-']"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="[name^='my-anchor-element-']" content="Hello world!" />
 
 #### Child selector
 
@@ -165,7 +136,6 @@ Often you can just use a class selector or something else much simpler.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <section id="section-anchor-select" style={{ marginTop: '100px' }}>
   <a>◕‿‿◕</a>
@@ -183,7 +153,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 />
 ```
 
-<section 
+<section
   id="section-anchor-select"
   style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}
 >
@@ -199,4 +169,4 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip
   anchorSelect="section[id='section-anchor-select'] > span:nth-child(even)"
   content="I am an even child!"
-/>
\ No newline at end of file
+/>
diff --git a/docs/docs/examples/basic-examples.mdx b/docs/docs/examples/basic-examples.mdx
index c32af94e..6907f822 100644
--- a/docs/docs/examples/basic-examples.mdx
+++ b/docs/docs/examples/basic-examples.mdx
@@ -7,7 +7,6 @@ sidebar_position: 0
 Some basic examples of how to use the ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
   ◕‿‿◕
@@ -49,7 +47,15 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip id="my-tooltip" />
 ```
 
-<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
+<div
+  style={{
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+    margin: 'auto',
+    gap: '5px',
+  }}
+>
   <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
     ◕‿‿◕
   </TooltipAnchor>
@@ -61,25 +67,20 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ### Props
 
-
 #### Using anchor element `id`
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a id="my-anchor-element">◕‿‿◕</a>
-<Tooltip 
+<Tooltip
   anchorSelect="#my-anchor-element"
   content="Hello world!"
 />
 ```
 
 <TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
-<Tooltip 
-  anchorSelect="#my-anchor-element"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />
 
 #### Using anchor elements `className`
 
@@ -91,21 +92,25 @@ Check the [Anchor select examples](./anchor-select.mdx) for more complex use cas
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a className="my-anchor-element">◕‿‿◕</a>
 <a className="my-anchor-element">◕‿‿◕</a>
-<Tooltip 
+<Tooltip
   anchorSelect=".my-anchor-element"
   content="Hello world!"
 />
 ```
 
-<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
+<div
+  style={{
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+    margin: 'auto',
+    gap: '5px',
+  }}
+>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
 </div>
-<Tooltip 
-  anchorSelect=".my-anchor-element"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />
diff --git a/docs/docs/examples/children.mdx b/docs/docs/examples/children.mdx
index 5435e04e..efb51221 100644
--- a/docs/docs/examples/children.mdx
+++ b/docs/docs/examples/children.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Using children for setting the ReactTooltip content.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -41,7 +40,6 @@ This is useful for setting a placeholder for the tooltip content.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip">◕‿‿◕</a>
 <Tooltip id="my-tooltip">
diff --git a/docs/docs/examples/content.mdx b/docs/docs/examples/content.mdx
index 1efb6921..f4af61ef 100644
--- a/docs/docs/examples/content.mdx
+++ b/docs/docs/examples/content.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Setting the ReactTooltip content.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -34,12 +33,10 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
   )
 }
 
-
 ### Using `data-tooltip-content` anchor element attribute
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   data-tooltip-id="my-tooltip"
@@ -50,10 +47,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip id="my-tooltip" />
 ```
 
-<TooltipAnchor
-  data-tooltip-id="my-tooltip"
-  data-tooltip-content="Hello world!"
->
+<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
   ◕‿‿◕
 </TooltipAnchor>
 <Tooltip id="my-tooltip" />
@@ -62,17 +56,13 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a id="my-anchor-element">◕‿‿◕</a>
-<Tooltip 
+<Tooltip
   anchorSelect="#my-anchor-element"
   content="Hello world!"
 />
 ```
 
 <TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
-<Tooltip
-  anchorSelect="#my-anchor-element"
-  content="Hello world!"
-/>
+<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />
diff --git a/docs/docs/examples/delay.mdx b/docs/docs/examples/delay.mdx
index cbaf49c3..f4e3a9b1 100644
--- a/docs/docs/examples/delay.mdx
+++ b/docs/docs/examples/delay.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Delay showing/hiding the ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   data-tooltip-id="tooltip-anchor-hide"
@@ -63,7 +61,6 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   data-tooltip-id="tooltip-anchor-show"
diff --git a/docs/docs/examples/events.mdx b/docs/docs/examples/events.mdx
index 305a86c6..037c72a9 100644
--- a/docs/docs/examples/events.mdx
+++ b/docs/docs/examples/events.mdx
@@ -13,7 +13,6 @@ This has been deprecated. Use the `openOnClick` tooltip prop instead.
 :::
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -50,10 +49,9 @@ This is the default event option, so it doesn't have to be manually set.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip"> ◕‿‿◕ </a>
-<Tooltip 
+<Tooltip
   id="my-tooltip"
   content="Hello world!"
   events={['hover']}
@@ -61,11 +59,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <TooltipAnchor data-tooltip-id="my-tooltip">◕‿‿◕</TooltipAnchor>
-<Tooltip
-  id="my-tooltip"
-  content="Hello world!"
-  events={['hover']}
-/>
+<Tooltip id="my-tooltip" content="Hello world!" events={['hover']} />
 
 ### Using `click`
 
@@ -77,10 +71,9 @@ Clicking anywhere outside the anchor element will close the tooltip.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip-click"> ◕‿‿◕ </a>
-<Tooltip 
+<Tooltip
   id="my-tooltip-click"
   content="Hello world!"
   events={['click']}
@@ -88,8 +81,4 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <TooltipAnchor data-tooltip-id="my-tooltip-click">◕‿‿◕</TooltipAnchor>
-<Tooltip
-  id="my-tooltip-click"
-  content="Hello world!"
-  events={['click']}
-/>
+<Tooltip id="my-tooltip-click" content="Hello world!" events={['click']} />
diff --git a/docs/docs/examples/html.mdx b/docs/docs/examples/html.mdx
index 6cf330aa..783a7b24 100644
--- a/docs/docs/examples/html.mdx
+++ b/docs/docs/examples/html.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Using HTML content in ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -44,7 +43,6 @@ You can also use [`renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-s
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   data-tooltip-id="my-tooltip-data-html"
@@ -63,7 +61,6 @@ import 'react-tooltip/dist/react-tooltip.css';
 </TooltipAnchor>
 <Tooltip id="my-tooltip-data-html" />
 
-
 ### Using `html` prop
 
 :::info
@@ -74,17 +71,16 @@ You should probably pass the content as children to the tooltip instead.
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip-html-prop">◕‿‿◕</a>
-<Tooltip 
+<Tooltip
   id="my-tooltip-html-prop"
   html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
 />
 ```
 
 <TooltipAnchor data-tooltip-id="my-tooltip-html-prop">◕‿‿◕</TooltipAnchor>
-<Tooltip 
+<Tooltip
   id="my-tooltip-html-prop"
   html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
 />
diff --git a/docs/docs/examples/multiline.mdx b/docs/docs/examples/multiline.mdx
index cff7c08a..377f2954 100644
--- a/docs/docs/examples/multiline.mdx
+++ b/docs/docs/examples/multiline.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Multiline content in ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -42,10 +41,8 @@ You can also use [`renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-s
 
 :::
 
-
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   data-tooltip-id="my-tooltip-multiline"
@@ -64,12 +61,10 @@ import 'react-tooltip/dist/react-tooltip.css';
 </TooltipAnchor>
 <Tooltip id="my-tooltip-multiline" />
 
-
 ### Using tooltip children and JSX
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip-children-multiline"> ◕‿‿◕ </a>
 <Tooltip id="my-tooltip-children-multiline">
diff --git a/docs/docs/examples/offset.mdx b/docs/docs/examples/offset.mdx
index f28a49c9..2f7c9007 100644
--- a/docs/docs/examples/offset.mdx
+++ b/docs/docs/examples/offset.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Offset option for the ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip" data-tooltip-offset={10}>◕‿‿◕</a>
 <a data-tooltip-id="my-tooltip" data-tooltip-offset={20}>◕‿‿◕</a>
@@ -49,11 +47,21 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
-  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={10}>◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={20}>◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={30}>◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={40}>◕‿‿◕</TooltipAnchor>
-  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={50}>◕‿‿◕</TooltipAnchor>
+  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={10}>
+    ◕‿‿◕
+  </TooltipAnchor>
+  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={20}>
+    ◕‿‿◕
+  </TooltipAnchor>
+  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={30}>
+    ◕‿‿◕
+  </TooltipAnchor>
+  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={40}>
+    ◕‿‿◕
+  </TooltipAnchor>
+  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-offset={50}>
+    ◕‿‿◕
+  </TooltipAnchor>
   <Tooltip id="my-tooltip" content="Hello world!" />
 </div>
 
@@ -61,7 +69,6 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a data-tooltip-id="my-tooltip-offset-prop">◕‿‿◕</a>
 <Tooltip
@@ -72,8 +79,4 @@ import 'react-tooltip/dist/react-tooltip.css';
 ```
 
 <TooltipAnchor data-tooltip-id="my-tooltip-offset-prop">◕‿‿◕</TooltipAnchor>
-<Tooltip
-  id="my-tooltip-offset-prop"
-  content="Hello world!"
-  offset={30}
-/>
+<Tooltip id="my-tooltip-offset-prop" content="Hello world!" offset={30} />
diff --git a/docs/docs/examples/place.mdx b/docs/docs/examples/place.mdx
index e68603e3..ab823a6e 100644
--- a/docs/docs/examples/place.mdx
+++ b/docs/docs/examples/place.mdx
@@ -8,7 +8,6 @@ Changing the placement for the ReactTooltip component.
 
 import { useState } from 'react';
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -41,7 +40,6 @@ The `place` prop and the `data-tooltip-place` attribute accept the following val
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a id="my-tooltip-anchor">◕‿‿◕</a>
 <Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
@@ -60,7 +58,6 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 const PLACES = ['top', 'right', 'bottom', 'left']
 const [place, setPlace] = useState(0)
diff --git a/docs/docs/examples/provider-wrapper.mdx b/docs/docs/examples/provider-wrapper.mdx
index a78683af..e93922f9 100644
--- a/docs/docs/examples/provider-wrapper.mdx
+++ b/docs/docs/examples/provider-wrapper.mdx
@@ -13,7 +13,6 @@ This has been deprecated. Use the `data-tooltip-id` attribute, or the `anchorSel
 :::
 
 import { Tooltip, TooltipProvider, TooltipWrapper } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -40,11 +39,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 }
 
 export const WithProvider = ({ children }) => {
-  return (
-    <TooltipProvider>
-      {children}
-    </TooltipProvider>
-  )
+  return <TooltipProvider>{children}</TooltipProvider>
 }
 
 ### Setting up `<TooltipProvider />`
@@ -54,8 +49,7 @@ For simplicity, just wrap your whole application with the provider.
 
 ```jsx
 // this is usually the `src/App.jsx` (or `src/App.tsx`) file
-import { TooltipProvider } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
+import { TooltipProvider } from 'react-tooltip'
 
 function App() {
   return (
@@ -65,14 +59,13 @@ function App() {
   )
 }
 
-export default App;
+export default App
 ```
 
 ### Using `<TooltipWrapper />`
 
 ```jsx
 import { Tooltip, TooltipWrapper } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <TooltipWrapper content="I am using a global tooltip!">
   <a> ◕‿‿◕ </a>
@@ -87,14 +80,10 @@ import 'react-tooltip/dist/react-tooltip.css';
 <div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
   <WithProvider>
     <TooltipWrapper content="I am using a global tooltip!">
-      <TooltipAnchor>
-        ◕‿‿◕
-      </TooltipAnchor>
+      <TooltipAnchor>◕‿‿◕</TooltipAnchor>
     </TooltipWrapper>
     <TooltipWrapper content="This is the same tooltip!">
-      <TooltipAnchor>
-        ◕‿‿◕
-      </TooltipAnchor>
+      <TooltipAnchor>◕‿‿◕</TooltipAnchor>
     </TooltipWrapper>
     <Tooltip />
   </WithProvider>
@@ -112,7 +101,6 @@ If you need to use multiple tooltips, each with multiple anchors, use the toolti
 
 ```jsx
 import { Tooltip, TooltipWrapper } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <TooltipWrapper tooltipId="tooltip-1">
   <a> ◕‿‿◕ </a>
@@ -133,24 +121,16 @@ import 'react-tooltip/dist/react-tooltip.css';
 <div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
   <WithProvider>
     <TooltipWrapper tooltipId="tooltip-1">
-      <TooltipAnchor>
-        ◕‿‿◕
-      </TooltipAnchor>
+      <TooltipAnchor>◕‿‿◕</TooltipAnchor>
     </TooltipWrapper>
     <TooltipWrapper tooltipId="tooltip-1">
-      <TooltipAnchor>
-        ◕‿‿◕
-      </TooltipAnchor>
+      <TooltipAnchor>◕‿‿◕</TooltipAnchor>
     </TooltipWrapper>
     <TooltipWrapper tooltipId="tooltip-2">
-      <TooltipAnchor>
-        ◕‿‿◕
-      </TooltipAnchor>
+      <TooltipAnchor>◕‿‿◕</TooltipAnchor>
     </TooltipWrapper>
     <TooltipWrapper tooltipId="tooltip-2">
-      <TooltipAnchor>
-        ◕‿‿◕
-      </TooltipAnchor>
+      <TooltipAnchor>◕‿‿◕</TooltipAnchor>
     </TooltipWrapper>
     <Tooltip id="tooltip-1" content="I am using tooltip-1" />
     <Tooltip id="tooltip-2" content="I am using tooltip-2" />
diff --git a/docs/docs/examples/render.mdx b/docs/docs/examples/render.mdx
index 92721a5f..f5517adc 100644
--- a/docs/docs/examples/render.mdx
+++ b/docs/docs/examples/render.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Using the ReactTooltip render prop to render dynamic content based on the active anchor element.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -40,7 +39,7 @@ The `render` prop can be used to render the tooltip content dynamically based on
 The function signature is as follows:
 
 ```ts
-(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
+;(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
 ```
 
 - `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element
@@ -49,24 +48,23 @@ The function signature is as follows:
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
-<a 
-  data-tooltip-id="my-tooltip" 
+<a
+  data-tooltip-id="my-tooltip"
   data-tooltip-content="1"
   data-some-relevant-attr="wow"
 >
   ◕‿‿◕
 </a>
-<a 
-  data-tooltip-id="my-tooltip" 
+<a
+  data-tooltip-id="my-tooltip"
   data-tooltip-content="2"
   data-some-relevant-attr="so relevant"
 >
   ◕‿‿◕
 </a>
-<a 
-  data-tooltip-id="my-tooltip" 
+<a
+  data-tooltip-id="my-tooltip"
   data-tooltip-content="3"
   data-some-relevant-attr="much important"
 >
@@ -86,21 +84,21 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 <div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
   <TooltipAnchor
-    data-tooltip-id="my-tooltip" 
+    data-tooltip-id="my-tooltip"
     data-tooltip-content="1"
     data-some-relevant-attr="wow"
   >
     ◕‿‿◕
   </TooltipAnchor>
   <TooltipAnchor
-    data-tooltip-id="my-tooltip" 
+    data-tooltip-id="my-tooltip"
     data-tooltip-content="2"
     data-some-relevant-attr="so relevant"
   >
     ◕‿‿◕
   </TooltipAnchor>
   <TooltipAnchor
-    data-tooltip-id="my-tooltip" 
+    data-tooltip-id="my-tooltip"
     data-tooltip-content="3"
     data-some-relevant-attr="much important"
   >
@@ -111,11 +109,8 @@ import 'react-tooltip/dist/react-tooltip.css';
     render={({ content, activeAnchor }) => (
       <span>
         The element #{content} is currently active.
-        <br/>
-        Relevant attribute:{' '}
-        {
-          activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'
-        }
+        <br />
+        Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'}
       </span>
     )}
   />
diff --git a/docs/docs/examples/state.mdx b/docs/docs/examples/state.mdx
index 479593fc..d92f8b13 100644
--- a/docs/docs/examples/state.mdx
+++ b/docs/docs/examples/state.mdx
@@ -8,7 +8,6 @@ Controlled state example for the ReactTooltip component.
 
 import { useState } from 'react'
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, background, ...rest }) => {
   return (
@@ -51,7 +50,6 @@ It is just a demonstration, and you can come up with use cases as complex as you
 ```jsx
 import { useState } from 'react';
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 const [isOpen, setIsOpen] = useState(false)
 
@@ -89,34 +87,19 @@ export const ControlledStateExample = () => {
   const [isOpen, setIsOpen] = useState(false)
   return (
     <>
-      <TooltipAnchor
-        data-tooltip-id="my-tooltip"
-        onMouseEnter={() => setIsOpen(true)}
-      >
+      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
         ◕‿‿◕
       </TooltipAnchor>
-      <TooltipAnchor
-        data-tooltip-id="my-tooltip"
-        onMouseEnter={() => setIsOpen(true)}
-      >
+      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
         ◕‿‿◕
       </TooltipAnchor>
-      <TooltipAnchor
-        data-tooltip-id="my-tooltip"
-        onMouseEnter={() => setIsOpen(true)}
-      >
+      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
         ◕‿‿◕
       </TooltipAnchor>
-      <TooltipAnchor
-        data-tooltip-id="my-tooltip"
-        onMouseEnter={() => setIsOpen(true)}
-      >
+      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
         ◕‿‿◕
       </TooltipAnchor>
-      <TooltipAnchor
-        data-tooltip-id="my-tooltip"
-        onMouseEnter={() => setIsOpen(true)}
-      >
+      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
         ◕‿‿◕
       </TooltipAnchor>
       <TooltipAnchor
@@ -128,11 +111,7 @@ export const ControlledStateExample = () => {
       >
         ◕‿‿◕
       </TooltipAnchor>
-      <Tooltip
-        id="my-tooltip"
-        content="Hello world!"
-        isOpen={isOpen}
-      />
+      <Tooltip id="my-tooltip" content="Hello world!" isOpen={isOpen} />
     </>
   )
 }
diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx
index d6c1a21f..836448a0 100644
--- a/docs/docs/examples/styling.mdx
+++ b/docs/docs/examples/styling.mdx
@@ -9,7 +9,6 @@ How to customize tooltip styles in ReactTooltip styles.
 Tooltip arrow inherits its background color from tooltip (its parent).
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 import CodeBlock from '@theme/CodeBlock'
 import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css'
 
@@ -43,7 +42,6 @@ You can add styles into the tooltip with inline styling.
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a
   data-tooltip-id="my-tooltip-inline"
@@ -57,13 +55,11 @@ import 'react-tooltip/dist/react-tooltip.css'
 />
 ```
 
-<div
-  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
->
+<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}>
   <TooltipAnchor data-tooltip-id="my-tooltip-inline" data-tooltip-content="Hello world!">
     ◕‿‿◕
   </TooltipAnchor>
-  <Tooltip id="my-tooltip-inline" style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }} />
+  <Tooltip id="my-tooltip-inline" style={{ backgroundColor: 'rgb(0, 255, 30)', color: '#222' }} />
 </div>
 
 ### Classes
@@ -74,7 +70,6 @@ Using CSS Specificity you can add a class with more specificity than the default
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example {
@@ -98,10 +93,7 @@ import 'react-tooltip/dist/react-tooltip.css'
   className="example-container"
   style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
 >
-  <TooltipAnchor
-    data-tooltip-id="my-tooltip-styles"
-    data-tooltip-content="Hello world!"
-  >
+  <TooltipAnchor data-tooltip-id="my-tooltip-styles" data-tooltip-content="Hello world!">
     ◕‿‿◕
   </TooltipAnchor>
   <Tooltip id="my-tooltip-styles" className="example" />
@@ -149,7 +141,6 @@ To make this work as expected, we need to add another level of specificity:
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-orange {
@@ -173,17 +164,13 @@ import 'react-tooltip/dist/react-tooltip.css'
   <TooltipAnchor data-tooltip-id="my-tooltip-orange" data-tooltip-content="Hello world!">
     ◕‿‿◕
   </TooltipAnchor>
-  <Tooltip
-    id="my-tooltip-orange"
-    className="example-orange"
-  />
+  <Tooltip id="my-tooltip-orange" className="example-orange" />
 </div>
 
 #### Pink
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-pink {
@@ -214,7 +201,6 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-diff-arrow {
@@ -251,7 +237,6 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-no-radius {
@@ -281,7 +266,6 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-rounded {
@@ -313,7 +297,6 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-no-padding {
@@ -343,7 +326,6 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
 .example-container .example-padding {
@@ -369,7 +351,7 @@ import 'react-tooltip/dist/react-tooltip.css'
   <Tooltip id="my-tooltip-padding" className="example-padding" />
 </div>
 
-----
+---
 
 :::info
 
diff --git a/docs/docs/examples/variant.mdx b/docs/docs/examples/variant.mdx
index c7ac0a5a..2c052364 100644
--- a/docs/docs/examples/variant.mdx
+++ b/docs/docs/examples/variant.mdx
@@ -7,7 +7,6 @@ sidebar_position: 1
 Default color stylings available for the ReactTooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -37,7 +36,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   data-tooltip-id="my-tooltip"
diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx
index 758b0920..9beb573f 100644
--- a/docs/docs/getting-started.mdx
+++ b/docs/docs/getting-started.mdx
@@ -9,7 +9,6 @@ This docs is related to V5, [if you are using V4 please check here](https://reac
 A react tooltip is a floating react element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -60,7 +59,13 @@ For more info and more complex use cases using `anchorSelect`, check [the exampl
 
 :::caution
 
-You must import the CSS file or the tooltip won't show!
+If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
+
+:::
+
+:::info
+
+If you are using `v5.13.0` or newer, you don't need to import the css file manually, the styles will be injected into the page by default.
 
 :::
 
@@ -76,7 +81,6 @@ There are two ways to use ReactTooltip.
 1. Using props into ReactTooltip Element.
 2. Using data-attributes on anchor element.
 
-
 ### Using anchor data attributes
 
 1 . Import `react-tooltip` after installation.
@@ -94,9 +98,9 @@ import { Tooltip } from 'react-tooltip'
 :::
 
 ```jsx
-<a 
-  data-tooltip-id="my-tooltip" 
-  data-tooltip-content="Hello world!" 
+<a
+  data-tooltip-id="my-tooltip"
+  data-tooltip-content="Hello world!"
   data-tooltip-place="top"
 >
   ◕‿‿◕
@@ -119,22 +123,19 @@ Don't forget to set the tooltip id, or it will not work!
 ```
 
 <div style={{ display: 'flex', columnGap: '8px', justifyContent: 'center', paddingTop: '18px' }}>
-  <TooltipAnchor 
-    data-tooltip-id="my-tooltip" 
-    data-tooltip-content="Hello world!" 
+  <TooltipAnchor
+    data-tooltip-id="my-tooltip"
+    data-tooltip-content="Hello world!"
     data-tooltip-place="top"
   >
     ◕‿‿◕
-  </TooltipAnchor><TooltipAnchor 
-    data-tooltip-id="my-tooltip" 
-    data-tooltip-content="Hello to you too!" 
-  >
+  </TooltipAnchor>
+  <TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
     ◕‿‿◕
   </TooltipAnchor>
   <Tooltip id="my-tooltip" />
 </div>
 
-
 ### Using ReactTooltip props
 
 1 . Import `react-tooltip` after installation.
@@ -171,17 +172,13 @@ import { Tooltip } from 'react-tooltip'
 </Tooltip>
 ```
 
-
 <div style={{ display: 'flex', columnGap: '8px', justifyContent: 'center', paddingTop: '18px' }}>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
-  <Tooltip anchorSelect=".my-anchor-element">
-    Hello world!
-  </Tooltip>
+  <Tooltip anchorSelect=".my-anchor-element">Hello world!</Tooltip>
 </div>
 
-
 ### Clickable tooltip
 
 By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the `clickable` prop.
diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
index 09ebbc8f..16339618 100644
--- a/docs/docs/options.mdx
+++ b/docs/docs/options.mdx
@@ -7,7 +7,6 @@ sidebar_position: 3
 All available data attributes for the anchor element and props for the tooltip component.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -38,9 +37,8 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
-<a 
+<a
   data-tooltip-id="my-tooltip"
   data-tooltip-content="Hello world!"
 >
@@ -49,10 +47,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip id="my-tooltip" />
 ```
 
-<TooltipAnchor 
-  data-tooltip-id="my-tooltip"
-  data-tooltip-content="Hello world!"
->
+<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
   ◕‿‿◕
 </TooltipAnchor>
 <Tooltip id="my-tooltip" />
@@ -79,52 +74,48 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a id="my-anchor-element">◕‿‿◕</a>
-<Tooltip 
-  anchorSelect="#my-anchor-element" 
-  content="Hello world!" 
+<Tooltip
+  anchorSelect="#my-anchor-element"
+  content="Hello world!"
 />
 ```
 
 <TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
-<Tooltip 
-  anchorSelect="#my-anchor-element"
-  content="Hello world!" 
-/>
+<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />
 
 #### Available props
 
-| name               | type                       | required  | default                   | values                                            | description                                                                                                                                                     |
-| ------------------ | -------------------------- | --------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                   | no        |                           |                                                   | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally                                             |
-| `classNameArrow`   | `string`                   | no        |                           |                                                   | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally                                 |
-| `content`          | `string`                   | no        |                           |                                                   | Content to de displayed in tooltip (`html` prop is priorized over `content`)                                                                                    |
-| ~~`html`~~         | ~~`string`~~               | ~~no~~    |                           |                                                   | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead                                                          |
-| `render`           | `function`                 | no        |                           |                                                   | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx)     |
-| `place`            | `string`                   | no        | `top`                     | `top` `right` `bottom` `left`                     | Position relative to the anchor element where the tooltip will be rendered (if possible)                                                                        |
-| `offset`           | `number`                   | no        | `10`                      | any `number`                                      | Space between the tooltip element and anchor element (arrow not included in calculation)                                                                        |
-| `id`               | `string`                   | no        |                           | any `string`                                      | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element                                                                                  |
-| ~~`anchorId`~~     | ~~`string`~~               | ~~no~~    |                           | ~~any `string`~~                                  | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead                                       |
-| `anchorSelect`     | CSS selector               | no        |                           | any valid CSS selector                            | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details                                                       |
-| `variant`          | `string`                   | no        | `dark`                    | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets                                                                                                                   |
-| `wrapper`          | HTML tag                   | no        | `div`                     | `div` `span` `p` ...                              | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag                                                                      |
-| `children`         | React node                 | no        | `undefined`               | valid React children                              | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content            |
-| ~~`events`~~       | ~~`string[]`~~             | ~~no~~    | ~~`hover`~~               | ~~`hover` `click`~~                               | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead                                          |
-| `openOnClick`      | `boolean`                  | no        | `false`                   | `true` `false`                                    | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element                                                        |
-| `positionStrategy` | `string`                   | no        | `absolute`                | `absolute` `fixed`                                | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container                       |
-| `delayShow`        | `number`                   | no        |                           | any `number`                                      | The delay (in ms) before showing the tooltip                                                                                                                    |
-| `delayHide`        | `number`                   | no        |                           | any `number`                                      | The delay (in ms) before hiding the tooltip                                                                                                                     |
-| `float`            | `boolean`                  | no        | `false`                   | `true` `false`                                    | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                                                  |
-| `hidden`           | `boolean`                  | no        | `false`                   | `true` `false`                                    | Tooltip will not be shown                                                                                                                                       |
-| `noArrow`          | `boolean`                  | no        | `false`                   | `true` `false`                                    | Tooltip arrow will not be shown                                                                                                                                 |
-| `clickable`        | `boolean`                  | no        | `false`                   | `true` `false`                                    | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs                                                                        |
-| `closeOnEsc`       | `boolean`                  | no        | `false`                   | `true` `false`                                    | Pressing escape key will close the tooltip                                                                                                                      |
-| `style`            | `CSSProperties`            | no        |                           | a React inline style                              | Add inline styles directly to the tooltip                                                                                                                       |
-| `position`         | `{ x: number; y: number }` | no        |                           | any `number` value for both `x` and `y`           | Override the tooltip position on the DOM                                                                                                                        |
-| `isOpen`           | `boolean`                  | no        | handled by internal state | `true` `false`                                    | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
-| `setIsOpen`        | `function`                 | no        |                           |                                                   | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip                                       |
-| `afterShow`        | `function`                 | no        |                           |                                                   | A function to be called after the tooltip is shown                                                                                                              |
-| `afterHide`        | `function`                 | no        |                           |                                                   | A function to be called after the tooltip is hidden                                                                                                             |
-| `middlewares`      | `Middleware[]`             | no        |                           | array of valid `floating-ui` middlewares          | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information                                 |
+| name               | type                       | required | default                   | values                                            | description                                                                                                                                                     |
+| ------------------ | -------------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                   | no       |                           |                                                   | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally                                             |
+| `classNameArrow`   | `string`                   | no       |                           |                                                   | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally                                 |
+| `content`          | `string`                   | no       |                           |                                                   | Content to de displayed in tooltip (`html` prop is priorized over `content`)                                                                                    |
+| ~~`html`~~         | ~~`string`~~               | ~~no~~   |                           |                                                   | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead                                                          |
+| `render`           | `function`                 | no       |                           |                                                   | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx)     |
+| `place`            | `string`                   | no       | `top`                     | `top` `right` `bottom` `left`                     | Position relative to the anchor element where the tooltip will be rendered (if possible)                                                                        |
+| `offset`           | `number`                   | no       | `10`                      | any `number`                                      | Space between the tooltip element and anchor element (arrow not included in calculation)                                                                        |
+| `id`               | `string`                   | no       |                           | any `string`                                      | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element                                                                                  |
+| ~~`anchorId`~~     | ~~`string`~~               | ~~no~~   |                           | ~~any `string`~~                                  | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead                                       |
+| `anchorSelect`     | CSS selector               | no       |                           | any valid CSS selector                            | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details                                                       |
+| `variant`          | `string`                   | no       | `dark`                    | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets                                                                                                                   |
+| `wrapper`          | HTML tag                   | no       | `div`                     | `div` `span` `p` ...                              | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag                                                                      |
+| `children`         | React node                 | no       | `undefined`               | valid React children                              | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content            |
+| ~~`events`~~       | ~~`string[]`~~             | ~~no~~   | ~~`hover`~~               | ~~`hover` `click`~~                               | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead                                          |
+| `openOnClick`      | `boolean`                  | no       | `false`                   | `true` `false`                                    | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element                                                        |
+| `positionStrategy` | `string`                   | no       | `absolute`                | `absolute` `fixed`                                | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container                       |
+| `delayShow`        | `number`                   | no       |                           | any `number`                                      | The delay (in ms) before showing the tooltip                                                                                                                    |
+| `delayHide`        | `number`                   | no       |                           | any `number`                                      | The delay (in ms) before hiding the tooltip                                                                                                                     |
+| `float`            | `boolean`                  | no       | `false`                   | `true` `false`                                    | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                                                  |
+| `hidden`           | `boolean`                  | no       | `false`                   | `true` `false`                                    | Tooltip will not be shown                                                                                                                                       |
+| `noArrow`          | `boolean`                  | no       | `false`                   | `true` `false`                                    | Tooltip arrow will not be shown                                                                                                                                 |
+| `clickable`        | `boolean`                  | no       | `false`                   | `true` `false`                                    | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs                                                                        |
+| `closeOnEsc`       | `boolean`                  | no       | `false`                   | `true` `false`                                    | Pressing escape key will close the tooltip                                                                                                                      |
+| `style`            | `CSSProperties`            | no       |                           | a React inline style                              | Add inline styles directly to the tooltip                                                                                                                       |
+| `position`         | `{ x: number; y: number }` | no       |                           | any `number` value for both `x` and `y`           | Override the tooltip position on the DOM                                                                                                                        |
+| `isOpen`           | `boolean`                  | no       | handled by internal state | `true` `false`                                    | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
+| `setIsOpen`        | `function`                 | no       |                           |                                                   | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip                                       |
+| `afterShow`        | `function`                 | no       |                           |                                                   | A function to be called after the tooltip is shown                                                                                                              |
+| `afterHide`        | `function`                 | no       |                           |                                                   | A function to be called after the tooltip is hidden                                                                                                             |
+| `middlewares`      | `Middleware[]`             | no       |                           | array of valid `floating-ui` middlewares          | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information                                 |
diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx
index a3740df1..e320ee23 100644
--- a/docs/docs/troubleshooting.mdx
+++ b/docs/docs/troubleshooting.mdx
@@ -7,7 +7,6 @@ sidebar_position: 4
 Some tips on how to solve common issues with ReactTooltip.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -55,7 +54,7 @@ If there isn't, feel free to [submit a new issue here](https://github.com/ReactT
 
 ## The tooltip is broken/not showing up
 
-Make sure you've imported the default styling. You only need to do this once on your application, `App.jsx`/`App.tsx` is usually a good place to do it.
+Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.
 
 ```jsx
 import 'react-tooltip/dist/react-tooltip.css'
@@ -67,7 +66,7 @@ If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have e
 
 ## Next.js `TypeError: f is not a function`
 
-This problem seems to be caused by a bug related to the SWC bundler used by Next.js. 
+This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
 The best way to solve this is to upgrade to `next@13.3.0` or later versions.
 
 Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
@@ -82,7 +81,7 @@ This is specially relevant when using components that are conditionally rendered
 
 Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.
 
-We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`). You can also move the `import 'react-tooltip/dist/react-tooltip.css'` there.
+We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).
 
 ### Dynamically generated anchor elements
 
@@ -99,18 +98,12 @@ Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`rend
 ```jsx
 // ❌ BAD
 <div className="items-container">
-  {
-    myItems.map(({ id, content, tooltip }) => (
-      <div
-        key={id}
-        className="item"
-        data-tooltip-id={`tooltip-${id}`}
-      >
-        {content}
-        <Tooltip id={`tooltip-${id}`} content={tooltip} />
-      </div>
-    ))
-  }
+  {myItems.map(({ id, content, tooltip }) => (
+    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
+      {content}
+      <Tooltip id={`tooltip-${id}`} content={tooltip} />
+    </div>
+  ))}
 </div>
 ```
 
@@ -131,4 +124,4 @@ Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`rend
   }
 </div>
 <Tooltip id="my-tooltip" />
-```
\ No newline at end of file
+```
diff --git a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx
index 59666f1b..96a22140 100644
--- a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx
+++ b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx
@@ -7,7 +7,6 @@ sidebar_position: 4
 Examples of use in V4 -> V5.
 
 import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -59,9 +58,8 @@ import ReactTooltip from 'react-tooltip';
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
-<a 
+<a
   data-tooltip-id="my-tooltip"
   data-tooltip-content="Hello world!"
 >
@@ -70,10 +68,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 <Tooltip id="my-tooltip" place="top" />
 ```
 
-<TooltipAnchor
-  data-tooltip-id="my-tooltip"
-  data-tooltip-content="Hello world!"
->
+<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
   ◕‿‿◕
 </TooltipAnchor>
 <Tooltip id="my-tooltip" place="top" />
@@ -88,14 +83,21 @@ Don't forget to check [the examples](../examples/basic-examples) for more detail
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
 
 <a className="my-anchor-element">◕‿‿◕</a>
 <a className="my-anchor-element">◕‿‿◕</a>
 <Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />
 ```
 
-<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
+<div
+  style={{
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+    margin: 'auto',
+    gap: '5px',
+  }}
+>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
   <TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
 </div>
@@ -105,9 +107,9 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 ## Colors
 
-| V4         | V5                     |
-| ---------- | ---------------------- |
-| `type`     | `variant`              |
+| V4     | V5        |
+| ------ | --------- |
+| `type` | `variant` |
 
 ### V4 -> `type`
 
@@ -124,11 +126,10 @@ Available values `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'`
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
 
-<a 
-  data-tooltip-id="my-tooltip" 
-  data-tooltip-content="Hello world!" 
+<a
+  data-tooltip-id="my-tooltip"
+  data-tooltip-content="Hello world!"
   data-tooltip-variant="success"
 >
   ◕‿‿◕
diff --git a/docs/package.json b/docs/package.json
index 3c3d9c5c..91436297 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,8 +15,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.3.0",
-    "@docusaurus/preset-classic": "2.3.0",
+    "@docusaurus/core": "^2.4.1",
+    "@docusaurus/preset-classic": "^2.4.1",
     "@mdx-js/react": "1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
@@ -26,7 +26,7 @@
     "react-tooltip": "5.12.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.3.0",
+    "@docusaurus/module-type-aliases": "^2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
     "typescript": "4.9.5"
   },
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 0b2d7cb4..7f83268c 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1195,10 +1195,10 @@
     "@docsearch/css" "3.3.0"
     algoliasearch "^4.0.0"
 
-"@docusaurus/core@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.3.0.tgz#19f1b6261453a848c50213bbc22f7d06ab9046ac"
-  integrity sha512-2AU5HfKyExO+/mi41SBnx5uY0aGZFXr3D93wntBY4lN1gsDKUpi7EE4lPBAXm9CoH4Pw6N24yDHy9CPR3sh/uA==
+"@docusaurus/core@2.4.1", "@docusaurus/core@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.4.1.tgz#4b8ff5766131ce3fbccaad0b1daf2ad4dc76f62d"
+  integrity sha512-SNsY7PshK3Ri7vtsLXVeAJGS50nJN3RgF836zkyUfAD01Fq+sAk5EwWgLw+nnm5KVNGDu7PRR2kRGDsWvqpo0g==
   dependencies:
     "@babel/core" "^7.18.6"
     "@babel/generator" "^7.18.7"
@@ -1210,13 +1210,13 @@
     "@babel/runtime" "^7.18.6"
     "@babel/runtime-corejs3" "^7.18.6"
     "@babel/traverse" "^7.18.8"
-    "@docusaurus/cssnano-preset" "2.3.0"
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/mdx-loader" "2.3.0"
+    "@docusaurus/cssnano-preset" "2.4.1"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/mdx-loader" "2.4.1"
     "@docusaurus/react-loadable" "5.5.2"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-common" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-common" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     "@slorber/static-site-generator-webpack-plugin" "^4.0.7"
     "@svgr/webpack" "^6.2.1"
     autoprefixer "^10.4.7"
@@ -1237,7 +1237,7 @@
     del "^6.1.1"
     detect-port "^1.3.0"
     escape-html "^1.0.3"
-    eta "^1.12.3"
+    eta "^2.0.0"
     file-loader "^6.2.0"
     fs-extra "^10.1.0"
     html-minifier-terser "^6.1.0"
@@ -1272,33 +1272,33 @@
     webpack-merge "^5.8.0"
     webpackbar "^5.0.2"
 
-"@docusaurus/cssnano-preset@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.3.0.tgz#3a9fe3cd6d559d55aa7444f48b926458c21e8495"
-  integrity sha512-igmsXc1Q95lMeq07A1xua0/5wOPygDQ/ENSV7VVbiGhnvMv4gzkba8ZvbAtc7PmqK+kpYRfPzNCOk0GnQCvibg==
+"@docusaurus/cssnano-preset@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.4.1.tgz#eacadefb1e2e0f59df3467a0fe83e4ff79eed163"
+  integrity sha512-ka+vqXwtcW1NbXxWsh6yA1Ckii1klY9E53cJ4O9J09nkMBgrNX3iEFED1fWdv8wf4mJjvGi5RLZ2p9hJNjsLyQ==
   dependencies:
     cssnano-preset-advanced "^5.3.8"
     postcss "^8.4.14"
     postcss-sort-media-queries "^4.2.1"
     tslib "^2.4.0"
 
-"@docusaurus/logger@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-2.3.0.tgz#da4154c271b41f3cbb0b1b86c96ffddd657a1ade"
-  integrity sha512-GO8s+FJpNT0vwt6kr/BZ/B1iB8EgHH/CF590i55Epy3TP2baQHGEHcAnQWvz5067OXIEke7Sa8sUNi0V9FrcJw==
+"@docusaurus/logger@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-2.4.1.tgz#4d2c0626b40752641f9fdd93ad9b5a7a0792f767"
+  integrity sha512-5h5ysIIWYIDHyTVd8BjheZmQZmEgWDR54aQ1BX9pjFfpyzFo5puKXKYrYJXbjEHGyVhEzmB9UXwbxGfaZhOjcg==
   dependencies:
     chalk "^4.1.2"
     tslib "^2.4.0"
 
-"@docusaurus/mdx-loader@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-2.3.0.tgz#47df9b18e47b97f5a54f9187471d643891338e9c"
-  integrity sha512-uxownG7dlg/l19rTIfUP0KDsbI8lTCgziWsdubMcWpGvOgXgm1p4mKSmWPzAwkRENn+un4L8DBhl3j1toeJy1A==
+"@docusaurus/mdx-loader@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-2.4.1.tgz#6425075d7fc136dbfdc121349060cedd64118393"
+  integrity sha512-4KhUhEavteIAmbBj7LVFnrVYDiU51H5YWW1zY6SmBSte/YLhDutztLTBE0PQl1Grux1jzUJeaSvAzHpTn6JJDQ==
   dependencies:
     "@babel/parser" "^7.18.8"
     "@babel/traverse" "^7.18.8"
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
     "@mdx-js/mdx" "^1.6.22"
     escape-html "^1.0.3"
     file-loader "^6.2.0"
@@ -1313,13 +1313,13 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@docusaurus/module-type-aliases@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.3.0.tgz#85861b0e56a3468d82cba76964e08287d1939c84"
-  integrity sha512-DvJtVejgrgIgxSNZ0pRaVu4EndRVBgbtp1LKvIO4xBgKlrsq8o4qkj1HKwH6yok5NoMqGApu8/E0KPOdZBtDpQ==
+"@docusaurus/module-type-aliases@2.4.1", "@docusaurus/module-type-aliases@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.4.1.tgz#38b3c2d2ae44bea6d57506eccd84280216f0171c"
+  integrity sha512-gLBuIFM8Dp2XOCWffUDSjtxY7jQgKvYujt7Mx5s4FCTfoL5dN1EVbnrn+O2Wvh8b0a77D57qoIDY7ghgmatR1A==
   dependencies:
     "@docusaurus/react-loadable" "5.5.2"
-    "@docusaurus/types" "2.3.0"
+    "@docusaurus/types" "2.4.1"
     "@types/history" "^4.7.11"
     "@types/react" "*"
     "@types/react-router-config" "*"
@@ -1327,18 +1327,18 @@
     react-helmet-async "*"
     react-loadable "npm:@docusaurus/react-loadable@5.5.2"
 
-"@docusaurus/plugin-content-blog@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.3.0.tgz#95035a3c10afd04a40555120cd2453aa11daeab6"
-  integrity sha512-/v+nWEaqRxH1U4I6uJIMdj8Iilrh0XwIG5vsmsi4AXbpArgqqyfMjbf70lzPOmSdYfdWYgb7tWcA6OhJqyKj0w==
-  dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/mdx-loader" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-common" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+"@docusaurus/plugin-content-blog@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.4.1.tgz#c705a8b1a36a34f181dcf43b7770532e4dcdc4a3"
+  integrity sha512-E2i7Knz5YIbE1XELI6RlTnZnGgS52cUO4BlCiCUCvQHbR+s1xeIWz4C6BtaVnlug0Ccz7nFSksfwDpVlkujg5Q==
+  dependencies:
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/mdx-loader" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-common" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     cheerio "^1.0.0-rc.12"
     feed "^4.2.2"
     fs-extra "^10.1.0"
@@ -1349,18 +1349,18 @@
     utility-types "^3.10.0"
     webpack "^5.73.0"
 
-"@docusaurus/plugin-content-docs@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.3.0.tgz#d3c75ae23d77ed845041496e38c910f40a60b4b8"
-  integrity sha512-P53gYvtPY/VJTMdV5pFnKv8d7qMBOPyu/4NPREQU5PWsXJOYedCwNBqdAR7A5P69l55TrzyUEUYLjIcwuoSPGg==
-  dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/mdx-loader" "2.3.0"
-    "@docusaurus/module-type-aliases" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+"@docusaurus/plugin-content-docs@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.4.1.tgz#ed94d9721b5ce7a956fb01cc06c40d8eee8dfca7"
+  integrity sha512-Lo7lSIcpswa2Kv4HEeUcGYqaasMUQNpjTXpV0N8G6jXgZaQurqp7E8NGYeGbDXnb48czmHWbzDL4S3+BbK0VzA==
+  dependencies:
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/mdx-loader" "2.4.1"
+    "@docusaurus/module-type-aliases" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     "@types/react-router-config" "^5.0.6"
     combine-promises "^1.1.0"
     fs-extra "^10.1.0"
@@ -1371,95 +1371,95 @@
     utility-types "^3.10.0"
     webpack "^5.73.0"
 
-"@docusaurus/plugin-content-pages@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.3.0.tgz#5726ee03e385299f25eec8eef00b81f537f45a7b"
-  integrity sha512-H21Ux3Ln+pXlcp0RGdD1fyes7H3tsyhFpeflkxnCoXfTQf/pQB9IMuddFnxuXzj+34rp6jAQmLSaPssuixJXRQ==
-  dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/mdx-loader" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+"@docusaurus/plugin-content-pages@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.4.1.tgz#c534f7e49967699a45bbe67050d1605ebbf3d285"
+  integrity sha512-/UjuH/76KLaUlL+o1OvyORynv6FURzjurSjvn2lbWTFc4tpYY2qLYTlKpTCBVPhlLUQsfyFnshEJDLmPneq2oA==
+  dependencies:
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/mdx-loader" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     fs-extra "^10.1.0"
     tslib "^2.4.0"
     webpack "^5.73.0"
 
-"@docusaurus/plugin-debug@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-2.3.0.tgz#94d01b010094a2e90bf48f72f92ddbaf710f99d7"
-  integrity sha512-TyeH3DMA9/8sIXyX8+zpdLtSixBnLJjW9KSvncKj/iXs1t20tpUZ1WFL7D+G1gxGGbLCBUGDluh738VvsRHC6Q==
+"@docusaurus/plugin-debug@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-2.4.1.tgz#461a2c77b0c5a91b2c05257c8f9585412aaa59dc"
+  integrity sha512-7Yu9UPzRShlrH/G8btOpR0e6INFZr0EegWplMjOqelIwAcx3PKyR8mgPTxGTxcqiYj6hxSCRN0D8R7YrzImwNA==
   dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
     fs-extra "^10.1.0"
     react-json-view "^1.21.3"
     tslib "^2.4.0"
 
-"@docusaurus/plugin-google-analytics@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.3.0.tgz#7dea60b68e54385ce7e9a1230e09164d9c9984f1"
-  integrity sha512-Z9FqTQzeOC1R6i/x07VgkrTKpQ4OtMe3WBOKZKzgldWXJr6CDUWPSR8pfDEjA+RRAj8ajUh0E+BliKBmFILQvQ==
+"@docusaurus/plugin-google-analytics@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.4.1.tgz#30de1c35773bf9d52bb2d79b201b23eb98022613"
+  integrity sha512-dyZJdJiCoL+rcfnm0RPkLt/o732HvLiEwmtoNzOoz9MSZz117UH2J6U2vUDtzUzwtFLIf32KkeyzisbwUCgcaQ==
   dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     tslib "^2.4.0"
 
-"@docusaurus/plugin-google-gtag@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.3.0.tgz#84cae2b39ed057d0d3d6b1b1f89fbe2baad8bd76"
-  integrity sha512-oZavqtfwQAGjz+Dyhsb45mVssTevCW1PJgLcmr3WKiID15GTolbBrrp/fueTrEh60DzOd81HbiCLs56JWBwDhQ==
+"@docusaurus/plugin-google-gtag@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.4.1.tgz#6a3eb91022714735e625c7ca70ef5188fa7bd0dc"
+  integrity sha512-mKIefK+2kGTQBYvloNEKtDmnRD7bxHLsBcxgnbt4oZwzi2nxCGjPX6+9SQO2KCN5HZbNrYmGo5GJfMgoRvy6uA==
   dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     tslib "^2.4.0"
 
-"@docusaurus/plugin-google-tag-manager@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.3.0.tgz#2fc43588b450b6cf895fd06ee16d8795a1562f7b"
-  integrity sha512-toAhuMX1h+P2CfavwoDlz9s2/Zm7caiEznW/inxq3izywG2l9ujWI/o6u2g70O3ACQ19eHMGHDsyEUcRDPrxBw==
+"@docusaurus/plugin-google-tag-manager@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.4.1.tgz#b99f71aec00b112bbf509ef2416e404a95eb607e"
+  integrity sha512-Zg4Ii9CMOLfpeV2nG74lVTWNtisFaH9QNtEw48R5QE1KIwDBdTVaiSA18G1EujZjrzJJzXN79VhINSbOJO/r3g==
   dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     tslib "^2.4.0"
 
-"@docusaurus/plugin-sitemap@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.3.0.tgz#f7bf0d2fc68b45ee0bd7db51e0f7992d43b5f8ce"
-  integrity sha512-kwIHLP6lyubWOnNO0ejwjqdxB9C6ySnATN61etd6iwxHri5+PBZCEOv1sVm5U1gfQiDR1sVsXnJq2zNwLwgEtQ==
-  dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-common" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+"@docusaurus/plugin-sitemap@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.1.tgz#8a7a76ed69dc3e6b4474b6abb10bb03336a9de6d"
+  integrity sha512-lZx+ijt/+atQ3FVE8FOHV/+X3kuok688OydDXrqKRJyXBJZKgGjA2Qa8RjQ4f27V2woaXhtnyrdPop/+OjVMRg==
+  dependencies:
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-common" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     fs-extra "^10.1.0"
     sitemap "^7.1.1"
     tslib "^2.4.0"
 
-"@docusaurus/preset-classic@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.3.0.tgz#4b8534ca806316518b1c66a7e885b25b084be7bf"
-  integrity sha512-mI37ieJe7cs5dHuvWz415U7hO209Q19Fp4iSHeFFgtQoK1PiRg7HJHkVbEsLZII2MivdzGFB5Hxoq2wUPWdNEA==
-  dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/plugin-content-blog" "2.3.0"
-    "@docusaurus/plugin-content-docs" "2.3.0"
-    "@docusaurus/plugin-content-pages" "2.3.0"
-    "@docusaurus/plugin-debug" "2.3.0"
-    "@docusaurus/plugin-google-analytics" "2.3.0"
-    "@docusaurus/plugin-google-gtag" "2.3.0"
-    "@docusaurus/plugin-google-tag-manager" "2.3.0"
-    "@docusaurus/plugin-sitemap" "2.3.0"
-    "@docusaurus/theme-classic" "2.3.0"
-    "@docusaurus/theme-common" "2.3.0"
-    "@docusaurus/theme-search-algolia" "2.3.0"
-    "@docusaurus/types" "2.3.0"
+"@docusaurus/preset-classic@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.4.1.tgz#072f22d0332588e9c5f512d4bded8d7c99f91497"
+  integrity sha512-P4//+I4zDqQJ+UDgoFrjIFaQ1MeS9UD1cvxVQaI6O7iBmiHQm0MGROP1TbE7HlxlDPXFJjZUK3x3cAoK63smGQ==
+  dependencies:
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/plugin-content-blog" "2.4.1"
+    "@docusaurus/plugin-content-docs" "2.4.1"
+    "@docusaurus/plugin-content-pages" "2.4.1"
+    "@docusaurus/plugin-debug" "2.4.1"
+    "@docusaurus/plugin-google-analytics" "2.4.1"
+    "@docusaurus/plugin-google-gtag" "2.4.1"
+    "@docusaurus/plugin-google-tag-manager" "2.4.1"
+    "@docusaurus/plugin-sitemap" "2.4.1"
+    "@docusaurus/theme-classic" "2.4.1"
+    "@docusaurus/theme-common" "2.4.1"
+    "@docusaurus/theme-search-algolia" "2.4.1"
+    "@docusaurus/types" "2.4.1"
 
 "@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
@@ -1469,27 +1469,27 @@
     "@types/react" "*"
     prop-types "^15.6.2"
 
-"@docusaurus/theme-classic@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-2.3.0.tgz#2903b5a48db40354316f32ef7113e29de3eea5ad"
-  integrity sha512-x2h9KZ4feo22b1aArsfqvK05aDCgTkLZGRgAPY/9TevFV5/Yy19cZtBOCbzaKa2dKq1ofBRK9Hm1DdLJdLB14A==
-  dependencies:
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/mdx-loader" "2.3.0"
-    "@docusaurus/module-type-aliases" "2.3.0"
-    "@docusaurus/plugin-content-blog" "2.3.0"
-    "@docusaurus/plugin-content-docs" "2.3.0"
-    "@docusaurus/plugin-content-pages" "2.3.0"
-    "@docusaurus/theme-common" "2.3.0"
-    "@docusaurus/theme-translations" "2.3.0"
-    "@docusaurus/types" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-common" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+"@docusaurus/theme-classic@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-2.4.1.tgz#0060cb263c1a73a33ac33f79bb6bc2a12a56ad9e"
+  integrity sha512-Rz0wKUa+LTW1PLXmwnf8mn85EBzaGSt6qamqtmnh9Hflkc+EqiYMhtUJeLdV+wsgYq4aG0ANc+bpUDpsUhdnwg==
+  dependencies:
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/mdx-loader" "2.4.1"
+    "@docusaurus/module-type-aliases" "2.4.1"
+    "@docusaurus/plugin-content-blog" "2.4.1"
+    "@docusaurus/plugin-content-docs" "2.4.1"
+    "@docusaurus/plugin-content-pages" "2.4.1"
+    "@docusaurus/theme-common" "2.4.1"
+    "@docusaurus/theme-translations" "2.4.1"
+    "@docusaurus/types" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-common" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     "@mdx-js/react" "^1.6.22"
     clsx "^1.2.1"
     copy-text-to-clipboard "^3.0.1"
-    infima "0.2.0-alpha.42"
+    infima "0.2.0-alpha.43"
     lodash "^4.17.21"
     nprogress "^0.2.0"
     postcss "^8.4.14"
@@ -1500,17 +1500,18 @@
     tslib "^2.4.0"
     utility-types "^3.10.0"
 
-"@docusaurus/theme-common@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-2.3.0.tgz#ee7d3fa70ab2129b083d0ab400099c408045e58a"
-  integrity sha512-1eAvaULgu6ywHbjkdWOOHl1PdMylne/88i0kg25qimmkMgRHoIQ23JgRD/q5sFr+2YX7U7SggR1UNNsqu2zZPw==
-  dependencies:
-    "@docusaurus/mdx-loader" "2.3.0"
-    "@docusaurus/module-type-aliases" "2.3.0"
-    "@docusaurus/plugin-content-blog" "2.3.0"
-    "@docusaurus/plugin-content-docs" "2.3.0"
-    "@docusaurus/plugin-content-pages" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
+"@docusaurus/theme-common@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-2.4.1.tgz#03e16f7aa96455e952f3243ac99757b01a3c83d4"
+  integrity sha512-G7Zau1W5rQTaFFB3x3soQoZpkgMbl/SYNG8PfMFIjKa3M3q8n0m/GRf5/H/e5BqOvt8c+ZWIXGCiz+kUCSHovA==
+  dependencies:
+    "@docusaurus/mdx-loader" "2.4.1"
+    "@docusaurus/module-type-aliases" "2.4.1"
+    "@docusaurus/plugin-content-blog" "2.4.1"
+    "@docusaurus/plugin-content-docs" "2.4.1"
+    "@docusaurus/plugin-content-pages" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-common" "2.4.1"
     "@types/history" "^4.7.11"
     "@types/react" "*"
     "@types/react-router-config" "*"
@@ -1521,40 +1522,40 @@
     use-sync-external-store "^1.2.0"
     utility-types "^3.10.0"
 
-"@docusaurus/theme-search-algolia@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.3.0.tgz#5f9f2638c8b965d0fb7ecc6cfafb5c65aa511efe"
-  integrity sha512-/i5k1NAlbYvgnw69vJQA174+ipwdtTCCUvxRp7bVZ+8KmviEybAC/kuKe7WmiUbIGVYbAbwYaEsPuVnsd65DrA==
+"@docusaurus/theme-search-algolia@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.4.1.tgz#906bd2cca3fced0241985ef502c892f58ff380fc"
+  integrity sha512-6BcqW2lnLhZCXuMAvPRezFs1DpmEKzXFKlYjruuas+Xy3AQeFzDJKTJFIm49N77WFCTyxff8d3E4Q9pi/+5McQ==
   dependencies:
     "@docsearch/react" "^3.1.1"
-    "@docusaurus/core" "2.3.0"
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/plugin-content-docs" "2.3.0"
-    "@docusaurus/theme-common" "2.3.0"
-    "@docusaurus/theme-translations" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
-    "@docusaurus/utils-validation" "2.3.0"
+    "@docusaurus/core" "2.4.1"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/plugin-content-docs" "2.4.1"
+    "@docusaurus/theme-common" "2.4.1"
+    "@docusaurus/theme-translations" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
+    "@docusaurus/utils-validation" "2.4.1"
     algoliasearch "^4.13.1"
     algoliasearch-helper "^3.10.0"
     clsx "^1.2.1"
-    eta "^1.12.3"
+    eta "^2.0.0"
     fs-extra "^10.1.0"
     lodash "^4.17.21"
     tslib "^2.4.0"
     utility-types "^3.10.0"
 
-"@docusaurus/theme-translations@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-2.3.0.tgz#1c03c7a9da1d891f5193378338857046820a29a0"
-  integrity sha512-YLVD6LrszBld1EvThTOa9PcblKAZs1jOmRjwtffdg1CGjQWFXEeWUL24n2M4ARByzuLry5D8ZRVmKyRt3LOwsw==
+"@docusaurus/theme-translations@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-2.4.1.tgz#4d49df5865dae9ef4b98a19284ede62ae6f98726"
+  integrity sha512-T1RAGP+f86CA1kfE8ejZ3T3pUU3XcyvrGMfC/zxCtc2BsnoexuNI9Vk2CmuKCb+Tacvhxjv5unhxXce0+NKyvA==
   dependencies:
     fs-extra "^10.1.0"
     tslib "^2.4.0"
 
-"@docusaurus/types@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.3.0.tgz#9695a768d3810c8a137a41d7a1116ac67d201ce5"
-  integrity sha512-c5C0nROxVFsgMAm4vWDB1LDv3v4K18Y8eVxazL3dEr7w+7kNLc5koWrW7fWmCnrbItnuTna4nLS2PcSZrkYidg==
+"@docusaurus/types@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.4.1.tgz#d8e82f9e0f704984f98df1f93d6b4554d5458705"
+  integrity sha512-0R+cbhpMkhbRXX138UOc/2XZFF8hiZa6ooZAEEJFp5scytzCw4tC1gChMFXrpa3d2tYE6AX8IrOEpSonLmfQuQ==
   dependencies:
     "@types/history" "^4.7.11"
     "@types/react" "*"
@@ -1565,30 +1566,30 @@
     webpack "^5.73.0"
     webpack-merge "^5.8.0"
 
-"@docusaurus/utils-common@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.3.0.tgz#88c890b4b0e329695a1b554dc9e17430446f7dd1"
-  integrity sha512-nu5An+26FS7SQTwvyFR4g9lw3NU1u2RLcxJPZF+NCOG8Ne96ciuQosa7+N1kllm/heEJqfTaAUD0sFxpTZrDtw==
+"@docusaurus/utils-common@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.4.1.tgz#7f72e873e49bd5179588869cc3ab7449a56aae63"
+  integrity sha512-bCVGdZU+z/qVcIiEQdyx0K13OC5mYwxhSuDUR95oFbKVuXYRrTVrwZIqQljuo1fyJvFTKHiL9L9skQOPokuFNQ==
   dependencies:
     tslib "^2.4.0"
 
-"@docusaurus/utils-validation@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-2.3.0.tgz#196807cafcaf22571e7c65502284b7e1cc8102c0"
-  integrity sha512-TBJCLqwAoiQQJ6dbgBpuLvzsn/XiTgbZkd6eJFUIQYLb1d473Zv58QrHXVmVQDLWiCgmJpHW2LpMfumTpCDgJw==
+"@docusaurus/utils-validation@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-2.4.1.tgz#19959856d4a886af0c5cfb357f4ef68b51151244"
+  integrity sha512-unII3hlJlDwZ3w8U+pMO3Lx3RhI4YEbY3YNsQj4yzrkZzlpqZOLuAiZK2JyULnD+TKbceKU0WyWkQXtYbLNDFA==
   dependencies:
-    "@docusaurus/logger" "2.3.0"
-    "@docusaurus/utils" "2.3.0"
+    "@docusaurus/logger" "2.4.1"
+    "@docusaurus/utils" "2.4.1"
     joi "^17.6.0"
     js-yaml "^4.1.0"
     tslib "^2.4.0"
 
-"@docusaurus/utils@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.3.0.tgz#a4ee8446f644f7232f8a315f0a357092c28c1b6b"
-  integrity sha512-6+GCurDsePHHbLM3ktcjv8N4zrjgrl1O7gOQNG4UMktcwHssFFVm+geVcB4M8siOmwUjV2VaNrp0hpGy8DOQHw==
+"@docusaurus/utils@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.4.1.tgz#9c5f76eae37b71f3819c1c1f0e26e6807c99a4fc"
+  integrity sha512-1lvEZdAQhKNht9aPXPoh69eeKnV0/62ROhQeFKKxmzd0zkcuE/Oc5Gpnt00y/f5bIsmOsYMY7Pqfm/5rteT5GA==
   dependencies:
-    "@docusaurus/logger" "2.3.0"
+    "@docusaurus/logger" "2.4.1"
     "@svgr/webpack" "^6.2.1"
     escape-string-regexp "^4.0.0"
     file-loader "^6.2.0"
@@ -3662,10 +3663,10 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eta@^1.12.3:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/eta/-/eta-1.12.3.tgz#2982d08adfbef39f9fa50e2fbd42d7337e7338b1"
-  integrity sha512-qHixwbDLtekO/d51Yr4glcaUJCIjGVJyTzuqV4GPlgZo1YpgOKG+avQynErZIYrfM6JIJdtiG2Kox8tbb+DoGg==
+eta@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/eta/-/eta-2.1.2.tgz#2ac3899234552b60da87e5e781494ee1a8048fbc"
+  integrity sha512-qWH+mERhihcwKE9+Ah37rLDTP0d3Qc5KEsnEQhvoBowDezVI2F6+bqjRBVY+auUYOUb94MI0x5fllZs+CWVRRQ==
 
 etag@~1.8.1:
   version "1.8.1"
@@ -4456,10 +4457,10 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-infima@0.2.0-alpha.42:
-  version "0.2.0-alpha.42"
-  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.42.tgz#f6e86a655ad40877c6b4d11b2ede681eb5470aa5"
-  integrity sha512-ift8OXNbQQwtbIt6z16KnSWP7uJ/SysSMFI4F87MNRTicypfl4Pv3E2OGVv6N3nSZFJvA8imYulCBS64iyHYww==
+infima@0.2.0-alpha.43:
+  version "0.2.0-alpha.43"
+  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.43.tgz#f7aa1d7b30b6c08afef441c726bac6150228cbe0"
+  integrity sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==
 
 inflight@^1.0.4:
   version "1.0.6"
@@ -6125,10 +6126,10 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-tooltip@5.12.0:
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.12.0.tgz#421c1b2bc673bcca80f9c41a6d2ab544c626526c"
-  integrity sha512-1e9jQPg3H0wd8Gpn5p7cVSAjXLtzyq+7MESEtB825nPm4QrgLm2V8/XI073u8yEJN/nkDpKY/a8pA8bZlN65/Q==
+react-tooltip@5.12.0-beta.1014.3:
+  version "5.12.0-beta.1014.3"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.12.0-beta.1014.3.tgz#49df6c50f9ef2641fc880a947e4494bd2a425076"
+  integrity sha512-rxdqQ/2nt+13bSFG1qF4S+SEHXVFh6/I3Xj3cdkXj2+OOTp3fmXkz5DCAl/EEB4FGNzii8yS/JD6+ihfceYarA==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
     classnames "^2.3.0"
diff --git a/rollup.config.prod.js b/rollup.config.prod.js
index 2025fbad..733b3854 100644
--- a/rollup.config.prod.js
+++ b/rollup.config.prod.js
@@ -13,12 +13,35 @@ const input = ['src/index.tsx']
 
 const name = 'ReactTooltip'
 
+const banner = `
+/*
+* React Tooltip
+* {@link https://github.com/ReactTooltip/react-tooltip}
+* @copyright ReactTooltip Team
+* @license MIT
+*/
+
+'use client';` // this 'use client' prevent break Next.js 13 projects when using tooltip on server side components
+
 const external = [
   ...Object.keys(pkg.peerDependencies ?? {}),
   ...Object.keys(pkg.dependencies ?? {}),
 ]
 
 const buildFormats = [
+  /**
+   * Temporary build to keep the extracted CSS file.
+   * I don't want to do a major release now with only the CSS change,
+   * so, we will keep the css being exported by the lib and now
+   * we will inject the css into the head by default.
+   * The CSS file import is deprecated and the file is only
+   * for style reference now.
+   */
+  {
+    file: 'dist/react-tooltip.mjs',
+    format: 'es',
+    extractCSS: true,
+  },
   {
     file: 'dist/react-tooltip.umd.js',
     format: 'umd',
@@ -61,21 +84,23 @@ const sharedPlugins = [
   }),
 ]
 // this step is just to build the minified javascript files
-const minifiedBuildFormats = buildFormats.map(({ file, ...rest }) => ({
+const minifiedBuildFormats = buildFormats.map(({ file, extractCSS, ...rest }) => ({
   file: file.replace(/(\.[cm]?js)$/, '.min$1'),
   ...rest,
   minify: true,
-  plugins: [terser(), filesize()],
+  extractCSS,
+  plugins: [terser({ compress: { directives: false } }), filesize()],
 }))
 
 const allBuildFormats = [...buildFormats, ...minifiedBuildFormats]
 
 const config = allBuildFormats.map(
-  ({ file, format, globals, plugins: specificPlugins, minify }) => {
+  ({ file, format, globals, plugins: specificPlugins, minify, extractCSS }) => {
     const plugins = [
       ...sharedPlugins,
       postcss({
-        extract: minify ? 'react-tooltip.min.css' : 'react-tooltip.css', // this will generate a specific file and override on multiples build, but the css will be the same
+        // eslint-disable-next-line no-nested-ternary
+        extract: extractCSS ? (minify ? 'react-tooltip.min.css' : 'react-tooltip.css') : false, // this will generate a specific file and override on multiples build, but the css will be the same
         autoModules: true,
         include: '**/*.css',
         extensions: ['.css'],
@@ -96,6 +121,7 @@ const config = allBuildFormats.map(
         name,
         globals,
         sourcemap: true,
+        banner,
       },
       external,
       plugins,