From 0b8bd5cb1fe9cc63e8ba3e323a165d854f262a87 Mon Sep 17 00:00:00 2001
From: Naiyer <19614213+naiyerasif@users.noreply.github.com>
Date: Sun, 30 Jun 2024 16:02:51 +0530
Subject: [PATCH] feat: wrap indicator icon in a div

---
 README.md                                     | 34 +++++++++----------
 index.js                                      | 13 +++++--
 package.json                                  |  6 ++--
 pnpm-lock.yaml                                | 26 +++++++-------
 ...ased_callout_with_alias_configuration.html |  2 +-
 .../assert_callout_without_any_option.html    |  2 +-
 .../callout_with_custom_attributes.html       |  2 +-
 test/snapshots/callout_with_custom_title.html |  2 +-
 ...llout_with_global_custom_element_type.html |  2 +-
 ...type_and_specific_custom_element_type.html |  2 +-
 .../callout_with_markdown_title.html          |  2 +-
 ...callout_with_redundant_indicator_flag.html |  2 +-
 .../commend_callout_without_any_option.html   |  2 +-
 test/snapshots/custom_shoutout_callout.html   |  2 +-
 .../deter_callout_without_any_option.html     |  2 +-
 ...hing_callout_with_custom_element_type.html |  2 +-
 ...tching_callout_with_overriden_default.html |  2 +-
 .../note_callout_without_any_option.html      |  2 +-
 ...ther_callout_with_alias_configuration.html |  2 +-
 ...ith_custom_element_type_configuration.html |  2 +-
 ...tching_callout_with_overriden_default.html |  2 +-
 .../warn_callout_without_any_option.html      |  2 +-
 themes/github/index.css                       |  3 +-
 themes/microflash/index.css                   |  3 +-
 themes/vitepress/index.css                    |  3 +-
 25 files changed, 65 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index 72c876f..ad477c4 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,7 @@ Running that with `node example.js` yields:
 <aside class="callout callout-note">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-note">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12 8h.01M12 12v4"/>
         <circle cx="12" cy="12" r="10"/>
       </svg>
@@ -142,23 +142,23 @@ By default, the following callouts and aliases are preconfigured.
   callouts: {
     note: {
       title: "Note",
-      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-note"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg>`
+      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg>`
     },
     commend: {
       title: "Success",
-      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-commend"><path d="m8 12 2.7 2.7L16 9.3"/><circle cx="12" cy="12" r="10"/></svg>`
+      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m8 12 2.7 2.7L16 9.3"/><circle cx="12" cy="12" r="10"/></svg>`
     },
     warn: {
       title: "Warning",
-      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-warn"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg>`
+      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg>`
     },
     deter: {
       title: "Danger",
-      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-deter"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg>`
+      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg>`
     },
     assert: {
       title: "Info",
-      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert"><path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/></svg>`
+      hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/></svg>`
     }
   }
 }
@@ -200,7 +200,7 @@ Running `example.js` will yield:
 <aside class="callout callout-warn">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-warn">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/>
       </svg>
     </div>
@@ -228,7 +228,7 @@ Running `example.js` will yield:
 <aside class="callout callout-warn">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-warn">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/>
       </svg>
     </div>
@@ -273,7 +273,7 @@ async function main() {
       callouts: {
         shoutout: {
           title: "Shoutout",
-          hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-shoutout"><path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"/></svg>`
+          hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"/></svg>`
         }
       }
     })
@@ -291,7 +291,7 @@ Running `example.js` will yield:
 <aside class="callout callout-shoutout">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-shoutout">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"/>
       </svg>
     </div>
@@ -349,7 +349,7 @@ Running that with `node example.js` yields:
 <aside class="callout callout-deter">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-deter">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/>
         <path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/>
       </svg>
@@ -412,7 +412,7 @@ Running that with `node example.js` yields:
 <div class="callout callout-assert">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/>
       </svg>
     </div>
@@ -470,7 +470,7 @@ Running that with `node example.js` yields:
 <section class="callout callout-assert">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/>
       </svg>
     </div>
@@ -537,7 +537,7 @@ Running that with `node example.js` yields:
 <div class="callout callout-assert">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/>
       </svg>
     </div>
@@ -551,7 +551,7 @@ Running that with `node example.js` yields:
 <section class="callout callout-note">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-note">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M12 8h.01M12 12v4"/>
         <circle cx="12" cy="12" r="10"/>
       </svg>
@@ -598,7 +598,7 @@ async function main() {
       callouts: {
         commend: {
           title: "Tip",
-          hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-commend"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg>`
+          hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg>`
         }
       }
     })
@@ -616,7 +616,7 @@ Running that with `node example.js` yields:
 <aside class="callout callout-commend">
   <div class="callout-indicator">
     <div class="callout-hint">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-commend">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
         <path d="M22 4 12 14.01l-3-3"/>
       </svg>
diff --git a/index.js b/index.js
index 98a44bf..22796cd 100644
--- a/index.js
+++ b/index.js
@@ -11,8 +11,17 @@ function generate(title, children, hint, showIndicator) {
 
 		if (hint) {
 			indicators.push({
-				type: "html",
-				value: hint
+				type: "paragraph",
+				data: {
+					hName: "div",
+					hProperties: { className: ["callout-hint"] }
+				},
+				children: [
+					{
+						type: "html",
+						value: hint
+					}
+				]
 			});
 		}
 
diff --git a/package.json b/package.json
index 4bccc7d..3c81c44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@microflash/remark-callout-directives",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "remark plugin to render callouts and admonitions with directives",
 	"license": "MIT",
 	"keywords": [
@@ -45,8 +45,8 @@
 		"remark-directive": "^3.0.0",
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.0",
-		"unified": "^11.0.4",
+		"unified": "^11.0.5",
 		"vitest": "^1.6.0"
 	},
-	"packageManager": "pnpm@9.3.0"
+	"packageManager": "pnpm@9.4.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index baa4297..e408e51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,8 +34,8 @@ importers:
         specifier: ^11.1.0
         version: 11.1.0
       unified:
-        specifier: ^11.0.4
-        version: 11.0.4
+        specifier: ^11.0.5
+        version: 11.0.5
       vitest:
         specifier: ^1.6.0
         version: 1.6.0
@@ -742,8 +742,8 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
-  trough@2.1.0:
-    resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
   type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
@@ -752,8 +752,8 @@ packages:
   ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
 
-  unified@11.0.4:
-    resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==}
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
@@ -1583,14 +1583,14 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.3
       hast-util-to-html: 9.0.0
-      unified: 11.0.4
+      unified: 11.0.5
 
   remark-directive@3.0.0:
     dependencies:
       '@types/mdast': 4.0.3
       mdast-util-directive: 3.0.0
       micromark-extension-directive: 3.0.0
-      unified: 11.0.4
+      unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
 
@@ -1599,7 +1599,7 @@ snapshots:
       '@types/mdast': 4.0.3
       mdast-util-from-markdown: 2.0.1
       micromark-util-types: 2.0.0
-      unified: 11.0.4
+      unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
 
@@ -1608,7 +1608,7 @@ snapshots:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
       mdast-util-to-hast: 13.1.0
-      unified: 11.0.4
+      unified: 11.0.5
       vfile: 6.0.1
 
   rollup@4.18.0:
@@ -1670,20 +1670,20 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
-  trough@2.1.0: {}
+  trough@2.2.0: {}
 
   type-detect@4.0.8: {}
 
   ufo@1.5.3: {}
 
-  unified@11.0.4:
+  unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.2
       bail: 2.0.2
       devlop: 1.1.0
       extend: 3.0.2
       is-plain-obj: 4.1.0
-      trough: 2.1.0
+      trough: 2.2.0
       vfile: 6.0.1
 
   unist-util-is@6.0.0:
diff --git a/test/snapshots/aliased_callout_with_alias_configuration.html b/test/snapshots/aliased_callout_with_alias_configuration.html
index 8cdc0aa..5f7ea9a 100644
--- a/test/snapshots/aliased_callout_with_alias_configuration.html
+++ b/test/snapshots/aliased_callout_with_alias_configuration.html
@@ -1 +1 @@
-<aside class="callout callout-deter"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg><div class="callout-title">Danger</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-deter"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg></div><div class="callout-title">Danger</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/assert_callout_without_any_option.html b/test/snapshots/assert_callout_without_any_option.html
index b97d016..eaf8a5f 100644
--- a/test/snapshots/assert_callout_without_any_option.html
+++ b/test/snapshots/assert_callout_without_any_option.html
@@ -1 +1 @@
-<aside class="callout callout-assert"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-assert"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg></div><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/callout_with_custom_attributes.html b/test/snapshots/callout_with_custom_attributes.html
index 7cb93dd..9ebe9ca 100644
--- a/test/snapshots/callout_with_custom_attributes.html
+++ b/test/snapshots/callout_with_custom_attributes.html
@@ -1 +1 @@
-<aside class="callout callout-note fancy blob" data-callout="fancy" id="intrigue"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-note fancy blob" data-callout="fancy" id="intrigue"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg></div><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/callout_with_custom_title.html b/test/snapshots/callout_with_custom_title.html
index c31b7af..3412271 100644
--- a/test/snapshots/callout_with_custom_title.html
+++ b/test/snapshots/callout_with_custom_title.html
@@ -1 +1 @@
-<aside class="callout callout-warn"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg><div class="callout-title">Be warned!</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-warn"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg></div><div class="callout-title">Be warned!</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/callout_with_global_custom_element_type.html b/test/snapshots/callout_with_global_custom_element_type.html
index 45936ee..ca0094a 100644
--- a/test/snapshots/callout_with_global_custom_element_type.html
+++ b/test/snapshots/callout_with_global_custom_element_type.html
@@ -1 +1 @@
-<section class="callout callout-note"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></section>
\ No newline at end of file
+<section class="callout callout-note"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg></div><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></section>
\ No newline at end of file
diff --git a/test/snapshots/callout_with_global_custom_element_type_and_specific_custom_element_type.html b/test/snapshots/callout_with_global_custom_element_type_and_specific_custom_element_type.html
index 97e08b4..0d7f078 100644
--- a/test/snapshots/callout_with_global_custom_element_type_and_specific_custom_element_type.html
+++ b/test/snapshots/callout_with_global_custom_element_type_and_specific_custom_element_type.html
@@ -1 +1 @@
-<div class="callout callout-assert"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></div>
\ No newline at end of file
+<div class="callout callout-assert"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg></div><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></div>
\ No newline at end of file
diff --git a/test/snapshots/callout_with_markdown_title.html b/test/snapshots/callout_with_markdown_title.html
index 544b6d1..b54beff 100644
--- a/test/snapshots/callout_with_markdown_title.html
+++ b/test/snapshots/callout_with_markdown_title.html
@@ -1 +1 @@
-<aside class="callout callout-warn"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg><div class="callout-title"><strong>Hold</strong> on <em>there</em>!</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-warn"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg></div><div class="callout-title"><strong>Hold</strong> on <em>there</em>!</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/callout_with_redundant_indicator_flag.html b/test/snapshots/callout_with_redundant_indicator_flag.html
index ee6d3b6..44dae3a 100644
--- a/test/snapshots/callout_with_redundant_indicator_flag.html
+++ b/test/snapshots/callout_with_redundant_indicator_flag.html
@@ -1 +1 @@
-<aside class="callout callout-note"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-note"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg></div><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/commend_callout_without_any_option.html b/test/snapshots/commend_callout_without_any_option.html
index b752b0a..23e26e7 100644
--- a/test/snapshots/commend_callout_without_any_option.html
+++ b/test/snapshots/commend_callout_without_any_option.html
@@ -1,3 +1,3 @@
-<aside class="callout callout-commend"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="m8 12 2.7 2.7L16 9.3"/><circle cx="12" cy="12" r="10"/></svg><div class="callout-title">Success</div></div><div class="callout-content"><ul>
+<aside class="callout callout-commend"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="m8 12 2.7 2.7L16 9.3"/><circle cx="12" cy="12" r="10"/></svg></div><div class="callout-title">Success</div></div><div class="callout-content"><ul>
 <li>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</li>
 </ul></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/custom_shoutout_callout.html b/test/snapshots/custom_shoutout_callout.html
index caac872..e787345 100644
--- a/test/snapshots/custom_shoutout_callout.html
+++ b/test/snapshots/custom_shoutout_callout.html
@@ -1 +1 @@
-<aside class="callout callout-shoutout"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-shoutout" aria-hidden="true"><path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"/></svg><div class="callout-title">Well done!</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-shoutout"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-shoutout" aria-hidden="true"><path d="M4.7 6.5h.01m8.49-2.8h.01m4.29 15.6h.01m2.79-8.5h.01m-6.41-.7 2.2-.7V6.5h2.8V3.7L21 3m-6.253 10.767c1.676-.175 2.93-.38 3.739-.064 1.234.483 1.497 1.529 1.409 3.008m-9.723-7.519c.175-1.676.38-2.93.064-3.739-.483-1.234-1.529-1.497-3.008-1.409M6.5 10.4l7.1 7.1L3 21z"/></svg></div><div class="callout-title">Well done!</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/deter_callout_without_any_option.html b/test/snapshots/deter_callout_without_any_option.html
index 94348cd..e457e9e 100644
--- a/test/snapshots/deter_callout_without_any_option.html
+++ b/test/snapshots/deter_callout_without_any_option.html
@@ -1,2 +1,2 @@
-<aside class="callout callout-deter"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg><div class="callout-title">Danger</div></div><div class="callout-content"><pre><code>Some **content** with _Markdown_ `syntax`.
+<aside class="callout callout-deter"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg></div><div class="callout-title">Danger</div></div><div class="callout-content"><pre><code>Some **content** with _Markdown_ `syntax`.
 </code></pre></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/matching_callout_with_custom_element_type.html b/test/snapshots/matching_callout_with_custom_element_type.html
index 97e08b4..0d7f078 100644
--- a/test/snapshots/matching_callout_with_custom_element_type.html
+++ b/test/snapshots/matching_callout_with_custom_element_type.html
@@ -1 +1 @@
-<div class="callout callout-assert"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></div>
\ No newline at end of file
+<div class="callout callout-assert"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg></div><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></div>
\ No newline at end of file
diff --git a/test/snapshots/matching_callout_with_overriden_default.html b/test/snapshots/matching_callout_with_overriden_default.html
index 363957e..12b5bb3 100644
--- a/test/snapshots/matching_callout_with_overriden_default.html
+++ b/test/snapshots/matching_callout_with_overriden_default.html
@@ -1 +1 @@
-<aside class="callout callout-commend"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg><div class="callout-title">Tip</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-commend"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg></div><div class="callout-title">Tip</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/note_callout_without_any_option.html b/test/snapshots/note_callout_without_any_option.html
index 0710ae4..3519ab6 100644
--- a/test/snapshots/note_callout_without_any_option.html
+++ b/test/snapshots/note_callout_without_any_option.html
@@ -1,3 +1,3 @@
-<aside class="callout callout-note"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg><div class="callout-title">Note</div></div><div class="callout-content"><blockquote>
+<aside class="callout callout-note"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg></div><div class="callout-title">Note</div></div><div class="callout-content"><blockquote>
 <p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p>
 </blockquote></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/other_callout_with_alias_configuration.html b/test/snapshots/other_callout_with_alias_configuration.html
index b97d016..eaf8a5f 100644
--- a/test/snapshots/other_callout_with_alias_configuration.html
+++ b/test/snapshots/other_callout_with_alias_configuration.html
@@ -1 +1 @@
-<aside class="callout callout-assert"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-assert"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg></div><div class="callout-title">Info</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/unmatching_callout_with_custom_element_type_configuration.html b/test/snapshots/unmatching_callout_with_custom_element_type_configuration.html
index ee6d3b6..44dae3a 100644
--- a/test/snapshots/unmatching_callout_with_custom_element_type_configuration.html
+++ b/test/snapshots/unmatching_callout_with_custom_element_type_configuration.html
@@ -1 +1 @@
-<aside class="callout callout-note"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-note"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg></div><div class="callout-title">Note</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/unmatching_callout_with_overriden_default.html b/test/snapshots/unmatching_callout_with_overriden_default.html
index 8cdc0aa..5f7ea9a 100644
--- a/test/snapshots/unmatching_callout_with_overriden_default.html
+++ b/test/snapshots/unmatching_callout_with_overriden_default.html
@@ -1 +1 @@
-<aside class="callout callout-deter"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg><div class="callout-title">Danger</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
+<aside class="callout callout-deter"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg></div><div class="callout-title">Danger</div></div><div class="callout-content"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p></div></aside>
\ No newline at end of file
diff --git a/test/snapshots/warn_callout_without_any_option.html b/test/snapshots/warn_callout_without_any_option.html
index 579af83..f10a16c 100644
--- a/test/snapshots/warn_callout_without_any_option.html
+++ b/test/snapshots/warn_callout_without_any_option.html
@@ -1,3 +1,3 @@
-<aside class="callout callout-warn"><div class="callout-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg><div class="callout-title">Warning</div></div><div class="callout-content"><ol>
+<aside class="callout callout-warn"><div class="callout-indicator"><div class="callout-hint"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg></div><div class="callout-title">Warning</div></div><div class="callout-content"><ol>
 <li>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</li>
 </ol></div></aside>
\ No newline at end of file
diff --git a/themes/github/index.css b/themes/github/index.css
index b69c248..87c4a18 100644
--- a/themes/github/index.css
+++ b/themes/github/index.css
@@ -26,13 +26,12 @@
 
 .callout-indicator {
 	display: flex;
-	align-items: center;
 	line-height: 1;
 	margin-bottom: 16px;
 	color: var(--calloutAccent);
 }
 
-.callout-indicator > svg:first-of-type {
+.callout-hint > svg {
 	margin-right: 0.5rem;
 	fill: currentColor;
 }
diff --git a/themes/microflash/index.css b/themes/microflash/index.css
index 472c1e0..0995128 100644
--- a/themes/microflash/index.css
+++ b/themes/microflash/index.css
@@ -51,7 +51,6 @@
 
 .callout-indicator {
 	display: flex;
-	align-items: center;
 	color: var(--calloutColor);
 	background-color: var(--calloutBorderColor);
 	padding: 0 0.5ch var(--calloutBorderThickness);
@@ -59,7 +58,7 @@
 	font-weight: 500;
 }
 
-.callout-indicator > svg:first-of-type {
+.callout-hint > svg {
 	margin-right: 0.5rem;
 	fill: none;
 	stroke: currentColor;
diff --git a/themes/vitepress/index.css b/themes/vitepress/index.css
index edc1bc6..a3c4415 100644
--- a/themes/vitepress/index.css
+++ b/themes/vitepress/index.css
@@ -25,13 +25,12 @@
 
 .callout-indicator {
 	display: flex;
-	align-items: center;
 	margin-bottom: 8px;
 	text-transform: uppercase;
 	font-weight: 600;
 }
 
-.callout-indicator > svg:first-of-type {
+.callout-hint > svg {
 	margin-right: 0.5rem;
 	fill: none;
 	stroke: currentColor;