From 86354fd0f745d02640418398d0c1183bf0df6313 Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Fri, 29 Nov 2024 16:06:23 +0300
Subject: [PATCH] BREAKING CHANGE: rm svg sprite

---
 packages/icons-scripts/Readme.md              |   9 +-
 packages/icons-scripts/index.js               |   9 +-
 packages/icons-scripts/package.json           |   7 +-
 packages/icons-scripts/scripts/configs/.swcrc |   1 +
 packages/icons-scripts/scripts/icons-map.js   |  89 +-
 packages/icons-scripts/scripts/icons.js       |  39 +-
 packages/icons-scripts/scripts/optimize.js    |   6 +-
 packages/icons-scripts/scripts/options.js     |  10 +-
 .../icons-scripts/scripts/output/index.js     |   6 +-
 .../icons-scripts/scripts/output/react.js     |  58 +-
 .../icons-scripts/scripts/raster/icons-map.js |  12 +-
 .../icons-scripts/scripts/raster/icons.js     |  14 +-
 .../scripts/raster/output/react.js            |  11 +-
 packages/icons-scripts/scripts/utils.js       |  18 +-
 packages/icons-scripts/tsconfig.json          |   2 +-
 packages/icons-sprite/package.json            |   2 +-
 packages/icons-sprite/src/SvgIcon.tsx         | 117 ---
 packages/icons-sprite/src/SvgIconRoot.tsx     |  59 ++
 .../__snapshots__/browser-sprite.test.ts.snap |  77 --
 .../icons-sprite/src/browser-sprite.test.ts   |  85 --
 packages/icons-sprite/src/browser-sprite.ts   |  92 --
 .../icons-sprite/src/browser-symbol.test.ts   |  20 -
 packages/icons-sprite/src/browser-symbol.ts   |  46 -
 packages/icons-sprite/src/index.ts            |   4 +-
 packages/icons-sprite/src/sprite.ts           |  43 -
 packages/icons-sprite/src/utils/parse.ts      |  15 -
 packages/icons-sprite/src/warnOnce.ts         |  12 -
 packages/icons-sprite/tsconfig.json           |   2 +-
 packages/icons/package.json                   |   2 +-
 .../{build-icons.js => build-icons.mjs}       |   4 +-
 .../src/{deprecated.js => deprecated.mjs}     |   6 +-
 packages/icons/tsconfig.json                  |   2 +-
 yarn.lock                                     | 870 +++++++++++++++++-
 33 files changed, 1081 insertions(+), 668 deletions(-)
 delete mode 100644 packages/icons-sprite/src/SvgIcon.tsx
 create mode 100644 packages/icons-sprite/src/SvgIconRoot.tsx
 delete mode 100644 packages/icons-sprite/src/__snapshots__/browser-sprite.test.ts.snap
 delete mode 100644 packages/icons-sprite/src/browser-sprite.test.ts
 delete mode 100644 packages/icons-sprite/src/browser-sprite.ts
 delete mode 100644 packages/icons-sprite/src/browser-symbol.test.ts
 delete mode 100644 packages/icons-sprite/src/browser-symbol.ts
 delete mode 100644 packages/icons-sprite/src/sprite.ts
 delete mode 100644 packages/icons-sprite/src/utils/parse.ts
 delete mode 100644 packages/icons-sprite/src/warnOnce.ts
 rename packages/icons/scripts/{build-icons.js => build-icons.mjs} (53%)
 rename packages/icons/src/{deprecated.js => deprecated.mjs} (64%)

diff --git a/packages/icons-scripts/Readme.md b/packages/icons-scripts/Readme.md
index c35c88c73..2bca6daf6 100644
--- a/packages/icons-scripts/Readme.md
+++ b/packages/icons-scripts/Readme.md
@@ -33,10 +33,11 @@ src/
   "typings": "dist/typings/index.d.ts",
   "sideEffects": ["*.css"],
   "scripts": {
-    "build-icons": "node scripts/build-icons.js"
+    "build-icons": "node scripts/build-icons.mjs"
   },
   "dependencies": {
-    "@vkontakte/icons-sprite": "^1.0.1"
+    "@vkontakte/icons-sprite": "^1.0.1",
+    "@swc/helpers": "^0.5.15"
   },
   "peerDependencies": {
     "react": "^18.0.0"
@@ -49,10 +50,10 @@ src/
 }
 ```
 
-**`scripts/build-icons.js`**:
+**`scripts/build-icons.mjs`**:
 
 ```js
-const { generateIcons } = require('@vkontakte/icons-scripts');
+import { generateIcons } from '@vkontakte/icons-scripts';
 
 generateIcons({
   srcDirectory: './src',
diff --git a/packages/icons-scripts/index.js b/packages/icons-scripts/index.js
index d891cbb50..b54fa2e24 100644
--- a/packages/icons-scripts/index.js
+++ b/packages/icons-scripts/index.js
@@ -1,7 +1,2 @@
-const { generateIcons } = require('./scripts/icons');
-const { createIconsMap } = require('./scripts/icons-map');
-
-module.exports = {
-  generateIcons,
-  createIconsMap,
-};
+export { generateIcons } from './scripts/icons.js';
+export { createIconsMap } from './scripts/icons-map.js';
diff --git a/packages/icons-scripts/package.json b/packages/icons-scripts/package.json
index 1d8c6552a..f8ac085c9 100644
--- a/packages/icons-scripts/package.json
+++ b/packages/icons-scripts/package.json
@@ -14,18 +14,21 @@
     "email": "ig.fedorov@corp.vk.com"
   },
   "dependencies": {
+    "@mapbox/hast-util-to-jsx": "^2.1.0",
     "@swc/cli": "^0.5.1",
     "@swc/core": "^1.9.3",
     "glob": "^11.0.0",
-    "svg-baker": "^1.7.0",
+    "hast-util-from-html": "^2.0.3",
     "svgo": "^3.3.2"
   },
   "devDependencies": {
     "typescript": "^5.7.2"
   },
   "engines": {
-    "node": ">12.0.0"
+    "node": ">=20.11.0"
   },
+  "type": "module",
+  "exports": "./index.js",
   "publishConfig": {
     "provenance": true
   }
diff --git a/packages/icons-scripts/scripts/configs/.swcrc b/packages/icons-scripts/scripts/configs/.swcrc
index 927573970..f5190e71d 100644
--- a/packages/icons-scripts/scripts/configs/.swcrc
+++ b/packages/icons-scripts/scripts/configs/.swcrc
@@ -1,6 +1,7 @@
 {
   "$schema": "https://swc.rs/schema.json",
   "jsc": {
+    "externalHelpers": true,
     "parser": {
       "syntax": "typescript",
       "tsx": true
diff --git a/packages/icons-scripts/scripts/icons-map.js b/packages/icons-scripts/scripts/icons-map.js
index 0508586da..01cdeb17a 100644
--- a/packages/icons-scripts/scripts/icons-map.js
+++ b/packages/icons-scripts/scripts/icons-map.js
@@ -1,8 +1,9 @@
-const glob = require('glob');
-const path = require('path');
-const fs = require('fs');
-const Compiler = require('svg-baker');
-const { dashToCamel, sortArrayAlphabetically, longestCommonPrefix } = require('./utils');
+import * as glob from 'glob';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { dashToCamel, sortArrayAlphabetically, longestCommonPrefix } from './utils.js';
+import { fromHtml } from 'hast-util-from-html';
+import toJsx from '@mapbox/hast-util-to-jsx';
 
 /**
  * @typedef {Object} Icon
@@ -175,7 +176,7 @@ function sortIconsByLongestCommonPrefix(icons) {
  * @param {(content: string) => string} [optimizeFn]
  * @return {Icon[]}
  */
-async function createIconsMap(
+export async function createIconsMap(
   src,
   extraCategories = [],
   prefix = '',
@@ -187,21 +188,55 @@ async function createIconsMap(
     ...extraCategories.map((category) => dirMap(src, category, prefix, deprecatedIcons)).flat(),
   ];
 
-  const compiler = new Compiler();
-
-  const promises = icons.map((icon) => prepareIconMapEntity(compiler, icon, optimizeFn));
+  const promises = icons.map((icon) => prepareIconMapEntity(icon, optimizeFn));
 
   return await Promise.all(promises);
 }
 
+const urlRegex = /url\(#(.*?)\)/g;
+
+/**
+ * Добавляет префикс для id внутри svg элемента
+ *
+ * @param {import('hast').RootContent} el
+ * @param {string} prefix
+ */
+function svgIdPrefix(el, prefix) {
+  if (!['element', 'root'].some((type) => type === el.type)) {
+    return;
+  }
+
+  for (const key in el.properties) {
+    if (!Object.prototype.hasOwnProperty.call(el.properties, key)) {
+      continue;
+    }
+
+    /**
+     * @type {string}
+     */
+    const value = el.properties[key];
+
+    if (key === 'id') {
+      el.properties[key] = `${prefix}_${value}`;
+      continue;
+    }
+
+    if (urlRegex.test(value)) {
+      el.properties[key] = value.replace(urlRegex, (match, id) => `url(#${prefix}_${id})`);
+    }
+  }
+
+  el.children.forEach((el) => svgIdPrefix(el, prefix));
+}
+
 /**
  * @param {Compiler} compiler
  * @param {Icon} icon
  * @param {(content: string) => string} [optimizeFn]
  */
-async function prepareIconMapEntity(compiler, icon, optimizeFn) {
+async function prepareIconMapEntity(icon, optimizeFn) {
   const subcomponentsPromises = icon.subcomponents?.map((icon) =>
-    prepareIconMapEntity(compiler, icon, optimizeFn),
+    prepareIconMapEntity(icon, optimizeFn),
   );
   const subcomponents = subcomponentsPromises
     ? await Promise.all(subcomponentsPromises)
@@ -209,31 +244,31 @@ async function prepareIconMapEntity(compiler, icon, optimizeFn) {
 
   const content = optimizeFn(icon.content);
 
-  const symbol = await compiler.addSymbol({ content, id: icon.filename, path: '' });
+  const tree = fromHtml(content, { fragment: true, space: 'svg' });
+  svgIdPrefix(tree, icon.filename);
 
-  const viewBox = symbol.viewBox;
-  // Список поддерживаемых аттрибутов, которые дублируются с symbol-элемента на svg-элемент, который ссылается на symbol
+  const svg = tree.children[0];
+  const svgContent = svg.children.reduce((jsxContent, tree) => jsxContent + toJsx(tree), '');
+
+  const viewBox = svg.properties.viewBox;
+  // Список поддерживаемых аттрибутов
   const attrs = Object.fromEntries(
     Object.entries({
-      preserveAspectRatio: symbol.tree[0]?.attrs.preserveAspectRatio,
+      fill: svg.properties.fill,
+      preserveAspectRatio: svg.properties.preserveAspectRatio,
     }).filter(([, value]) => value !== undefined),
   );
-  const width = viewBox.split(' ')[2];
-  const height = viewBox.split(' ')[3];
+  const width = svg.properties.width;
+  const height = svg.properties.height;
 
   return {
     ...icon,
-    width,
-    height,
-    content,
-    viewBox,
+    width: svg.properties.width,
+    height: svg.properties.height,
+    viewBox: svg.properties.viewBox,
     attrs: Object.keys(attrs).length ? attrs : undefined,
     subcomponents,
-    symbolId: symbol.id,
-    symbol: symbol.render(),
+    symbolId: icon.filename,
+    symbol: svgContent,
   };
 }
-
-module.exports = {
-  createIconsMap,
-};
diff --git a/packages/icons-scripts/scripts/icons.js b/packages/icons-scripts/scripts/icons.js
index 013cad6fa..d5c72c0e2 100644
--- a/packages/icons-scripts/scripts/icons.js
+++ b/packages/icons-scripts/scripts/icons.js
@@ -1,21 +1,23 @@
-const fs = require('fs');
-const path = require('path');
-const glob = require('glob');
-const { performance } = require('perf_hooks');
-const util = require('node:util');
-const exec = util.promisify(require('node:child_process').exec);
-const { debugInfo, debugError, sortArrayAlphabetically } = require('./utils');
-const { createIconsMap } = require('./icons-map');
-const { prepareOptions } = require('./options');
-const { optimize } = require('./optimize');
-const { createReactIcon } = require('./output');
-const { generateRasterIcons } = require('./raster/icons');
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { performance } from 'node:perf_hooks';
+import * as util from 'node:util';
+import * as childProcess from 'node:child_process';
+import * as glob from 'glob';
+import { debugInfo, debugError, sortArrayAlphabetically } from './utils.js';
+import { createIconsMap } from './icons-map.js';
+import { prepareOptions } from './options.js';
+import { optimize } from './optimize.js';
+import { createReactIcon } from './output/index.js';
+import { generateRasterIcons } from './raster/icons.js';
+
+const exec = util.promisify(childProcess.exec);
 
 /**
  * @typedef {import('./options').GenerateOptions} GenerateOptions
  * @param {GenerateOptions} options
  */
-function generateIcons(options) {
+export function generateIcons(options) {
   const {
     srcDirectory,
     distDirectory,
@@ -148,7 +150,7 @@ function generateIcons(options) {
     }
 
     const fileName = `${id}${size ? `_${size}` : ''}`;
-    fs.writeFileSync(path.join(iconDir, `${fileName}.ts`), reactSource);
+    fs.writeFileSync(path.join(iconDir, `${fileName}.tsx`), reactSource);
 
     if (!isSubcomponent) {
       exportsMap[exportName] = `./${dirname}/${fileName}`;
@@ -156,7 +158,7 @@ function generateIcons(options) {
   };
 
   const compile = async () => {
-    const swcConfig = path.resolve(__dirname, './configs/.swcrc');
+    const swcConfig = path.resolve(import.meta.dirname, './configs/.swcrc');
     if (!fs.existsSync(swcConfig)) {
       debugError('swc config not found');
     }
@@ -199,10 +201,7 @@ function generateIcons(options) {
  * @param {string} dir
  */
 function createIndexExports(exportsMap, dir) {
-  // TODO: v3 Удалить IconSettingsProvider
-  const exported = [
-    `export { IconSettingsProvider, IconAppearanceProvider } from '@vkontakte/icons-sprite';`,
-  ];
+  const exported = [`export { IconAppearanceProvider } from '@vkontakte/icons-sprite';`];
 
   const keys = Object.keys(exportsMap);
   if (!keys) {
@@ -217,5 +216,3 @@ function createIndexExports(exportsMap, dir) {
   const code = exported.join('\n');
   fs.writeFileSync(path.join(dir, 'index.ts'), code);
 }
-
-module.exports = { generateIcons };
diff --git a/packages/icons-scripts/scripts/optimize.js b/packages/icons-scripts/scripts/optimize.js
index 83a2cc8b9..d53689663 100644
--- a/packages/icons-scripts/scripts/optimize.js
+++ b/packages/icons-scripts/scripts/optimize.js
@@ -1,11 +1,11 @@
-const { optimize: svgo } = require('svgo');
+import { optimize as svgo } from 'svgo';
 
 /**
  * @param {string} svg
  * @param {any[]} plugins
  * @return {string}
  */
-function optimize(svg, plugins) {
+export function optimize(svg, plugins) {
   return svgo(svg, {
     plugins: [
       {
@@ -20,5 +20,3 @@ function optimize(svg, plugins) {
     ],
   }).data;
 }
-
-module.exports = { optimize };
diff --git a/packages/icons-scripts/scripts/options.js b/packages/icons-scripts/scripts/options.js
index 5ed93c316..838a1449a 100644
--- a/packages/icons-scripts/scripts/options.js
+++ b/packages/icons-scripts/scripts/options.js
@@ -1,6 +1,6 @@
-const path = require('path');
-const fs = require('fs');
-const { debugError } = require('./utils');
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { debugError } from './utils.js';
 
 /**
  * @typedef {Object.<string, string | null>} DeprecatedIcons
@@ -22,7 +22,7 @@ const { debugError } = require('./utils');
  * @param {GenerateOptions} options
  * @return {GenerateOptions}
  */
-function prepareOptions(options) {
+export function prepareOptions(options) {
   const {
     srcDirectory,
     distDirectory,
@@ -60,5 +60,3 @@ function prepareOptions(options) {
     deprecatedIcons,
   };
 }
-
-module.exports = { prepareOptions };
diff --git a/packages/icons-scripts/scripts/output/index.js b/packages/icons-scripts/scripts/output/index.js
index ce56dfff6..21f0fdff4 100644
--- a/packages/icons-scripts/scripts/output/index.js
+++ b/packages/icons-scripts/scripts/output/index.js
@@ -1,5 +1 @@
-const { createReactIcon } = require('./react');
-
-module.exports = {
-  createReactIcon,
-};
+export { createReactIcon } from './react.js';
diff --git a/packages/icons-scripts/scripts/output/react.js b/packages/icons-scripts/scripts/output/react.js
index 43a601c88..2d9becfaf 100644
--- a/packages/icons-scripts/scripts/output/react.js
+++ b/packages/icons-scripts/scripts/output/react.js
@@ -1,6 +1,6 @@
-const { dashToCamel } = require('../utils');
+import { dashToCamel } from '../utils.js';
 
-function createReactIcon({
+export function createReactIcon({
   id,
   attrs,
   width,
@@ -25,36 +25,36 @@ function createReactIcon({
 `;
   }
 
-  // TODO: Избавиться от use client, если избавимся от спрайта
-  // Чтобы nextjs мог рендерить иконки как серверные компоненты
-  return `'use client';
-
-import { SVGProps, Ref, FC } from 'react';
-import { makeIcon } from '@vkontakte/icons-sprite';
+  return `
+import * as React from 'react';
+import { SvgIconRoot, type SvgIconProps } from '@vkontakte/icons-sprite';
 ${subcomponentsImports}
 
-export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
-  fill?: string;
-  width?: number;
-  height?: number;
-  getRootRef?: Ref<SVGSVGElement>;
-  title?: string;
-  deprecated?: boolean;
-  replacement?: string;
-}
+export type ${componentName}Props = SvgIconProps
 
 ${jsdoc}
-export const ${componentName}: FC<${componentName}Props> & ${typeAssigns} = makeIcon<${componentName}Props, ${typeAssigns}>(
-  '${componentName}',
-  '${id}',
-  '${viewBox}',
-  '${content}',
-  ${width},
-  ${height},
-  ${!!deprecated},
-  ${replacement ? `'${replacement}'` : undefined}
-  ${attrs ? `, ${JSON.stringify(attrs)}` : ''}
-);
+export const ${componentName}: React.FC<${componentName}Props> & ${typeAssigns} = ({
+  width = ${width},
+  height = ${height},
+  viewBox = '${viewBox}',
+  children,
+  ...restProps
+}: ${componentName}Props) => {
+  return (
+    <SvgIconRoot
+      baseClassName="vkuiIcon--${id}"
+      viewBox={viewBox}
+      width={width}
+      height={height}
+      ${attrs ? `{...${JSON.stringify(attrs)}}` : ''}
+      {...restProps}
+    >
+      {children}
+      ${content}
+    </SvgIconRoot>
+  );
+}
+
 ${assigns}
 `;
 }
@@ -86,5 +86,3 @@ function getSubcomponentsAssigns(rootComponentName, subcomponents) {
     typeAssigns: assigns ? `{ ${typeAssigns.join(',\n')} }` : '{}',
   };
 }
-
-module.exports = { createReactIcon };
diff --git a/packages/icons-scripts/scripts/raster/icons-map.js b/packages/icons-scripts/scripts/raster/icons-map.js
index ad113b519..2582ed3d1 100644
--- a/packages/icons-scripts/scripts/raster/icons-map.js
+++ b/packages/icons-scripts/scripts/raster/icons-map.js
@@ -1,6 +1,6 @@
-const glob = require('glob');
-const path = require('path');
-const { dashToCamel, sortArrayAlphabetically } = require('../utils');
+import * as glob from 'glob';
+import * as path from 'node:path';
+import { dashToCamel, sortArrayAlphabetically } from '../utils.js';
 
 /**
  * @typedef {Object} IconEntity
@@ -16,7 +16,7 @@ const { dashToCamel, sortArrayAlphabetically } = require('../utils');
 /**
  * @param {string} src
  */
-function createIconsMap(src) {
+export function createIconsMap(src) {
   const files = sortArrayAlphabetically(glob.sync(path.posix.join(src, `./png/**/*.png`)));
 
   /**
@@ -63,7 +63,3 @@ function createIconsMap(src) {
 function getIconComponentName(name) {
   return `RasterIcon${dashToCamel(name.replace(/([^]+)_([\d]+)$/, '$2_$1'))}`;
 }
-
-module.exports = {
-  createIconsMap,
-};
diff --git a/packages/icons-scripts/scripts/raster/icons.js b/packages/icons-scripts/scripts/raster/icons.js
index 3b6367121..0852da050 100644
--- a/packages/icons-scripts/scripts/raster/icons.js
+++ b/packages/icons-scripts/scripts/raster/icons.js
@@ -1,13 +1,13 @@
-const fs = require('fs');
-const path = require('path');
-const { createIconsMap } = require('./icons-map');
-const { createReactRasterIcon } = require('./output/react');
+import fs from 'node:fs';
+import path from 'node:path';
+import { createIconsMap } from './icons-map.js';
+import { createReactRasterIcon } from './output/react.js';
 
 /**
  * @param {string} srcDirectory
  * @param {string} tsFilesDirectory
  */
-function generateRasterIcons(srcDirectory, tsFilesDirectory) {
+export function generateRasterIcons(srcDirectory, tsFilesDirectory) {
   const iconsMap = createIconsMap(srcDirectory);
 
   const exportsMap = {};
@@ -38,7 +38,3 @@ function generateRasterIcons(srcDirectory, tsFilesDirectory) {
 
   return exportsMap;
 }
-
-module.exports = {
-  generateRasterIcons,
-};
diff --git a/packages/icons-scripts/scripts/raster/output/react.js b/packages/icons-scripts/scripts/raster/output/react.js
index 3ea93f14a..a633ec4ee 100644
--- a/packages/icons-scripts/scripts/raster/output/react.js
+++ b/packages/icons-scripts/scripts/raster/output/react.js
@@ -1,5 +1,6 @@
-const path = require('path');
-const { appearanceTypes } = require('@vkontakte/icons-sprite');
+import * as path from 'node:path';
+
+const appearanceTypes = ['light', 'dark'];
 
 /**
  * @type {DensityBucketType[]}
@@ -12,7 +13,7 @@ const densityBucketTypes = ['mdpi', 'xhdpi', 'xxhdpi'];
  * @param {string} outputPath
  * @returns {string}
  */
-function createReactRasterIcon({ id, size, componentName, ...options }, outputPath) {
+export function createReactRasterIcon({ id, size, componentName, ...options }, outputPath) {
   /**
    * @type {Record<'densityBucketSetImports' | 'densityBucketAvailableImports', string[]>}
    */
@@ -57,7 +58,3 @@ export const ${componentName}: FC<${componentName}Props> = makeRasterIcon<${comp
 );
 `;
 }
-
-module.exports = {
-  createReactRasterIcon,
-};
diff --git a/packages/icons-scripts/scripts/utils.js b/packages/icons-scripts/scripts/utils.js
index 925c182ee..be3060238 100644
--- a/packages/icons-scripts/scripts/utils.js
+++ b/packages/icons-scripts/scripts/utils.js
@@ -1,8 +1,8 @@
-function debugInfo(...message) {
+export function debugInfo(...message) {
   console.info('[icons-scripts]', ...message);
 }
 
-function debugError(...message) {
+export function debugError(...message) {
   console.error('[icons-scripts]', ...message);
   process.exit(1);
 }
@@ -11,7 +11,7 @@ function debugError(...message) {
  * @param {string[]} array
  * @return {string[]}
  */
-function sortArrayAlphabetically(array) {
+export function sortArrayAlphabetically(array) {
   return array.sort((a, b) => a.localeCompare(b));
 }
 
@@ -19,7 +19,7 @@ function sortArrayAlphabetically(array) {
  * @param {string} dash
  * @return {string}
  */
-function dashToCamel(dash) {
+export function dashToCamel(dash) {
   const dashSplitted = dash.split('_');
   return dashSplitted.reduce((res, piece) => {
     piece = piece.charAt(0).toUpperCase() + piece.slice(1);
@@ -27,7 +27,7 @@ function dashToCamel(dash) {
   }, '');
 }
 
-function longestCommonPrefix(...strings) {
+export function longestCommonPrefix(...strings) {
   if (!strings.length) {
     return '';
   }
@@ -40,11 +40,3 @@ function longestCommonPrefix(...strings) {
 
   return strings[0];
 }
-
-module.exports = {
-  debugInfo,
-  debugError,
-  sortArrayAlphabetically,
-  dashToCamel,
-  longestCommonPrefix,
-};
diff --git a/packages/icons-scripts/tsconfig.json b/packages/icons-scripts/tsconfig.json
index f661b9399..f34d78159 100644
--- a/packages/icons-scripts/tsconfig.json
+++ b/packages/icons-scripts/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "esnext",
     "lib": ["es6", "dom"],
     "outDir": "dist",
diff --git a/packages/icons-sprite/package.json b/packages/icons-sprite/package.json
index 26764d8a1..4e59644bd 100644
--- a/packages/icons-sprite/package.json
+++ b/packages/icons-sprite/package.json
@@ -19,7 +19,7 @@
     "build:types": "tsc --emitDeclarationOnly --declaration",
     "prepack": "yarn build",
     "size": "yarn build:es6 && size-limit",
-    "test": "jest"
+    "test": "jest --passWithNoTests"
   },
   "dependencies": {
     "@swc/helpers": "^0.5.15"
diff --git a/packages/icons-sprite/src/SvgIcon.tsx b/packages/icons-sprite/src/SvgIcon.tsx
deleted file mode 100644
index fb8529cf8..000000000
--- a/packages/icons-sprite/src/SvgIcon.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { BrowserSymbol } from './browser-symbol';
-import { addSpriteSymbol, useIsomorphicLayoutEffect } from './sprite';
-import { warnOnce } from './warnOnce';
-
-export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
-  width?: number;
-  height?: number;
-  getRootRef?: React.Ref<SVGSVGElement>;
-  title?: string;
-  /**
-   * @ignore
-   */
-  iconId?: string;
-}
-
-const SvgIcon = ({
-  width = 0,
-  height = 0,
-  display = 'block',
-  'aria-hidden': ariaHidden = true,
-  iconId,
-  className,
-  fill,
-  getRootRef,
-  'style': propsStyle,
-  title,
-  children,
-  ...restProps
-}: SvgIconProps) => {
-  const child = React.Children.toArray(children)[0];
-  const hasIconChildren =
-    React.isValidElement(child) && typeof child.type === 'function' && 'mountIcon' in child.type;
-
-  const size = Math.max(width, height);
-
-  const style = {
-    width,
-    height,
-    ...propsStyle,
-  };
-
-  return (
-    <svg
-      aria-hidden={ariaHidden}
-      display={display}
-      className={[
-        'vkuiIcon',
-        `vkuiIcon--${size}`,
-        `vkuiIcon--w-${width}`,
-        `vkuiIcon--h-${height}`,
-        `vkuiIcon--${iconId}`,
-        className,
-      ]
-        .join(' ')
-        .trim()}
-      width={width}
-      height={height}
-      style={style}
-      ref={getRootRef}
-      {...restProps}
-    >
-      {title && <title>{title}</title>}
-      {hasIconChildren && children}
-      <use xlinkHref={`#${iconId}`} style={{ fill: 'currentColor', color: fill }}>
-        {!hasIconChildren && children}
-      </use>
-    </svg>
-  );
-};
-
-export function makeIcon<Props extends SvgIconProps = SvgIconProps, Subcomponents = {}>(
-  componentName: string,
-  iconId: string,
-  viewBox: string,
-  content: string,
-  width: number,
-  height: number,
-  deprecated?: boolean,
-  replacement?: string,
-  attrs?: Record<string, string>,
-): React.FC<Props> & Subcomponents {
-  let isMounted = false;
-  function mountIcon() {
-    if (!isMounted) {
-      addSpriteSymbol(new BrowserSymbol({ content }));
-      isMounted = true;
-    }
-  }
-
-  const warn = warnOnce(componentName);
-  const Icon = (props: Props) => {
-    useIsomorphicLayoutEffect(mountIcon, []);
-
-    if (deprecated) {
-      const replacementNotice = replacement ? `. Замените на ${replacement}` : '';
-
-      warn('Иконка устарела' + replacementNotice);
-    }
-
-    return (
-      <SvgIcon
-        {...attrs}
-        viewBox={viewBox}
-        iconId={iconId}
-        {...props}
-        width={props.width !== undefined && !isNaN(props.width) ? +props.width : width}
-        height={props.height !== undefined && !isNaN(props.height) ? +props.height : height}
-      />
-    );
-  };
-
-  Icon.mountIcon = mountIcon;
-  Icon.displayName = componentName;
-
-  return Icon as any;
-}
diff --git a/packages/icons-sprite/src/SvgIconRoot.tsx b/packages/icons-sprite/src/SvgIconRoot.tsx
new file mode 100644
index 000000000..33a5b86c4
--- /dev/null
+++ b/packages/icons-sprite/src/SvgIconRoot.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+function classNames(...classes: (string | undefined)[]) {
+  return classes.filter((v) => v).join(' ');
+}
+
+export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  getRootRef?: React.Ref<SVGSVGElement>;
+  title?: string;
+}
+
+interface SvgIconRootProps extends SvgIconProps {
+  baseClassName: string;
+}
+
+export function SvgIconRoot({
+  width = 0,
+  height = 0,
+  display = 'block',
+  'aria-hidden': ariaHidden = true,
+  className,
+  baseClassName,
+  getRootRef,
+  style,
+  title,
+  children,
+  ...restProps
+}: SvgIconRootProps) {
+  const size = Math.max(width, height);
+
+  return (
+    <svg
+      aria-hidden={ariaHidden}
+      display={display}
+      className={classNames(
+        className,
+        'vkuiIcon',
+        `vkuiIcon--${size}`,
+        `vkuiIcon--w-${width}`,
+        `vkuiIcon--h-${height}`,
+        baseClassName,
+      )}
+      width={width}
+      height={height}
+      style={{
+        width,
+        height,
+        ...style,
+      }}
+      ref={getRootRef}
+      {...restProps}
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  );
+}
diff --git a/packages/icons-sprite/src/__snapshots__/browser-sprite.test.ts.snap b/packages/icons-sprite/src/__snapshots__/browser-sprite.test.ts.snap
deleted file mode 100644
index 9d3255f49..000000000
--- a/packages/icons-sprite/src/__snapshots__/browser-sprite.test.ts.snap
+++ /dev/null
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BrowserSprite attach 1`] = `
-<body>
-  <svg
-    aria-hidden="true"
-    id="sprite"
-    style="position:absolute;width:0;height:0"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <symbol
-      id="symbol2"
-    />
-    <symbol
-      id="symbol1"
-    />
-  </svg>
-</body>
-`;
-
-exports[`BrowserSprite mount && unmount prepend: mount 1`] = `
-<body>
-  <svg
-    aria-hidden="true"
-    id="sprite"
-    style="position:absolute;width:0;height:0"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <symbol
-      id="symbol"
-    />
-  </svg>
-  <div
-    id="block"
-  />
-</body>
-`;
-
-exports[`BrowserSprite mount && unmount prepend: unmount 1`] = `
-<body>
-  <div
-    id="block"
-  />
-</body>
-`;
-
-exports[`BrowserSprite mount && unmount: mount 1`] = `
-<body>
-  <div
-    id="block"
-  />
-  <svg
-    aria-hidden="true"
-    id="sprite"
-    style="position:absolute;width:0;height:0"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <symbol
-      id="symbol1"
-    />
-    <symbol
-      id="symbol2"
-    />
-  </svg>
-</body>
-`;
-
-exports[`BrowserSprite mount && unmount: unmount 1`] = `
-<body>
-  <div
-    id="block"
-  />
-</body>
-`;
diff --git a/packages/icons-sprite/src/browser-sprite.test.ts b/packages/icons-sprite/src/browser-sprite.test.ts
deleted file mode 100644
index 058095e1f..000000000
--- a/packages/icons-sprite/src/browser-sprite.test.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { describe, expect, test, afterEach } from '@jest/globals';
-import { BrowserSprite } from './browser-sprite';
-import { BrowserSymbol } from './browser-symbol';
-
-afterEach(() => {
-  document.body.innerHTML = '';
-});
-
-describe(BrowserSprite, () => {
-  test('mount && unmount', () => {
-    document.body.innerHTML = '<div id="block"></div>';
-    const sprite = new BrowserSprite({
-      attrs: {
-        id: 'sprite',
-      },
-    });
-
-    sprite.add(new BrowserSymbol({ content: `<symbol id="symbol1"></symbol>` }));
-    const node = sprite.mount(document.body);
-    sprite.add(new BrowserSymbol({ content: `<symbol id="symbol2"></symbol>` }));
-
-    expect(document.getElementById('sprite')).not.toBeNull();
-    expect(document.getElementById('symbol1')).not.toBeNull();
-    expect(document.getElementById('symbol2')).not.toBeNull();
-    expect(document.getElementById('block')).not.toBeNull();
-    expect(document.body.firstElementChild!.id).toBe('block');
-    expect(document.body).toMatchSnapshot('mount');
-    expect(sprite.mount(document.body)).toBe(node);
-
-    sprite.unmount();
-
-    expect(document.getElementById('sprite')).toBeNull();
-    expect(document.getElementById('symbol1')).toBeNull();
-    expect(document.getElementById('symbol2')).toBeNull();
-    expect(document.getElementById('block')).not.toBeNull();
-    expect(document.body).toMatchSnapshot('unmount');
-  });
-
-  test('mount && unmount prepend', () => {
-    document.body.innerHTML = '<div id="block"></div>';
-
-    const sprite = new BrowserSprite({
-      attrs: {
-        id: 'sprite',
-      },
-    });
-
-    sprite.mount(document.body, true);
-    sprite.add(new BrowserSymbol({ content: `<symbol id="symbol"></symbol>` }));
-
-    expect(document.getElementById('sprite')).not.toBeNull();
-    expect(document.getElementById('symbol')).not.toBeNull();
-    expect(document.getElementById('block')).not.toBeNull();
-    expect(document.body.firstElementChild!.id).toBe('sprite');
-    expect(document.body).toMatchSnapshot('mount');
-
-    sprite.unmount();
-
-    expect(document.getElementById('sprite')).toBeNull();
-    expect(document.getElementById('symbol')).toBeNull();
-    expect(document.getElementById('block')).not.toBeNull();
-    expect(document.body).toMatchSnapshot('unmount');
-  });
-
-  test('attach', () => {
-    const sprite = new BrowserSprite({
-      attrs: {
-        id: 'sprite',
-      },
-    });
-    const node = sprite.mount(document.body);
-    sprite.add(new BrowserSymbol({ content: `<symbol id="symbol1"></symbol>` }));
-
-    const sprite2 = new BrowserSprite();
-    sprite2.add(new BrowserSymbol({ content: `<symbol id="symbol2"></symbol>` }));
-    sprite2.attach(node);
-
-    expect(document.getElementById('sprite')).not.toBeNull();
-    expect(document.getElementById('symbol1')).not.toBeNull();
-    expect(document.getElementById('symbol2')).not.toBeNull();
-    expect(document.body).toMatchSnapshot();
-
-    sprite2.attach(node);
-  });
-});
diff --git a/packages/icons-sprite/src/browser-sprite.ts b/packages/icons-sprite/src/browser-sprite.ts
deleted file mode 100644
index d432ae648..000000000
--- a/packages/icons-sprite/src/browser-sprite.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { BrowserSymbol } from './browser-symbol';
-
-const namespaceURI = 'http://www.w3.org/2000/svg';
-
-export interface SpriteConfig {
-  attrs?: Record<string, string>;
-}
-
-export class BrowserSprite {
-  private symbols: Map<string, BrowserSymbol> = new Map();
-  private config: SpriteConfig = {
-    attrs: {
-      'xmlns': namespaceURI,
-      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
-      'style': 'position:absolute;width:0;height:0',
-      'aria-hidden': 'true',
-    },
-  };
-
-  node: Element | null = null;
-
-  constructor(config: SpriteConfig = {}) {
-    Object.assign(this.config.attrs!, config.attrs);
-  }
-
-  private push(symbol: BrowserSymbol) {
-    const { symbols } = this;
-    const existing = symbols.has(symbol.id);
-
-    symbols.set(symbol.id, symbol);
-
-    return !existing;
-  }
-
-  add(symbol: BrowserSymbol) {
-    const isNewSymbol = this.push(symbol);
-
-    if (!!this.node && isNewSymbol) {
-      symbol.mount(this.node);
-    }
-
-    return isNewSymbol;
-  }
-
-  attach(target: Element) {
-    if (!!this.node) {
-      return;
-    }
-
-    this.node = target;
-
-    // Already added symbols needs to be mounted
-    this.symbols.forEach((symbol) => {
-      symbol.mount(target);
-    });
-
-    // Create symbols from existing DOM nodes, add and mount them
-    target.querySelectorAll('symbol').forEach((symbolNode: Element) => {
-      const symbol = BrowserSymbol.createFromExistingNode(symbolNode);
-      this.add(symbol);
-    });
-  }
-
-  mount(target: Node, prepend = false) {
-    if (!!this.node) {
-      return this.node;
-    }
-
-    this.node = this.render();
-
-    if (prepend && target.childNodes[0]) {
-      target.insertBefore(this.node, target.firstChild);
-    } else {
-      target.appendChild(this.node);
-    }
-
-    return this.node;
-  }
-
-  private render() {
-    const el = document.createElementNS(namespaceURI, 'svg');
-
-    Object.entries(this.config.attrs!).forEach((entry) => el.setAttribute(entry[0], entry[1]));
-    this.symbols.forEach((symbol) => el.appendChild(symbol.node));
-
-    return el;
-  }
-
-  unmount() {
-    this.node && this.node.parentNode && this.node.parentNode.removeChild(this.node);
-  }
-}
diff --git a/packages/icons-sprite/src/browser-symbol.test.ts b/packages/icons-sprite/src/browser-symbol.test.ts
deleted file mode 100644
index 422e45a96..000000000
--- a/packages/icons-sprite/src/browser-symbol.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, expect, test, afterEach } from '@jest/globals';
-import { BrowserSprite } from './browser-sprite';
-import { BrowserSymbol } from './browser-symbol';
-
-afterEach(() => {
-  document.body.innerHTML = '';
-});
-
-describe(BrowserSymbol, () => {
-  test('mount', () => {
-    const sprite = new BrowserSymbol({ content: `<symbol id="symbol1"></symbol>` });
-    const node = sprite.mount(document.body);
-
-    expect(document.getElementById('symbol1')).not.toBeNull();
-    expect(sprite.mount(document.body)).toBe(node);
-
-    sprite.unmount();
-    expect(document.getElementById('symbol1')).toBeNull();
-  });
-});
diff --git a/packages/icons-sprite/src/browser-symbol.ts b/packages/icons-sprite/src/browser-symbol.ts
deleted file mode 100644
index bf6be5dad..000000000
--- a/packages/icons-sprite/src/browser-symbol.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { parse } from './utils/parse';
-
-interface SpriteSymbolOption {
-  content: string;
-}
-
-export class BrowserSymbol {
-  protected isMounted: boolean = false;
-  node: Element;
-
-  constructor({ content }: SpriteSymbolOption) {
-    this.node = parse(content);
-  }
-
-  get id(): string {
-    return this.node.id;
-  }
-
-  static createFromExistingNode(node: Element): BrowserSymbol {
-    const symbol = new BrowserSymbol({
-      content: '',
-    });
-    symbol.node = node;
-
-    return symbol;
-  }
-
-  mount(target: Node) {
-    if (this.isMounted) {
-      return this.node;
-    }
-
-    this.isMounted = true;
-
-    target.appendChild(this.node);
-
-    return this.node;
-  }
-
-  unmount() {
-    if (this.node && this.node.parentNode) {
-      this.node.parentNode.removeChild(this.node);
-      this.isMounted = false;
-    }
-  }
-}
diff --git a/packages/icons-sprite/src/index.ts b/packages/icons-sprite/src/index.ts
index 6acc99ebb..0c1eb0024 100644
--- a/packages/icons-sprite/src/index.ts
+++ b/packages/icons-sprite/src/index.ts
@@ -1,6 +1,4 @@
-export { BrowserSprite } from './browser-sprite';
-export { BrowserSymbol } from './browser-symbol';
-export { makeIcon } from './SvgIcon';
+export { SvgIconRoot, type SvgIconProps } from './SvgIconRoot';
 export { makeRasterIcon } from './raster/components/RasterIcon/RasterIcon';
 export { IconSettingsProvider } from './IconSettings';
 export {
diff --git a/packages/icons-sprite/src/sprite.ts b/packages/icons-sprite/src/sprite.ts
deleted file mode 100644
index 1e0ea3bfb..000000000
--- a/packages/icons-sprite/src/sprite.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { BrowserSprite } from './browser-sprite';
-import { useLayoutEffect, useEffect } from 'react';
-
-const canUseDOM = !!(
-  typeof window !== 'undefined' &&
-  window.document &&
-  window.document.createElement
-);
-
-let browserSprite: BrowserSprite | null;
-
-if (canUseDOM) {
-  const spriteId = '__SVG_SPRITE_NODE__';
-
-  browserSprite = new BrowserSprite({ attrs: { id: spriteId } });
-
-  const mount = () => {
-    const spriteNode = document.getElementById(spriteId);
-    if (spriteNode) {
-      browserSprite!.attach(spriteNode);
-    } else {
-      browserSprite!.mount(document.body);
-    }
-
-    document.removeEventListener('DOMContentLoaded', mount);
-  };
-
-  if (document.querySelector('body')) {
-    mount();
-  } else {
-    document.addEventListener('DOMContentLoaded', mount);
-  }
-} else {
-  browserSprite = null;
-}
-
-export function addSpriteSymbol(symbol: any) {
-  if (browserSprite) {
-    browserSprite.add(symbol);
-  }
-}
-
-export const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
diff --git a/packages/icons-sprite/src/utils/parse.ts b/packages/icons-sprite/src/utils/parse.ts
deleted file mode 100644
index fb163c9b6..000000000
--- a/packages/icons-sprite/src/utils/parse.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function parse(content: string) {
-  const hasImportNode = !!document.importNode;
-  const el = new DOMParser().parseFromString(content, 'image/svg+xml').documentElement;
-
-  /**
-   * Fix for browser which are throwing WrongDocumentError
-   * if you insert an element which is not part of the document
-   * @see http://stackoverflow.com/a/7986519/4624403
-   */
-  if (hasImportNode) {
-    return document.importNode(el, true);
-  }
-
-  return el;
-}
diff --git a/packages/icons-sprite/src/warnOnce.ts b/packages/icons-sprite/src/warnOnce.ts
deleted file mode 100644
index c3ecfcb4a..000000000
--- a/packages/icons-sprite/src/warnOnce.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type WarnOnceHandler = (message: string, type?: 'warn' | 'error') => void;
-
-export function warnOnce(componentName: string): WarnOnceHandler {
-  const didWarn: { [msg: string]: boolean } = {};
-
-  return (message: string, type: 'warn' | 'error' = 'warn') => {
-    if (!didWarn[message]) {
-      console[type](`[@vkontakte/icons][${componentName}] ${message}`);
-      didWarn[message] = true;
-    }
-  };
-}
diff --git a/packages/icons-sprite/tsconfig.json b/packages/icons-sprite/tsconfig.json
index b94024908..a040807cb 100644
--- a/packages/icons-sprite/tsconfig.json
+++ b/packages/icons-sprite/tsconfig.json
@@ -10,6 +10,6 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 89aedb993..daf6b7455 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -19,7 +19,7 @@
   "scripts": {
     "build": "yarn icons-build && yarn docs",
     "docs": "node --max-old-space-size=4096 scripts/docs",
-    "icons-build": "yarn run -T build:icons-sprite && yarn node scripts/build-icons.js",
+    "icons-build": "yarn run -T build:icons-sprite && yarn node scripts/build-icons.mjs",
     "size": "yarn icons-build && yarn run size-limit"
   },
   "browserslist": [
diff --git a/packages/icons/scripts/build-icons.js b/packages/icons/scripts/build-icons.mjs
similarity index 53%
rename from packages/icons/scripts/build-icons.js
rename to packages/icons/scripts/build-icons.mjs
index bbf8b6882..d506aa050 100644
--- a/packages/icons/scripts/build-icons.js
+++ b/packages/icons/scripts/build-icons.mjs
@@ -1,5 +1,5 @@
-const { generateIcons } = require('@vkontakte/icons-scripts');
-const { DEPRECATED_ICONS } = require('../src/deprecated');
+import { generateIcons } from '@vkontakte/icons-scripts';
+import { DEPRECATED_ICONS } from '../src/deprecated.mjs';
 
 generateIcons({
   srcDirectory: './src',
diff --git a/packages/icons/src/deprecated.js b/packages/icons/src/deprecated.mjs
similarity index 64%
rename from packages/icons/src/deprecated.js
rename to packages/icons/src/deprecated.mjs
index 462723a63..7330ca649 100644
--- a/packages/icons/src/deprecated.js
+++ b/packages/icons/src/deprecated.mjs
@@ -2,8 +2,4 @@
  * @typedef {import('../packages/icons-scripts/scripts/options').DeprecatedIcons} DeprecatedIcons
  * @type DeprecatedIcons
  */
-const DEPRECATED_ICONS = {};
-
-module.exports = {
-  DEPRECATED_ICONS,
-};
+export const DEPRECATED_ICONS = {};
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index d07a341c8..e1f8c2ca3 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "esnext",
     "lib": ["es6", "dom"],
     "outDir": "dist",
diff --git a/yarn.lock b/yarn.lock
index 7198dcef1..24f9ffba0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -737,6 +737,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mapbox/hast-util-to-jsx@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@mapbox/hast-util-to-jsx@npm:2.1.0"
+  dependencies:
+    kebab-case: "npm:^1.0.0"
+    postcss: "npm:^8.4.31"
+    postcss-js: "npm:^4.0.1"
+    property-information: "npm:^5.5.0"
+    react-attr-converter: "npm:^0.3.1"
+    stringify-entities: "npm:^3.0.1"
+    stringify-object: "npm:^3.3.0"
+  checksum: 10/604916cb133477d630a6f511e949b73e0026cfead8361f632b9d405fe185af55ce617d4726f5095c41db817acd70f6d83c7c2d1d65108ea4faa93806e191f71e
+  languageName: node
+  linkType: hard
+
 "@napi-rs/nice-android-arm-eabi@npm:1.0.1":
   version: 1.0.1
   resolution: "@napi-rs/nice-android-arm-eabi@npm:1.0.1"
@@ -1302,6 +1317,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/debug@npm:^4.0.0":
+  version: 4.1.12
+  resolution: "@types/debug@npm:4.1.12"
+  dependencies:
+    "@types/ms": "npm:*"
+  checksum: 10/47876a852de8240bfdaf7481357af2b88cb660d30c72e73789abf00c499d6bc7cd5e52f41c915d1b9cd8ec9fef5b05688d7b7aef17f7f272c2d04679508d1053
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -1322,7 +1346,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:^1.0.6":
+"@types/estree-jsx@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "@types/estree-jsx@npm:1.0.5"
+  dependencies:
+    "@types/estree": "npm:*"
+  checksum: 10/a028ab0cd7b2950168a05c6a86026eb3a36a54a4adfae57f13911d7b49dffe573d9c2b28421b2d029b49b3d02fcd686611be2622dc3dad6d9791166c083f6008
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:*, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6":
   version: 1.0.6
   resolution: "@types/estree@npm:1.0.6"
   checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d
@@ -1338,6 +1371,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "@types/hast@npm:3.0.4"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 10/732920d81bb7605895776841b7658b4d8cc74a43a8fa176017cc0fb0ecc1a4c82a2b75a4fe6b71aa262b649d3fb62858c6789efa3793ea1d40269953af96ecb5
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -1395,6 +1437,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdast@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "@types/mdast@npm:4.0.4"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 10/efe3ec11b9ee0015a396c4fb4cd1b6f31b51b8ae9783c59560e6fc0bf6c2fa1dcc7fccaf45fa09a6c8b3397fab9dc8d431433935cae3835caa70a18f7fc775f8
+  languageName: node
+  linkType: hard
+
+"@types/ms@npm:*":
+  version: 0.7.34
+  resolution: "@types/ms@npm:0.7.34"
+  checksum: 10/f38d36e7b6edecd9badc9cf50474159e9da5fa6965a75186cceaf883278611b9df6669dc3a3cc122b7938d317b68a9e3d573d316fcb35d1be47ec9e468c6bd8a
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*":
   version: 22.9.0
   resolution: "@types/node@npm:22.9.0"
@@ -1452,6 +1510,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/unist@npm:*, @types/unist@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@types/unist@npm:3.0.3"
+  checksum: 10/96e6453da9e075aaef1dc22482463898198acdc1eeb99b465e65e34303e2ec1e3b1ed4469a9118275ec284dc98019f63c3f5d49422f0e4ac707e5ab90fb3b71a
+  languageName: node
+  linkType: hard
+
+"@types/unist@npm:^2.0.0":
+  version: 2.0.11
+  resolution: "@types/unist@npm:2.0.11"
+  checksum: 10/6d436e832bc35c6dde9f056ac515ebf2b3384a1d7f63679d12358766f9b313368077402e9c1126a14d827f10370a5485e628bf61aa91117cf4fc882423191a4e
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.3
   resolution: "@types/yargs-parser@npm:21.0.3"
@@ -1481,9 +1553,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vkontakte/icons-scripts@workspace:packages/icons-scripts"
   dependencies:
+    "@mapbox/hast-util-to-jsx": "npm:^2.1.0"
     "@swc/cli": "npm:^0.5.1"
     "@swc/core": "npm:^1.9.3"
     glob: "npm:^11.0.0"
+    hast-util-from-html: "npm:^2.0.3"
+    hast-util-to-jsx-runtime: "npm:^2.3.2"
     svg-baker: "npm:^1.7.0"
     svgo: "npm:^3.3.2"
     typescript: "npm:^5.7.2"
@@ -2457,6 +2532,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 10/1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
+  languageName: node
+  linkType: hard
+
 "camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
@@ -2478,6 +2560,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ccount@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "ccount@npm:2.0.1"
+  checksum: 10/48193dada54c9e260e0acf57fc16171a225305548f9ad20d5471e0f7a8c026aedd8747091dccb0d900cde7df4e4ddbd235df0d8de4a64c71b12f0d3303eeafd4
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^1.1.3":
   version: 1.1.3
   resolution: "chalk@npm:1.1.3"
@@ -2508,6 +2597,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-entities-html4@npm:1.1.4"
+  checksum: 10/22536aba07a378a2326420423ceadd65c0121032c527f80e84dfc648381992ed5aa666d7c2b267cd269864b3682d5b0315fc2f03a9e7c017d1a96d24ec292d5f
+  languageName: node
+  linkType: hard
+
+"character-entities-html4@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "character-entities-html4@npm:2.1.0"
+  checksum: 10/7034aa7c7fa90309667f6dd50499c8a760c3d3a6fb159adb4e0bada0107d194551cdbad0714302f62d06ce4ed68565c8c2e15fdef2e8f8764eb63fa92b34b11d
+  languageName: node
+  linkType: hard
+
+"character-entities-legacy@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-entities-legacy@npm:1.1.4"
+  checksum: 10/fe03a82c154414da3a0c8ab3188e4237ec68006cbcd681cf23c7cfb9502a0e76cd30ab69a2e50857ca10d984d57de3b307680fff5328ccd427f400e559c3a811
+  languageName: node
+  linkType: hard
+
+"character-entities-legacy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "character-entities-legacy@npm:3.0.0"
+  checksum: 10/7582af055cb488b626d364b7d7a4e46b06abd526fb63c0e4eb35bcb9c9799cc4f76b39f34fdccef2d1174ac95e53e9ab355aae83227c1a2505877893fce77731
+  languageName: node
+  linkType: hard
+
+"character-entities@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "character-entities@npm:2.0.2"
+  checksum: 10/c8dd1f4bf1a92fccf7d2fad9673660a88b37854557d30f6076c32fedfb92d1420208298829ff1d3b6b4fa1c7012e8326c45e7f5c3ed1e9a09ec177593c521b2f
+  languageName: node
+  linkType: hard
+
+"character-reference-invalid@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "character-reference-invalid@npm:2.0.1"
+  checksum: 10/98d3b1a52ae510b7329e6ee7f6210df14f1e318c5415975d4c9e7ee0ef4c07875d47c6e74230c64551f12f556b4a8ccc24d9f3691a2aa197019e72a95e9297ee
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^4.0.1":
   version: 4.0.1
   resolution: "chokidar@npm:4.0.1"
@@ -2640,6 +2771,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comma-separated-tokens@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "comma-separated-tokens@npm:2.0.3"
+  checksum: 10/e3bf9e0332a5c45f49b90e79bcdb4a7a85f28d6a6f0876a94f1bb9b2bfbdbbb9292aac50e1e742d8c0db1e62a0229a106f57917e2d067fca951d81737651700d
+  languageName: node
+  linkType: hard
+
 "commander@npm:^2.20.0":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
@@ -2957,7 +3095,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4":
   version: 4.3.7
   resolution: "debug@npm:4.3.7"
   dependencies:
@@ -2985,6 +3123,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decode-named-character-reference@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "decode-named-character-reference@npm:1.0.2"
+  dependencies:
+    character-entities: "npm:^2.0.0"
+  checksum: 10/f4c71d3b93105f20076052f9cb1523a22a9c796b8296cd35eef1ca54239c78d182c136a848b83ff8da2071e3ae2b1d300bf29d00650a6d6e675438cc31b11d78
+  languageName: node
+  linkType: hard
+
 "decode-uri-component@npm:^0.2.0":
   version: 0.2.2
   resolution: "decode-uri-component@npm:0.2.2"
@@ -3091,6 +3238,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 10/6ff05a7561f33603df87c45e389c9ac0a95e3c056be3da1a0c4702149e3a7f6fe5ffbb294478687ba51a9e95f3a60e8b6b9005993acd79c292c7d15f71964b6b
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^3.0.0":
   version: 3.1.0
   resolution: "detect-newline@npm:3.1.0"
@@ -3098,6 +3252,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"devlop@npm:^1.0.0, devlop@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "devlop@npm:1.1.0"
+  dependencies:
+    dequal: "npm:^2.0.0"
+  checksum: 10/3cc5f903d02d279d6dc4aa71ab6ed9898b9f4d1f861cc5421ce7357893c21b9520de78afb203c92bd650a6977ad0ca98195453a0707a39958cf5fea3b0a8ddd8
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.6.3":
   version: 29.6.3
   resolution: "diff-sequences@npm:29.6.3"
@@ -3540,6 +3703,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-is-identifier-name@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "estree-util-is-identifier-name@npm:3.0.0"
+  checksum: 10/cdc9187614fdb269d714eddfdf72c270a79daa9ed51e259bb78527983be6dcc68da6a914ccc41175b662194c67fbd2a1cd262f85fac1eef7111cfddfaf6f77f8
+  languageName: node
+  linkType: hard
+
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -3961,6 +4131,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-own-enumerable-property-symbols@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "get-own-enumerable-property-symbols@npm:3.0.2"
+  checksum: 10/8f0331f14159f939830884799f937343c8c0a2c330506094bc12cbee3665d88337fe97a4ea35c002cc2bdba0f5d9975ad7ec3abb925015cdf2a93e76d4759ede
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -4227,6 +4404,90 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-from-html@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "hast-util-from-html@npm:2.0.3"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    devlop: "npm:^1.1.0"
+    hast-util-from-parse5: "npm:^8.0.0"
+    parse5: "npm:^7.0.0"
+    vfile: "npm:^6.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10/cdd8ceae114d7ff6d4a81d9d7314c53299acfaca3d959a5894e80eb013c0850af613e2688f1682945c2793e0d9e1acb105560295fd8f141ab7b75f4b2e49cb2c
+  languageName: node
+  linkType: hard
+
+"hast-util-from-parse5@npm:^8.0.0":
+  version: 8.0.2
+  resolution: "hast-util-from-parse5@npm:8.0.2"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    hastscript: "npm:^9.0.0"
+    property-information: "npm:^6.0.0"
+    vfile: "npm:^6.0.0"
+    vfile-location: "npm:^5.0.0"
+    web-namespaces: "npm:^2.0.0"
+  checksum: 10/e969125c8059d0f2fd2b4c0978d0d6a89311c19005bbbf66249ac7123e08d736a6f05cdc801dc152e0c378961407a1b2ad5caadeb36ad6005fbc1d59a71d80ca
+  languageName: node
+  linkType: hard
+
+"hast-util-parse-selector@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "hast-util-parse-selector@npm:4.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10/76087670d3b0b50b23a6cb70bca53a6176d6608307ccdbb3ed18b650b82e7c3513bfc40348f1389dc0c5ae872b9a768851f4335f44654abd7deafd6974c52402
+  languageName: node
+  linkType: hard
+
+"hast-util-to-jsx-runtime@npm:^2.3.2":
+  version: 2.3.2
+  resolution: "hast-util-to-jsx-runtime@npm:2.3.2"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    style-to-object: "npm:^1.0.0"
+    unist-util-position: "npm:^5.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10/3d72f83e2d8c29adc6576d2c6b41479902fd51fac8cfb2b67c35fd68fcb9c25c274699442e4dee901a7ab926a0ff6851713ed5d92448ac09ae0f10daf293476c
+  languageName: node
+  linkType: hard
+
+"hast-util-whitespace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-whitespace@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10/8c7e9eeb8131fc18702f3a42623eb6b0b09d470347aa8badacac70e6d91f79657ab8c6b57c4c6fee3658cff405fac30e816d1cdfb3ed1fbf6045d0a4555cf4d4
+  languageName: node
+  linkType: hard
+
+"hastscript@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "hastscript@npm:9.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-parse-selector: "npm:^4.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+  checksum: 10/086444071570361e542078edba27a22a583804b93a759d17e50d0f11ca268da573f1da160eb11a64e86edbbe32d59afe7c7554c739715012a351c52884a67b1e
+  languageName: node
+  linkType: hard
+
 "he@npm:^1.1.1, he@npm:^1.2.0":
   version: 1.2.0
   resolution: "he@npm:1.2.0"
@@ -4458,6 +4719,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inline-style-parser@npm:0.2.4":
+  version: 0.2.4
+  resolution: "inline-style-parser@npm:0.2.4"
+  checksum: 10/80814479d1f3c9cbd102f9de4cd6558cf43cc2e48640e81c4371c3634f1e8b6dfeb2f21063cfa31d46cc83e834c20cd59ed9eeed9bfd45ef5bc02187ad941faf
+  languageName: node
+  linkType: hard
+
 "inspect-with-kind@npm:^1.0.5":
   version: 1.0.5
   resolution: "inspect-with-kind@npm:1.0.5"
@@ -4497,6 +4765,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphabetical@npm:2.0.1"
+  checksum: 10/56207db8d9de0850f0cd30f4966bf731eb82cedfe496cbc2e97e7c3bacaf66fc54a972d2d08c0d93bb679cb84976a05d24c5ad63de56fabbfc60aadae312edaa
+  languageName: node
+  linkType: hard
+
+"is-alphanumerical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphanumerical@npm:2.0.1"
+  dependencies:
+    is-alphabetical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+  checksum: 10/87acc068008d4c9c4e9f5bd5e251041d42e7a50995c77b1499cf6ed248f971aadeddb11f239cabf09f7975ee58cac7a48ffc170b7890076d8d227b24a68663c9
+  languageName: node
+  linkType: hard
+
 "is-array-buffer@npm:^3.0.4":
   version: 3.0.4
   resolution: "is-array-buffer@npm:3.0.4"
@@ -4583,6 +4868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-decimal@npm:2.0.1"
+  checksum: 10/97132de7acdce77caa7b797632970a2ecd649a88e715db0e4dbc00ab0708b5e7574ba5903962c860cd4894a14fd12b100c0c4ac8aed445cf6f55c6cf747a4158
+  languageName: node
+  linkType: hard
+
 "is-descriptor@npm:^0.1.0":
   version: 0.1.7
   resolution: "is-descriptor@npm:0.1.7"
@@ -4649,6 +4941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-hexadecimal@npm:2.0.1"
+  checksum: 10/66a2ea85994c622858f063f23eda506db29d92b52580709eb6f4c19550552d4dcf3fb81952e52f7cf972097237959e00adc7bb8c9400cd12886e15bf06145321
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -4688,6 +4987,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-obj@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-obj@npm:1.0.1"
+  checksum: 10/3ccf0efdea12951e0b9c784e2b00e77e87b2f8bd30b42a498548a8afcc11b3287342a2030c308e473e93a7a19c9ea7854c99a8832a476591c727df2a9c79796c
+  languageName: node
+  linkType: hard
+
 "is-plain-obj@npm:^1.0.0, is-plain-obj@npm:^1.1, is-plain-obj@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-plain-obj@npm:1.1.0"
@@ -4721,6 +5027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-regexp@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-regexp@npm:1.0.0"
+  checksum: 10/be692828e24cba479ec33644326fa98959ec68ba77965e0291088c1a741feaea4919d79f8031708f85fd25e39de002b4520622b55460660b9c369e6f7187faef
+  languageName: node
+  linkType: hard
+
 "is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "is-shared-array-buffer@npm:1.0.3"
@@ -5527,6 +5840,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kebab-case@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "kebab-case@npm:1.0.2"
+  checksum: 10/bf01164e11c544ee9b3aa1a91c2e7d6aa6b3356b834a5e885d43f36db14aae5d347cd4a298a566133321b82fde6bac6b597f148ac19bfd3d3fc81e1034a79729
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.5.3":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -5648,6 +5968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"longest-streak@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "longest-streak@npm:3.1.0"
+  checksum: 10/d7f952ed004cbdb5c8bcfc4f7f5c3d65449e6c5a9e9be4505a656e3df5a57ee125f284286b4bf8ecea0c21a7b3bf2b8f9001ad506c319b9815ad6a63a47d0fd0
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -5776,6 +6103,110 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-from-markdown@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "mdast-util-from-markdown@npm:2.0.2"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark: "npm:^4.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 10/69b207913fbcc0469f8c59d922af4d5509b79e809d77c9bd4781543a907fe2ecc8e6433ce0707066a27b117b13f38af3aae4f2d085e18ebd2d3ad5f1a5647902
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-expression@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdx-expression@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10/70e860f8ee22c4f478449942750055d649d4380bf43b235d0710af510189d285fb057e401d20b59596d9789f4e270fce08ca892dc849676f9e3383b991d52485
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-jsx@npm:^3.0.0":
+  version: 3.1.3
+  resolution: "mdast-util-mdx-jsx@npm:3.1.3"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    devlop: "npm:^1.1.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    parse-entities: "npm:^4.0.0"
+    stringify-entities: "npm:^4.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10/6c14f271f1380fd512038247f45887b7aa71bbf4acd8881651a317b61706b114f2582f62f7777d0eacd42c4a7b979802825c2a2fd8bb7c46a1ab931ccb1ddf3e
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdxjs-esm@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdxjs-esm@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10/05474226e163a3f407fccb5780b0d8585a95e548e5da4a85227df43f281b940c7941a9a9d4af1be4f885fe554731647addb057a728e87aa1f503ff9cc72c9163
+  languageName: node
+  linkType: hard
+
+"mdast-util-phrasing@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "mdast-util-phrasing@npm:4.1.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 10/3a97533e8ad104a422f8bebb34b3dde4f17167b8ed3a721cf9263c7416bd3447d2364e6d012a594aada40cac9e949db28a060bb71a982231693609034ed5324e
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-markdown@npm:^2.0.0":
+  version: 2.1.2
+  resolution: "mdast-util-to-markdown@npm:2.1.2"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    longest-streak: "npm:^3.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10/ab494a32f1ec90f0a502970b403b1847a10f3ba635adddb66ce70994cc47b4924c6c05078ddd29a8c2c5c9bc8c0bcc20e5fc1ef0fcb9b0cb9c0589a000817f1c
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-to-string@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+  checksum: 10/f4a5dbb9ea03521d7d3e26a9ba5652a1d6fbd55706dddd2155427517085688830e0ecd3f12418cfd40892640886eb39a4034c3c967d85e01e2fa64cfb53cff05
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.28":
   version: 2.0.28
   resolution: "mdn-data@npm:2.0.28"
@@ -5813,6 +6244,242 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-core-commonmark@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-core-commonmark@npm:2.0.2"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-destination: "npm:^2.0.0"
+    micromark-factory-label: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-factory-title: "npm:^2.0.0"
+    micromark-factory-whitespace: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-html-tag-name: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/eafa6b9cd6fd9f51efa7795824af9a765e24a4519855a5b6dfcb0f619a93d90599d39a261f626bfcc1dfa64f22430f7a677a83cb6ce4bd8e4eeabc892610c016
+  languageName: node
+  linkType: hard
+
+"micromark-factory-destination@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-destination@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/9c4baa9ca2ed43c061bbf40ddd3d85154c2a0f1f485de9dea41d7dd2ad994ebb02034a003b2c1dbe228ba83a0576d591f0e90e0bf978713f84ee7d7f3aa98320
+  languageName: node
+  linkType: hard
+
+"micromark-factory-label@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-label@npm:2.0.1"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/bd03f5a75f27cdbf03b894ddc5c4480fc0763061fecf9eb927d6429233c930394f223969a99472df142d570c831236134de3dc23245d23d9f046f9d0b623b5c2
+  languageName: node
+  linkType: hard
+
+"micromark-factory-space@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-space@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/1bd68a017c1a66f4787506660c1e1c5019169aac3b1cb075d49ac5e360e0b2065e984d4e1d6e9e52a9d44000f2fa1c98e66a743d7aae78b4b05616bf3242ed71
+  languageName: node
+  linkType: hard
+
+"micromark-factory-title@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-title@npm:2.0.1"
+  dependencies:
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/b4d2e4850a8ba0dff25ce54e55a3eb0d43dda88a16293f53953153288f9d84bcdfa8ca4606b2cfbb4f132ea79587bbb478a73092a349f893f5264fbcdbce2ee1
+  languageName: node
+  linkType: hard
+
+"micromark-factory-whitespace@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-whitespace@npm:2.0.1"
+  dependencies:
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/67b3944d012a42fee9e10e99178254a04d48af762b54c10a50fcab988688799993efb038daf9f5dbc04001a97b9c1b673fc6f00e6a56997877ab25449f0c8650
+  languageName: node
+  linkType: hard
+
+"micromark-util-character@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "micromark-util-character@npm:2.1.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/85da8f8e5f7ed16046575bef5b0964ca3fca3162b87b74ae279f1e48eb7160891313eb64f04606baed81c58b514dbdb64f1a9d110a51baaaa79225d72a7b1852
+  languageName: node
+  linkType: hard
+
+"micromark-util-chunked@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-chunked@npm:2.0.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10/f8cb2a67bcefe4bd2846d838c97b777101f0043b9f1de4f69baf3e26bb1f9885948444e3c3aec66db7595cad8173bd4567a000eb933576c233d54631f6323fe4
+  languageName: node
+  linkType: hard
+
+"micromark-util-classify-character@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-classify-character@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/4d8bbe3a6dbf69ac0fc43516866b5bab019fe3f4568edc525d4feaaaf78423fa54e6b6732b5bccbeed924455279a3758ffc9556954aafb903982598a95a02704
+  languageName: node
+  linkType: hard
+
+"micromark-util-combine-extensions@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-combine-extensions@npm:2.0.1"
+  dependencies:
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/5d22fb9ee37e8143adfe128a72b50fa09568c2cc553b3c76160486c96dbbb298c5802a177a10a215144a604b381796071b5d35be1f2c2b2ee17995eda92f0c8e
+  languageName: node
+  linkType: hard
+
+"micromark-util-decode-numeric-character-reference@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-util-decode-numeric-character-reference@npm:2.0.2"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10/ee11c8bde51e250e302050474c4a2adca094bca05c69f6cdd241af12df285c48c88d19ee6e022b9728281c280be16328904adca994605680c43af56019f4b0b6
+  languageName: node
+  linkType: hard
+
+"micromark-util-decode-string@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-decode-string@npm:2.0.1"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10/2f517e4c613609445db4b9a17f8c77832f55fb341620a8fd598f083c1227027485d601c2021c2f8f9883210b8671e7b3990f0c6feeecd49a136475465808c380
+  languageName: node
+  linkType: hard
+
+"micromark-util-encode@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-encode@npm:2.0.1"
+  checksum: 10/be890b98e78dd0cdd953a313f4148c4692cc2fb05533e56fef5f421287d3c08feee38ca679f318e740530791fc251bfe8c80efa926fcceb4419b269c9343d226
+  languageName: node
+  linkType: hard
+
+"micromark-util-html-tag-name@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-html-tag-name@npm:2.0.1"
+  checksum: 10/dea365f5ad28ad74ff29fcb581f7b74fc1f80271c5141b3b2bc91c454cbb6dfca753f28ae03730d657874fcbd89d0494d0e3965dfdca06d9855f467c576afa9d
+  languageName: node
+  linkType: hard
+
+"micromark-util-normalize-identifier@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-normalize-identifier@npm:2.0.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10/1eb9a289d7da067323df9fdc78bfa90ca3207ad8fd893ca02f3133e973adcb3743b233393d23d95c84ccaf5d220ae7f5a28402a644f135dcd4b8cfa60a7b5f84
+  languageName: node
+  linkType: hard
+
+"micromark-util-resolve-all@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-resolve-all@npm:2.0.1"
+  dependencies:
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/9275f3ddb6c26f254dd2158e66215d050454b279707a7d9ce5a3cd0eba23201021cedcb78ae1a746c1b23227dcc418ee40dd074ade195359506797a5493550cc
+  languageName: node
+  linkType: hard
+
+"micromark-util-sanitize-uri@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-sanitize-uri@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10/064c72abfc9777864ca0521a016dde62ab3e7af5215d10fd27e820798500d5d305da638459c589275c1a093cf588f493cc2f65273deac5a5331ecefc6c9ea78a
+  languageName: node
+  linkType: hard
+
+"micromark-util-subtokenize@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-util-subtokenize@npm:2.0.3"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/57b26f129f46424a4670bb47c50f13c7309bb1bc557c02150a788d1634337c1bb25a3523af3d6dffc29aaec873b3bd88fd931bfff34e64284e6436e23873ca22
+  languageName: node
+  linkType: hard
+
+"micromark-util-symbol@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-symbol@npm:2.0.1"
+  checksum: 10/497e6d95fc21c2bb5265b78a6a60db518c376dc438739b2e7d4aee6f9f165222711724b456c63163314f32b8eea68a064687711d41e986262926eab23ddb9229
+  languageName: node
+  linkType: hard
+
+"micromark-util-types@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-types@npm:2.0.1"
+  checksum: 10/69c5e18e6ba4e12473d6fe5f1a7cc113ac1d4bfc23c7ad57b16a5e4bfd09ef48b7c17a40c39d43996f2078ad898efd3f1945007c14f395abd55f2af03d413acd
+  languageName: node
+  linkType: hard
+
+"micromark@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "micromark@npm:4.0.1"
+  dependencies:
+    "@types/debug": "npm:^4.0.0"
+    debug: "npm:^4.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10/b948b1b239e589826bdaf2835daa9e88873e23d4b9148cd22109a86d4af55b96345cf9fc9059b6b19ae828f64d55e66f376ca3aeb4af3d2b0241560125f5dae6
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:3.1.0":
   version: 3.1.0
   resolution: "micromatch@npm:3.1.0"
@@ -6354,6 +7021,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "parse-entities@npm:4.0.1"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    character-entities: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+    character-reference-invalid: "npm:^2.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    is-alphanumerical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+    is-hexadecimal: "npm:^2.0.0"
+  checksum: 10/71314312d2482422fcf0b6675e020643bab424b11f64c654b7843652cae03842a7802eda1fed194ec435debb5db47a33513eb6b1176888e9e998a0368f01f5c8
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
@@ -6517,6 +7200,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-js@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: "npm:^2.0.1"
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 10/ef2cfe8554daab4166cfcb290f376e7387964c36503f5bd42008778dba735685af8d4f5e0aba67cae999f47c855df40a1cd31ae840e0df320ded36352581045e
+  languageName: node
+  linkType: hard
+
 "postcss-modules-extract-imports@npm:^3.1.0":
   version: 3.1.0
   resolution: "postcss-modules-extract-imports@npm:3.1.0"
@@ -6599,7 +7293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.33":
+"postcss@npm:^8.4.31, postcss@npm:^8.4.33":
   version: 8.4.49
   resolution: "postcss@npm:8.4.49"
   dependencies:
@@ -6744,6 +7438,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^5.5.0":
+  version: 5.6.0
+  resolution: "property-information@npm:5.6.0"
+  dependencies:
+    xtend: "npm:^4.0.0"
+  checksum: 10/e4f45b100fec5968126b08102f9567f1b5fc3442aecbb5b4cdeca401f1f447672e7638a08c81c05dd3979c62d084e0cc6acbe2d8b053c05280ac5abaaf666a68
+  languageName: node
+  linkType: hard
+
+"property-information@npm:^6.0.0":
+  version: 6.5.0
+  resolution: "property-information@npm:6.5.0"
+  checksum: 10/fced94f3a09bf651ad1824d1bdc8980428e3e480e6d01e98df6babe2cc9d45a1c52eee9a7736d2006958f9b394eb5964dedd37e23038086ddc143fc2fd5e426c
+  languageName: node
+  linkType: hard
+
 "pseudomap@npm:^1.0.2":
   version: 1.0.2
   resolution: "pseudomap@npm:1.0.2"
@@ -6821,6 +7531,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-attr-converter@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "react-attr-converter@npm:0.3.1"
+  checksum: 10/b0918aff40b23c3eb0aa16e9c840878197653c24d09fac619d573312d21a1ad37624f314628bc321c644ef9d99951b4b7940ba9e7a7882dcf3a255b1d3c2ccb6
+  languageName: node
+  linkType: hard
+
 "react-color@npm:^2.18.0":
   version: 2.19.3
   resolution: "react-color@npm:2.19.3"
@@ -7522,6 +8239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 10/202e97d7ca1ba0758a0aa4fe226ff98142073bcceeff2da3aad037968878552c3bbce3b3231970025375bbba5aee00c5b8206eda408da837ab2dc9c0f26be990
+  languageName: node
+  linkType: hard
+
 "spawn-sync@npm:^1.0.15":
   version: 1.0.15
   resolution: "spawn-sync@npm:1.0.15"
@@ -7689,6 +8413,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stringify-entities@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "stringify-entities@npm:3.1.0"
+  dependencies:
+    character-entities-html4: "npm:^1.0.0"
+    character-entities-legacy: "npm:^1.0.0"
+    xtend: "npm:^4.0.0"
+  checksum: 10/fe3806ceee0675427eac9ae5c27d706f8a9d062e8cc3729c9ca27d7b3106cb381950b0e21c289501a143611baee8b3e299e81dda52796d13d93f40f91e1dd7a3
+  languageName: node
+  linkType: hard
+
+"stringify-entities@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "stringify-entities@npm:4.0.4"
+  dependencies:
+    character-entities-html4: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+  checksum: 10/42bd2f37528795a7b4386bd39dc4699515fb0f0b8c418a6bb29ae205ce66eaff9e8801a2bee65b8049c918c9475a71c7e5911f6a88c19f1d84ebdcba3d881a2d
+  languageName: node
+  linkType: hard
+
+"stringify-object@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "stringify-object@npm:3.3.0"
+  dependencies:
+    get-own-enumerable-property-symbols: "npm:^3.0.0"
+    is-obj: "npm:^1.0.1"
+    is-regexp: "npm:^1.0.0"
+  checksum: 10/973782f09a3df3f39a2cf07dbf43fb9ba6cb32976f3616cd0f6c10e0a5c5415dd72b7b700e72920e8da2bf57c3001b8e37b5af7174bab9a748ce0416989e19b1
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -7766,6 +8522,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-to-object@npm:^1.0.0":
+  version: 1.0.8
+  resolution: "style-to-object@npm:1.0.8"
+  dependencies:
+    inline-style-parser: "npm:0.2.4"
+  checksum: 10/530b067325e3119bfaf75bdbe25cc86b02b559db00d881a74b98a2d5bb10ac953d1b455ed90c825963cf3b4bdaa1bda45f406d78d987391434b8d8ab3835df4e
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^2.0.0":
   version: 2.0.0
   resolution: "supports-color@npm:2.0.0"
@@ -8290,6 +9055,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-is@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "unist-util-is@npm:6.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10/edd6a93fb2255addf4b9eeb304c1da63c62179aef793169dd64ab955cf2f6814885fe25f95f8105893e3562dead348af535718d7a84333826e0491c04bf42511
+  languageName: node
+  linkType: hard
+
+"unist-util-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10/89d4da00e74618d7562ac7ac288961df9bcd4ccca6df3b5a90650f018eceb6b95de6e771e88bdbef46cc9d96861d456abe57b7ad1108921e0feb67c6292aa29d
+  languageName: node
+  linkType: hard
+
+"unist-util-stringify-position@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unist-util-stringify-position@npm:4.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10/d15c88aca7a31902d95d5b5355bbe09583cf6f6ff6e59e134ef76c76d3c30bc1021f2d7ea5b7897c6d0858ed5f3770c1b19de9c78274f50d72f95a0d05f1af71
+  languageName: node
+  linkType: hard
+
+"unist-util-visit-parents@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "unist-util-visit-parents@npm:6.0.1"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 10/645b3cbc5e923bc692b1eb1a9ca17bffc5aabc25e6090ff3f1489bff8effd1890b28f7a09dc853cb6a7fa0da8581bfebc9b670a68b53c4c086cb9610dfd37701
+  languageName: node
+  linkType: hard
+
+"unist-util-visit@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-visit@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10/f2bbde23641e9ade7640358c06ddeec0f38342322eb8e7819d9ee380b0f859d25d084dde22bf63db0280b3b2f36575f15aa1d6c23acf276c91c2493cf799e3b0
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^0.2.0":
   version: 0.2.0
   resolution: "universalify@npm:0.2.0"
@@ -8386,6 +9199,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-location@npm:^5.0.0":
+  version: 5.0.3
+  resolution: "vfile-location@npm:5.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10/f481d592fd507fe242da9a00d7400ded3c91587931f24e64c54f24752d7b30321721a1c99c0d949be1f6ed5fa7f8b169054fd07c744705b65dbdd10a9e4ebfe0
+  languageName: node
+  linkType: hard
+
+"vfile-message@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "vfile-message@npm:4.0.2"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 10/1a5a72bf4945a7103750a3001bd979088ce42f6a01efa8590e68b2425e1afc61ddc5c76f2d3c4a7053b40332b24c09982b68743223e99281158fe727135719fc
+  languageName: node
+  linkType: hard
+
+"vfile@npm:^6.0.0":
+  version: 6.0.3
+  resolution: "vfile@npm:6.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10/a5a85293c9eb8787aa42e180edaef00c13199a493d6ed82fecf13ab29a68526850788e22434d77808ea6b17a74e03ff899b9b4711df5b9eee75afcddd7c2e1fb
+  languageName: node
+  linkType: hard
+
 "w3c-xmlserializer@npm:^4.0.0":
   version: 4.0.0
   resolution: "w3c-xmlserializer@npm:4.0.0"
@@ -8414,6 +9257,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-namespaces@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "web-namespaces@npm:2.0.1"
+  checksum: 10/b6d9f02f1a43d0ef0848a812d89c83801d5bbad57d8bb61f02eb6d7eb794c3736f6cc2e1191664bb26136594c8218ac609f4069722c6f56d9fc2d808fa9271c6
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^7.0.0":
   version: 7.0.0
   resolution: "webidl-conversions@npm:7.0.0"
@@ -8628,6 +9478,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xtend@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "xtend@npm:4.0.2"
+  checksum: 10/ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a
+  languageName: node
+  linkType: hard
+
 "y18n@npm:^5.0.5":
   version: 5.0.8
   resolution: "y18n@npm:5.0.8"
@@ -8701,3 +9558,10 @@ __metadata:
   checksum: 10/f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"zwitch@npm:^2.0.0":
+  version: 2.0.4
+  resolution: "zwitch@npm:2.0.4"
+  checksum: 10/f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6
+  languageName: node
+  linkType: hard