Update info callout titles

Author: amirhhashemi

WRITING.md

@@ -66,7 +66,7 @@ We ask that you use them sparingly.
 3. Once you have the Aside component imported, simply follow the below example for how to add one to your document.
 
 ```
-:::info
+:::note
     content here
 :::
 ```

src/routes/concepts/components/basics.mdx

@@ -27,7 +27,7 @@ function App() {
 }
 ```
 
-:::info[Note]
+:::note
 
 Component names must start with a capital letter to distinguish them from regular HTML elements.
 Otherwise, they won't be recognized as components.
@@ -155,7 +155,7 @@ This example uses a [ternary operator](https://developer.mozilla.org/en-US/docs/
 When `count` is greater than 5, the component will display `"Count limit reached"`.
 Otherwise, it will display the current count with an increment button.
 
-:::info
+:::note
 To simplify conditional rendering, Solid provides built-in [control-flow](/concepts/control-flow/conditional-rendering) components like [`Show`](/concepts/control-flow/conditional-rendering#show), which create a more readable conditional rendering experience.
 
     ```tsx

src/routes/concepts/components/class-style.mdx

@@ -96,7 +96,7 @@ const [current, setCurrent] = createSignal("foo");
 This is because `classList` selectively toggles only the classes that require alteration, while `class` will be re-evaluated each time.
 For a single conditional class, using `class` might be simpler but as the number of conditional classes increases, `classList` offers a more readable and declarative approach.
 
-:::info
+:::note
     While it is possible, mixing `class` and `classList` can introduce unexpected errors.
     If both are reactive when the `class` value changes, Solid will set the entire `class` attribute.
     This will remove any classes set by `classList`.

src/routes/concepts/components/event-handlers.mdx

@@ -182,7 +182,7 @@ button
 </div>
 ```
 
-:::info[onInput / onChange]
+:::note[onInput / onChange]
 
     `onChange` and `onInput` events work according to their native behavior:
     - `onInput` will fire immediately after the value has changed

src/routes/concepts/context.mdx

@@ -247,7 +247,7 @@ function Child() {
 
 If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`.
 
-:::info[More on default values]
+:::note[More on default values]
 Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry.
 :::
 

src/routes/concepts/control-flow/portal.mdx

@@ -38,7 +38,7 @@ By putting the element outside of the parent element, it is no longer bound by t
 This creates a more accessible experience for users, as the content is no longer obscured.
 
 
-:::info
+:::note
   `<Portal>` will render wrapped unless specifically targeting `document.head`.
 
   This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy.

src/routes/concepts/effects.mdx

@@ -87,7 +87,7 @@ setCount(1); // Output: 1, "Hello"
 setMessage("World"); // Output: 1, "World"
 ```
 
-:::info
+:::note
 When a signal updates, it notifies all of its subscribers sequentially but the *order can vary*.
 While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous.
 This means that the order of execution of effects is *not guaranteed* and should not be relied upon.

src/routes/concepts/refs.mdx

@@ -29,7 +29,7 @@ function Component() {
 This lets you create and access DOM elements similar to [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) but without having to wait until it is attached to the DOM.
 It can be used multiple times without having to worry about duplicate selectors.
 
-The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure. 
+The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure.
 This makes the component's JSX structure more difficult to read and understand.
 
 ## Refs in Solid
@@ -61,7 +61,7 @@ If access to an element is needed before it is added to the DOM, you can use the
 </p>
 ```
 
-:::info
+:::note
 In TypeScript, you must use a definitive assignment assertion.
 Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't
 confirm it.

src/routes/concepts/signals.mdx

@@ -21,7 +21,7 @@ const [count, setCount] = createSignal(0);
 //       ^ getter  ^ setter
 ```
 
-    	:::info
+    	:::note
     	  The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
 
 This lets you extract values from the array.
@@ -79,7 +79,7 @@ function Counter() {
 }
 ```
 
-:::info
+:::note
 A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect)  or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
 
 Both functions subscribe to the signals accessed within them, establishing a dependency relationship.

src/routes/concepts/stores.mdx

@@ -193,7 +193,7 @@ const App = () => {
 }
 ```
 
-:::info
+:::note
 Separating the read and write capabilities of a store provides a valuable debugging advantage.
 
 This separation facilitates the tracking and control of the components that are accessing or changing the values.
@@ -358,8 +358,8 @@ setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)
 // update users with location "Canada"
 setStore("users", (user) => user.location == "Canada" , "loggedIn", false)
 
-// update users with id 1, 2 or 3 
-let ids = [1,2,3] 
+// update users with id 1, 2 or 3
+let ids = [1,2,3]
 setStore("users", (user) => ids.includes(user.id) , "loggedIn", false)
 ```
 

src/routes/concepts/understanding-jsx.mdx

@@ -87,7 +87,7 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
 </button>
 ```
 
-    	:::info
+    	:::note
     	  If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
 
 ```jsx
@@ -119,7 +119,7 @@ They connect the component with the data it requires, for seamless data flows an
   Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls.
   This results in components that react in real-time to data changes.
 
-:::info
+:::note
 Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.
 This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.
 

src/routes/configuration/environment-variables.mdx

@@ -24,7 +24,7 @@ interface ImportMeta {
 }
 ```
 
-:::info
+:::note
 To prevent accidental exposure of environment variables to the client, only variables prefixed with `VITE_` will be exposed.
 
 For example:

src/routes/configuration/typescript.mdx

@@ -114,7 +114,7 @@ function MyJsComponent() {
 }
 ```
 
-:::info
+:::note
 If you wish to change the entry point file from `index.jsx` to `index.tsx`, you need to modify the `src` attribute in `<script>` to look like the following:
 
 ```html
@@ -377,7 +377,7 @@ function MyGenericComponent<T>(props: MyProps<T>): JSX.Element {
 }
 ```
 
-:::info
+:::note
 Each `Component` type has a corresponding `Props` type that defines the shape
 of its properties. These `Props` types also accept the same generic types as
 their associated `Component` types.
@@ -479,7 +479,7 @@ return <div ref={divRef!}>...</div>
 
 In this case, using `divRef!` within the `ref` attribute signals to TypeScript that `divRef` will receive an assignment after this stage, which is more in line with how Solid works.
 
-:::info
+:::note
 While TypeScript does catch incorrect usage of refs that occur before their
 JSX block definition, it currently does not identify undefined variables
 within certain nested functions in Solid. Therefore, additional care is needed
@@ -644,7 +644,7 @@ declare module "solid-js" {
 <div on:Name={(event) => console.log("name is", event.detail.name)} />;
 ```
 
-:::info
+:::note
 <span>New in v1.9.0</span>
 :::
 
@@ -664,7 +664,7 @@ const handler: JSX.EventHandlerWithOptions<HTMLDivElement, Event> =  {
 <div on:click={handler} />;
 ```
 
-:::info
+:::note
 **Note**:
 By default, using native events like `mousemove` with the `on` prefix — for example, `<div on:mousemove={e => {}} />` — will trigger a TypeScript error.
 This occurs because these native events are not part of Solid's custom event type definitions.

src/routes/guides/complex-state-management.mdx

@@ -216,7 +216,7 @@ const addTask = (text) => {
 
 Read about some of the other [advantages to using `produce`](/concepts/stores#store-updates-with-produce).
 
-    :::info
+    :::note
       Another benefit to working with `produce` is that it offers a way to modify a store without having to make multiple `setStore` calls.
 
 ```jsx

src/routes/guides/routing-and-navigation.mdx

@@ -467,7 +467,7 @@ Please note that while it is best practice to name these files as `[id].data.js`
 The value of a preload function is passed to the page component when called at any time other than "preload".
 This means you can initialize the page, or use [Data APIs](/solid-router/reference/data-apis/create-async).
 
-:::info
+:::note
 	To prevent a fetch from happening more than once, or to trigger a refetch, you
 	can use the [`query` function](/solid-router/reference/data-apis/query).
 :::

src/routes/guides/state-management.mdx

@@ -335,7 +335,7 @@ When sharing state between components, you can access the state through [`props`
 Props values that are passed down from the parent component are read-only, which means they cannot be directly modified by the child component.
 However, you can pass down setter functions from the parent component to allow the child component to indirectly modify the parent's state.
 
-:::info
+:::note
 To encourage one-way data flow, props are passed as read-only or immutable values from the parent to child components.
 
 There are [specific utility functions for props](/concepts/components/props), however, that offer methods to modify props values.

src/routes/guides/styling-components/tailwind.mdx

@@ -4,7 +4,7 @@ order: 5
 mainNavExclude: true
 ---
 
-:::info[Note]
+:::note
 This guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3).
 :::
 

src/routes/guides/testing.mdx

@@ -261,7 +261,7 @@ const createWrapper = (value) => (props) =>
   <DataContext value={value} {...props}/>
 ```
 
-:::info[Using multiple providers]
+:::note[Using multiple providers]
 If using multiple providers, [solid-primitives has `<MultiProvider>`](https://primitives.solidjs.community/package/context#multiprovider) to avoid nesting multiple levels of providers
 :::
 

src/routes/pt-br/quick-start.mdx

@@ -10,7 +10,7 @@ Additionally, we offer a [JavaScript](https://stackblitz.com/github/solidjs/temp
 
 ## Creating a Solid application
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 
     - Familiarity with the command line
     - Install [Node.js](https://nodejs.org/en)

src/routes/pt-br/solid-router/quick-start.mdx

@@ -10,7 +10,7 @@ Additionally, we offer a [JavaScript](https://stackblitz.com/github/solidjs/temp
 
 ## Creating a Solid application
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 
     - Familiarity with the command line
     - Install [Node.js](https://nodejs.org/en)

src/routes/quick-start.mdx

@@ -10,7 +10,7 @@ Start with the [TypeScript](https://stackblitz.com/github/solidjs/templates/tree
 
 ## Create a Solid project
 
-:::info[Prerequisites]
+:::note[Prerequisites]
 
 - Familiarity with the command line.
 - A recent version of [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), or [Deno](https://deno.com/).

src/routes/reference/basic-reactivity/create-signal.mdx

@@ -2,7 +2,7 @@
 title: createSignal
 ---
 
-Signals are the most basic reactive primitive. 
+Signals are the most basic reactive primitive.
 They track a single value (which can be a value of any type) that changes over time.
 
 ```tsx
@@ -38,8 +38,8 @@ Calling the getter (e.g., `count()` or `ready()`) returns the current value of t
 
 Crucial to automatic dependency tracking, calling the getter within a tracking scope causes the calling function to depend on this Signal, so that function will rerun if the Signal gets updated.
 
-Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below). 
-The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument. 
+Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below).
+The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument.
 The updated value is also returned by the setter. As an example:
 
 ```tsx
@@ -63,7 +63,7 @@ const newCount = setCount((prev) => prev + 1)
 
 ```
 
-:::info
+:::note
 	If you want to store a function in a Signal you must use the function form:
 
 	```tsx

src/routes/reference/components/no-hydration.mdx

@@ -7,7 +7,7 @@ During server-side rendering, components and elements wrapped within `<NoHydrati
 However, during client-side hydration, Solid bypasses the hydration process for the content within `<NoHydration>`.
 This means that elements within `<NoHydration>` will not have event listeners attached by Solid, and their state will not be managed reactively on the client-side after the initial render.
 
-:::info[Note]
+:::note
 Placing a `<Hydration>` component inside `<NoHydration>` has no effect and will not override the `<NoHydration>` behavior.
 :::
 

src/routes/reference/components/suspense.mdx

@@ -134,7 +134,7 @@ const MyComponentWithSuspenseAndShow = () => {
 
 In this code, we don't create _any_ DOM nodes inside {"<Suspense>"} before the resource resolves, so it is pretty much the same as the second example where we only used `<Show>`.
 
-:::info
+:::note
 	Suspense is triggered by reading a resource inside the {"<Suspense>"}{" "}
 	boundary. Components wrapped with suspense still run fully, just as they would
 	without suspense. However, code wrapped in `onMount` and `createEffect` only

src/routes/reference/jsx-attributes/attr.mdx

@@ -9,7 +9,7 @@ Useful for Web Components where you want to set attributes.
 <my-element attr:status={props.status} />
 ```
 
-:::info[Strong-Typing Custom Attributes]
+:::note[Strong-Typing Custom Attributes]
 Type definitions are required when using TypeScript.
 See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
 :::

src/routes/reference/jsx-attributes/bool.mdx

@@ -20,7 +20,7 @@ This attribute is most useful for Web Components.
 
 ```
 
-:::info[Strong-Typing Custom Boolean Attributes]
+:::note[Strong-Typing Custom Boolean Attributes]
 Type definitions are required when using TypeScript.
 See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
 :::

src/routes/reference/jsx-attributes/classlist.mdx

@@ -18,7 +18,7 @@ First, `class` can be set like other attributes. For example:
 <div class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} />
 ```
 
-:::info
+:::note
 	Note that <code>className</code> was deprecated in Solid 1.4 in favor of {" "}
 	<code>class</code>.
 :::
@@ -27,7 +27,7 @@ Alternatively, the `classList` pseudo-attribute lets you specify an object, wher
 
 ```tsx
 <div
-	classList={{ 
+	classList={{
 		active: state.active,
 		editing: state.currentId === row.id,
 	}}

src/routes/reference/jsx-attributes/on.mdx

@@ -11,7 +11,7 @@ For events with capital letters, listener options, or if you need to attach even
 
 This directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`.
 
-:::info
+:::note
 <span>New in v1.9.0</span>
 :::
 

src/routes/reference/jsx-attributes/prop.mdx

@@ -9,7 +9,7 @@ Forces the prop to be treated as a property instead of an attribute.
 <div prop:scrollTop={props.scrollPos + "px"} />
 ```
 
-:::info[Strong-Typing Custom Properties]
+:::note[Strong-Typing Custom Properties]
 Type definitions are required when using TypeScript.
 See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
-:::
+:::

src/routes/reference/reactive-utilities/catch-error.mdx

@@ -2,7 +2,7 @@
 title: catchError
 ---
 
-:::info
+:::note
 <span>New in v1.7.0</span>
 :::
 

src/routes/reference/reactive-utilities/on-util.mdx

@@ -36,7 +36,7 @@ setA("new"); // now it runs
 
 ## Using `on` with stores
 
-:::info
+:::note
 	Please note that on stores and mutable, adding or removing a property from the
 	parent object will trigger an effect. See [`createMutable`](/reference/store-utilities/create-mutable)