feat: migrated to shiki and fixed font-family (#6340)

* feat: migrated to shiki and fixed font-family

* chore: remove extra empty lines

* fix: must be bash

* fix: critical fix to codetabs visit tree

* Update COLLABORATOR_GUIDE.md

Co-authored-by: Michael Esteban <[e-mail]>
Signed-off-by: Claudio W <[e-mail]>

---------

Signed-off-by: Claudio W <[e-mail]>
Co-authored-by: Michael Esteban <[e-mail]>

COLLABORATOR_GUIDE.md

···
 - [Tailwind][] is used as our CSS Framework and the Foundation of our Design System
 - [Hero Icons](https://heroicons.com/) is an SVG Icon Library used within our Codebase
 - [Radix UI][] is a collection of customizable UI components
-- [Shikiji][] is a Syntax Highlighter used for our Codeboxes
+- [Shiki][] is a Syntax Highlighter used for our Codeboxes
   - The syntax highlighting is done within the processing of the Markdown files with the MDX compiler as a Rehype plugin.
 - [MDX][] and Markdown are used for structuring the Content of the Website
 - [`next-intl`][] is the i18n Library adopted within the Website
···
 - `rehype-autolink-headings`: Allows us to add Anchor Links to Markdown Headings
 - `rehype-slug`: Allows us to add IDs to Markdown Headings
 
-#### Syntax Highlighting (Shikiji) and Vercel
-
-We use [Shikiji][] which is a refactor of the famous [Shiki](https://github.com/shikijs/shiki) syntax highlighter in ESM. We use it to support our native ESM-nature, and since Shiki is incompatible on serverless environments and Edge functions due of the need of Node's `fs`. Shikiji is definitely a nice port/rewrite of Shiki which supports our needs.
+#### Syntax Highlighting (Shiki) and Vercel
 
-Shikiji is integrated on our workflow as a Reype Plugin, see the `next.mdx.shiki.mjs` file. We also use the `nord` theme for Shikiji and a subset of the supported languages as defined on the `shiki.config.mjs` file.
+Shiki is integrated on our workflow as a Rehype Plugin, see the `next.mdx.shiki.mjs` file. We also use the `nord` theme for Shiki and a subset of the supported languages as defined on the `shiki.config.mjs` file.
 
 ### Vercel
 
···
 [MDX]: https://mdxjs.com/
 [PostCSS]: https://postcss.org/
 [React]: https://react.dev/
-[Shikiji]: https://github.com/antfu/shikiji
+[Shiki]: https://github.com/shikijs/shiki
 [Tailwind]: https://tailwindcss.com/
 [Radix UI]: https://www.radix-ui.com/

components/Common/CodeBox/index.module.css

···
             mr-4
             w-4.5
             text-right
+            font-ibm-plex-mono
             text-neutral-600
             [content:counter(line)]
             [counter-increment:line];

components/Common/CodeBox/index.tsx

···
     return code;
   }
 
+  // Note that since we use `.split` we will have an extra entry
+  // being an empty string, so we need to remove it
   const lines = content.split('\n');
 
   return (
-    <code>
-      {lines.flatMap((line, lineIndex) => {
-        const columns = line.split(' ');
+    <code style={{ fontFamily: 'monospace' }}>
+      {lines
+        .flatMap((line, lineIndex) => {
+          const columns = line.split(' ');
 
-        return [
-          <span key={lineIndex} className="line">
-            {columns.map((column, columnIndex) => (
-              <Fragment key={columnIndex}>
-                <span>{column}</span>
-                {columnIndex < columns.length - 1 && <span> </span>}
-              </Fragment>
-            ))}
-          </span>,
-          // Add a break line so the text content is formatted correctly
-          // when copying to clipboard
-          '\n',
-        ];
-      })}
+          return [
+            <span key={lineIndex} className="line">
+              {columns.map((column, columnIndex) => (
+                <Fragment key={columnIndex}>
+                  <span>{column}</span>
+                  {columnIndex < columns.length - 1 && <span> </span>}
+                </Fragment>
+              ))}
+            </span>,
+            // Add a break line so the text content is formatted correctly
+            // when copying to clipboard
+            '\n',
+          ];
+        })
+        // Here we remove that empty line from before and
+        // the last flatMap entry which is an `\n`
+        .slice(0, -2)}
     </code>
   );
 };

next.mdx.shiki.mjs

···
 
         // This removes all the original Code Elements and adds a new CodeTab Element
         // at the original start of the first Code Element
-        parent.children.splice(index, currentIndex, codeTabElement);
+        parent.children.splice(index, currentIndex - index, codeTabElement);
 
         // Prevent visiting the code block children and for the next N Elements
         // since all of them belong to this CodeTabs Element
-        return [SKIP, currentIndex];
+        return [SKIP];
       }
     });
 

package-lock.json

···
         "remark-gfm": "~4.0.0",
         "remark-reading-time": "~2.0.1",
         "semver": "~7.5.4",
-        "shikiji": "~0.9.17",
+        "shiki": "~1.1.2",
         "tailwindcss": "^3.4.0",
         "turbo": "1.12.2",
         "typescript": "~5.3.2",
···
         "node": ">= 8"
       }
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.1.2.tgz",
+      "integrity": "sha512-ERVzNQz88ZkDqUpWeC57Kp+Kmx5RjqeDBR1M8AGWGom4yrkITiTfXCGmjchlDSw12MhDTuPYR4HVFW8uT61RaQ=="
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
···
       }
     },
     "node_modules/@storybook/builder-manager": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.12.tgz",
-      "integrity": "sha512-AJFrtBj0R11OFwwz+2j+ivRzttWXT6LesSGoLnxown24EV9uLQoHtGb7GOA2GyzY5wjUJS9gQBPGHXjvQEfLJA==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.15.tgz",
+      "integrity": "sha512-vfpfCywiasyP7vtbgLJhjssBEwUjZhBsRsubDAzumgOochPiKKPNwsSc5NU/4ZIGaC5zRO26kUaUqFIbJdTEUQ==",
       "dev": true,
       "dependencies": {
         "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-        "@storybook/core-common": "7.6.12",
-        "@storybook/manager": "7.6.12",
-        "@storybook/node-logger": "7.6.12",
+        "@storybook/core-common": "7.6.15",
+        "@storybook/manager": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
         "@types/ejs": "^3.1.1",
         "@types/find-cache-dir": "^3.2.1",
         "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
···
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/builder-manager/node_modules/@storybook/channels": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+      "integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@storybook/client-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+      "integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@storybook/core-common": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.15.tgz",
+      "integrity": "sha512-VGmcLJ5U1r1s8/YnLbKcyB4GnNL+/sZIPqwlcSKzDXO76HoVFv1kywf7PbASote7P3gdhLSxBdg95LH2bdIbmw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-events": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/types": "7.6.15",
+        "@types/find-cache-dir": "^3.2.1",
+        "@types/node": "^18.0.0",
+        "@types/node-fetch": "^2.6.4",
+        "@types/pretty-hrtime": "^1.0.0",
+        "chalk": "^4.1.0",
+        "esbuild": "^0.18.0",
+        "esbuild-register": "^3.5.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@storybook/core-events": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+      "integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@storybook/node-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.15.tgz",
+      "integrity": "sha512-C+sCvRjR+5uVU3VTrfyv7/RlPBxesAjIucUAK0keGyIZ7sFQYCPdkm4m/C4s+TcubgAzVvuoUHlRrSppdA7WzQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@storybook/types": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+      "integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@types/node": {
+      "version": "18.19.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.15.tgz",
+      "integrity": "sha512-AMZ2UWx+woHNfM11PyAEQmfSxi05jm9OlkxczuHeEqmvwPkYj6MWv44gbzDPefYOLysTOFyI3ziiy2ONmUZfpA==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/@storybook/builder-webpack5": {
       "version": "7.6.12",
       "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.6.12.tgz",
···
       }
     },
     "node_modules/@storybook/cli": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.12.tgz",
-      "integrity": "sha512-x4sG1oIVERxp+WnWUexVlgaJCFmML0kGi7a5qfx7z4vHMxCV/WG7g1q7mPS/kqStCGEiQdTciCqOEFqlMh9MLw==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.15.tgz",
+      "integrity": "sha512-2QRqCyVGDSkraHxX2JPYkkFccbu5Uo+JYFaFJo4vmMXzDurjWON+Ga2B8FCTd4A8P4C02Ca/79jgQoyBB3xoew==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/types": "^7.23.0",
         "@ndelangen/get-tarball": "^3.0.7",
-        "@storybook/codemod": "7.6.12",
-        "@storybook/core-common": "7.6.12",
-        "@storybook/core-events": "7.6.12",
-        "@storybook/core-server": "7.6.12",
-        "@storybook/csf-tools": "7.6.12",
-        "@storybook/node-logger": "7.6.12",
-        "@storybook/telemetry": "7.6.12",
-        "@storybook/types": "7.6.12",
+        "@storybook/codemod": "7.6.15",
+        "@storybook/core-common": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/core-server": "7.6.15",
+        "@storybook/csf-tools": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/telemetry": "7.6.15",
+        "@storybook/types": "7.6.15",
         "@types/semver": "^7.3.4",
         "@yarnpkg/fslib": "2.10.3",
         "@yarnpkg/libzip": "2.3.0",
···
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/cli/node_modules/@storybook/channels": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+      "integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/@storybook/client-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+      "integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/@storybook/core-common": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.15.tgz",
+      "integrity": "sha512-VGmcLJ5U1r1s8/YnLbKcyB4GnNL+/sZIPqwlcSKzDXO76HoVFv1kywf7PbASote7P3gdhLSxBdg95LH2bdIbmw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-events": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/types": "7.6.15",
+        "@types/find-cache-dir": "^3.2.1",
+        "@types/node": "^18.0.0",
+        "@types/node-fetch": "^2.6.4",
+        "@types/pretty-hrtime": "^1.0.0",
+        "chalk": "^4.1.0",
+        "esbuild": "^0.18.0",
+        "esbuild-register": "^3.5.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/@storybook/core-events": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+      "integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/@storybook/node-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.15.tgz",
+      "integrity": "sha512-C+sCvRjR+5uVU3VTrfyv7/RlPBxesAjIucUAK0keGyIZ7sFQYCPdkm4m/C4s+TcubgAzVvuoUHlRrSppdA7WzQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/@storybook/types": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+      "integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/@types/node": {
+      "version": "18.19.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.15.tgz",
+      "integrity": "sha512-AMZ2UWx+woHNfM11PyAEQmfSxi05jm9OlkxczuHeEqmvwPkYj6MWv44gbzDPefYOLysTOFyI3ziiy2ONmUZfpA==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@storybook/cli/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
···
       }
     },
     "node_modules/@storybook/codemod": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.12.tgz",
-      "integrity": "sha512-4EI4Ah1cvz6gFkXOS/LGf23oN8LO6ABGpWwPQoMHpIV3wUkFWBwrKFUe/UAQZGptnM0VZRYx4grS82Hluw4XJA==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.15.tgz",
+      "integrity": "sha512-NiEbTLCdacj6TMxC7G49IImXeMzkG8wpPr8Ayxm9HeG6q5UkiF5/DiZdqbJm2zaosOsOKWwvXg1t6Pq6Nivytg==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/types": "^7.23.0",
         "@storybook/csf": "^0.1.2",
-        "@storybook/csf-tools": "7.6.12",
-        "@storybook/node-logger": "7.6.12",
-        "@storybook/types": "7.6.12",
+        "@storybook/csf-tools": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/types": "7.6.15",
         "@types/cross-spawn": "^6.0.2",
         "cross-spawn": "^7.0.3",
         "globby": "^11.0.2",
···
         "lodash": "^4.17.21",
         "prettier": "^2.8.0",
         "recast": "^0.23.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/@storybook/channels": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+      "integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/@storybook/client-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+      "integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/@storybook/core-events": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+      "integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/@storybook/node-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.15.tgz",
+      "integrity": "sha512-C+sCvRjR+5uVU3VTrfyv7/RlPBxesAjIucUAK0keGyIZ7sFQYCPdkm4m/C4s+TcubgAzVvuoUHlRrSppdA7WzQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod/node_modules/@storybook/types": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+      "integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
       },
       "funding": {
         "type": "opencollective",
···
       }
     },
     "node_modules/@storybook/core-server": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.12.tgz",
-      "integrity": "sha512-tjWifKsDnIc8pvbjVyQrOHef70Gcp93Bg3WwuysB8PGk7lcX2RD9zv44HNIyjxdOLSSv66IGKrOldEBL3hab4w==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.15.tgz",
+      "integrity": "sha512-iIlxEAkrmKTSA3iGNqt/4QG7hf5suxBGYIB3DZAOfBo8EdZogMYaEmuCm5dbuaJr0mcVwlqwdhQiWb1VsR/NhA==",
       "dev": true,
       "dependencies": {
         "@aw-web-design/x-default-browser": "1.4.126",
         "@discoveryjs/json-ext": "^0.5.3",
-        "@storybook/builder-manager": "7.6.12",
-        "@storybook/channels": "7.6.12",
-        "@storybook/core-common": "7.6.12",
-        "@storybook/core-events": "7.6.12",
+        "@storybook/builder-manager": "7.6.15",
+        "@storybook/channels": "7.6.15",
+        "@storybook/core-common": "7.6.15",
+        "@storybook/core-events": "7.6.15",
         "@storybook/csf": "^0.1.2",
-        "@storybook/csf-tools": "7.6.12",
+        "@storybook/csf-tools": "7.6.15",
         "@storybook/docs-mdx": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager": "7.6.12",
-        "@storybook/node-logger": "7.6.12",
-        "@storybook/preview-api": "7.6.12",
-        "@storybook/telemetry": "7.6.12",
-        "@storybook/types": "7.6.12",
+        "@storybook/manager": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/preview-api": "7.6.15",
+        "@storybook/telemetry": "7.6.15",
+        "@storybook/types": "7.6.15",
         "@types/detect-port": "^1.3.0",
         "@types/node": "^18.0.0",
         "@types/pretty-hrtime": "^1.0.0",
···
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/core-server/node_modules/@storybook/channels": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+      "integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@storybook/client-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+      "integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@storybook/core-common": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.15.tgz",
+      "integrity": "sha512-VGmcLJ5U1r1s8/YnLbKcyB4GnNL+/sZIPqwlcSKzDXO76HoVFv1kywf7PbASote7P3gdhLSxBdg95LH2bdIbmw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-events": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/types": "7.6.15",
+        "@types/find-cache-dir": "^3.2.1",
+        "@types/node": "^18.0.0",
+        "@types/node-fetch": "^2.6.4",
+        "@types/pretty-hrtime": "^1.0.0",
+        "chalk": "^4.1.0",
+        "esbuild": "^0.18.0",
+        "esbuild-register": "^3.5.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@storybook/core-events": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+      "integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@storybook/node-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.15.tgz",
+      "integrity": "sha512-C+sCvRjR+5uVU3VTrfyv7/RlPBxesAjIucUAK0keGyIZ7sFQYCPdkm4m/C4s+TcubgAzVvuoUHlRrSppdA7WzQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@storybook/preview-api": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.15.tgz",
+      "integrity": "sha512-2KN9vlizF6sFlYsJEGnFqcQaJXs4TTdawC1VazVdtaMSHANDxxDu8F1cP+u7lpPH3DkNZUmTGQDBYfYY9xR0eQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.6.15",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core-server/node_modules/@storybook/types": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+      "integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/core-server/node_modules/@types/node": {
-      "version": "18.19.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.14.tgz",
-      "integrity": "sha512-EnQ4Us2rmOS64nHDWr0XqAD8DsO6f3XR6lf9UIIrZQpUzPVdN/oPuEzfDWNHSyXLvoGgjuEm/sPwFGSSs35Wtg==",
+      "version": "18.19.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.15.tgz",
+      "integrity": "sha512-AMZ2UWx+woHNfM11PyAEQmfSxi05jm9OlkxczuHeEqmvwPkYj6MWv44gbzDPefYOLysTOFyI3ziiy2ONmUZfpA==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
···
       }
     },
     "node_modules/@storybook/csf-tools": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.12.tgz",
-      "integrity": "sha512-MdhkYYxSW5I6Jpk34gTkAZsuj9sxe0xdyeUQpNa8CgJxG43F+ehZ6scW/IPjoSG9gCXBUJMekq26UrmbVfsLCQ==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.15.tgz",
+      "integrity": "sha512-8iKgg2cmbFTpVhRRJOqouhPcEh0c8ywabG4S8ICZvnJooSXUI9mD9p3tYCS7MYuSiHj0epa1Kkn9DtXJRo9o6g==",
       "dev": true,
       "dependencies": {
         "@babel/generator": "^7.23.0",
···
         "@babel/traverse": "^7.23.2",
         "@babel/types": "^7.23.0",
         "@storybook/csf": "^0.1.2",
-        "@storybook/types": "7.6.12",
+        "@storybook/types": "7.6.15",
         "fs-extra": "^11.1.0",
         "recast": "^0.23.1",
         "ts-dedent": "^2.0.0"
···
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/csf-tools/node_modules/@storybook/channels": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+      "integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/@storybook/client-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+      "integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/@storybook/core-events": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+      "integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/csf-tools/node_modules/@storybook/types": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+      "integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/docs-mdx": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz",
···
       "dev": true
     },
     "node_modules/@storybook/manager": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.12.tgz",
-      "integrity": "sha512-WMWvswJHGiqJFJb98WQMQfZQhLuVtmci4y/VJGQ/Jnq1nJQs76BCtaeGiHcsYmRaAP1HMI4DbzuTSEgca146xw==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.15.tgz",
+      "integrity": "sha512-GGV2ElV5AOIApy/FSDzoSlLUbyd2VhQVD3TdNGRxNauYRjEO8ulXHw2tNbT6ludtpYpDTAILzI6zT/iag8hmPQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
···
       }
     },
     "node_modules/@storybook/telemetry": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.12.tgz",
-      "integrity": "sha512-eBG3sLb9CZ05pyK2JXBvnaAsxDzbZH57VyhtphhuZmx0DqF/78qIoHs9ebRJpJWV0sL5rtT9vIq8QXpQhDHLWg==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.15.tgz",
+      "integrity": "sha512-klhKXLUS3OXozGEtMbbhKZLDfm+m3nNk2jvGwD6kkBenzFUzb0P2m8awxU7h1pBcKZKH/27U9t3KVzNFzWoWPw==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.12",
-        "@storybook/core-common": "7.6.12",
-        "@storybook/csf-tools": "7.6.12",
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-common": "7.6.15",
+        "@storybook/csf-tools": "7.6.15",
         "chalk": "^4.1.0",
         "detect-package-manager": "^2.0.1",
         "fetch-retry": "^5.0.2",
···
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@storybook/channels": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+      "integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.15",
+        "@storybook/core-events": "7.6.15",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@storybook/client-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+      "integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@storybook/core-common": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.15.tgz",
+      "integrity": "sha512-VGmcLJ5U1r1s8/YnLbKcyB4GnNL+/sZIPqwlcSKzDXO76HoVFv1kywf7PbASote7P3gdhLSxBdg95LH2bdIbmw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-events": "7.6.15",
+        "@storybook/node-logger": "7.6.15",
+        "@storybook/types": "7.6.15",
+        "@types/find-cache-dir": "^3.2.1",
+        "@types/node": "^18.0.0",
+        "@types/node-fetch": "^2.6.4",
+        "@types/pretty-hrtime": "^1.0.0",
+        "chalk": "^4.1.0",
+        "esbuild": "^0.18.0",
+        "esbuild-register": "^3.5.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@storybook/core-events": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+      "integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@storybook/node-logger": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.15.tgz",
+      "integrity": "sha512-C+sCvRjR+5uVU3VTrfyv7/RlPBxesAjIucUAK0keGyIZ7sFQYCPdkm4m/C4s+TcubgAzVvuoUHlRrSppdA7WzQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@storybook/types": {
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+      "integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.15",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/telemetry/node_modules/@types/node": {
+      "version": "18.19.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.15.tgz",
+      "integrity": "sha512-AMZ2UWx+woHNfM11PyAEQmfSxi05jm9OlkxczuHeEqmvwPkYj6MWv44gbzDPefYOLysTOFyI3ziiy2ONmUZfpA==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
       }
     },
     "node_modules/@storybook/telemetry/node_modules/chalk": {
···
       }
     },
     "node_modules/node-fetch-native": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.1.tgz",
-      "integrity": "sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.2.tgz",
+      "integrity": "sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==",
       "dev": true
     },
     "node_modules/node-fetch/node_modules/tr46": {
···
         "node": ">=8"
       }
     },
-    "node_modules/shikiji": {
-      "version": "0.9.19",
-      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.9.19.tgz",
-      "integrity": "sha512-Kw2NHWktdcdypCj1GkKpXH4o6Vxz8B8TykPlPuLHOGSV8VkhoCLcFOH4k19K4LXAQYRQmxg+0X/eM+m2sLhAkg==",
+    "node_modules/shiki": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.1.2.tgz",
+      "integrity": "sha512-qNzFwTv5uhEDNUIwp7wHjsrffVeLbmOgWnM5mZZhoiz7G2qAUvqVfUzuWfieD45/YAKipzCtdV9SndacKtABow==",
       "dependencies": {
-        "shikiji-core": "0.9.19"
+        "@shikijs/core": "1.1.2"
       }
-    },
-    "node_modules/shikiji-core": {
-      "version": "0.9.19",
-      "resolved": "https://registry.npmjs.org/shikiji-core/-/shikiji-core-0.9.19.tgz",
-      "integrity": "sha512-AFJu/vcNT21t0e6YrfadZ+9q86gvPum6iywRyt1OtIPjPFe25RQnYJyxHQPMLKCCWA992TPxmEmbNcOZCAJclw=="
     },
     "node_modules/side-channel": {
       "version": "1.0.4",
···
       }
     },
     "node_modules/spdx-license-ids": {
-      "version": "3.0.16",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
-      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
+      "version": "3.0.17",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz",
+      "integrity": "sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==",
       "dev": true
     },
     "node_modules/sprintf-js": {
···
       "dev": true
     },
     "node_modules/storybook": {
-      "version": "7.6.12",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.12.tgz",
-      "integrity": "sha512-zcH9CwIsE8N4PX3he5vaJ3mTTWGxu7cxJ/ag9oja/k3N5/IvQjRyIU1TLkRVb28BB8gaLyorpnc4C4aLVGy4WQ==",
+      "version": "7.6.15",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.15.tgz",
+      "integrity": "sha512-Ybezq9JRk5CBhzjgzZ/oT7mnU45UwhyVSGKW+PUKZGGUG9VH2hCrTEES9f/zEF82kj/5COVPyqR/5vlXuuS39A==",
       "dev": true,
       "dependencies": {
-        "@storybook/cli": "7.6.12"
+        "@storybook/cli": "7.6.15"
       },
       "bin": {
         "sb": "index.js",
···
       }
     },
     "node_modules/ufo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
-      "integrity": "sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz",
+      "integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
       "dev": true
     },
     "node_modules/uglify-js": {

package.json

···
     "remark-gfm": "~4.0.0",
     "remark-reading-time": "~2.0.1",
     "semver": "~7.5.4",
-    "shikiji": "~0.9.17",
+    "shiki": "~1.1.2",
     "tailwindcss": "^3.4.0",
     "turbo": "1.12.2",
     "typescript": "~5.3.2",

pages/en/guides/event-loop-timers-and-nexttick.md

···
 });
 ```
 
-```
+```bash
 $ node timeout_vs_immediate.js
 timeout
 immediate
···
 });
 ```
 
-```
+```bash
 $ node timeout_vs_immediate.js
 immediate
 timeout

shiki.config.mjs

···
 'use strict';
 
-/**
- * READ: This file allows us to configure a subset of languages that we want to support on the Node.js Website
- * we use `shikiji` which is an ESM-only rewrite of Shiki
- */
+import diffLanguage from 'shiki/langs/diff.mjs';
+import dockerLanguage from 'shiki/langs/docker.mjs';
+import javaScriptLanguage from 'shiki/langs/javascript.mjs';
+import jsonLanguage from 'shiki/langs/json.mjs';
+import shellScriptLanguage from 'shiki/langs/shellscript.mjs';
+import shellSessionLanguage from 'shiki/langs/shellsession.mjs';
+import typeScriptLanguage from 'shiki/langs/typescript.mjs';
+import shikiNordTheme from 'shiki/themes/nord.mjs';
 
-import diffLanguage from 'shikiji/langs/diff.mjs';
-import dockerLanguage from 'shikiji/langs/docker.mjs';
-import javaScriptLanguage from 'shikiji/langs/javascript.mjs';
-import jsonLanguage from 'shikiji/langs/json.mjs';
-import shellScriptLanguage from 'shikiji/langs/shellscript.mjs';
-import shellSessionLanguage from 'shikiji/langs/shellsession.mjs';
-import typeScriptLanguage from 'shikiji/langs/typescript.mjs';
-import shikiNordTheme from 'shikiji/themes/nord.mjs';
-
-/** @type {Array<import('shikiji').LanguageRegistration>} */
+/** @type {Array<import('shiki').LanguageRegistration>} */
 export const LANGUAGES = [
   {
     ...javaScriptLanguage[0],

util/getHighlighter.ts

···
-import { getHighlighterCore } from 'shikiji/core';
-import { getWasmInlined } from 'shikiji/wasm';
+import { getHighlighterCore } from 'shiki/core';
+import getWasm from 'shiki/wasm';
 
 import { LANGUAGES, DEFAULT_THEME } from '@/shiki.config.mjs';
 
···
 const memoizedShikiji = await getHighlighterCore({
   themes: [DEFAULT_THEME],
   langs: LANGUAGES,
-  loadWasm: getWasmInlined,
+  loadWasm: getWasm,
 });
 
 export const highlightToHtml = (code: string, language: string) =>