@elmethis/qwik 0.0.6 → 0.0.8

package/lib/index.qwik.mjs

@@ -0,0 +1,1678 @@
+import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStylesScoped$, Slot, useStyles$, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
+import { mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
+import { renderToString } from "katex";
+import { kebabCase } from "lodash-es";
+const styles$n = '.code-block {\n  display: grid;\n  grid-template-rows: 2.75rem 1px 1fr;\n  grid-template-columns: 2rem 1fr 2.5rem;\n  grid-template-areas: "language-icon caption copy-icon" "divider divider divider" "code code code";\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: 0.25rem;\n  border-radius: 0.25rem;\n  background-color: rgba(255, 255, 255, 0.4);\n  box-shadow: 0 0 0.125rem rgba(62, 67, 75, 0.3);\n}\n[data-theme=dark] .code-block {\n  background-color: rgba(44, 48, 55, 0.9);\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.4);\n}\n\n.language-icon {\n  grid-area: language-icon;\n  padding-inline-start: 0.75rem;\n}\n\n.caption {\n  grid-area: caption;\n  padding: 1rem;\n  font-family: monospace;\n}\n\n.copy-icon {\n  grid-area: copy-icon;\n  padding: 0.25rem;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 0.125rem;\n  transition: background-color 100ms;\n  cursor: pointer;\n}\n.copy-icon:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .copy-icon:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider {\n  grid-area: divider;\n  width: calc(100% - 1rem);\n  border: none;\n  border-bottom: solid 1px rgba(128, 128, 128, 0.5);\n}\n\n.code {\n  grid-area: code;\n  box-sizing: border-box;\n  padding: 0 1rem;\n}';
+const Rust = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 128 128",
+    fill: "#a84f33",
+    width: size,
+    height: size,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M62.96.242c-.232.135-1.203 1.528-2.16 3.097c-2.4 3.94-2.426 3.942-5.65.55c-2.098-2.208-2.605-2.612-3.28-2.607c-.44.002-.995.152-1.235.332s-.916 1.612-1.504 3.183c-1.346 3.6-1.41 3.715-2.156 3.86c-.46.086-1.343-.407-3.463-1.929c-1.565-1.125-3.1-2.045-3.411-2.045c-1.291 0-1.655.706-2.27 4.4c-.78 4.697-.754 4.681-4.988 2.758c-1.71-.776-3.33-1.41-3.603-1.41s-.792.293-1.15.652c-.652.652-.653.655-.475 4.246l.178 3.595l-.68.364c-.602.322-1.017.283-3.684-.348c-3.48-.822-4.216-.8-4.92.15l-.516.693l.692 2.964c.38 1.63.745 3.2.814 3.487c.067.287-.05.746-.26 1.02c-.348.448-.717.49-3.94.44c-5.452-.086-5.761.382-3.51 5.3c.718 1.56 1.305 2.98 1.305 3.15c0 .898-.717 1.224-3.794 1.727c-1.722.28-3.218.51-3.326.51c-.107 0-.43.235-.717.522c-.937.936-.671 1.816 1.453 4.814c2.646 3.735 2.642 3.75-1.73 5.421c-4.971 1.902-5.072 2.37-1.287 5.96c3.525 3.344 3.53 3.295-.461 5.804C.208 62.8.162 62.846.085 63.876c-.093 1.253-.071 1.275 3.538 3.48c3.57 2.18 3.57 2.246.067 5.56C-.078 76.48.038 77 5.013 78.877c4.347 1.64 4.353 1.66 1.702 5.394c-1.502 2.117-1.981 3-1.981 3.653c0 1.223.637 1.535 4.44 2.174c3.206.54 3.92.857 3.92 1.741c0 .182-.588 1.612-1.307 3.177c-2.236 4.87-1.981 5.275 3.31 5.275c4.93 0 4.799-.15 3.737 4.294c-.8 3.35-.813 3.992-.088 4.715c.554.556 1.6.494 4.87-.289c2.499-.596 2.937-.637 3.516-.328l.66.354l-.177 3.594c-.178 3.593-.177 3.595.475 4.248c.358.36.884.652 1.165.652s1.903-.63 3.604-1.404c4.22-1.916 4.194-1.932 4.973 2.75c.617 3.711.977 4.4 2.294 4.4c.327 0 1.83-.88 3.34-1.958c2.654-1.893 3.342-2.19 4.049-1.74c.182.115.89 1.67 1.572 3.455c1.003 2.625 1.37 3.31 1.929 3.576c1.062.51 1.72.1 4.218-2.62c3.016-3.286 3.14-3.27 5.602.72c2.72 4.406 3.424 4.396 6.212-.089c2.402-3.864 2.374-3.862 5.621-.47c2.157 2.25 2.616 2.61 3.343 2.61c.464 0 1.019-.175 1.23-.388c.214-.213.92-1.786 1.568-3.496c.649-1.71 1.321-3.2 1.495-3.31c.687-.436 1.398-.13 4.048 1.752c1.56 1.108 3.028 1.96 3.377 1.96c1.296 0 1.764-.92 2.302-4.535c.46-3.082.554-3.378 1.16-3.685c.596-.302.954-.2 3.75 1.07c1.701.77 3.323 1.402 3.604 1.402s.816-.302 1.184-.672l.672-.67l-.184-3.448c-.177-3.29-.16-3.468.364-3.943c.54-.488.596-.486 3.615.204c3.656.835 4.338.857 5.025.17c.671-.67.664-.818-.254-4.69c-1.03-4.346-1.168-4.19 3.78-4.19c3.374 0 3.75-.049 4.18-.523c.718-.793.547-1.702-.896-4.779c-.729-1.55-1.32-2.96-1.315-3.135c.024-.914.743-1.227 4.065-1.767c2.033-.329 3.553-.71 3.829-.96c.923-.833.584-1.918-1.523-4.873c-2.642-3.703-2.63-3.738 1.599-5.297c5.064-1.866 5.209-2.488 1.419-6.09c-3.51-3.335-3.512-3.317.333-5.677c4.648-2.853 4.655-3.496.082-6.335c-3.933-2.44-3.93-2.406-.405-5.753c3.78-3.593 3.678-4.063-1.295-5.965c-4.388-1.679-4.402-1.72-1.735-5.38c1.588-2.18 1.982-2.903 1.982-3.65c0-1.306-.586-1.598-4.436-2.22c-3.216-.52-3.924-.835-3.924-1.75c0-.174.588-1.574 1.307-3.113c1.406-3.013 1.604-4.22.808-4.94c-.428-.387-1-.443-4.067-.392c-3.208.054-3.618.008-4.063-.439c-.486-.488-.48-.557.278-3.725c.931-3.88.935-3.975.17-4.694c-.777-.73-1.262-.718-4.826.121c-2.597.612-3.027.653-3.617.337l-.67-.36l.185-3.582l.186-3.58l-.67-.67c-.369-.37-.891-.67-1.163-.67c-.27 0-1.884.64-3.583 1.421c-2.838 1.306-3.143 1.393-3.757 1.072c-.612-.32-.714-.637-1.237-3.829c-.603-3.693-.977-4.412-2.288-4.412c-.311 0-1.853.925-3.426 2.055c-2.584 1.856-2.93 2.032-3.574 1.807c-.533-.186-.843-.59-1.221-1.599c-.28-.742-.817-2.172-1.194-3.177c-.762-2.028-1.187-2.482-2.328-2.482c-.637 0-1.213.458-3.28 2.604c-3.25 3.375-3.261 3.374-5.65-.545C66.073 1.78 65.075.382 64.81.24c-.597-.32-1.3-.32-1.85.002m2.96 11.798c2.83 2.014 1.326 6.75-2.144 6.75c-3.368 0-5.064-4.057-2.66-6.36c1.358-1.3 3.304-1.459 4.805-.39m-3.558 12.507c1.855.705 2.616.282 6.852-3.8l3.182-3.07l1.347.18c4.225.56 12.627 4.25 17.455 7.666c4.436 3.14 10.332 9.534 12.845 13.93l.537.942l-2.38 5.364c-1.31 2.95-2.382 5.673-2.382 6.053c0 .878.576 2.267 1.13 2.726c.234.195 2.457 1.265 4.939 2.378l4.51 2.025l.178 1.148c.23 1.495.26 5.167.052 6.21l-.163.816h-2.575c-2.987 0-2.756-.267-2.918 3.396c-.118 2.656-.76 4.124-2.22 5.075c-2.377 1.551-6.304 1.27-7.97-.57c-.255-.284-.752-1.705-1.105-3.16c-1.03-4.254-2.413-6.64-5.193-8.965c-.878-.733-1.595-1.418-1.595-1.522c0-.102.965-.915 2.145-1.803c4.298-3.24 6.77-7.012 7.04-10.747c.519-7.126-5.158-13.767-13.602-15.92c-2.002-.51-2.857-.526-27.624-.526c-14.057 0-25.56-.092-25.56-.204c0-.263 3.125-3.295 4.965-4.816c5.054-4.178 11.618-7.465 18.417-9.22l2.35-.61l3.34 3.387c1.839 1.863 3.64 3.5 4.003 3.637M20.3 46.34c1.539 1.008 2.17 3.54 1.26 5.062c-1.405 2.356-4.966 2.455-6.373.178c-2.046-3.309 1.895-7.349 5.113-5.24m90.672.13c4.026 2.454.906 8.493-3.404 6.586c-2.877-1.273-2.97-5.206-.155-6.64c1.174-.6 2.523-.579 3.56.053M32.163 61.5v15.02h-13.28l-.526-2.285c-1.036-4.5-1.472-9.156-1.211-12.969l.182-2.679l4.565-2.047c2.864-1.283 4.706-2.262 4.943-2.625c1.038-1.584.94-2.715-.518-5.933l-.68-1.502h6.523V61.5M70.39 47.132c2.843.74 4.345 2.245 4.349 4.355c.002 1.55-.765 2.52-2.67 3.38c-1.348.61-1.562.625-10.063.708l-8.686.084v-8.92h7.782c6.078 0 8.112.086 9.288.393m-2.934 21.554c1.41.392 3.076 1.616 3.93 2.888c.898 1.337 1.423 3.076 2.667 8.836c1.05 4.87 1.727 6.46 3.62 8.532c2.345 2.566 1.8 2.466 13.514 2.466c5.61 0 10.198.09 10.198.2c0 .197-3.863 4.764-4.03 4.764c-.048 0-2.066-.422-4.484-.939c-6.829-1.458-7.075-1.287-8.642 6.032l-1.008 4.702l-.91.448c-1.518.75-6.453 2.292-9.01 2.82c-4.228.87-8.828 1.162-12.871.821c-6.893-.585-16.02-3.259-16.377-4.8c-.075-.327-.535-2.443-1.018-4.704c-.485-2.26-1.074-4.404-1.31-4.764c-1.13-1.724-2.318-1.83-7.547-.674c-1.98.44-3.708.796-3.84.796c-.248 0-3.923-4.249-3.923-4.535c0-.09 8.728-.194 19.396-.23l19.395-.066l.07-6.89c.05-4.865-.018-6.997-.23-7.25c-.234-.284-1.485-.358-6.011-.358H53.32v-8.36l6.597.001c3.626.002 7.02.12 7.539.264M37.57 100.02c3.084 1.88 1.605 6.804-2.043 6.8c-3.74 0-5.127-4.88-1.94-6.826c1.055-.643 2.908-.63 3.983.026m56.48.206c1.512 1.108 2.015 3.413 1.079 4.95c-2.46 4.034-8.612.827-6.557-3.419c1.01-2.085 3.695-2.837 5.478-1.53"
+    })
+  });
+});
+const Javascript = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#f0db4f",
+        d: "M1.408 1.408h125.184v125.185H1.408z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#323330",
+        d: "M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981c-3.832-1.761-8.104-3.022-9.377-5.926c-.452-1.69-.512-2.642-.226-3.665c.821-3.32 4.784-4.355 7.925-3.403c2.023.678 3.938 2.237 5.093 4.724c5.402-3.498 5.391-3.475 9.163-5.879c-1.381-2.141-2.118-3.129-3.022-4.045c-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235c-5.926 6.724-4.236 18.492 2.975 23.335c7.104 5.332 17.54 6.545 18.873 11.531c1.297 6.104-4.486 8.08-10.234 7.378c-4.236-.881-6.592-3.034-9.139-6.949c-4.688 2.713-4.688 2.713-9.508 5.485c1.143 2.499 2.344 3.63 4.26 5.795c9.068 9.198 31.76 8.746 35.83-5.176c.165-.478 1.261-3.666.38-8.581M69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149c-1.713 3.558-6.152 3.117-8.175 2.427c-2.059-1.012-3.106-2.451-4.319-4.485c-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901c4.462 2.678 10.459 3.499 16.731 2.059c4.082-1.189 7.604-3.652 9.448-7.401c2.666-4.915 2.094-10.864 2.07-17.444c.06-10.735.001-21.468.001-32.237"
+      })
+    ]
+  });
+});
+const Typescript = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M22.67 47h99.67v73.67H22.67z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#007acc",
+        d: "M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 0 1 7.82 4.5a20.6 20.6 0 0 1 3 4c0 .16-5.4 3.81-8.69 5.85c-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 0 0-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.6 4.6 0 0 0 .54 2.34c.83 1.73 2.38 2.76 7.24 4.86c8.95 3.85 12.78 6.39 15.16 10c2.66 4 3.25 10.46 1.45 15.24c-2 5.2-6.9 8.73-13.83 9.9a38.3 38.3 0 0 1-9.52-.1a23 23 0 0 1-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9 9 0 0 1 1.15-.73L82 101l3.59-2.08l.75 1.11a16.8 16.8 0 0 0 4.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 0 0 .69-6.92c-1-1.39-3-2.56-8.59-5c-6.45-2.78-9.23-4.5-11.77-7.24a16.5 16.5 0 0 1-3.43-6.25a25 25 0 0 1-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.7 31.7 0 0 1 9.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49 49 0 0 1 .12-5.17C29.08 59 39 59 51 59h21.83z"
+      })
+    ]
+  });
+});
+const styles$m = ".path {\n  fill: #293138;\n}\n[data-theme=dark] .path {\n  fill: #d2dbe3;\n}";
+const Bash = component$(({ size = 24, ...props }) => {
+  useStylesScoped$(styles$m);
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 128 128",
+    width: size,
+    height: size,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "none",
+        d: "M4.24 4.24h119.53v119.53H4.24z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        class: "path",
+        d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#4fa847",
+        d: "m99.12 90.73l-9.4 5.62c-.25.15-.43.31-.43.61v2.46c0 .3.2.43.45.28l9.54-5.8c.25-.15.29-.42.29-.72v-2.17c0-.3-.2-.42-.45-.28"
+      })
+    ]
+  });
+});
+const Terraform = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: /* @__PURE__ */ jsxs("g", {
+      "fill-rule": "evenodd",
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          fill: "#5c4ee5",
+          d: "M77.941 44.5v36.836L46.324 62.918V26.082zm0 0"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fill: "#4040b2",
+          d: "m81.41 81.336l31.633-18.418V26.082L81.41 44.5zm0 0"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fill: "#5c4ee5",
+          d: "M11.242 42.36L42.86 60.776V23.941L11.242 5.523zm66.699 43.015L46.324 66.957v36.82l31.617 18.418zm0 0"
+        })
+      ]
+    })
+  });
+});
+const Html = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#e44d26",
+        d: "M19.037 113.876L9.032 1.661h109.936l-10.016 112.198l-45.019 12.48z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#f16529",
+        d: "m64 116.8l36.378-10.086l8.559-95.878H64z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#ebebeb",
+        d: "M64 52.455H45.788L44.53 38.361H64V24.599H29.489l.33 3.692l3.382 37.927H64zm0 35.743l-.061.017l-15.327-4.14l-.979-10.975H33.816l1.928 21.609l28.193 7.826l.063-.017z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M63.952 52.455v13.763h16.947l-1.597 17.849l-15.35 4.143v14.319l28.215-7.82l.207-2.325l3.234-36.233l.335-3.696h-3.708zm0-27.856v13.762h33.244l.276-3.092l.628-6.978l.329-3.692z"
+      })
+    ]
+  });
+});
+const Css = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "#3f9de9",
+      d: "m5 3l-.65 3.34h13.59L17.5 8.5H3.92l-.66 3.33h13.59l-.76 3.81l-5.48 1.81l-4.75-1.81l.33-1.64H2.85l-.79 4l7.85 3l9.05-3l1.2-6.03l.24-1.21L21.94 3z"
+    })
+  });
+});
+const Npm = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#cb3837",
+        d: "M0 7.062C0 3.225 3.225 0 7.062 0h113.88c3.838 0 7.063 3.225 7.063 7.062v113.88c0 3.838-3.225 7.063-7.063 7.063H7.062c-3.837 0-7.062-3.225-7.062-7.063zm23.69 97.518h40.395l.05-58.532h19.494l-.05 58.581h19.543l.05-78.075l-78.075-.1l-.1 78.126z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M25.105 65.52V26.512H40.96c8.72 0 26.274.034 39.008.075l23.153.075v77.866H83.645v-58.54H64.057v58.54H25.105z"
+      })
+    ]
+  });
+});
+const Java = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#0074bd",
+        d: "M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092c0 0 2.871 1.795 6.873 3.351c-24.439 10.47-55.308-.607-36.115-5.969m-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6c0 0 1.993 2.025 5.132 3.131c-29.542 8.64-62.446.68-41.309-6.336"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#ea2d2e",
+        d: "M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58c0 .001-42.731 10.67-22.324 34.187"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#0074bd",
+        d: "M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171c-4.451-1.938 3.899-4.625 6.526-5.192c2.739-.593 4.303-.485 4.303-.485c-4.953-3.487-32.013 6.85-13.743 9.815c49.821 8.076 90.817-3.637 77.896-9.468M49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326c9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958c10.832-5.239 19.644-4.643 19.644-4.643m40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285c-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725c0-.002.359-.327.468-.617"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#ea2d2e",
+        d: "M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559c-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#0074bd",
+        d: "M52.214 126.021c22.476 1.437 57-.8 57.817-11.436c0 0-1.571 4.032-18.577 7.231c-19.186 3.612-42.854 3.191-56.887.874c0 .001 2.875 2.381 17.647 3.331"
+      })
+    ]
+  });
+});
+const Kotlin = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("defs", {
+        children: /* @__PURE__ */ jsxs("linearGradient", {
+          id: "deviconKotlin0",
+          x1: "500.003",
+          x2: "-.097",
+          y1: "579.106",
+          y2: "1079.206",
+          gradientTransform: "translate(15.534 -96.774)scale(.1939)",
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              offset: ".003",
+              "stop-color": "#e44857"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              offset: ".469",
+              "stop-color": "#c711e1"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              offset: "1",
+              "stop-color": "#7f52ff"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "url(#deviconKotlin0)",
+        d: "M112.484 112.484H15.516V15.516h96.968L64 64Zm0 0"
+      })
+    ]
+  });
+});
+const Go = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: /* @__PURE__ */ jsxs("g", {
+      fill: "#00acd7",
+      "fill-rule": "evenodd",
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M11.156 54.829c-.243 0-.303-.122-.182-.303l1.273-1.637c.12-.182.424-.303.666-.303H34.55c.243 0 .303.182.182.364l-1.03 1.576c-.121.181-.424.363-.606.363zm-9.152 5.575c-.242 0-.303-.12-.182-.303l1.273-1.636c.121-.182.424-.303.667-.303h27.636c.242 0 .364.182.303.364l-.485 1.454c-.06.243-.303.364-.545.364zM16.67 65.98c-.242 0-.302-.182-.181-.364l.848-1.515c.122-.182.364-.363.607-.363h12.12c.243 0 .364.181.364.424l-.12 1.454c0 .243-.243.425-.425.425zm62.91-12.242c-3.819.97-6.425 1.697-10.182 2.666c-.91.243-.97.303-1.758-.606c-.909-1.03-1.576-1.697-2.848-2.303c-3.819-1.878-7.516-1.333-10.97.91c-4.121 2.666-6.242 6.605-6.182 11.514c.06 4.849 3.394 8.849 8.182 9.516c4.121.545 7.576-.91 10.303-4c.545-.667 1.03-1.394 1.636-2.243H56.064c-1.272 0-1.575-.788-1.151-1.818c.788-1.879 2.242-5.03 3.09-6.606c.183-.364.607-.97 1.516-.97h22.06c-.12 1.637-.12 3.273-.363 4.91c-.667 4.363-2.303 8.363-4.97 11.878c-4.364 5.758-10.06 9.333-17.273 10.303c-5.939.788-11.454-.364-16.302-4c-4.485-3.394-7.03-7.879-7.697-13.454c-.788-6.606 1.151-12.546 5.151-17.758c4.303-5.636 10-9.212 16.97-10.485c5.697-1.03 11.151-.363 16.06 2.97c3.212 2.121 5.515 5.03 7.03 8.545c.364.546.122.849-.606 1.03z"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          "fill-rule": "nonzero",
+          d: "M99.64 87.253c-5.515-.122-10.546-1.697-14.788-5.334c-3.576-3.09-5.818-7.03-6.545-11.697c-1.091-6.848.787-12.909 4.909-18.302c4.424-5.819 9.757-8.849 16.97-10.122c6.181-1.09 12-.484 17.272 3.091c4.788 3.273 7.757 7.697 8.545 13.515c1.03 8.182-1.333 14.849-6.97 20.546c-4 4.06-8.909 6.606-14.545 7.757c-1.636.303-3.273.364-4.848.546m14.424-24.485c-.06-.788-.06-1.394-.182-2c-1.09-6-6.606-9.394-12.363-8.06c-5.637 1.272-9.273 4.848-10.606 10.545c-1.091 4.727 1.212 9.515 5.575 11.454c3.334 1.455 6.667 1.273 9.879-.363c4.788-2.485 7.394-6.364 7.697-11.576"
+        })
+      ]
+    })
+  });
+});
+const Python = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("linearGradient", {
+        id: "deviconPython0",
+        x1: "70.252",
+        x2: "170.659",
+        y1: "1237.476",
+        y2: "1151.089",
+        gradientTransform: "matrix(.563 0 0 -.568 -29.215 707.817)",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "0",
+            "stop-color": "#5a9fd4"
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "1",
+            "stop-color": "#306998"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("linearGradient", {
+        id: "deviconPython1",
+        x1: "209.474",
+        x2: "173.62",
+        y1: "1098.811",
+        y2: "1149.537",
+        gradientTransform: "matrix(.563 0 0 -.568 -29.215 707.817)",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "0",
+            "stop-color": "#ffd43b"
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "1",
+            "stop-color": "#ffe873"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "url(#deviconPython0)",
+        d: "M63.391 1.988c-4.222.02-8.252.379-11.8 1.007c-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521c-2.268 9.405-2.368 15.275 0 25.096c1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837c-4.244-.706-8.645-1.027-12.866-1.008M50.037 9.557c2.55 0 4.634 2.117 4.634 4.721c0 2.593-2.083 4.69-4.634 4.69c-2.56 0-4.633-2.097-4.633-4.69c-.001-2.604 2.073-4.721 4.633-4.721",
+        transform: "translate(0 10.26)"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "url(#deviconPython1)",
+        d: "M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547c7.816 2.297 15.312 2.713 24.665 0c6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519c2.578-7.735 2.467-15.174 0-25.096c-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692c0 2.602-2.074 4.719-4.634 4.719c-2.55 0-4.633-2.117-4.633-4.719c0-2.595 2.083-4.692 4.633-4.692",
+        transform: "translate(0 10.26)"
+      }),
+      /* @__PURE__ */ jsxs("radialGradient", {
+        id: "deviconPython2",
+        cx: "1825.678",
+        cy: "444.45",
+        r: "26.743",
+        gradientTransform: "matrix(0 -.24 -1.055 0 532.979 557.576)",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "0",
+            "stop-color": "#b8b8b8",
+            "stop-opacity": "0.498"
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "1",
+            "stop-color": "#7f7f7f",
+            "stop-opacity": "0"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "url(#deviconPython2)",
+        d: "M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416c-18.276 0-33.092-2.873-33.092-6.416s14.815-6.417 33.092-6.417c18.275 0 33.091 2.872 33.091 6.417",
+        opacity: "0.444"
+      })
+    ]
+  });
+});
+const Sql = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "#00618a",
+      d: "M117.688 98.242c-6.973-.191-12.297.461-16.852 2.379c-1.293.547-3.355.559-3.566 2.18c.711.746.82 1.859 1.387 2.777c1.086 1.754 2.922 4.113 4.559 5.352c1.789 1.348 3.633 2.793 5.551 3.961c3.414 2.082 7.223 3.27 10.504 5.352c1.938 1.23 3.859 2.777 5.75 4.164c.934.684 1.563 1.75 2.773 2.18v-.195c-.637-.812-.801-1.93-1.387-2.777l-2.578-2.578c-2.52-3.344-5.719-6.281-9.117-8.719c-2.711-1.949-8.781-4.578-9.91-7.73l-.199-.199c1.922-.219 4.172-.914 5.949-1.391c2.98-.797 5.645-.59 8.719-1.387l4.164-1.187v-.793c-1.555-1.594-2.664-3.707-4.359-5.152c-4.441-3.781-9.285-7.555-14.273-10.703c-2.766-1.746-6.184-2.883-9.117-4.363c-.988-.496-2.719-.758-3.371-1.586c-1.539-1.961-2.379-4.449-3.566-6.738c-2.488-4.793-4.93-10.023-7.137-15.066c-1.504-3.437-2.484-6.828-4.359-9.91c-9-14.797-18.687-23.73-33.695-32.508c-3.195-1.867-7.039-2.605-11.102-3.57l-6.543-.395c-1.332-.555-2.715-2.184-3.965-2.977C16.977 3.52 4.223-3.312.539 5.672C-1.785 11.34 4.016 16.871 6.09 19.746c1.457 2.012 3.32 4.273 4.359 6.539c.688 1.492.805 2.984 1.391 4.559c1.438 3.883 2.695 8.109 4.559 11.695c.941 1.816 1.98 3.727 3.172 5.352c.727.996 1.98 1.438 2.18 2.973c-1.227 1.715-1.297 4.375-1.984 6.543c-3.098 9.77-1.926 21.91 2.578 29.137c1.383 2.223 4.641 6.98 9.117 5.156c3.918-1.598 3.043-6.539 4.164-10.902c.254-.988.098-1.715.594-2.379v.199l3.57 7.133c2.641 4.254 7.324 8.699 11.297 11.699c2.059 1.555 3.68 4.242 6.344 5.152v-.199h-.199c-.516-.805-1.324-1.137-1.98-1.781c-1.551-1.523-3.277-3.414-4.559-5.156c-3.613-4.902-6.805-10.27-9.711-15.855c-1.391-2.668-2.598-5.609-3.77-8.324c-.453-1.047-.445-2.633-1.387-3.172c-1.281 1.988-3.172 3.598-4.164 5.945c-1.582 3.754-1.789 8.336-2.375 13.082c-.348.125-.195.039-.398.199c-2.762-.668-3.73-3.508-4.758-5.949c-2.594-6.164-3.078-16.09-.793-23.191c.59-1.836 3.262-7.617 2.18-9.316c-.516-1.691-2.219-2.672-3.172-3.965c-1.18-1.598-2.355-3.703-3.172-5.551c-2.125-4.805-3.113-10.203-5.352-15.062c-1.07-2.324-2.875-4.676-4.359-6.738c-1.645-2.289-3.484-3.977-4.758-6.742c-.453-.984-1.066-2.559-.398-3.566c.215-.684.516-.969 1.191-1.191c1.148-.887 4.352.297 5.547.793c3.18 1.32 5.832 2.578 8.527 4.363c1.289.855 2.598 2.512 4.16 2.973h1.785c2.789.641 5.914.195 8.523.988c4.609 1.402 8.738 3.582 12.488 5.949c11.422 7.215 20.766 17.48 27.156 29.734c1.027 1.973 1.473 3.852 2.379 5.945c1.824 4.219 4.125 8.559 5.941 12.688c1.816 4.113 3.582 8.27 6.148 11.695c1.348 1.801 6.551 2.766 8.918 3.766c1.66.699 4.379 1.43 5.949 2.379c3 1.809 5.906 3.965 8.723 5.945c1.402.992 5.73 3.168 5.945 4.957zm-88.605-75.52c-1.453-.027-2.48.156-3.566.395v.199h.195c.695 1.422 1.918 2.34 2.777 3.566l1.98 4.164l.199-.195c1.227-.867 1.789-2.25 1.781-4.363c-.492-.52-.562-1.164-.992-1.785c-.562-.824-1.66-1.289-2.375-1.98zm0 0"
+    })
+  });
+});
+const Json = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("linearGradient", {
+        id: "deviconJson0",
+        x1: "-670.564",
+        x2: "-583.105",
+        y1: "-280.831",
+        y2: "-368.306",
+        gradientTransform: "matrix(.9988 0 0 -.9987 689.011 -259.008)",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "0"
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "1",
+            "stop-color": "#fff"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "url(#deviconJson0)",
+        "fill-rule": "evenodd",
+        d: "M63.895 94.303c27.433 37.398 54.281-10.438 54.241-39.205c-.046-34.012-34.518-53.021-54.263-53.021C32.182 2.077 2 28.269 2 64.105C2 103.937 36.596 126 63.873 126c-6.172-.889-26.742-5.296-27.019-52.674c-.186-32.044 10.453-44.846 26.974-39.214c.37.137 18.223 7.18 18.223 30.187c0 22.908-18.156 30.004-18.156 30.004",
+        "clip-rule": "evenodd"
+      }),
+      /* @__PURE__ */ jsxs("linearGradient", {
+        id: "deviconJson1",
+        x1: "-579.148",
+        x2: "-666.607",
+        y1: "-364.34",
+        y2: "-276.865",
+        gradientTransform: "matrix(.9988 0 0 -.9987 689.011 -259.008)",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "0"
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "1",
+            "stop-color": "#fff"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "url(#deviconJson1)",
+        "fill-rule": "evenodd",
+        d: "M63.895 94.303c27.433 37.398 54.281-10.438 54.241-39.205c-.046-34.012-34.518-53.021-54.263-53.021C32.182 2.077 2 28.269 2 64.105C2 103.937 36.596 126 63.873 126c-6.172-.889-26.742-5.296-27.019-52.674c-.186-32.044 10.453-44.846 26.974-39.214c.37.137 18.223 7.18 18.223 30.187c0 22.908-18.156 30.004-18.156 30.004",
+        "clip-rule": "evenodd"
+      })
+    ]
+  });
+});
+const Lua = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 128 128",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#000080",
+        d: "M112.956.708c-7.912 0-14.335 6.424-14.335 14.336s6.424 14.335 14.335 14.335s14.335-6.41 14.335-14.335c0-7.912-6.424-14.336-14.335-14.336M64 15.058c-27.02 0-48.956 21.935-48.956 48.955S36.979 112.97 64 112.97c27.02 0 48.956-21.935 48.956-48.956c0-27.02-21.936-48.956-48.956-48.956"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M84.285 29.392c-7.91 0-14.335 6.424-14.335 14.335s6.424 14.336 14.335 14.336s14.336-6.424 14.336-14.336s-6.424-14.335-14.335-14.335zM30.773 56.36v32.119h19.961v-3.611H34.87V56.359Zm57.584 8.37c-3.354 0-6.126.975-7.668 2.692c-1.055 1.19-1.488 2.516-1.582 4.801h3.705c.311-2.826 1.988-4.098 5.423-4.098c3.3 0 5.153 1.231 5.153 3.435v.974c0 1.542-.92 2.205-3.827 2.556c-5.193.663-5.991.839-7.398 1.407c-2.69 1.095-4.057 3.164-4.057 6.166c0 4.193 2.908 6.83 7.574 6.83c2.907 0 5.247-1.014 7.843-3.395c.257 2.34 1.407 3.395 3.787 3.395c.757 0 1.325-.081 2.515-.392v-2.773a3 3 0 0 1-.798.095c-1.284 0-1.988-.663-1.988-1.812V71.032c0-4.098-3.002-6.302-8.682-6.302m-33.742.664V83.19c0 3.84 2.867 6.302 7.357 6.302c3.395 0 5.545-1.19 7.709-4.233v3.219h3.3V65.393h-3.652v13.09c0 4.72-2.475 7.804-6.302 7.804c-2.907 0-4.76-1.772-4.76-4.544v-16.35Zm38.773 11.67v4.139c0 1.244-.365 1.988-1.46 3.002c-1.502 1.366-3.3 2.07-5.464 2.07c-2.867 0-4.544-1.367-4.544-3.706c0-2.42 1.636-3.665 5.558-4.233c3.881-.528 4.68-.703 5.91-1.271z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#808080",
+        d: "M61.733 0a64 64 0 0 0-5.57.436l.179 1.458a63 63 0 0 1 5.442-.426zm5.585.046l-.075 1.468a62 62 0 0 1 5.433.52L72.88.578a64 64 0 0 0-5.561-.532Zm-16.665 1.31a63 63 0 0 0-5.409 1.398l.43 1.405a62 62 0 0 1 5.284-1.367Zm27.72.237l-.33 1.431a63 63 0 0 1 5.262 1.455l.452-1.397a64 64 0 0 0-5.384-1.489M39.98 4.623a64 64 0 0 0-5.081 2.323l.668 1.308a62 62 0 0 1 4.964-2.27zm49.012.41l-.573 1.353a63 63 0 0 1 4.929 2.346l.688-1.298a64 64 0 0 0-5.044-2.4ZM30.04 9.706a64 64 0 0 0-4.6 3.17l.886 1.173a63 63 0 0 1 4.494-3.098zm-8.906 6.728a64 64 0 0 0-3.983 3.918l1.075 1.001a63 63 0 0 1 3.891-3.827zm-7.61 8.165a64 64 0 0 0-3.247 4.546l1.231.8a63 63 0 0 1 3.172-4.44zm-6.086 9.357a64 64 0 0 0-2.408 5.042l1.352.574a62 62 0 0 1 2.352-4.925zm113.623.973l-1.31.667a63 63 0 0 1 2.263 4.967l1.362-.55a64 64 0 0 0-2.315-5.083zM3.075 44.23a63 63 0 0 0-1.49 5.385l1.432.328a62 62 0 0 1 1.455-5.26Zm122.166 1.049l-1.404.429a63 63 0 0 1 1.366 5.285l1.437-.306a64 64 0 0 0-1.399-5.409zM.574 55.108a64 64 0 0 0-.528 5.561l1.467.075a63 63 0 0 1 .516-5.434Zm126.988 1.088l-1.458.179a63 63 0 0 1 .428 5.441l1.468-.05a64 64 0 0 0-.438-5.57M1.468 66.205L0 66.255a64 64 0 0 0 .435 5.57l1.458-.179a63 63 0 0 1-.425-5.441m125.018 1.071a63 63 0 0 1-.518 5.434l1.455.203a64 64 0 0 0 .53-5.561zM2.79 77.031l-1.437.304a63 63 0 0 0 1.398 5.41l1.405-.43A62 62 0 0 1 2.79 77.03Zm122.188 1.046a62 62 0 0 1-1.457 5.26l1.397.454a63 63 0 0 0 1.492-5.384zM5.981 87.459l-1.362.551a63 63 0 0 0 2.323 5.082l1.307-.669a62 62 0 0 1-2.268-4.964m115.627.99a62 62 0 0 1-2.354 4.925l1.296.69a64 64 0 0 0 2.41-5.04zM10.944 97.17l-1.245.78a64 64 0 0 0 3.17 4.6l1.172-.885a63 63 0 0 1-3.097-4.495m105.534.904a63 63 0 0 1-3.173 4.44l1.156.906a64 64 0 0 0 3.249-4.545zm-98.96 7.8l-1.092.983a64 64 0 0 0 3.917 3.983l1.002-1.074a63 63 0 0 1-3.827-3.892m92.24.79a63 63 0 0 1-3.893 3.826l.983 1.092a64 64 0 0 0 3.984-3.916zm-84.263 6.648l-.906 1.157a64 64 0 0 0 4.546 3.248l.8-1.232a63 63 0 0 1-4.44-3.173m76.16.654a63 63 0 0 1-4.495 3.096l.78 1.245a64 64 0 0 0 4.6-3.17zm-67.018 5.294l-.691 1.296a64 64 0 0 0 5.04 2.409l.575-1.352a62 62 0 0 1-4.924-2.353m57.775.496a62 62 0 0 1-4.964 2.268l.551 1.362a63 63 0 0 0 5.082-2.322zm-47.74 3.77l-.453 1.396a63 63 0 0 0 5.385 1.49l.329-1.43a62 62 0 0 1-5.26-1.456zm37.632.322a62 62 0 0 1-5.284 1.365l.304 1.437a63 63 0 0 0 5.41-1.398zm-27.003 2.122l-.203 1.455a64 64 0 0 0 5.561.529l.075-1.467a63 63 0 0 1-5.433-.517m16.335.139a63 63 0 0 1-5.442.424l.05 1.468a64 64 0 0 0 5.57-.434z"
+      })
+    ]
+  });
+});
+const Csharp = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 128 128",
+    width: size,
+    height: size,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#9b4f96",
+        d: "M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7s-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#68217a",
+        d: "M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7s2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20c-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8zM97 66.2l.9-4.3h-4.2v-4.7h5.1L100 51h4.9l-1.2 6.1h3.8l1.2-6.1h4.8l-1.2 6.1h2.4v4.7h-3.3l-.9 4.3h4.2v4.7h-5.1l-1.2 6h-4.9l1.2-6h-3.8l-1.2 6h-4.8l1.2-6h-2.4v-4.7H97zm4.8 0h3.8l.9-4.3h-3.8z"
+      })
+    ]
+  });
+});
+const Cplusplus = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 128 128",
+    width: size,
+    height: size,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#00599c",
+        d: "M118.766 95.82c.89-1.543 1.441-3.28 1.441-4.843V36.78c0-1.558-.55-3.297-1.441-4.84l-55.32 31.94Zm0 0"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#004482",
+        d: "m68.36 126.586l46.933-27.094c1.352-.781 2.582-2.129 3.473-3.672l-55.32-31.94L8.12 95.82c.89 1.543 2.121 2.89 3.473 3.672l46.933 27.094c2.703 1.562 7.13 1.562 9.832 0Zm0 0"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#659ad2",
+        d: "M118.766 31.941c-.891-1.546-2.121-2.894-3.473-3.671L68.359 1.172c-2.703-1.563-7.129-1.563-9.832 0L11.594 28.27C8.89 29.828 6.68 33.66 6.68 36.78v54.196c0 1.562.55 3.3 1.441 4.843L63.445 63.88Zm0 0"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M63.445 26.035c-20.867 0-37.843 16.977-37.843 37.844s16.976 37.844 37.843 37.844c13.465 0 26.024-7.247 32.77-18.91L79.84 73.335c-3.38 5.84-9.66 9.465-16.395 9.465c-10.433 0-18.922-8.488-18.922-18.922s8.49-18.922 18.922-18.922c6.73 0 13.017 3.629 16.39 9.465l16.38-9.477c-6.75-11.664-19.305-18.91-32.77-18.91zM92.88 57.57v4.207h-4.207v4.203h4.207v4.207h4.203V65.98h4.203v-4.203h-4.203V57.57zm15.766 0v4.207h-4.204v4.203h4.204v4.207h4.207V65.98h4.203v-4.203h-4.203V57.57z"
+      })
+    ]
+  });
+});
+const C = component$(({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 128 128",
+    width: size,
+    height: size,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        fill: "#659ad3",
+        d: "M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7s-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#03599c",
+        d: "M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7s2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8z"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20c-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8z"
+      })
+    ]
+  });
+});
+const normalizeLanguage = (language) => {
+  switch (language) {
+    case "rust":
+    case "rs":
+      return "rust";
+    case "javascript":
+    case "js":
+      return "javascript";
+    case "typescript":
+    case "ts":
+      return "typescript";
+    case "bash":
+    case "sh":
+    case "shell":
+      return "shell";
+    case "tf":
+    case "terraform":
+    case "hcl":
+      return "terraform";
+    case "html":
+    case "html5":
+      return "html";
+    case "css":
+    case "css3":
+      return "css";
+    case "npm":
+      return "npm";
+    case "java":
+      return "java";
+    case "kotlin":
+    case "kt":
+      return "kotlin";
+    case "go":
+    case "golang":
+      return "go";
+    case "python":
+    case "py":
+      return "python";
+    case "sql":
+      return "sql";
+    case "json":
+      return "json";
+    case "lua":
+      return "lua";
+    case "cs":
+    case "c#":
+    case "csharp":
+      return "csharp";
+    case "cpp":
+    case "c++":
+      return "cpp";
+    case "c":
+    case "clang":
+      return "c";
+    default:
+      return "file";
+  }
+};
+const renderMap = {
+  rust: Rust,
+  javascript: Javascript,
+  typescript: Typescript,
+  shell: Bash,
+  terraform: Terraform,
+  html: Html,
+  css: Css,
+  npm: Npm,
+  java: Java,
+  kotlin: Kotlin,
+  go: Go,
+  python: Python,
+  sql: Sql,
+  json: Json,
+  lua: Lua,
+  csharp: Csharp,
+  cpp: Cplusplus,
+  c: C,
+  file: () => null
+};
+const ElmLanguageIcon = component$(({ size = 24, language }) => {
+  const Component2 = renderMap[normalizeLanguage(language)];
+  return /* @__PURE__ */ jsx(Component2, {
+    size
+  });
+});
+const styles$l = '.text {\n  padding: 0;\n  margin: 0;\n  white-space: pre-line;\n  font-size: var(--font-size, 1em);\n  line-height: var(--font-size, 1em);\n  background-color: var(--background-color);\n  transition: color 200ms;\n  text-decoration-color: var(--color);\n}\n\n.code {\n  margin-inline: 0.25rem;\n  padding: 2px 0.5em;\n  font-size: calc(1em - 2px);\n  border-radius: 0.125rem;\n  background-color: rgba(0, 0, 0, 0.075);\n  font-family: "Source Code Pro" monospace;\n}\n\n.kbd {\n  padding: 0.125rem 0.25rem;\n  position: relative;\n  border-radius: 0.125rem;\n  background-color: #e6e6e6;\n}\n[data-theme=dark] .kbd {\n  background-color: #404040;\n}\n.kbd::before {\n  z-index: -1;\n  position: absolute;\n  content: "";\n  bottom: -0.25em;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  background-color: #ccc;\n  border-radius: 0 0 0.125rem 0.125rem;\n  box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .kbd::before {\n  background-color: #595959;\n  box-shadow: 0 0 0.125em rgba(255, 255, 255, 0.5);\n}\n\n.link {\n  all: unset;\n  box-sizing: border-box;\n  padding: 0 0.25rem;\n  font-size: var(--font-size);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  color: #6987b8;\n  border-radius: 0.125rem;\n  transition: background-color 200ms, color 200ms, opacity 200ms;\n}\n.link:hover {\n  background-color: rgba(105, 135, 184, 0.2);\n}\n.link:active {\n  opacity: 0.5;\n}\n.link:visited {\n  color: #9771bd;\n  border-bottom: dashed 1px #9771bd;\n}\n.link:visited:hover {\n  background-color: rgba(151, 113, 189, 0.2);\n}\n\n.ogp {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: hidden;\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.3);\n  background-color: rgba(255, 255, 255, 0.8);\n}\n[data-theme=dark] .ogp {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.ogp-text {\n  box-sizing: border-box;\n  padding: 0.5rem;\n}\n\n.ogp-title {\n  box-sizing: border-box;\n  font-weight: bold;\n  padding-block-end: 0.25rem;\n}\n\n.ogp-description {\n  opacity: 0.7;\n  padding: 0.25rem;\n}';
+const textStyles = ".text {\n  color: var(--color, #606875);\n}\n.text::selection {\n  color: #cccfd5;\n  background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .text {\n  color: var(--color, #b0b5be);\n}\n[data-theme=dark] .text::selection {\n  color: #3e434b;\n  background-color: var(--color, #cccfd5);\n}";
+const styles$k = ".icon {\n  margin: 0;\n  padding: 0;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1em;\n}\n.icon::selection {\n  filter: brightness(1000%);\n  background-color: var(--color, rgba(0, 0, 0, 0.25));\n}\n[data-theme=dark] .icon {\n  color: var(--color, rgba(255, 255, 255, 0.7));\n}\n[data-theme=dark] .icon::selection {\n  color: rgba(0, 0, 0, 0.7);\n  background-color: var(--color, rgba(255, 255, 255, 0.25));\n}";
+const ElmInlineIcon = component$(({ src, alt }) => {
+  useStylesScoped$(styles$k);
+  return /* @__PURE__ */ jsx("div", {
+    class: "icon",
+    children: /* @__PURE__ */ jsx("img", {
+      src,
+      alt,
+      class: "icon"
+    })
+  });
+});
+const ElmInlineText = component$((props) => {
+  useStylesScoped$(styles$l);
+  useStylesScoped$(textStyles);
+  const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
+  let vnode = props.text ? /* @__PURE__ */ jsx("span", {
+    children: props.text
+  }) : /* @__PURE__ */ jsx(Slot, {});
+  if (props.kbd) {
+    vnode = /* @__PURE__ */ jsx("kbd", {
+      class: "kbd",
+      children: vnode
+    });
+  }
+  if (strikethrough) {
+    vnode = /* @__PURE__ */ jsx("del", {
+      children: vnode
+    });
+  }
+  if (italic) {
+    vnode = /* @__PURE__ */ jsx("em", {
+      children: vnode
+    });
+  }
+  if (underline) {
+    vnode = /* @__PURE__ */ jsx("ins", {
+      children: vnode
+    });
+  }
+  if (bold) {
+    vnode = /* @__PURE__ */ jsx("strong", {
+      children: vnode
+    });
+  }
+  if (code) {
+    vnode = /* @__PURE__ */ jsx("code", {
+      class: "code",
+      children: vnode
+    });
+  }
+  if (props.ruby) {
+    vnode = /* @__PURE__ */ jsxs("ruby", {
+      class: "text",
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          children: vnode
+        }),
+        /* @__PURE__ */ jsx("rt", {
+          children: props.ruby
+        })
+      ]
+    });
+  }
+  const wrappedVnode = /* @__PURE__ */ jsx("span", {
+    class: [
+      "text",
+      "text"
+    ],
+    style: {
+      "--color": props.color,
+      "--font-size": size,
+      "--background-color": props.backgroundColor
+    },
+    children: vnode
+  });
+  if (props.href) {
+    return /* @__PURE__ */ jsxs("a", {
+      class: "link",
+      href: props.href,
+      style: {
+        "--font-size": size
+      },
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: [
+        props.favicon && /* @__PURE__ */ jsx(ElmInlineIcon, {
+          src: props.favicon
+        }),
+        wrappedVnode
+      ]
+    });
+  }
+  return wrappedVnode;
+});
+const styles$j = '.shiki,\n.shiki span {\n  font-family: "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;\n}\n.shiki *::selection,\n.shiki span *::selection {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .shiki *::selection,\n[data-theme=dark] .shiki span *::selection {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n[data-theme=dark] .shiki,\n[data-theme=dark] .shiki span {\n  color: var(--shiki-dark) !important;\n  background-color: var(--shiki-dark-bg) !important;\n}';
+const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
+  useStyles$(styles$j);
+  const rawHtml = useSignal("");
+  useTask$(async ({ track }) => {
+    const currentCode = track(() => code);
+    const currentLang = track(() => language);
+    const { getHighlighterSingleton } = await import("./shikiInstance-igs7t2fe.js");
+    const highlighter = await getHighlighterSingleton();
+    try {
+      rawHtml.value = highlighter.codeToHtml(currentCode, {
+        lang: currentLang,
+        themes: {
+          dark: "vitesse-dark",
+          light: "vitesse-light"
+        },
+        colorReplacements: {
+          "#ffffff": "transparent",
+          "#121212": "transparent"
+        }
+      });
+    } catch {
+      rawHtml.value = `<pre>${currentCode.replace(/</g, "&lt;")}</pre>`;
+    }
+  });
+  return /* @__PURE__ */ jsx("pre", {
+    dangerouslySetInnerHTML: rawHtml.value
+  });
+});
+const styles$i = ".icon {\n  fill: var(--color, #555b67);\n  transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n  fill: var(--dark-color, #b0b5be);\n}";
+const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
+  useStylesScoped$(styles$i);
+  return /* @__PURE__ */ jsx("svg", {
+    class: "icon",
+    style: {
+      "--color": lightColor ?? color,
+      "--dark-color": darkColor ?? color
+    },
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    focusable: "false",
+    role: "img",
+    children: /* @__PURE__ */ jsx("path", {
+      d
+    })
+  });
+});
+const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) => {
+  useStylesScoped$(styles$n);
+  const timerId = useSignal(null);
+  const copyToClipboard = $(async () => {
+    if (timerId.value !== null) {
+      window.clearTimeout(timerId.value);
+      timerId.value = null;
+    }
+    try {
+      await navigator.clipboard.writeText(code);
+      timerId.value = window.setTimeout(() => timerId.value = null, 1500);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  });
+  return /* @__PURE__ */ jsxs("figure", {
+    class: "code-block",
+    style: {
+      margin
+    },
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        class: "language-icon",
+        children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
+          language
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        class: "caption",
+        children: /* @__PURE__ */ jsxs(ElmInlineText, {
+          children: [
+            caption || language,
+            /* @__PURE__ */ jsx(Slot, {})
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "copy-icon",
+        onClick$: copyToClipboard,
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          size: "1.25rem",
+          d: timerId.value !== null ? mdiClipboardCheckMultipleOutline : mdiClipboardMultipleOutline,
+          color: timerId.value !== null ? "#59b57c" : void 0
+        })
+      }),
+      /* @__PURE__ */ jsx("hr", {
+        class: "divider"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "code",
+        children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
+          code,
+          language
+        })
+      })
+    ]
+  });
+});
+const ElmKatex = component$(({ expression, block = false }) => {
+  useStylesScoped$(textStyles);
+  const html = useComputed$(() => renderToString(expression, {
+    displayMode: block,
+    output: "mathml"
+  }));
+  return /* @__PURE__ */ jsx("div", {
+    class: "text",
+    dangerouslySetInnerHTML: html.value
+  });
+});
+const styles$h = ".toggle {\n  margin: 0;\n  display: grid;\n  transition: grid 200ms;\n  overflow: hidden;\n}\n.toggle.toggle-closed {\n  grid-template-rows: 3.5rem 0fr 0rem;\n}\n.toggle.toggle-open {\n  grid-template-rows: 3.5rem 1fr 3rem;\n}\n\n.summary {\n  box-sizing: border-box;\n  padding-inline: 1rem;\n  display: grid;\n  grid-template-columns: min-content 1fr min-content;\n  gap: 1rem;\n  align-items: center;\n  cursor: pointer;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n  background-color: rgba(62, 67, 75, 0.05);\n}\n[data-theme=dark] .summary {\n  border: 1px solid rgba(255, 255, 255, 0.125);\n  background-color: rgba(190, 194, 202, 0.1);\n}\n.summary.summary-open {\n  border-radius: 0.25rem 0.25rem 0 0;\n  border-bottom-color: transparent;\n}\n.summary.summary-closed {\n  border-radius: 0.25rem;\n}\n\n.chevron-icon {\n  transition: transform 200ms;\n}\n.chevron-icon.chevron-icon-open {\n  transform: rotate(90deg);\n}\n.chevron-icon.chevron-icon-closed {\n  transform: rotate(0deg);\n}\n\n.plus-icon {\n  height: 1rem;\n  width: 1rem;\n  transform-origin: center;\n  transition: transform 200ms;\n}\n.plus-icon.plus-icon-open {\n  transform: rotate(135deg);\n}\n.plus-icon.plus-icon-closed {\n  transform: rotate(0deg);\n}\n\n.content {\n  box-sizing: border-box;\n  padding: 1rem;\n  overflow: hidden;\n  transition: opacity 200ms;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n  border-radius: 0 0 0.25rem 0.25rem;\n  background-color: rgba(62, 67, 75, 0.0125);\n}\n[data-theme=dark] .content {\n  border-color: rgba(255, 255, 255, 0.125);\n  background-color: rgba(190, 194, 202, 0.025);\n}\n.content.content-open {\n  opacity: 1;\n}\n.content.content-closed {\n  opacity: 0;\n}\n\n.footer {\n  box-sizing: border-box;\n  margin: 0.25rem 0rem;\n  padding: 0.5rem;\n  color: #c56565;\n  font-family: monospace;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  user-select: none;\n  cursor: pointer;\n  border-radius: 0.25rem;\n  transition: opacity 200ms, background-color 200ms;\n}\n.footer:hover {\n  opacity: 0.5;\n  background-color: rgba(96, 104, 117, 0.1);\n}\n.footer.footer-line {\n  box-sizing: border-box;\n  margin: 0 0.25rem;\n  flex-grow: 1;\n  border: none;\n  border-bottom: solid 1px rgba(128, 128, 128, 0.3);\n}\n.footer.footer-cross-icon {\n  transform: rotate(45deg);\n}\n.footer.footer-chevron-icon {\n  transform: rotate(-90deg);\n}";
+const ElmToggle = component$(({ summary }) => {
+  useStylesScoped$(styles$h);
+  const isOpen = useSignal(false);
+  const toggle = $(() => {
+    isOpen.value = !isOpen.value;
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: [
+      "toggle",
+      {
+        "toggle-open": isOpen.value,
+        "toggle-closed": !isOpen.value
+      }
+    ],
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: [
+          "summary",
+          {
+            "summary-open": isOpen.value,
+            "summary-closed": !isOpen.value
+          }
+        ],
+        onClick$: toggle,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            class: [
+              "chevron-icon",
+              {
+                "chevron-icon-open": isOpen.value,
+                "chevron-icon-closed": !isOpen.value
+              }
+            ],
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiChevronRight
+            })
+          }),
+          /* @__PURE__ */ jsx("span", {
+            class: "summary-text",
+            children: summary ? summary : /* @__PURE__ */ jsx(Slot, {
+              name: "summary"
+            })
+          }),
+          /* @__PURE__ */ jsx("span", {
+            class: [
+              "plus-icon",
+              {
+                "plus-icon-open": isOpen.value,
+                "plus-icon-closed": !isOpen.value
+              }
+            ],
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiPlus,
+              color: isOpen.value ? "#c56565" : "#59b57c",
+              size: "1rem"
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: [
+          "content",
+          {
+            "content-open": isOpen.value,
+            "content-closed": !isOpen.value
+          }
+        ],
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "footer",
+        onClick$: toggle,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            class: "footer-chevron-icon",
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiChevronRight,
+              color: "gray"
+            })
+          }),
+          /* @__PURE__ */ jsx("hr", {
+            class: "footer-line"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            class: "footer-cross-icon",
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiPlus,
+              color: "#c56565"
+            })
+          }),
+          /* @__PURE__ */ jsx(ElmInlineText, {
+            children: "CLOSE"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            class: "footer-cross-icon",
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiPlus,
+              color: "#c56565"
+            })
+          }),
+          /* @__PURE__ */ jsx("hr", {
+            class: "footer-line"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            class: "footer-chevron-icon",
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiChevronRight,
+              color: "gray"
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+const styles$g = ".block-fallback {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: var(--height);\n}";
+const styles$f = "@keyframes bounce {\n  0% {\n    transform: translateY(0%) scaleY(0.3) scaleX(1.5);\n  }\n  10% {\n    transform: scaleY(0.8) scaleX(1.2);\n  }\n  100% {\n    transform: translateY(-400%) scaleY(1.1);\n  }\n}\n.wrapper {\n  width: var(--size);\n  height: var(--size);\n  user-select: none;\n  position: relative;\n  display: flex;\n  justify-content: space-around;\n  align-items: flex-end;\n}\n\n.dot {\n  width: 20%;\n  height: 20%;\n  border-radius: 50%;\n  animation-name: bounce;\n  animation-duration: 0.4s;\n  animation-iteration-count: infinite;\n  animation-direction: alternate;\n  animation-timing-function: ease-out;\n  transition: background-color 400ms;\n  background-color: var(--color, #606875);\n}\n[data-theme=dark] .dot {\n  background-color: #b0b5be;\n}\n.dot:nth-last-of-type(1) {\n  animation-delay: -100ms;\n}\n.dot:nth-last-of-type(2) {\n  animation-delay: 0ms;\n}\n.dot:nth-last-of-type(3) {\n  animation-delay: 100ms;\n}";
+const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
+  useStylesScoped$(styles$f);
+  return /* @__PURE__ */ jsxs("div", {
+    class: "wrapper",
+    style: {
+      "--size": size,
+      "--color": color
+    },
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "dot",
+        "aria-hidden": "true"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "dot",
+        "aria-hidden": "true"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "dot",
+        "aria-hidden": "true"
+      })
+    ]
+  });
+});
+const styles$e = "@keyframes elm-rectangle-wave {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  30% {\n    opacity: 0;\n  }\n  40% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n.rectangle-wave {\n  box-sizing: border-box;\n  position: absolute;\n  overflow: hidden;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  animation-name: elm-rectangle-wave;\n  animation-duration: 1200ms;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  border-style: solid;\n  border-width: 1px;\n  border-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .rectangle-wave {\n  border-color: rgba(255, 255, 255, 0.7);\n}";
+const ElmRectangleWave = component$(() => {
+  useStylesScoped$(styles$e);
+  return /* @__PURE__ */ jsx("div", {
+    "aria-hidden": "true",
+    class: "rectangle-wave"
+  });
+});
+const ElmBlockFallback = component$(({ height = "16rem" }) => {
+  useStylesScoped$(styles$g);
+  return /* @__PURE__ */ jsxs("div", {
+    class: "block-fallback",
+    style: {
+      "--height": height
+    },
+    children: [
+      /* @__PURE__ */ jsx(ElmDotLoadingIcon, {}),
+      /* @__PURE__ */ jsx(ElmRectangleWave, {})
+    ]
+  });
+});
+const styles$d = ".block-image {\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.image-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.image {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n  transition: opacity 400ms;\n  opacity: var(--opacity, 1);\n  user-select: none;\n  cursor: var(--cursor);\n}\n\n.fallback {\n  width: 100%;\n  height: 100%;\n  inset: 0 0 auto auto;\n  position: absolute;\n  transition: opacity 400ms;\n  opacity: var(--opacity, 1);\n  pointer-events: none;\n}\n\n.caption-box {\n  box-sizing: border-box;\n  padding: 0rem 1rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  opacity: 0.75;\n  opacity: var(--opacity, 1);\n  transition: opacity 400ms;\n}\n\n.modal-container {\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  inset: 0 0 auto auto;\n  z-index: 100;\n  background-color: rgba(35, 38, 42, 0.8);\n  cursor: zoom-out;\n  opacity: var(--opacity, 1);\n  transition: opacity 200ms;\n}";
+const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModal = true }) => {
+  useStylesScoped$(styles$d);
+  const isLoading = useSignal(true);
+  const isShowModal = useSignal(false);
+  const handleImageLoad = $(() => {
+    isLoading.value = false;
+  });
+  const handleToggleModal = $(() => {
+    if (enableModal) {
+      isShowModal.value = !isShowModal.value;
+    }
+  });
+  const ImageComponent = /* @__PURE__ */ jsx("img", {
+    class: [
+      "image"
+    ],
+    src,
+    alt: alt ?? caption ?? "Image",
+    width,
+    height,
+    onLoad$: handleImageLoad,
+    style: {
+      "--opacity": isLoading.value ? 0 : 1,
+      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default"
+    }
+  });
+  const Modal = /* @__PURE__ */ jsx("div", {
+    class: "modal-container",
+    style: {
+      pointerEvents: isShowModal.value ? "auto" : "none",
+      "--opacity": isShowModal.value ? 1 : 0
+    },
+    onClick$: handleToggleModal,
+    children: ImageComponent
+  });
+  return /* @__PURE__ */ jsxs("figure", {
+    class: "block-image",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "image-container",
+        style: {
+          "--opacity": isLoading.value ? 1 : 0
+        },
+        onClick$: handleToggleModal,
+        children: [
+          ImageComponent,
+          /* @__PURE__ */ jsx("div", {
+            class: "fallback",
+            children: /* @__PURE__ */ jsx(ElmRectangleWave, {})
+          })
+        ]
+      }),
+      caption && /* @__PURE__ */ jsxs("figcaption", {
+        class: "caption-box",
+        style: {
+          "--opacity": isLoading.value ? 0 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            style: {
+              flex: "1"
+            },
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiMessageImageOutline,
+              color: "#cdb57b",
+              size: "1.25rem"
+            })
+          }),
+          /* @__PURE__ */ jsx(ElmInlineText, {
+            size: "1rem",
+            children: caption
+          })
+        ]
+      }),
+      Modal
+    ]
+  });
+});
+const styles$c = ".file {\n  margin: 0;\n  padding: 1rem;\n  display: grid;\n  grid-template-columns: 1.5rem 1fr 1fr 1.5rem;\n  gap: 1rem;\n  align-items: center;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);\n  border-radius: 0.25rem;\n  background-color: rgba(255, 255, 255, 0.2);\n}\n[data-theme=dark] .file {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.file-size {\n  text-align: right;\n  opacity: 0.5;\n}\n\n.download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 1.5rem;\n  width: 1.5rem;\n  padding: 0.125rem;\n  border-radius: 0.125rem;\n  cursor: pointer;\n  transition: color 200ms, background-color 200ms;\n}\n.download-icon:hover {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .download-icon:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}";
+function getLastPathSegmentWithoutQueryOrHash(urlString) {
+  const cleanedUrl = urlString.split(/[?#]/)[0];
+  const pathSegments = cleanedUrl.split("/").filter(Boolean);
+  return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
+}
+const ElmFile = component$(({ name, src, filesize }) => {
+  useStylesScoped$(styles$c);
+  const downloadFile = $(async () => {
+    let link;
+    try {
+      const response = await fetch(src);
+      if (!response.ok) throw new Error("Failed to download file");
+      const blob = await response.blob();
+      link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
+      link.click();
+    } catch (error) {
+      console.error("ERROR:", error);
+    } finally {
+      if (link) URL.revokeObjectURL(link.href);
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "file",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiFile,
+          size: "1.25rem"
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx(ElmInlineText, {
+          children: name ?? getLastPathSegmentWithoutQueryOrHash(src)
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "file-size",
+        children: /* @__PURE__ */ jsx(ElmInlineText, {
+          children: filesize
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "download-icon",
+        onClick$: downloadFile,
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiDownload,
+          size: "1.25rem"
+        })
+      })
+    ]
+  });
+});
+const styles$b = ".bookmark {\n  all: unset;\n  display: block;\n  container-type: inline-size;\n  border-radius: 0.25rem;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: background-color 200ms, transform 200ms;\n}\n.bookmark:hover {\n  background-color: rgba(105, 135, 184, 0.1);\n  transform: translateX(-0.125rem) translateY(-0.125rem);\n}\n.bookmark:active {\n  background-color: rgba(89, 181, 124, 0.1);\n  transform: translateX(0) translateY(0);\n}\n\n.container {\n  all: unset;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n}\n@container (max-width: 700px) {\n  .container {\n    flex-direction: column;\n  }\n}\n\n.image {\n  overflow: hidden;\n  height: 100%;\n  opacity: 0.9;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  object-fit: cover;\n  object-position: center;\n  aspect-ratio: 2/1;\n  width: min-content;\n  max-width: 35%;\n}\n@container (max-width: 700px) {\n  .image {\n    min-width: unset;\n    max-width: unset;\n    width: 100%;\n  }\n}\n\n.content {\n  flex: 1;\n  width: 75%;\n  box-sizing: border-box;\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  justify-content: space-between;\n  transition: background-color 200ms;\n  background-color: rgba(255, 255, 255, 0.4);\n}\n@container (max-width: 700px) {\n  .content {\n    width: 100%;\n  }\n}\n[data-theme=dark] .content {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.content .title {\n  box-sizing: border-box;\n}\n.content .description {\n  box-sizing: border-box;\n  opacity: 0.7;\n}\n.content .link {\n  line-height: 0.75rem;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.25rem;\n  opacity: 0.7;\n}";
+const ElmBookmark = component$(({ url, image, title, description, favicon }) => {
+  useStylesScoped$(styles$b);
+  return /* @__PURE__ */ jsx("div", {
+    class: "bookmark",
+    children: /* @__PURE__ */ jsxs("a", {
+      class: "container",
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: [
+        /* @__PURE__ */ jsx("img", {
+          class: "image",
+          src: image,
+          alt: "OGP Image"
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: "content",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              class: "title",
+              children: /* @__PURE__ */ jsx(ElmInlineText, {
+                bold: true,
+                children: title
+              })
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "description",
+              children: /* @__PURE__ */ jsx(ElmInlineText, {
+                size: "0.75rem",
+                children: description
+              })
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              class: "link",
+              children: [
+                favicon ? /* @__PURE__ */ jsx(ElmInlineIcon, {
+                  src: favicon
+                }) : /* @__PURE__ */ jsx(ElmMdiIcon, {
+                  d: mdiLinkVariant,
+                  color: "#6987b8"
+                }),
+                /* @__PURE__ */ jsx(ElmInlineText, {
+                  size: "0.75rem",
+                  children: url
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+const styles$a = '.blockquote {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  background-color: rgba(134, 142, 156, 0.1);\n  position: relative;\n}\n.blockquote::after {\n  position: absolute;\n  content: "";\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background-color: #868e9c;\n}\n\n.body {\n  box-sizing: border-box;\n  padding: 2rem 1.5rem;\n}\n\n.icon {\n  position: absolute;\n  content: "";\n  inset: var(--inset);\n  opacity: 0.5;\n}';
+const ElmBlockQuote = component$(({ cite }) => {
+  useStylesScoped$(styles$a);
+  useStylesScoped$(textStyles);
+  return /* @__PURE__ */ jsxs("blockquote", {
+    class: [
+      "blockquote",
+      "text"
+    ],
+    cite,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "icon",
+        style: {
+          "--inset": "0.25rem auto auto 0.5rem"
+        },
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiFormatQuoteOpen
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "body",
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "icon",
+        style: {
+          "--inset": "auto 0.25rem 0.25rem auto"
+        },
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiFormatQuoteClose
+        })
+      })
+    ]
+  });
+});
+const styles$9 = '.callout {\n  position: relative;\n  padding: 1rem;\n}\n.callout::after {\n  position: absolute;\n  content: "";\n  inset: 0 auto auto 0;\n  height: 100%;\n  width: 0.25rem;\n  background-color: var(--callout-color);\n}\n.callout::before {\n  position: absolute;\n  content: "";\n  inset: 0 0 auto auto;\n  height: 100%;\n  width: 100%;\n  background-color: var(--callout-color);\n  opacity: 0.15;\n  z-index: -1;\n  pointer-events: none;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.content {\n  padding-block-start: 1rem;\n  padding-block-end: 0.25rem;\n}';
+const COLOR_MAP = Object.freeze({
+  note: {
+    code: "#6987b8",
+    icon: mdiInformation
+  },
+  tip: {
+    code: "#59b57c",
+    icon: mdiLightbulbOn
+  },
+  important: {
+    code: "#9771bd",
+    icon: mdiShieldAlert
+  },
+  warning: {
+    code: "#b8a36e",
+    icon: mdiAlert
+  },
+  caution: {
+    code: "#b36472",
+    icon: mdiAlertOctagram
+  }
+});
+const ElmCallout = component$(({ type = "note" }) => {
+  useStylesScoped$(styles$9);
+  return /* @__PURE__ */ jsxs("aside", {
+    class: "callout",
+    style: {
+      "--callout-color": COLOR_MAP[type].code
+    },
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "header",
+        children: [
+          /* @__PURE__ */ jsx(ElmMdiIcon, {
+            d: COLOR_MAP[type].icon,
+            color: COLOR_MAP[type].code,
+            size: "1.25rem"
+          }),
+          /* @__PURE__ */ jsx(ElmInlineText, {
+            children: type.toLocaleUpperCase()
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: "content",
+        children: /* @__PURE__ */ jsx(Slot, {})
+      })
+    ]
+  });
+});
+const styles$8 = ".hr {\n  margin: 0;\n  width: 100%;\n  border: none;\n  border-bottom: dashed 1px #868e9c;\n}";
+const ElmDivider = component$(({ margin }) => {
+  useStylesScoped$(styles$8);
+  return /* @__PURE__ */ jsx("hr", {
+    class: "hr",
+    style: {
+      marginBlock: margin
+    }
+  });
+});
+const styles$7 = ".fragment {\n  font-size: 1rem;\n  width: 1rem;\n  height: 1rem;\n  padding: 0.125rem;\n  margin-inline-start: 0.5rem;\n  border-radius: 0.125rem;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: #b69545;\n  cursor: pointer;\n  user-select: none;\n  opacity: 1;\n  transition: background-color 200ms, opacity 100ms, transform 100ms;\n}\n.fragment:hover {\n  background-color: rgba(134, 142, 156, 0.2);\n}\n.fragment:active {\n  opacity: 0.5;\n  transform: translateX(1px) translateY(1px);\n}";
+const ElmFragmentIdentifier = component$(({ id }) => {
+  useStylesScoped$(styles$7);
+  const handleHashClick = $((id2) => {
+    const url = new URL(window.location.href);
+    url.hash = id2;
+    window.history.replaceState(null, "", url.toString());
+    const target = document.getElementById(id2);
+    if (target != null) {
+      target.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx("span", {
+    class: "fragment",
+    onClick$: () => handleHashClick(id),
+    children: "#"
+  });
+});
+const styles$6 = '.heading-common {\n  margin: 0;\n  position: relative;\n  font-size: var(--font-size);\n  line-height: var(--font-size);\n  opacity: var(--opacity);\n  transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n  position: absolute;\n  content: "";\n  bottom: -4px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 45%;\n  width: 10%;\n  height: 2px;\n  background-color: rgba(0, 0, 0, 0.6);\n  transition: transform 800ms;\n  transform: scaleY(var(--scale));\n  transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2 {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h2 {\n  border-color: rgba(255, 255, 255, 0.5);\n}\n.h2::after {\n  position: absolute;\n  content: "";\n  right: 2px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n  position: absolute;\n  content: "";\n  right: 10px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n\n.h3 {\n  box-sizing: border-box;\n  padding-left: 0.75rem;\n}\n.h3::after {\n  position: absolute;\n  content: "";\n  width: 3px;\n  height: 12px;\n  top: calc(50% - 8px);\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n  position: relative;\n}\n\n.h5 {\n  position: relative;\n}\n\n.h6 {\n  position: relative;\n}';
+const SIZE_MAP = Object.freeze({
+  1: 1.5,
+  2: 1.4,
+  3: 1.3,
+  4: 1.2,
+  5: 1.15,
+  6: 1.1
+});
+const ElmHeading = component$(({ level, text, id }) => {
+  useStylesScoped$(styles$6);
+  useStylesScoped$(textStyles);
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxs(Tag, {
+    class: [
+      "heading-common",
+      "text",
+      `h${level}`
+    ],
+    style: {
+      "--font-size": `${SIZE_MAP[level]}em`
+    },
+    children: [
+      text,
+      /* @__PURE__ */ jsx(Slot, {}),
+      id && /* @__PURE__ */ jsx("span", {
+        style: {
+          padding: "0.5rem"
+        },
+        children: /* @__PURE__ */ jsx(ElmFragmentIdentifier, {
+          id
+        })
+      })
+    ]
+  });
+});
+const listStyles = '.elmethis-list-common {\n  margin-block: 1rem;\n  opacity: var(--opacity);\n  transition: opacity 800ms;\n  box-sizing: border-box;\n  padding-left: 1.25rem;\n}\n\n.elmethis-bulleted-list li {\n  box-sizing: border-box;\n  padding-left: 0.5rem;\n  margin-block: 0.75rem;\n}\n.elmethis-bulleted-list li::marker {\n  content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+");\n}\n.elmethis-bulleted-list li ul li::marker {\n  content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+");\n}\n.elmethis-bulleted-list li ul li ul li::marker {\n  content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+");\n}\n\n.elmethis-numbered-list li {\n  box-sizing: border-box;\n  padding-left: 0.25rem;\n  margin-block: 0.75rem;\n  margin-left: 0.25rem;\n  list-style-type: decimal;\n}\n.elmethis-numbered-list li::marker {\n  font-weight: bold;\n  color: #9771bd;\n}\n.elmethis-numbered-list li ol li {\n  list-style-type: lower-alpha;\n}\n.elmethis-numbered-list li ol li ol li {\n  list-style-type: lower-roman;\n}\n.elmethis-numbered-list li ol li ol li ol li {\n  list-style-type: lower-greek;\n}';
+const ElmList = component$(({ listStyle = "unordered" }) => {
+  useStyles$(listStyles);
+  useStylesScoped$(textStyles);
+  if (listStyle === "ordered") {
+    return /* @__PURE__ */ jsx("ol", {
+      class: [
+        "text",
+        "elmethis-list-common",
+        "elmethis-numbered-list"
+      ],
+      children: /* @__PURE__ */ jsx(Slot, {})
+    });
+  } else {
+    return /* @__PURE__ */ jsx("ul", {
+      class: [
+        "text",
+        "elmethis-list-common",
+        "elmethis-bulleted-list"
+      ],
+      children: /* @__PURE__ */ jsx(Slot, {})
+    });
+  }
+});
+const styles$5 = ".paragraph {\n  opacity: var(--opacity, 0);\n  opacity: var(--opacity);\n  transition: opacity 800ms;\n  color: var(--color, #606875);\n  background-color: var(--background-color, inherit);\n}\n.paragraph::selection {\n  color: rgba(255, 255, 255, 0.7);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .paragraph {\n  color: rgba(255, 255, 255, 0.7);\n}\n[data-theme=dark] .paragraph::selection {\n  color: rgba(0, 0, 0, 0.7);\n  background-color: rgba(255, 255, 255, 0.7);\n}";
+const useInView = (props) => {
+  const ref = useSignal();
+  const isVisible = useSignal(false);
+  useVisibleTask$(() => {
+    if (!ref.value) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      isVisible.value = entry.isIntersecting;
+    }, {
+      rootMargin: "100px",
+      threshold: 0.1
+    });
+    observer.observe(ref.value);
+    return () => observer.disconnect();
+  });
+  return {
+    ref,
+    isVisible
+  };
+};
+const ElmParagraph = component$(({ color, backgroundColor }) => {
+  useStylesScoped$(styles$5);
+  useStylesScoped$(textStyles);
+  const { ref, isVisible } = useInView();
+  return /* @__PURE__ */ jsx("p", {
+    ref,
+    class: [
+      "paragraph",
+      "text"
+    ],
+    style: {
+      "--color": color,
+      "--background-color": backgroundColor,
+      "--opacity": isVisible.value ? 1 : 0
+    },
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+const styles$4 = ".table {\n  margin-block: var(--margin-block);\n  border-collapse: collapse;\n  border-spacing: 0;\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);\n}\n\n.caption {\n  position: relative;\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  margin-block-end: 1rem;\n}\n\n.caption-inner {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.spacing {\n  flex-grow: 1;\n  height: 1px;\n  background-color: rgba(128, 128, 128, 0.2);\n}";
+const HasRowHeaderContext = createContextId("HasRowHeaderContext");
+const ElmTable = component$((props) => {
+  useStylesScoped$(styles$4);
+  useStylesScoped$(textStyles);
+  const { margin, caption, hasRowHeader = false } = props;
+  const hasRowHeaderComputed = useComputed$(() => hasRowHeader);
+  useContextProvider(HasRowHeaderContext, hasRowHeaderComputed);
+  return /* @__PURE__ */ jsxs("table", {
+    class: [
+      "table",
+      "text"
+    ],
+    style: {
+      "--margin-block": margin
+    },
+    children: [
+      caption && /* @__PURE__ */ jsx("caption", {
+        children: /* @__PURE__ */ jsxs("span", {
+          class: "caption",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              class: "spacing"
+            }),
+            /* @__PURE__ */ jsxs("span", {
+              class: "caption-inner",
+              children: [
+                /* @__PURE__ */ jsx("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "1rem",
+                  height: "1rem",
+                  children: /* @__PURE__ */ jsx("path", {
+                    d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z",
+                    fill: "#6987b8"
+                  })
+                }),
+                /* @__PURE__ */ jsx(ElmInlineText, {
+                  text: caption
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("span", {
+              class: "spacing"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx(Slot, {})
+    ]
+  });
+});
+const styles$3 = ".thead {\n  text-align: left;\n  transition: background-color 400ms, color 400ms;\n  border-bottom: 2px solid rgba(128, 128, 128, 0.5);\n}";
+const HasHeaderContext = createContextId("HasHeaderContext");
+const ElmTableHeader = component$(() => {
+  useStylesScoped$(styles$3);
+  useContextProvider(HasHeaderContext, true);
+  return /* @__PURE__ */ jsx("thead", {
+    class: "thead",
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+const ElmTableBody = component$(() => {
+  useContextProvider(HasHeaderContext, false);
+  return /* @__PURE__ */ jsx("tbody", {
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+const styles$2 = ".tr {\n  transition: background-color 200ms;\n}\n.tr:nth-child(odd) {\n  background-color: transparent;\n}\n.tr:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n[data-theme=dark] .tr:nth-child(even) {\n  background-color: rgba(255, 255, 255, 0.015);\n}\n.tr:hover {\n  background-color: rgba(105, 135, 184, 0.15);\n}\n[data-theme=dark] .tr:hover {\n  background-color: rgba(105, 135, 184, 0.15);\n}\n\n.has-row-header td:first-child,\n.has-row-header tr:first-child {\n  background-color: rgba(128, 128, 128, 0.15);\n}";
+const ElmTableRow = component$(() => {
+  useStylesScoped$(styles$2);
+  const hasRowHeader = useContext(HasRowHeaderContext);
+  return /* @__PURE__ */ jsx("tr", {
+    class: [
+      "tr",
+      hasRowHeader.value && "has-row-header"
+    ],
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+const styles$1 = ".common {\n  padding: 0.75rem 1rem;\n  color: rgba(0, 0, 0, 0.7);\n  border-right: 1px dotted rgba(0, 0, 0, 0.15);\n}\n.common::selection {\n  color: rgba(255, 255, 255, 0.7);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .common {\n  color: rgba(255, 255, 255, 0.7);\n}\n[data-theme=dark] .common::selection {\n  color: rgba(0, 0, 0, 0.7);\n  background-color: rgba(255, 255, 255, 0.7);\n}\n[data-theme=dark] .common {\n  border-right: 1px dotted rgba(255, 255, 255, 0.15);\n}\n.common:last-child {\n  border-right: none;\n}\n\n.td {\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n}\n[data-theme=dark] .td {\n  border-top-color: rgba(255, 255, 255, 0.15);\n}\n\n.th {\n  background-color: rgba(128, 128, 128, 0.15);\n}";
+const ElmTableCell = component$((props) => {
+  useStylesScoped$(styles$1);
+  const { hasHeader = false, text } = props;
+  const hasHeaderInjected = useContext(HasHeaderContext, false);
+  const isHeader = hasHeader || hasHeaderInjected;
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: isHeader ? /* @__PURE__ */ jsx("th", {
+      class: [
+        "common",
+        "th"
+      ],
+      children: text ? text : /* @__PURE__ */ jsx(Slot, {})
+    }) : /* @__PURE__ */ jsx("td", {
+      class: [
+        "common",
+        "td"
+      ],
+      children: text ? text : /* @__PURE__ */ jsx(Slot, {})
+    })
+  });
+});
+const styles = ".jarkup-body {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.column-list {\n  box-sizing: content-box;\n  padding-block: 0.25rem;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 0.25rem;\n  justify-content: space-around;\n  overflow: auto;\n}\n\n.column {\n  box-sizing: border-box;\n  padding: 0.125rem;\n  flex: var(--width-ratio, 1);\n}\n.column > * + * {\n  margin-block-start: 2em;\n}";
+const convertInlineComponentsToPlainText = (inlineComponents) => {
+  return inlineComponents.map((component) => {
+    if (component.type === "Text") {
+      return component.props.text;
+    } else {
+      return "";
+    }
+  }).join("");
+};
+const ElmJarkup = component$((props) => {
+  useStylesScoped$(styles);
+  const render = (jsonComponents) => {
+    return jsonComponents.map((component, index) => {
+      const key = component.id || index;
+      switch (component.type) {
+        case "Text": {
+          const { props: p } = component;
+          if (p.katex) {
+            return /* @__PURE__ */ jsx(ElmKatex, {
+              expression: p.text,
+              block: false
+            }, key);
+          }
+          return /* @__PURE__ */ jsx(ElmInlineText, {
+            text: p.text,
+            color: p.color,
+            backgroundColor: p.backgroundColor,
+            bold: p.bold,
+            italic: p.italic,
+            underline: p.underline,
+            strikethrough: p.strikethrough,
+            code: p.code,
+            ruby: p.ruby,
+            href: p.href,
+            favicon: p.favicon
+          }, key);
+        }
+        case "Icon":
+          return /* @__PURE__ */ jsx(ElmInlineIcon, {
+            src: component.props.src,
+            alt: component.props.alt
+          }, key);
+        case "Heading":
+          return /* @__PURE__ */ jsx(ElmHeading, {
+            level: component.props.level,
+            id: kebabCase(convertInlineComponentsToPlainText(component.slots.default)),
+            children: render(component.slots.default)
+          }, key);
+        case "Paragraph":
+          return /* @__PURE__ */ jsx(ElmParagraph, {
+            color: component.props?.color,
+            backgroundColor: component.props?.backgroundColor,
+            children: render(component.slots.default)
+          }, key);
+        case "ListItem":
+          return /* @__PURE__ */ jsx("li", {
+            children: render(component.slots.default)
+          }, key);
+        case "List":
+          return /* @__PURE__ */ jsx(ElmList, {
+            listStyle: component.props?.listStyle === "unordered" ? "unordered" : "ordered",
+            children: render(component.slots.default)
+          }, key);
+        case "BlockQuote":
+          return /* @__PURE__ */ jsx(ElmBlockQuote, {
+            cite: component.props?.cite,
+            children: render(component.slots.default)
+          }, key);
+        case "Callout":
+          return /* @__PURE__ */ jsx(ElmCallout, {
+            type: component.props?.type,
+            children: render(component.slots.default)
+          }, key);
+        case "Divider":
+          return /* @__PURE__ */ jsx(ElmDivider, {}, key);
+        case "Toggle":
+          return /* @__PURE__ */ jsxs(ElmToggle, {
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                "q:slot": "summary",
+                children: render(component.slots.summary)
+              }),
+              render(component.slots.default)
+            ]
+          }, key);
+        case "Bookmark":
+          return /* @__PURE__ */ jsx(ElmBookmark, {
+            url: component.props.url,
+            title: component.props.title,
+            description: component.props.description,
+            image: component.props.image
+          }, key);
+        case "File":
+          return /* @__PURE__ */ jsx(ElmFile, {
+            src: component.props.src,
+            name: component.props.name
+          }, key);
+        case "Image":
+          return /* @__PURE__ */ jsx(ElmBlockImage, {
+            src: component.props.src,
+            alt: component.props.alt,
+            enableModal: true
+          }, key);
+        case "CodeBlock":
+          return /* @__PURE__ */ jsx(ElmCodeBlock, {
+            code: component.props.code,
+            language: component.props.language,
+            children: component.slots?.default && render(component.slots.default)
+          }, key);
+        case "Katex":
+          return /* @__PURE__ */ jsx(ElmKatex, {
+            expression: component.props.expression,
+            block: true
+          }, key);
+        case "Table":
+          return /* @__PURE__ */ jsxs(ElmTable, {
+            caption: component.props?.caption,
+            hasRowHeader: component.props?.hasRowHeader,
+            children: [
+              component.slots.header && /* @__PURE__ */ jsx(ElmTableHeader, {
+                children: render(component.slots.header)
+              }),
+              /* @__PURE__ */ jsx(ElmTableBody, {
+                children: render(component.slots.body)
+              })
+            ]
+          }, key);
+        case "TableRow":
+          return /* @__PURE__ */ jsx(ElmTableRow, {
+            children: render(component.slots.default)
+          }, key);
+        case "TableCell":
+          return /* @__PURE__ */ jsx(ElmTableCell, {
+            children: render(component.slots.default)
+          }, key);
+        case "ColumnList":
+          return /* @__PURE__ */ jsx("div", {
+            class: "column-list",
+            children: render(component.slots.default)
+          }, key);
+        case "Column":
+          return /* @__PURE__ */ jsx("div", {
+            class: "column",
+            style: {
+              "--width-ratio": component.props?.widthRatio || 1,
+              width: component.props?.widthRatio ? `${component.props.widthRatio * 100}%` : void 0
+            },
+            children: render(component.slots.default)
+          }, key);
+        default:
+          return /* @__PURE__ */ jsxs("div", {
+            style: {
+              color: "red",
+              border: "1px solid red"
+            },
+            children: [
+              "Unsupported component type: ",
+              component.type
+            ]
+          }, key);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx("div", {
+    class: "jarkup-body",
+    children: render(props.jsonComponents)
+  });
+});
+export {
+  ElmBlockFallback,
+  ElmBlockImage,
+  ElmBlockQuote,
+  ElmBookmark,
+  ElmCallout,
+  ElmCodeBlock,
+  ElmDivider,
+  ElmDotLoadingIcon,
+  ElmFile,
+  ElmFragmentIdentifier,
+  ElmHeading,
+  ElmInlineIcon,
+  ElmInlineText,
+  ElmJarkup,
+  ElmKatex,
+  ElmLanguageIcon,
+  ElmList,
+  ElmMdiIcon,
+  ElmParagraph,
+  ElmRectangleWave,
+  ElmShikiHighlighter,
+  ElmTable,
+  ElmTableBody,
+  ElmTableCell,
+  ElmTableHeader,
+  ElmTableRow,
+  ElmToggle
+};