feat: added umbrella-off icon (#1568)

* feat: added umbrella-off icon

* Update umbrella-off.svg

* Update umbrella-off.svg

* Update umbrella-off.svg

* Update icons/umbrella-off.json

docs/.vitepress/api/gh-icon/[...data].get.ts

@@ -1,41 +1,44 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3'
-import { renderToString, renderToStaticMarkup } from 'react-dom/server'
-import { createElement } from 'react'
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { createElement } from 'react';
 import SvgPreview from '../../lib/SvgPreview/index.tsx';
-import iconNodes from '../../data/iconNodes'
-import createLucideIcon from 'lucide-react/src/createLucideIcon'
+import iconNodes from '../../data/iconNodes';
+import createLucideIcon from 'lucide-react/src/createLucideIcon';
 import Backdrop from '../../lib/SvgPreview/Backdrop.tsx';
 
 export default eventHandler((event) => {
-  const { params } = event.context
+  const { params } = event.context;
 
-  const [name, svgData] = params.data.split('/');
-  const data = svgData.slice(0, -4);
+  const pathData = params.data.split('/');
+  const data = pathData.at(-1).slice(0, -4);
+  const [name] = pathData;
 
   const src = Buffer.from(data, 'base64').toString('utf8');
 
-  const children = []
+  const children = [];
 
-  if (name in iconNodes) {
-    const iconNode = iconNodes[name]
+  // If the icon already exists, it uses the existing icon as the backdrop.
+  // If the icon does not exist but an icon exists that starts with the same group name, that icon
+  // is used as the backdrop
+  const backdropName =
+    name in iconNodes ? name : name.split('-')[0] in iconNodes ? name.split('-')[0] : null;
+  if (backdropName) {
+    const iconNode = iconNodes[backdropName];
 
-    const LucideIcon = createLucideIcon(name, iconNode)
-    const svg = renderToStaticMarkup(createElement(LucideIcon))
+    const LucideIcon = createLucideIcon(backdropName, iconNode);
+    const svg = renderToStaticMarkup(createElement(LucideIcon));
     const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
 
-    children.push(createElement(Backdrop, { backdropString, src }))
+    children.push(createElement(Backdrop, { backdropString, src }));
   }
 
   const svg = Buffer.from(
     // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(SvgPreview, {src, showGrid: true}, children)).replace(
-      />/,
-      '><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
-    )
+    renderToString(createElement(SvgPreview, { src, showGrid: true }, children))
   ).toString('utf8');
 
-  defaultContentType(event, 'image/svg+xml')
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
 
-  return svg
-})
+  return svg;
+});

docs/.vitepress/sidebar.ts

@@ -10,26 +10,49 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
         { text: 'Comparison', link: '/guide/comparison' }
       ]
     },
+    {
+      text: 'Basics',
+      items: [
+        {
+          text: 'Color',
+          link: '/guide/basics/color'
+        },
+        {
+          text: 'Sizing',
+          link: '/guide/basics/sizing'
+        },
+        {
+          text: 'Stroke width',
+          link: '/guide/basics/stroke-width'
+        },
+      ]
+    },
+    // TODO: Add this section
     // {
-    //   text: 'Using Icons',
+    //   text: 'Advanced',
     //   items: [
     //     {
-    //       text: 'How to use icons',
-    //       link: 'how-to-use-icons'
-    //     },
-    //     {
-    //     text: 'Styling icons',
-    //       link: 'styling-icons'
-    //     },
-    //     {
     //       text: 'Accessibility',
-    //       link: 'accessibility'
+    //       link: '/guide/advanced/accessibility'
     //     },
     //     {
-    //       text: 'What should I use',
-    //       link: 'what-should-i-use'
+    //       text: 'Global styling',
     //     },
-
+    //     {
+    //       text: 'Animations',
+    //     },
+    //     {
+    //       text: 'Filled icons',
+    //     },
+    //     {
+    //       text: 'Combining icons',
+    //     },
+    //     {
+    //       text: 'Dynamic imports'
+    //     },
+    //     // {
+    //     //   text: 'Auto importing'
+    //     // },
     //   ]
     // },
     {
@@ -103,15 +126,9 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
       ]
     },
   ],
+  // This should be here to keep the sidebar shown on the icons page
   'icons': [
     { text: '', link: '/' },
-    // { text: 'Categorized', link: '/icons/categorized' },
-    // {
-    //   text: 'Categories',
-    //   items: [
-    //     ...(getAllCategoryFiles().map((category) => ({ text: category, link: `/icons/category/${category}` })))
-    //   ]
-    // }
   ],
 }
 

docs/.vitepress/theme/sandpackTheme.json

@@ -0,0 +1,34 @@
+{
+  "colors": {
+    "surface1": "var(--vp-code-block-bg)",
+    "surface2": "var(--vp-code-block-bg)",
+    "surface3": "var(--vp-code-line-highlight-color)",
+    "clickable": "var(--vp-c-text-2)",
+    "base": "#323232",
+    "disabled": "#C5C5C5",
+    "hover": "var(--vp-c-brand)",
+    "accent": "var(--vp-c-brand)",
+    "error": "var(--vp-c-red)",
+    "errorSurface": "#ffeceb"
+  },
+  "syntax": {
+    "plain": "var(--vp-code-editor-plain)",
+    "comment": {
+      "color": "var(--vp-code-editor-comment)",
+      "fontStyle": "italic"
+    },
+    "keyword": "var(--vp-code-editor-keyword)",
+    "tag": "var(--vp-code-editor-tag)",
+    "punctuation": "var(--vp-code-editor-punctuation)",
+    "definition": "var(--vp-code-editor-definition)",
+    "property": "var(--vp-code-editor-property)",
+    "static": "var(--vp-code-editor-static)",
+    "string": "var(--vp-code-editor-string)"
+  },
+  "font": {
+    "body": "var(--vp-font-family-base)",
+    "mono": "var(--vp-font-family-mono)",
+    "size": "var(--vp-code-font-size)",
+    "lineHeight": "var(--vp-code-line-height)"
+  }
+}

docs/.vitepress/theme/style.css

@@ -5,13 +5,39 @@
   --vp-c-brand-dark: #DC5A5A;
   --vp-c-brand-darker: #C45050;
 
+  --vp-c-brand-1: #F67373;
+  --vp-c-brand-2:  #FF7070;
+  --vp-c-brand-3:  #F56565;
+  --vp-c-brand-4: #DC5A5A;
+  --vp-c-brand-5: #C45050;
+
   --vp-c-bg-alt-up: #fff;
   --vp-c-bg-alt-down: #fff;
+
+  --vp-code-editor-plain: #24292E;
+  --vp-code-editor-comment: #6A737D;
+  --vp-code-editor-keyword: #D73A49;
+  --vp-code-editor-tag: #22863A;
+  --vp-code-editor-punctuation: #24292E;
+  --vp-code-editor-definition: #6F42C1;
+  --vp-code-editor-property: #005CC5;
+  --vp-code-editor-static: #F78C6C;
+  --vp-code-editor-string: #032F62;
 }
 
 .dark {
   --vp-c-bg-alt-up: #1B1B1D;
   --vp-c-bg-alt-down: #0F0F10;
+
+  --vp-code-editor-plain: #E1E4E8;
+  --vp-code-editor-comment: #6A737D;
+  --vp-code-editor-keyword: #F97583;
+  --vp-code-editor-tag: #85E89D;
+  --vp-code-editor-punctuation: #9ECBFF;
+  --vp-code-editor-definition: #B392F0;
+  --vp-code-editor-property: #79B8FF;
+  --vp-code-editor-static: #F78C6C;
+  --vp-code-editor-string: #9ECBFF;
 }
 
 .VPNavBarTitle .logo {
@@ -126,3 +152,52 @@
 html:has(* .outline-link:target) {
   scroll-behavior: smooth;
 } */
+
+.sp-wrapper .sp-layout {
+  border-radius: 8px;
+}
+
+.sp-wrapper .sp-tabs-scrollable-container {
+  border-radius: 8px 8px 0 0;
+  position: relative;
+
+  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
+  margin-bottom: 0px;
+  margin-top: -1px;
+  height: 48px;
+  padding-bottom: 1px;
+}
+
+.sp-wrapper .sp-preview-container {
+  background-color: transparent;
+}
+
+.sp-wrapper .sp-tabs .sp-tab-button {
+  padding: 0 12px;
+  line-height: 48px;
+  height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  position: relative;
+  /* box-sizing: content-box; */
+}
+
+.sp-wrapper .sp-tabs .sp-tab-button:after {
+  position: absolute;
+  right: 8px;
+  left: 8px;
+  bottom: 0px;
+  z-index: 1;
+  height: 1px;
+  content: '';
+  background-color: transparent;
+  transition: background-color 0.25s;
+}
+
+.sp-wrapper .sp-tabs .sp-tab-button[data-active="true"] {
+  color: var(--vp-code-tab-active-text-color);
+}
+
+.sp-wrapper .sp-tabs .sp-tab-button[data-active="true"]:after {
+  background-color: var(--vp-code-tab-active-bar-color);
+}

docs/guide/advanced/accessibility.md

@@ -0,0 +1,4 @@
+# Accessibility
+
+<!-- Description how you should use svg icons keeping web accessible -->
+<!-- See @JanTrichter comment about some information to write this: https://github.com/lucide-icons/lucide/pull/1521#discussion_r1332141390 -->

docs/guide/advanced/filled-icons.md

@@ -0,0 +1,13 @@
+# Filled Icons
+
+Fills are officially not supported.
+However, all SVG properties are available on all icons.
+Fill can still be used and will work fine on certain icons.
+
+Example with stars:
+
+<!-- Code Example with stars -->
+
+## Will Lucide have fills in the future?
+
+This feature is requested several times and discussion is happening at: [#458](https://github.com/lucide-icons/lucide/discussions/458).

docs/guide/basics/color.md

@@ -0,0 +1,52 @@
+<script setup>
+import { Sandpack } from 'sandpack-vue3'
+import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
+import buttonExampleFiles from './examples/button-example/files.ts'
+import iconColorExampleFiles from './examples/color-icon/files.ts'
+</script>
+
+# Color
+
+By default, all icons have the color value: `currentColor`. This keyword uses the element's computed text `color` value to represent the icon color.
+
+Read more about [ `currentColor` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword).
+
+## Adjust the color using the `color` prop
+
+The color can be adjusted by passing the color prop to the element.
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="iconColorExampleFiles"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 295,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+## Using parent elements text color value
+
+Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
+
+For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered  as `#fff`. This is browser native behavior.
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="buttonExampleFiles"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 320,
+    editorWidthPercentage: 60,
+  }"
+/>

docs/guide/basics/examples/absolute-stroke-width-icon/App.js

@@ -0,0 +1,14 @@
+import { RollerCoaster } from "lucide-react";
+
+function App() {
+  return (
+    <div className="app">
+      <RollerCoaster
+        size={96}
+        absoluteStrokeWidth={true}
+      />
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/absolute-stroke-width-icon/files.ts

@@ -0,0 +1,15 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'App.js': {
+    code: App,
+    active: true,
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/basics/examples/button-example/App.js

@@ -0,0 +1,5 @@
+import Button from "./Button";
+
+export default function App() {
+  return <Button />;
+}

docs/guide/basics/examples/button-example/Button.jsx

@@ -0,0 +1,12 @@
+import { ThumbsUp } from "lucide-react";
+
+function LikeButton() {
+  return (
+    <button style={{ color: "#fff" }}>
+      <ThumbsUp />
+      Like
+    </button>
+  );
+}
+
+export default LikeButton;

docs/guide/basics/examples/button-example/files.ts

@@ -0,0 +1,21 @@
+import App from './App.js?raw'
+import Button from './Button.jsx?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'App.js': {
+    code: App,
+    hidden: true
+  },
+  'Button.jsx': {
+    code: Button,
+    active: true,
+    readOnly: false,
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/basics/examples/color-icon/App.js

@@ -0,0 +1,11 @@
+import { Smile } from "lucide-react";
+
+function App() {
+  return (
+    <div className="app">
+      <Smile color="#3e9392" />
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/color-icon/files.ts

@@ -0,0 +1,15 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'App.js': {
+    code: App,
+    active: true,
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/basics/examples/size-icon-css-example/App.js

@@ -0,0 +1,12 @@
+import { Beer } from "lucide-react";
+import "./icon.css";
+
+function App() {
+  return (
+    <div className="app">
+      <Beer className="my-beer-icon" />
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/size-icon-css-example/files.ts

@@ -0,0 +1,21 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+import IconCss from './icon.css?raw'
+
+const files = {
+  'icon.css': {
+    code: IconCss,
+    readOnly: false,
+    active: true,
+  },
+  'App.js': {
+    code: App,
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+
+}
+
+export default files

docs/guide/basics/examples/size-icon-css-example/icon.css

@@ -0,0 +1,5 @@
+.my-beer-icon {
+  /* Change this! */
+  width: 64px;
+  height: 64px;
+}

docs/guide/basics/examples/size-icon-example/App.js

@@ -0,0 +1,11 @@
+import { Landmark } from "lucide-react";
+
+function App() {
+  return (
+    <div className="app">
+      <Landmark size={64} />
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/size-icon-example/files.ts

@@ -0,0 +1,15 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'App.js': {
+    code: App,
+    active: true,
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/basics/examples/size-icon-font-example/App.js

@@ -0,0 +1,13 @@
+import { Star } from "lucide-react";
+import "./icon.css";
+
+function App() {
+  return (
+    <div className="text-wrapper">
+      <Star class="my-icon" />
+      <div>Yes</div>
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/size-icon-font-example/files.ts

@@ -0,0 +1,21 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+import IconCss from './icon.css?raw'
+
+const files = {
+  'icon.css': {
+    code: IconCss,
+    readOnly: false,
+    active: true,
+  },
+  'App.js': {
+    code: App,
+  },
+  'styles.css': {
+    code: styles,
+    hidden: true
+  },
+
+}
+
+export default files

docs/guide/basics/examples/size-icon-font-example/icon.css

@@ -0,0 +1,15 @@
+.my-icon {
+  /* Icon size will relative to font-size of .text-wrapper */
+  width: 1em;
+  height: 1em;
+}
+
+.text-wrapper {
+  /* Change this! */
+  font-size: 96px;
+
+  /* layout stuff */
+  display: flex;
+  gap: 0.25em;
+  items-align: center;
+}

docs/guide/basics/examples/size-icon-tailwind-example/App.js

@@ -0,0 +1,11 @@
+import { PartyPopper } from "lucide-react";
+
+function App() {
+  return (
+    <div>
+      <PartyPopper className="w-24 h-24" />
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/size-icon-tailwind-example/files.ts

@@ -0,0 +1,15 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'App.js': {
+    code: App,
+    active: true
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/basics/examples/stroke-width-icon/App.js

@@ -0,0 +1,11 @@
+import { FolderLock } from "lucide-react";
+
+function App() {
+  return (
+    <div className="app">
+      <FolderLock strokeWidth={1} />
+    </div>
+  );
+}
+
+export default App;

docs/guide/basics/examples/stroke-width-icon/files.ts

@@ -0,0 +1,15 @@
+import App from './App.js?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'App.js': {
+    code: App,
+    active: true,
+  },
+  'styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/basics/examples/styles.css

@@ -0,0 +1,50 @@
+body {
+  font-family: sans-serif;
+  -webkit-font-smoothing: auto;
+  -moz-font-smoothing: auto;
+  -moz-osx-font-smoothing: grayscale;
+  font-smoothing: auto;
+  text-rendering: optimizeLegibility;
+  font-smooth: always;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  background: #202127;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  color: #fff;
+}
+
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  padding: 10px 20px;
+  line-height: 24px;
+  gap: 8px;
+  border-radius: 24px;
+  outline: none;
+  border: none;
+  background: #111;
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  background: #F56565;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+}

docs/guide/basics/sizing.md

@@ -0,0 +1,87 @@
+<script setup>
+import { Sandpack } from 'sandpack-vue3'
+import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
+import sizeIconExample from './examples/size-icon-example/files.ts'
+import sizeIconCssExample from './examples/size-icon-css-example/files.ts'
+import sizeIconFontExample from './examples/size-icon-font-example/files.ts'
+import sizeIconTailwind from './examples/size-icon-tailwind-example/files.ts'
+</script>
+
+# Sizing
+
+By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
+
+## Adjusting the icon size using the `size` prop
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="sizeIconExample"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+## Adjusting the icon size via CSS
+
+The CSS properties `width` and `height` can be used to adjust the icon size.
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="sizeIconCssExample"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+  }"
+/>
+
+### Dynamically change the icon size based on the font size
+
+It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="sizeIconFontExample"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+  }"
+/>
+
+### Resizing with Tailwind
+
+`h-*` and `w-*` utilities can be used to adjust the size of the icon.
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="sizeIconTailwind"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest",
+    }
+  }'
+  :options="{
+    externalResources: ['https://cdn.tailwindcss.com'],
+    editorHeight: 300,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+<!-- Code Example -->

docs/guide/basics/stroke-width.md

@@ -0,0 +1,60 @@
+<script setup>
+import { Sandpack } from 'sandpack-vue3'
+import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
+import strokeWidth from './examples/stroke-width-icon/files.ts'
+import absoluteStrokeWidth from './examples/absolute-stroke-width-icon/files.ts'
+</script>
+
+# Stroke width
+
+All icons are designed with SVG elements using strokes.
+These have a default stroke width of `2px`.
+
+The `strokeWidth` can be adjusted to create a different look of the icons.
+
+## Adjusting stroke width with `strokeWidth` prop
+
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="strokeWidth"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+## Absolute stroke width
+
+When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+
+This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
+
+Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
+
+![Absolute stroke width comparison](../../images/absolute-stroke-width-compare.png?raw=true "Absolute stroke width comparison")
+
+### Adjusting stroke width with `absoluteStrokeWidth` prop
+
+Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+
+<Sandpack
+  template="react"
+  :theme="sandpackTheme"
+  :files="absoluteStrokeWidth"
+  :customSetup='{
+    dependencies: {
+      "lucide-react": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 320,
+    editorWidthPercentage: 60,
+  }"
+/>

docs/guide/how-to-use-icons.md

@@ -0,0 +1 @@
+# How to use icons

docs/package.json

@@ -29,7 +29,7 @@
     "nitropack": "npm:nitropack-edge@latest",
     "node-fetch": "2",
     "rollup-plugin-copy": "^3.4.0",
-    "vitepress": "1.0.0-rc.4"
+    "vitepress": "1.0.0-rc.10"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
@@ -47,6 +47,7 @@
     "lucide-vue-next": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sandpack-vue3": "^3.1.6",
     "semver": "^7.5.2",
     "shiki": "^0.14.2",
     "shiki-processor": "^0.1.3",

icons/barcode.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "scan",
+    "checkout",
+    "till",
+    "cart",
+    "transaction",
+    "purchase",
+    "buy",
+    "product",
+    "packaging",
+    "retail",
+    "consumer"
+  ],
+  "categories": [
+    "shopping"
+  ]
+}

icons/barcode.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 5v14" />
+  <path d="M8 5v14" />
+  <path d="M12 5v14" />
+  <path d="M17 5v14" />
+  <path d="M21 5v14" />
+</svg>

icons/caravan.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "trailer",
+    "tow",
+    "camping",
+    "campsite",
+    "mobile home",
+    "holiday",
+    "nomadic",
+    "wilderness",
+    "outdoors"
+  ],
+  "categories": [
+    "transportation",
+    "travel",
+    "nature"
+  ]
+}

icons/caravan.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="4" height="4" x="2" y="9" />
+  <rect width="4" height="10" x="10" y="9" />
+  <path d="M18 19V9a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v8a2 2 0 0 0 2 2h2" />
+  <circle cx="8" cy="19" r="2" />
+  <path d="M10 19h12v-2" />
+</svg>

icons/flame-kindling.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "campfire",
+    "camping",
+    "wilderness",
+    "outdoors",
+    "lit",
+    "warmth",
+    "wood",
+    "twigs",
+    "sticks"
+  ],
+  "categories": [
+    "nature",
+    "social",
+    "gaming"
+  ]
+}

icons/flame-kindling.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 2c1 3 2.5 3.5 3.5 4.5A5 5 0 0 1 17 10a5 5 0 1 1-10 0c0-.3 0-.6.1-.9a2 2 0 1 0 3.3-2C8 4.5 11 2 12 2Z" />
+  <path d="m5 22 14-4" />
+  <path d="m5 18 14 4" />
+</svg>

icons/fullscreen.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "expand",
+    "zoom",
+    "preview",
+    "focus",
+    "camera",
+    "lens",
+    "image"
+  ],
+  "categories": [
+    "layout",
+    "multimedia",
+    "design",
+    "photography"
+  ]
+}

icons/fullscreen.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+  <rect width="10" height="8" x="7" y="8" rx="1" />
+</svg>

icons/image-down.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "karsa-mistmere",
+    "ericfennis",
+    "jguddas"
+  ],
+  "tags": [
+    "picture",
+    "photo"
+  ],
+  "categories": [
+    "photography",
+    "text",
+    "multimedia",
+    "files"
+  ]
+}

icons/image-down.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="9" cy="9" r="2" />
+  <path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10.8" />
+  <path d="m21 15-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
+  <path d="m14 19.5 3 3v-6" />
+  <path d="m17 22.5 3-3" />
+</svg>

icons/lock-keyhole.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "security",
+    "password",
+    "secure",
+    "admin"
+  ],
+  "categories": [
+    "security"
+  ]
+}

icons/lock-keyhole.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="16" r="1" />
+  <rect x="3" y="10" width="18" height="12" rx="2" />
+  <path d="M7 10V7a5 5 0 0 1 10 0v3" />
+</svg>

icons/map-pinned.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "location",
+    "waypoint",
+    "marker",
+    "drop"
+  ],
+  "categories": [
+    "maps",
+    "navigation",
+    "travel",
+    "account"
+  ]
+}

icons/map-pinned.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0" />
+  <circle cx="12" cy="8" r="2" />
+  <path d="M8.835 14H5a1 1 0 0 0-.9.7l-2 6c-.1.1-.1.2-.1.3 0 .6.4 1 1 1h18c.6 0 1-.4 1-1 0-.1 0-.2-.1-.3l-2-6a1 1 0 0 0-.9-.7h-3.835" />
+</svg>

icons/milestone.json

@@ -4,9 +4,11 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "sign",
     "signpost",
     "direction",
+    "right",
+    "east",
+    "forward",
     "version control"
   ],
   "categories": [

icons/qr-code.json

@@ -7,7 +7,11 @@
   ],
   "tags": [
     "barcode",
-    "scan"
+    "scan",
+    "link",
+    "url",
+    "information",
+    "digital"
   ],
   "categories": [
     "development",

icons/route-off.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "path",
+    "journey",
+    "planner",
+    "points",
+    "stops",
+    "stations",
+    "reset",
+    "clear",
+    "cancelled",
+    "closed",
+    "blocked"
+  ],
+  "categories": [
+    "maps",
+    "navigation"
+  ]
+}

icons/route-off.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="6" cy="19" r="3" />
+  <path d="M9 19h8.5c.4 0 .9-.1 1.3-.2" />
+  <path d="M5.2 5.2A3.5 3.53 0 0 0 6.5 12H12" />
+  <path d="m2 2 20 20" />
+  <path d="M21 15.3a3.5 3.5 0 0 0-3.3-3.3" />
+  <path d="M15 5h-4.3" />
+  <circle cx="18" cy="5" r="3" />
+</svg>

icons/route.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "path",
+    "journey",
+    "planner",
+    "points",
+    "stops",
+    "stations"
+  ],
+  "categories": [
+    "maps",
+    "navigation"
+  ]
+}

icons/route.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="6" cy="19" r="3" />
+  <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
+  <circle cx="18" cy="5" r="3" />
+</svg>

icons/scan-barcode.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "checkout",
+    "till",
+    "cart",
+    "transaction",
+    "purchase",
+    "buy",
+    "product",
+    "packaging",
+    "retail",
+    "consumer"
+  ],
+  "categories": [
+    "shopping",
+    "devices"
+  ]
+}

icons/scan-barcode.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+  <path d="M8 7v10" />
+  <path d="M12 7v10" />
+  <path d="M17 7v10" />
+</svg>

icons/scan-eye.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "preview",
+    "zoom",
+    "expand",
+    "fullscreen",
+    "gallery",
+    "image",
+    "camera",
+    "watch",
+    "surveillance",
+    "retina",
+    "focus",
+    "lens",
+    "biometric",
+    "identification",
+    "authentication",
+    "access",
+    "login"
+  ],
+  "categories": [
+    "photography",
+    "multimedia",
+    "layout",
+    "accessibility",
+    "security",
+    "devices",
+    "account"
+  ]
+}

icons/scan-eye.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+  <circle cx="12" cy="12" r="1" />
+  <path d="M5 12s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5" />
+</svg>

icons/scan-face.json

@@ -6,11 +6,16 @@
   "tags": [
     "face",
     "biometric",
+    "identification",
     "authentication",
     "2fa",
+    "access",
+    "login",
     "dashed"
   ],
   "categories": [
+    "account",
+    "security",
     "devices",
     "social"
   ]

icons/scan-line.json

@@ -5,11 +5,21 @@
     "ericfennis"
   ],
   "tags": [
+    "checkout",
+    "till",
+    "cart",
+    "transaction",
+    "purchase",
+    "buy",
+    "product",
+    "packaging",
+    "retail",
+    "consumer",
     "qr-code",
     "dashed"
   ],
   "categories": [
     "devices",
-    "social"
+    "shopping"
   ]
 }

icons/scan-line.svg

@@ -13,5 +13,5 @@
   <path d="M17 3h2a2 2 0 0 1 2 2v2" />
   <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
   <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
-  <line x1="7" x2="17" y1="12" y2="12" />
+  <path d="M7 12h10" />
 </svg>

icons/scan-search.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "preview",
+    "zoom",
+    "expand",
+    "fullscreen",
+    "gallery",
+    "image",
+    "focus",
+    "lens"
+  ],
+  "categories": [
+    "photography",
+    "multimedia",
+    "layout",
+    "accessibility"
+  ]
+}

icons/scan-search.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+  <circle cx="12" cy="12" r="3" />
+  <path d="m16 16-1.9-1.9" />
+</svg>

icons/scan-text.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "recognition",
+    "read",
+    "translate",
+    "copy",
+    "lines"
+  ],
+  "categories": [
+    "text",
+    "devices"
+  ]
+}

icons/scan-text.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+  <path d="M7 8h8" />
+  <path d="M7 12h10" />
+  <path d="M7 16h6" />
+</svg>

icons/scan.json

@@ -6,10 +6,29 @@
   ],
   "tags": [
     "qr-code",
+    "barcode",
+    "checkout",
+    "augmented reality",
+    "ar",
+    "target",
+    "surveillance",
+    "camera",
+    "lens",
+    "focus",
+    "frame",
+    "select",
+    "box",
+    "boundary",
+    "bounds",
+    "area",
+    "square",
     "dashed"
   ],
   "categories": [
     "devices",
-    "social"
+    "shopping",
+    "security",
+    "social",
+    "gaming"
   ]
 }

icons/signpost-big.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "bidirectional",
+    "left",
+    "right",
+    "east",
+    "west"
+  ],
+  "categories": [
+    "arrows",
+    "navigation",
+    "development",
+    "gaming"
+  ]
+}

icons/signpost-big.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 9H4L2 7l2-2h6" />
+  <path d="M14 5h6l2 2-2 2h-6" />
+  <path d="M10 22V4a2 2 0 1 1 4 0v18" />
+  <path d="M8 22h8" />
+</svg>

icons/signpost.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "bidirectional",
+    "left",
+    "right",
+    "east",
+    "west"
+  ],
+  "categories": [
+    "arrows",
+    "navigation",
+    "development",
+    "gaming"
+  ]
+}

icons/signpost.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3v3" />
+  <path d="M18.5 13h-13L2 9.5 5.5 6h13L22 9.5Z" />
+  <path d="M12 13v8" />
+</svg>

icons/tent-tree.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "camping",
+    "campsite",
+    "holiday",
+    "retreat",
+    "nomadic",
+    "wilderness",
+    "outdoors"
+  ],
+  "categories": [
+    "travel",
+    "nature"
+  ]
+}

icons/tent-tree.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="4" cy="4" r="2" />
+  <path d="m14 5 3-3 3 3" />
+  <path d="m14 10 3-3 3 3" />
+  <path d="M17 14V2" />
+  <path d="M17 14H7l-5 8h20Z" />
+  <path d="M8 14v8" />
+  <path d="m9 14 5 8" />
+</svg>

icons/tent.json

@@ -5,10 +5,23 @@
     "ericfennis"
   ],
   "tags": [
+    "tipi",
+    "teepee",
+    "wigwam",
+    "lodge",
+    "camping",
     "campsite",
-    "wigwam"
+    "holiday",
+    "retreat",
+    "nomadic",
+    "native american",
+    "indian",
+    "wilderness",
+    "outdoors"
   ],
   "categories": [
-    "nature"
+    "travel",
+    "nature",
+    "sustainability"
   ]
 }

icons/tent.svg

@@ -9,9 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 20 10 4" />
-  <path d="m5 20 9-16" />
-  <path d="M3 20h18" />
-  <path d="m12 15-3 5" />
-  <path d="m12 15 3 5" />
+  <path d="M3.5 21 14 3" />
+  <path d="M20.5 21 10 3" />
+  <path d="M15.5 21 12 15l-3.5 6" />
+  <path d="M2 21h20" />
 </svg>

icons/umbrella-off.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "csandman",
+    "ericfennis",
+    "karsa-mistmere",
+    "jguddas",
+    "jguddas"
+  ],
+  "tags": [
+    "rain",
+    "weather",
+    "uncovered",
+    "uninsured",
+    "antivirus",
+    "unprotected",
+    "risky"
+  ],
+  "categories": [
+    "weather"
+  ]
+}

icons/umbrella-off.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 2v1" />
+  <path d="M15.5 21a1.85 1.85 0 0 1-3.5-1v-8H2a10 10 0 0 1 3.428-6.575" />
+  <path d="M17.5 12H22A10 10 0 0 0 9.004 3.455" />
+  <path d="m2 2 20 20" />
+</svg>

icons/unlock-keyhole.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "security"
+  ],
+  "categories": [
+    "security"
+  ]
+}

icons/unlock-keyhole.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="16" r="1" />
+  <rect x="3" y="10" width="18" height="12" rx="2" />
+  <path d="M7 10V7a5 5 0 0 1 9.33-2.5" />
+</svg>

icons/waypoints.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "indirection",
+    "vpn",
+    "virtual private network",
+    "proxy",
+    "connections",
+    "bounce",
+    "reroute",
+    "path",
+    "journey",
+    "planner",
+    "stops",
+    "stations",
+    "shared",
+    "spread",
+    "viral"
+  ],
+  "categories": [
+    "security",
+    "account",
+    "maps",
+    "navigation",
+    "development",
+    "social"
+  ]
+}

icons/waypoints.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="4.5" r="2.5" />
+  <path d="m10.2 6.3-3.9 3.9" />
+  <circle cx="4.5" cy="12" r="2.5" />
+  <path d="M7 12h10" />
+  <circle cx="19.5" cy="12" r="2.5" />
+  <path d="m13.8 17.7 3.9-3.9" />
+  <circle cx="12" cy="19.5" r="2.5" />
+</svg>

package.json

@@ -57,7 +57,7 @@
       "node ./scripts/generateNextJSAliases.mjs"
     ]
   },
-  "packageManager": "pnpm@7.14.0",
+  "packageManager": "pnpm@8.7.1",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

pnpm-lock.yaml

@@ -106,6 +106,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      sandpack-vue3:
+        specifier: ^3.1.6
+        version: 3.1.7(@lezer/common@1.0.4)(vue@3.3.4)
       semver:
         specifier: ^7.5.2
         version: 7.5.2
@@ -139,7 +142,7 @@ importers:
         version: 1.8.0
       nitropack:
         specifier: npm:nitropack-edge@latest
-        version: /nitropack-edge@2.6.4-28236880.6b5f1d1
+        version: /nitropack-edge@2.6.4-28243740.058bacf
       node-fetch:
         specifier: '2'
         version: 2.6.12
@@ -147,8 +150,8 @@ importers:
         specifier: ^3.4.0
         version: 3.4.0
       vitepress:
-        specifier: 1.0.0-rc.4
-        version: 1.0.0-rc.4(@algolia/client-search@4.19.1)(fuse.js@6.6.2)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)
+        specifier: 1.0.0-rc.10
+        version: 1.0.0-rc.10(@algolia/client-search@4.19.1)(fuse.js@6.6.2)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)
 
   packages/lucide:
     devDependencies:
@@ -4191,6 +4194,115 @@ packages:
       mime: 3.0.0
     dev: true
 
+  /@codemirror/autocomplete@6.9.1(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.19.0)(@lezer/common@1.0.4):
+    resolution: {integrity: sha512-yma56tqD7khIZK4gy4X5lX3/k5ArMiCGat7HEWRF/8L2kqOjVdp2qKZqpcJjwTIjSj6fqKAHqi7IjtH3QFE+Bw==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.9.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      '@lezer/common': 1.0.4
+    dev: false
+
+  /@codemirror/commands@6.2.5:
+    resolution: {integrity: sha512-dSi7ow2P2YgPBZflR9AJoaTHvqmeGIgkhignYMd5zK5y6DANTvxKxp6eMEpIDUJkRAaOY/TFZ4jP1ADIO/GLVA==}
+    dependencies:
+      '@codemirror/language': 6.9.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      '@lezer/common': 1.0.4
+    dev: false
+
+  /@codemirror/lang-css@6.2.1(@codemirror/view@6.19.0):
+    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.9.1(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.19.0)(@lezer/common@1.0.4)
+      '@codemirror/language': 6.9.0
+      '@codemirror/state': 6.2.1
+      '@lezer/common': 1.0.4
+      '@lezer/css': 1.1.3
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
+  /@codemirror/lang-html@6.4.6:
+    resolution: {integrity: sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==}
+    dependencies:
+      '@codemirror/autocomplete': 6.9.1(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.19.0)(@lezer/common@1.0.4)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.19.0)
+      '@codemirror/lang-javascript': 6.2.1
+      '@codemirror/language': 6.9.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      '@lezer/common': 1.0.4
+      '@lezer/css': 1.1.3
+      '@lezer/html': 1.3.6
+    dev: false
+
+  /@codemirror/lang-javascript@6.2.1:
+    resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
+    dependencies:
+      '@codemirror/autocomplete': 6.9.1(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.19.0)(@lezer/common@1.0.4)
+      '@codemirror/language': 6.9.0
+      '@codemirror/lint': 6.4.2
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      '@lezer/common': 1.0.4
+      '@lezer/javascript': 1.4.7
+    dev: false
+
+  /@codemirror/language@6.9.0:
+    resolution: {integrity: sha512-nFu311/0ne/qGuGCL3oKuktBgzVOaxCHZPZv1tLSZkNjPYxxvkjSbzno3MlErG2tgw1Yw1yF8BxMCegeMXqpiw==}
+    dependencies:
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      '@lezer/common': 1.0.4
+      '@lezer/highlight': 1.1.6
+      '@lezer/lr': 1.3.10
+      style-mod: 4.1.0
+    dev: false
+
+  /@codemirror/lint@6.4.2:
+    resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
+    dependencies:
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/state@6.2.1:
+    resolution: {integrity: sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==}
+    dev: false
+
+  /@codemirror/view@6.19.0:
+    resolution: {integrity: sha512-XqNIfW/3GaaF+T7Q1jBcRLCPm1NbrR2DBxrXacSt1FG+rNsdsNn3/azAfgpUoJ7yy4xgd8xTPa3AlL+y0lMizQ==}
+    dependencies:
+      '@codemirror/state': 6.2.1
+      style-mod: 4.1.0
+      w3c-keyname: 2.2.8
+    dev: false
+
+  /@codesandbox/nodebox@0.1.8:
+    resolution: {integrity: sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==}
+    dependencies:
+      outvariant: 1.4.0
+      strict-event-emitter: 0.4.6
+    dev: false
+
+  /@codesandbox/sandpack-client@2.7.1:
+    resolution: {integrity: sha512-fU3+vs5IjVyHRCtawdqfIlYLXnCGaDPSE6uGNMLhxhStQVVrCbfTtXi4faRGEkkaW1x2Fm+AsqsK53kJtQuhCQ==}
+    dependencies:
+      '@codesandbox/nodebox': 0.1.8
+      buffer: 6.0.3
+      dequal: 2.0.3
+      outvariant: 1.4.0
+      static-browser-server: 1.0.3
+    dev: false
+
   /@colors/colors@1.5.0:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
@@ -4371,14 +4483,14 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
-  /@docsearch/css@3.5.1:
-    resolution: {integrity: sha512-2Pu9HDg/uP/IT10rbQ+4OrTQuxIWdKVUEdcw9/w7kZJv9NeHS6skJx1xuRiFyoGKwAzcHXnLp7csE99sj+O1YA==}
+  /@docsearch/css@3.5.2:
+    resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.1(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2):
-    resolution: {integrity: sha512-EXi8de5njxgP6TV3N9ytnGRLG9zmBNTEZjR4VzwPcpPLbZxxTLG2gaFyJyKiFVQxHW/DPlMrDJA3qoRRGEkgZw==}
+  /@docsearch/js@3.5.2(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2):
+    resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.1(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)
       preact: 10.16.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4388,12 +4500,13 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.1(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2):
-    resolution: {integrity: sha512-t5mEODdLzZq4PTFAm/dvqcvZFdPDMdfPE5rJS5SC8OUq9mPzxEy6b+9THIqNM9P0ocCb4UC5jqBrxKclnuIbzQ==}
+  /@docsearch/react@3.5.2(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2):
+    resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
       react: '>= 16.8.0 < 19.0.0'
       react-dom: '>= 16.8.0 < 19.0.0'
+      search-insights: '>= 1 < 3'
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -4401,16 +4514,18 @@ packages:
         optional: true
       react-dom:
         optional: true
+      search-insights:
+        optional: true
     dependencies:
       '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.8.2)
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
-      '@docsearch/css': 3.5.1
+      '@docsearch/css': 3.5.2
       algoliasearch: 4.19.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+      search-insights: 2.8.2
     transitivePeerDependencies:
       - '@algolia/client-search'
-      - search-insights
     dev: true
 
   /@esbuild/android-arm64@0.18.17:
@@ -5678,6 +5793,44 @@ packages:
   /@kwsites/promise-deferred@1.1.1:
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  /@lezer/common@1.0.4:
+    resolution: {integrity: sha512-lZHlk8p67x4aIDtJl6UQrXSOP6oi7dQR3W/geFVrENdA1JDaAJWldnVqVjPMJupbTKbzDfFcePfKttqVidS/dg==}
+    dev: false
+
+  /@lezer/css@1.1.3:
+    resolution: {integrity: sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==}
+    dependencies:
+      '@lezer/highlight': 1.1.6
+      '@lezer/lr': 1.3.10
+    dev: false
+
+  /@lezer/highlight@1.1.6:
+    resolution: {integrity: sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==}
+    dependencies:
+      '@lezer/common': 1.0.4
+    dev: false
+
+  /@lezer/html@1.3.6:
+    resolution: {integrity: sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==}
+    dependencies:
+      '@lezer/common': 1.0.4
+      '@lezer/highlight': 1.1.6
+      '@lezer/lr': 1.3.10
+    dev: false
+
+  /@lezer/javascript@1.4.7:
+    resolution: {integrity: sha512-OVWlK0YEi7HM+9JRWtRkir8qvcg0/kVYg2TAMHlVtl6DU1C9yK1waEOLBMztZsV/axRJxsqfJKhzYz+bxZme5g==}
+    dependencies:
+      '@lezer/highlight': 1.1.6
+      '@lezer/lr': 1.3.10
+    dev: false
+
+  /@lezer/lr@1.3.10:
+    resolution: {integrity: sha512-BZfVvf7Re5BIwJHlZXbJn9L8lus5EonxQghyn+ih8Wl36XMFBPTXC0KM0IdUtj9w/diPHsKlXVgL+AlX2jYJ0Q==}
+    dependencies:
+      '@lezer/common': 1.0.4
+    dev: false
+
   /@mapbox/node-pre-gyp@1.0.11:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
@@ -5685,11 +5838,11 @@ packages:
       detect-libc: 2.0.2
       https-proxy-agent: 5.0.1
       make-dir: 3.1.0
-      node-fetch: 2.6.12
+      node-fetch: 2.7.0
       nopt: 5.0.0
       npmlog: 5.0.1
       rimraf: 3.0.2
-      semver: 7.5.2
+      semver: 7.5.4
       tar: 6.2.0
     transitivePeerDependencies:
       - encoding
@@ -5752,7 +5905,7 @@ packages:
     resolution: {integrity: sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==}
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.3.5
+      semver: 7.5.4
     dev: true
 
   /@npmcli/fs@2.1.2:
@@ -6100,6 +6253,10 @@ packages:
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
     dev: true
 
+  /@open-draft/deferred-promise@2.2.0:
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+    dev: false
+
   /@parcel/watcher-android-arm64@2.3.0:
     resolution: {integrity: sha512-f4o9eA3dgk0XRT3XhB0UWpWpLnKgrh1IwNJKJ7UJek7eTYccQ8LR7XUWFKqw6aEq5KUNlCcGvSzKqSX/vtWVVA==}
     engines: {node: '>= 10.0.0'}
@@ -6985,6 +7142,10 @@ packages:
     resolution: {integrity: sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==}
     dev: true
 
+  /@stitches/core@1.2.8:
+    resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
+    dev: false
+
   /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.3)(svelte@4.1.2)(vite@4.4.7):
     resolution: {integrity: sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==}
     engines: {node: ^14.18.0 || >= 16}
@@ -7349,7 +7510,7 @@ packages:
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
-      '@types/node': 20.6.0
+      '@types/node': 12.20.55
     dev: true
 
   /@types/http-errors@2.0.1:
@@ -7359,7 +7520,7 @@ packages:
   /@types/http-proxy@1.17.11:
     resolution: {integrity: sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==}
     dependencies:
-      '@types/node': 20.6.0
+      '@types/node': 12.20.55
     dev: true
 
   /@types/istanbul-lib-coverage@2.0.4:
@@ -7888,17 +8049,6 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.4.9)(vue@3.3.4):
-    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.4.9
-      vue: 3.3.4
-    dev: true
-
   /@vitest/expect@0.32.4:
     resolution: {integrity: sha512-m7EPUqmGIwIeoU763N+ivkFjTzbaBn0n9evsTOcde03ugy2avPs3kZbYmw3DkcH1j5mxhMhdamJkLQ6dM1bk/A==}
     dependencies:
@@ -8147,9 +8297,22 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: false
 
-  /@vueuse/integrations@10.3.0(focus-trap@7.5.2)(fuse.js@6.6.2)(vue@3.3.4):
-    resolution: {integrity: sha512-Jgiv7oFyIgC6BxmDtiyG/fxyGysIds00YaY7sefwbhCZ2/tjEx1W/1WcsISSJPNI30in28+HC2J4uuU8184ekg==}
+  /@vueuse/core@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.4.1
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/integrations@10.4.1(focus-trap@7.5.2)(fuse.js@6.6.2)(vue@3.3.4):
+    resolution: {integrity: sha512-uRBPyG5Lxoh1A/J+boiioPT3ELEAPEo4t8W6Mr4yTKIQBeW/FcbsotZNPr4k9uz+3QEksMmflWloS9wCnypM7g==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -8189,8 +8352,8 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.3.0(vue@3.3.4)
-      '@vueuse/shared': 10.3.0(vue@3.3.4)
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
       focus-trap: 7.5.2
       fuse.js: 6.6.2
       vue-demi: 0.14.5(vue@3.3.4)
@@ -8201,6 +8364,11 @@ packages:
 
   /@vueuse/metadata@10.3.0:
     resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
+    dev: false
+
+  /@vueuse/metadata@10.4.1:
+    resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
+    dev: true
 
   /@vueuse/shared@10.3.0(vue@3.3.4):
     resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
@@ -8209,6 +8377,16 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: false
+
+  /@vueuse/shared@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
 
   /@webassemblyjs/ast@1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
@@ -8540,6 +8718,10 @@ packages:
     resolution: {integrity: sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww==}
     dev: true
 
+  /anser@2.1.1:
+    resolution: {integrity: sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==}
+    dev: false
+
   /ansi-colors@4.1.1:
     resolution: {integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==}
     engines: {node: '>=6'}
@@ -8618,6 +8800,20 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  /ansi-to-vue3@0.1.2(vue@3.3.4):
+    resolution: {integrity: sha512-mkfWeVNBKfmpoWLeLqmAeKQalqvOyAhhMnndqu1oJZEzz8tn56mbUqJC7OfvB8cOEg70ooKjmgeIZoI0i9cdxw==}
+    engines: {node: '>=16', npm: '>=7'}
+    peerDependencies:
+      vue: ^3.2.0
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      anser: 2.1.1
+      escape-carriage: 1.3.1
+      vue: 3.3.4
+    dev: false
+
   /any-base@1.1.0:
     resolution: {integrity: sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==}
     dev: false
@@ -9312,10 +9508,6 @@ packages:
       - supports-color
     dev: true
 
-  /body-scroll-lock@4.0.0-beta.0:
-    resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
-    dev: true
-
   /bonjour@3.5.0:
     resolution: {integrity: sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==}
     dependencies:
@@ -9418,6 +9610,13 @@ packages:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
+  /buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /bufferstreams@3.0.0:
     resolution: {integrity: sha512-Qg0ggJUWJq90vtg4lDsGN9CDWvzBMQxhiEkSOD/sJfYt6BLect3eV1/S6K7SCSKJ34n60rf6U5eUPmQENVE4UA==}
     engines: {node: '>=8.12.0'}
@@ -9766,6 +9965,10 @@ packages:
       isobject: 3.0.1
       static-extend: 0.1.2
 
+  /clean-set@1.1.2:
+    resolution: {integrity: sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==}
+    dev: false
+
   /clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -10203,6 +10406,10 @@ packages:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
     dev: true
 
+  /crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+    dev: false
+
   /critters@0.0.16:
     resolution: {integrity: sha512-JwjgmO6i3y6RWtLYmXwO5jMd+maZt8Tnfu7VVISmEWyQqfLpB8soBswf8/2bu6SBXxtKA68Al3c+qIG1ApT68A==}
     dependencies:
@@ -10290,7 +10497,7 @@ packages:
       postcss-modules-scope: 3.0.0(postcss@8.4.5)
       postcss-modules-values: 4.0.0(postcss@8.4.5)
       postcss-value-parser: 4.2.0
-      semver: 7.3.5
+      semver: 7.5.4
       webpack: 5.76.1(esbuild@0.14.22)
     dev: true
 
@@ -10690,7 +10897,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: true
 
   /destr@2.0.1:
     resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
@@ -10869,7 +11075,6 @@ packages:
   /dotenv@16.3.1:
     resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
     engines: {node: '>=12'}
-    dev: true
 
   /duplexer@0.1.1:
     resolution: {integrity: sha512-sxNZ+ljy+RA1maXoUReeqBBpBC6RLKmg5ewzV+x+mSETmWNoKdZN6vcQjpFROemza23hGFskJtFNoUWUaQ+R4Q==}
@@ -11848,6 +12053,10 @@ packages:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
 
+  /escape-carriage@1.3.1:
+    resolution: {integrity: sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==}
+    dev: false
+
   /escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
     dev: true
@@ -12897,7 +13106,7 @@ packages:
       fs.realpath: 1.0.0
       inflight: 1.0.6
       inherits: 2.0.4
-      minimatch: 3.0.5
+      minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
     dev: true
@@ -14249,7 +14458,7 @@ packages:
     resolution: {integrity: sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@types/node': 20.6.0
+      '@types/node': 12.20.55
       graceful-fs: 4.2.11
     dev: true
 
@@ -14258,7 +14467,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 20.6.0
+      '@types/node': 12.20.55
       chalk: 4.1.2
       ci-info: 3.8.0
       graceful-fs: 4.2.11
@@ -15024,7 +15233,6 @@ packages:
   /lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
-    dev: true
 
   /magic-string@0.25.7:
     resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==}
@@ -15557,7 +15765,6 @@ packages:
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
@@ -15974,8 +16181,8 @@ packages:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
 
-  /nitropack-edge@2.6.4-28236880.6b5f1d1:
-    resolution: {integrity: sha512-zbvdeYMCw9b5gsVU1sZLEALesBnt+rmC0nVdPyg6QYTKvFKwEYFF9tiVxZXLwZpMvnjRGMyacvXj2vXd4RbGPA==}
+  /nitropack-edge@2.6.4-28243740.058bacf:
+    resolution: {integrity: sha512-F+Y+c20mEJtUNYyOIM1HPuNZWnIwLPfrR8WohjChTRDGn5gdliczJ7YFSTfPqBgYevbjBdRhcFP8i8Ir0P+A7g==}
     engines: {node: ^16.11.0 || >=17.0.0}
     hasBin: true
     peerDependencies:
@@ -16658,6 +16865,10 @@ packages:
       validator: 13.11.0
     dev: false
 
+  /outvariant@1.4.0:
+    resolution: {integrity: sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==}
+    dev: false
+
   /p-finally@1.0.0:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
@@ -17420,7 +17631,7 @@ packages:
       cosmiconfig: 7.1.0
       klona: 2.0.6
       postcss: 8.4.5
-      semver: 7.3.5
+      semver: 7.5.4
       webpack: 5.76.1(esbuild@0.14.22)
     dev: true
 
@@ -18853,6 +19064,35 @@ packages:
       rimraf: 2.7.1
     dev: true
 
+  /sandpack-vue3@3.1.7(@lezer/common@1.0.4)(vue@3.3.4):
+    resolution: {integrity: sha512-MYdjtEvtrmxzajiKi6S0LIdd0pAR+Sv0lR8d4XVz6c0fcfDSWg1cw6Cv3RhSG7YIH+zxRlaIbENnwIVBSpW/Kg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      vue: '>=3.2.0'
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      '@codemirror/autocomplete': 6.9.1(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.19.0)(@lezer/common@1.0.4)
+      '@codemirror/commands': 6.2.5
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.19.0)
+      '@codemirror/lang-html': 6.4.6
+      '@codemirror/lang-javascript': 6.2.1
+      '@codemirror/language': 6.9.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.19.0
+      '@codesandbox/sandpack-client': 2.7.1
+      '@lezer/highlight': 1.1.6
+      '@stitches/core': 1.2.8
+      ansi-to-vue3: 0.1.2(vue@3.3.4)
+      clean-set: 1.1.2
+      dequal: 2.0.3
+      lz-string: 1.5.0
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@lezer/common'
+    dev: false
+
   /sass-loader@12.4.0(sass@1.49.9)(webpack@5.76.1):
     resolution: {integrity: sha512-7xN+8khDIzym1oL9XyS6zP6Ges+Bo2B2xbPrjdMHEYyV3AQYhd/wXeru++3ODHF0zMjYmVadblSKrPrjEkL8mg==}
     engines: {node: '>= 12.13.0'}
@@ -19620,6 +19860,15 @@ packages:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
     dev: true
 
+  /static-browser-server@1.0.3:
+    resolution: {integrity: sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==}
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      dotenv: 16.3.1
+      mime-db: 1.52.0
+      outvariant: 1.4.0
+    dev: false
+
   /static-extend@0.1.2:
     resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==}
     engines: {node: '>=0.10.0'}
@@ -19675,6 +19924,10 @@ packages:
       queue-tick: 1.0.1
     dev: true
 
+  /strict-event-emitter@0.4.6:
+    resolution: {integrity: sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==}
+    dev: false
+
   /string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -19819,6 +20072,10 @@ packages:
       peek-readable: 4.1.0
     dev: false
 
+  /style-mod@4.1.0:
+    resolution: {integrity: sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==}
+    dev: false
+
   /stylus-loader@6.2.0(stylus@0.56.0)(webpack@5.76.1):
     resolution: {integrity: sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==}
     engines: {node: '>= 12.13.0'}
@@ -20879,7 +21136,7 @@ packages:
       anymatch: 3.1.3
       chokidar: 3.5.3
       destr: 2.0.1
-      h3: 1.8.0
+      h3: 1.8.1
       ioredis: 5.3.2
       listhen: 1.5.0
       lru-cache: 10.0.1
@@ -21145,17 +21402,15 @@ packages:
       vite: 4.4.7(@types/node@20.4.5)
     dev: true
 
-  /vitepress@1.0.0-rc.4(@algolia/client-search@4.19.1)(fuse.js@6.6.2)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2):
-    resolution: {integrity: sha512-JCQ89Bm6ECUTnyzyas3JENo00UDJeK8q1SUQyJYou+4Yz5BKEc/F3O21cu++DnUT2zXc0kvQ2Aj4BZCc/nioXQ==}
+  /vitepress@1.0.0-rc.10(@algolia/client-search@4.19.1)(fuse.js@6.6.2)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2):
+    resolution: {integrity: sha512-+MsahIWqq5WUEmj6MR4obcKYbT7im07jZPCQPdNJExkeOSbOAJ4xypSLx88x7rvtzWHhHc5aXbOhCRvGEGjFrw==}
     hasBin: true
     dependencies:
-      '@docsearch/css': 3.5.1
-      '@docsearch/js': 3.5.1(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.4.9)(vue@3.3.4)
+      '@docsearch/css': 3.5.2
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.3.0(vue@3.3.4)
-      '@vueuse/integrations': 10.3.0(focus-trap@7.5.2)(fuse.js@6.6.2)(vue@3.3.4)
-      body-scroll-lock: 4.0.0-beta.0
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      '@vueuse/integrations': 10.4.1(focus-trap@7.5.2)(fuse.js@6.6.2)(vue@3.3.4)
       focus-trap: 7.5.2
       mark.js: 8.11.1
       minisearch: 6.1.0
@@ -21320,6 +21575,10 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
+  /w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+    dev: false
+
   /w3c-xmlserializer@4.0.0:
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
     engines: {node: '>=14'}