update info boxes to new GitHub markdown syntax

More: https://github.com/orgs/community/discussions/16925

docs/api-reference.md

@@ -107,7 +107,7 @@ function extendTailwindMerge<
 
 Function to create merge function with custom config which extends the default config. Use this if you use the default Tailwind config and just modified it in some places.
 
-> **Note**
+> [!Note]
 > The function `extendTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.
 
 You provide it a `configExtension` object which gets [merged](#mergeconfigs) with the default config.
@@ -221,7 +221,7 @@ function createTailwindMerge(
 
 Function to create merge function with custom config. Use this function instead of [`extendTailwindMerge`](#extendtailwindmerge) if you don't need the default config or want more control over the config.
 
-> **Note**
+> [!Note]
 > The function `createTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.
 
 You need to provide a function which resolves to the config tailwind-merge should use for the new merge function. You can either extend from the default config or create a new one from scratch.

docs/configuration.md

@@ -192,7 +192,7 @@ const customTwMerge = extendTailwindMerge<'foo' | 'bar' | 'baz'>({
 })
 ```
 
-> **Note**
+> [!Note]
 > The function `extendTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.
 
 ### TypeScript types for `extendTailwindMerge`
@@ -269,7 +269,7 @@ const customTwMerge = createTailwindMerge(() => ({
 }))
 ```
 
-> **Note**
+> [!Note]
 > The function `createTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.
 
 The callback passed to `createTailwindMerge` will be called when `customTwMerge` is called the first time, so you don't need to worry about the computations in it affecting app startup performance in case you aren't using tailwind-merge at app startup.

docs/features.md

@@ -42,7 +42,7 @@ twMerge('bg-black bg-[color:var(--mystery-var)]') // → 'bg-[color:var(--myster
 twMerge('grid-cols-[1fr,auto] grid-cols-2') // → 'grid-cols-2'
 ```
 
-> **Warning**
+> [!Note]
 > Labels necessary in ambiguous cases
 >
 > When using arbitrary values in ambiguous classes like `text-[calc(var(--rebecca)-1rem)]` tailwind-merge looks at the arbitrary value for clues to determine what type of class it is. In this case, like in most ambiguous classes, it would try to figure out whether `calc(var(--rebecca)-1rem)` is a length (making it a font-size class) or a color (making it a text-color class). For lengths it takes clues into account like the presence of the `calc()` function or a digit followed by a length unit like `1rem`.
@@ -60,7 +60,7 @@ twMerge('[--scroll-offset:56px] lg:[--scroll-offset:44px]')
 twMerge('[padding:1rem] p-8') // → '[padding:1rem] p-8'
 ```
 
-> **Warning**
+> [!Note]
 > tailwind-merge does not resolve conflicts between arbitrary properties and their matching Tailwind classes to keep the bundle size small.
 
 ### Supports arbitrary variants
@@ -74,7 +74,7 @@ twMerge('dark:hover:[&:nth-child(3)]:py-0 hover:dark:[&:nth-child(3)]:py-4')
 twMerge('[&:focus]:ring focus:ring-4') // → '[&:focus]:ring focus:ring-4'
 ```
 
-> **Warning**
+> [!Note]
 > Similarly to arbitrary properties, tailwind-merge does not resolve conflicts between arbitrary variants and their matching predefined modifiers for bundle size reasons.
 
 The order of standard modifiers before and after an arbitrary variant in isolation (all modifiers before are one group, all modifiers after are another group) does not matter for tailwind-merge. However, it does matter whether a standard modifier is before or after an arbitrary variant both for Tailwind CSS and tailwind-merge because the resulting CSS selectors are different.

docs/similar-packages.md

@@ -1,6 +1,6 @@
 # Similar packages
 
-> **Note**
+> [!Note]
 > If you know of a package that isn't listed here, feel free to submit a PR adding the package to this page.
 
 ## TypeScript/JavaScript

docs/when-and-how-to-use-it.md

@@ -2,7 +2,7 @@
 
 Like any other package, tailwind-merge comes with opportunities and trade-offs. This document tries to help you decide whether tailwind-merge is the right tool for your use case based on my own experience and the feedback I got from the community.
 
-> **Note**
+> [!Note]
 > If you're thinking of a major argument that is not covered here, please [let me know](https://github.com/dcastil/tailwind-merge/discussions/new?category=ideas)!
 
 ## Reasons not to use it