@elmethis/qwik 0.0.17 → 0.0.19

package/lib/index.qwik.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
+import { component$, Slot, useSignal, useTask$, $, useComputed$, useOnDocument, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
 import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
 import { codeToHtml } from "shiki";
 import { renderToString } from "katex";
@@ -7,7 +7,7 @@ import { kebabCase } from "lodash-es";
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$r = {
+const styles$s = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -67,7 +67,7 @@ const Typescript = component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$q = {
+const styles$r = {
   path
 };
 const Bash = component$(({ size = 24, ...props }) => {
@@ -83,7 +83,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: styles$q.path,
+        class: styles$r.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", {
@@ -523,13 +523,13 @@ const C = component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const icon$2 = "_icon_1gvln_1";
-const styles$p = {
-  icon: icon$2
+const icon$3 = "_icon_1gvln_1";
+const styles$q = {
+  icon: icon$3
 };
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$p.icon,
+    class: styles$q.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -638,7 +638,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$o = {
+const styles$p = {
   text: text$3,
   code: code$1,
   kbd,
@@ -648,17 +648,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$1 = "_icon_19g82_1";
-const styles$n = {
-  icon: icon$1
+const icon$2 = "_icon_19g82_1";
+const styles$o = {
+  icon: icon$2
 };
 const ElmInlineIcon = component$(({ src, alt }) => {
   return /* @__PURE__ */ jsx("span", {
-    class: styles$n.icon,
+    class: styles$o.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$n.icon
+      class: styles$o.icon
     })
   });
 });
@@ -669,7 +669,7 @@ const ElmInlineText = component$((props) => {
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$o.kbd,
+      class: styles$p.kbd,
       children: vnode
     });
   }
@@ -695,13 +695,13 @@ const ElmInlineText = component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$o.code,
+      class: styles$p.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$o.text,
+      class: styles$p.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -714,7 +714,7 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$o.text,
+      styles$p.text,
       textStyles.text
     ],
     style: {
@@ -726,7 +726,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$o.link,
+      class: styles$p.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -744,7 +744,7 @@ const ElmInlineText = component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$m = {
+const styles$n = {
   code
 };
 const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
@@ -769,7 +769,7 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: styles$m.code,
+    class: styles$n.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -788,19 +788,19 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$r["code-block"],
+    class: styles$s["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$r["language-icon"],
+        class: styles$s["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$r.caption,
+        class: styles$s.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -809,7 +809,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$r["copy-icon"],
+        class: styles$s["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -818,10 +818,10 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$r.divider
+        class: styles$s.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$r.code,
+        class: styles$s.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -841,7 +841,7 @@ const ElmKatex = component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$l = {
+const styles$m = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -850,13 +850,13 @@ const ElmParallax = component$(({ images }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$l["parallax-watcher"],
+        class: styles$m["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsx("div", {
-        class: styles$l.parallax,
+        class: styles$m.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -870,7 +870,7 @@ const toggle = "_toggle_1nxqa_1";
 const summary = "_summary_1nxqa_14";
 const content$2 = "_content_1nxqa_60";
 const footer = "_footer_1nxqa_80";
-const styles$k = {
+const styles$l = {
   toggle,
   "toggle-closed": "_toggle-closed_1nxqa_7",
   "toggle-open": "_toggle-open_1nxqa_10",
@@ -898,29 +898,29 @@ const ElmToggle = component$(({ summary: summary2 }) => {
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$k.toggle,
+      styles$l.toggle,
       {
-        [styles$k["toggle-open"]]: isOpen.value,
-        [styles$k["toggle-closed"]]: !isOpen.value
+        [styles$l["toggle-open"]]: isOpen.value,
+        [styles$l["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          styles$k.summary,
+          styles$l.summary,
           {
-            [styles$k["summary-open"]]: isOpen.value,
-            [styles$k["summary-closed"]]: !isOpen.value
+            [styles$l["summary-open"]]: isOpen.value,
+            [styles$l["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$k["chevron-icon"],
+              styles$l["chevron-icon"],
               {
-                [styles$k["chevron-icon-open"]]: isOpen.value,
-                [styles$k["chevron-icon-closed"]]: !isOpen.value
+                [styles$l["chevron-icon-open"]]: isOpen.value,
+                [styles$l["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -928,17 +928,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$k["summary-text"],
+            class: styles$l["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$k["plus-icon"],
+              styles$l["plus-icon"],
               {
-                [styles$k["plus-icon-open"]]: isOpen.value,
-                [styles$k["plus-icon-closed"]]: !isOpen.value
+                [styles$l["plus-icon-open"]]: isOpen.value,
+                [styles$l["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -951,30 +951,30 @@ const ElmToggle = component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$k.content,
+          styles$l.content,
           {
-            [styles$k["content-open"]]: isOpen.value,
-            [styles$k["content-closed"]]: !isOpen.value
+            [styles$l["content-open"]]: isOpen.value,
+            [styles$l["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$k.footer,
+        class: styles$l.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
-            class: styles$k["footer-chevron-icon"],
+            class: styles$l["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$k["footer-line"]
+            class: styles$l["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$k["footer-cross-icon"],
+            class: styles$l["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -984,17 +984,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$k["footer-cross-icon"],
+            class: styles$l["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$k["footer-line"]
+            class: styles$l["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$k["footer-chevron-icon"],
+            class: styles$l["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -1005,50 +1005,50 @@ const ElmToggle = component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$j = {
+const styles$k = {
   "block-fallback": "_block-fallback_rt986_1"
 };
 const wrapper$1 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$i = {
+const styles$j = {
   wrapper: wrapper$1,
   dot
 };
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$i.wrapper,
+    class: styles$j.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$i.dot,
+        class: styles$j.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$i.dot,
+        class: styles$j.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$i.dot,
+        class: styles$j.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$h = {
+const styles$i = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = component$(() => {
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: styles$h["rectangle-wave"]
+    class: styles$i["rectangle-wave"]
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$j["block-fallback"],
+    class: styles$k["block-fallback"],
     style: {
       "--height": height
     },
@@ -1058,15 +1058,522 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
-const image$1 = "_image_zq5gl_11";
-const fallback = "_fallback_zq5gl_31";
+const LOCAL_STORAGE_KEY = "elmethis-theme";
+function useElmethisTheme() {
+  const isDarkTheme = useSignal(false);
+  const toggleTheme = $(() => {
+    isDarkTheme.value = !isDarkTheme.value;
+    if (typeof document !== "undefined") {
+      const theme = isDarkTheme.value ? "dark" : "light";
+      document.documentElement.setAttribute("data-theme", theme);
+      const body2 = document.querySelector("body");
+      if (body2 != null) {
+        body2.style.colorScheme = theme;
+      }
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+      }
+    }
+  });
+  useOnDocument("storage", $(() => {
+    const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (localStorageTheme != null) {
+      isDarkTheme.value = localStorageTheme === "dark";
+    }
+  }));
+  useVisibleTask$(() => {
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    if (currentTheme != null) {
+      isDarkTheme.value = currentTheme === "dark";
+    } else {
+      const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (localStorageTheme != null) {
+        isDarkTheme.value = localStorageTheme === "dark";
+      }
+    }
+  }, {
+    strategy: "document-ready"
+  });
+  return {
+    isDarkTheme,
+    toggleTheme
+  };
+}
+const icon$1 = "_icon_1husg_1";
+const styles$h = {
+  icon: icon$1
+};
+const ElmToggleTheme = component$(({ size = "2rem" }) => {
+  const { isDarkTheme, toggleTheme } = useElmethisTheme();
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: !isDarkTheme.value ? /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      class: styles$h.icon,
+      onClick$: toggleTheme,
+      children: [
+        /* @__PURE__ */ jsxs("g", {
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          children: [
+            /* @__PURE__ */ jsxs("path", {
+              "stroke-dasharray": "2",
+              "stroke-dashoffset": "2",
+              d: "M12 19v1M19 12h1M12 5v-1M5 12h-1",
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "d",
+                  begin: "1.2s",
+                  dur: "0.2s",
+                  values: "M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "stroke-dashoffset",
+                  begin: "1.2s",
+                  dur: "0.2s",
+                  values: "2;0"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs("path", {
+              "stroke-dasharray": "2",
+              "stroke-dashoffset": "2",
+              d: "M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5",
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "d",
+                  begin: "1.4s",
+                  dur: "0.2s",
+                  values: "M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "stroke-dashoffset",
+                  begin: "1.4s",
+                  dur: "0.2s",
+                  values: "2;0"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("animateTransform", {
+              attributeName: "transform",
+              dur: "30s",
+              repeatCount: "indefinite",
+              type: "rotate",
+              values: "0 12 12;360 12 12"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("g", {
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("path", {
+              d: "M15.22 6.03L17.75 4.09L14.56 4L13.5 1L12.44 4L9.25 4.09L11.78 6.03L10.87 9.09L13.5 7.28L16.13 9.09L15.22 6.03Z",
+              children: /* @__PURE__ */ jsx("animate", {
+                fill: "freeze",
+                attributeName: "fill-opacity",
+                dur: "0.4s",
+                values: "1;0"
+              })
+            }),
+            /* @__PURE__ */ jsx("path", {
+              d: "M19.61 12.25L21.25 11L19.19 10.95L18.5 9L17.81 10.95L15.75 11L17.39 12.25L16.8 14.23L18.5 13.06L20.2 14.23L19.61 12.25Z",
+              children: /* @__PURE__ */ jsx("animate", {
+                fill: "freeze",
+                attributeName: "fill-opacity",
+                begin: "0.2s",
+                dur: "0.4s",
+                values: "1;0"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          d: "M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z",
+          children: /* @__PURE__ */ jsx("set", {
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "0.6s",
+            to: "0"
+          })
+        }),
+        /* @__PURE__ */ jsxs("mask", {
+          id: "lineMdMoonToSunnyOutlineLoopTransition0",
+          children: [
+            /* @__PURE__ */ jsx("circle", {
+              cx: "12",
+              cy: "12",
+              r: "12",
+              fill: "#fff"
+            }),
+            /* @__PURE__ */ jsx("circle", {
+              cx: "12",
+              cy: "12",
+              r: "8",
+              children: /* @__PURE__ */ jsx("animate", {
+                fill: "freeze",
+                attributeName: "r",
+                begin: "0.6s",
+                dur: "0.4s",
+                values: "8;4"
+              })
+            }),
+            /* @__PURE__ */ jsxs("circle", {
+              cx: "18",
+              cy: "6",
+              r: "12",
+              fill: "#fff",
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cx",
+                  begin: "0.6s",
+                  dur: "0.4s",
+                  values: "18;22"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cy",
+                  begin: "0.6s",
+                  dur: "0.4s",
+                  values: "6;2"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "r",
+                  begin: "0.6s",
+                  dur: "0.4s",
+                  values: "12;3"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs("circle", {
+              cx: "18",
+              cy: "6",
+              r: "10",
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cx",
+                  begin: "0.6s",
+                  dur: "0.4s",
+                  values: "18;22"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cy",
+                  begin: "0.6s",
+                  dur: "0.4s",
+                  values: "6;2"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "r",
+                  begin: "0.6s",
+                  dur: "0.4s",
+                  values: "10;1"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("circle", {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          mask: "url(#lineMdMoonToSunnyOutlineLoopTransition0)",
+          opacity: "0",
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "r",
+              begin: "0.6s",
+              dur: "0.4s",
+              values: "10;6"
+            }),
+            /* @__PURE__ */ jsx("set", {
+              fill: "freeze",
+              attributeName: "opacity",
+              begin: "0.6s",
+              to: "1"
+            })
+          ]
+        })
+      ]
+    }) : /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      class: styles$h.icon,
+      onClick$: toggleTheme,
+      children: [
+        /* @__PURE__ */ jsxs("path", {
+          "fill-opacity": "0",
+          d: "M15.22 6.03l2.53-1.94L14.56 4L13.5 1l-1.06 3l-3.19.09l2.53 1.94l-.91 3.06l2.63-1.81l2.63 1.81z",
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("animate", {
+              id: "lineMdSunnyOutlineToMoonLoopTransition0",
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "0.6s;lineMdSunnyOutlineToMoonLoopTransition0.begin+6s",
+              dur: "0.4s",
+              values: "0;1"
+            }),
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+2.2s",
+              dur: "0.4s",
+              values: "1;0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("path", {
+          "fill-opacity": "0",
+          d: "M13.61 5.25L15.25 4l-2.06-.05L12.5 2l-.69 1.95L9.75 4l1.64 1.25l-.59 1.98l1.7-1.17l1.7 1.17z",
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+3s",
+              dur: "0.4s",
+              values: "0;1"
+            }),
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+5.2s",
+              dur: "0.4s",
+              values: "1;0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("path", {
+          "fill-opacity": "0",
+          d: "M19.61 12.25L21.25 11l-2.06-.05L18.5 9l-.69 1.95l-2.06.05l1.64 1.25l-.59 1.98l1.7-1.17l1.7 1.17z",
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+0.4s",
+              dur: "0.4s",
+              values: "0;1"
+            }),
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+2.8s",
+              dur: "0.4s",
+              values: "1;0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("path", {
+          "fill-opacity": "0",
+          d: "M20.828 9.731l1.876-1.439l-2.366-.067L19.552 6l-.786 2.225l-2.366.067l1.876 1.439L17.601 12l1.951-1.342L21.503 12z",
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+3.4s",
+              dur: "0.4s",
+              values: "0;1"
+            }),
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "fill-opacity",
+              begin: "lineMdSunnyOutlineToMoonLoopTransition0.begin+5.6s",
+              dur: "0.4s",
+              values: "1;0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("g", {
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          children: [
+            /* @__PURE__ */ jsxs("g", {
+              children: [
+                /* @__PURE__ */ jsx("path", {
+                  "stroke-dasharray": "2",
+                  "stroke-dashoffset": "4",
+                  d: "M12 21v1M21 12h1M12 3v-1M3 12h-1",
+                  children: /* @__PURE__ */ jsx("animate", {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.2s",
+                    values: "4;2"
+                  })
+                }),
+                /* @__PURE__ */ jsx("path", {
+                  "stroke-dasharray": "2",
+                  "stroke-dashoffset": "4",
+                  d: "M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5",
+                  children: /* @__PURE__ */ jsx("animate", {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.2s",
+                    dur: "0.2s",
+                    values: "4;2"
+                  })
+                }),
+                /* @__PURE__ */ jsx("set", {
+                  fill: "freeze",
+                  attributeName: "opacity",
+                  begin: "0.5s",
+                  to: "0"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("path", {
+              d: "M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z",
+              opacity: "0",
+              children: /* @__PURE__ */ jsx("set", {
+                fill: "freeze",
+                attributeName: "opacity",
+                begin: "0.5s",
+                to: "1"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("mask", {
+          id: "lineMdSunnyOutlineToMoonLoopTransition1",
+          children: [
+            /* @__PURE__ */ jsx("circle", {
+              cx: "12",
+              cy: "12",
+              r: "12",
+              fill: "#fff"
+            }),
+            /* @__PURE__ */ jsx("circle", {
+              cx: "12",
+              cy: "12",
+              r: "4",
+              children: /* @__PURE__ */ jsx("animate", {
+                fill: "freeze",
+                attributeName: "r",
+                begin: "0.1s",
+                dur: "0.4s",
+                values: "4;8"
+              })
+            }),
+            /* @__PURE__ */ jsxs("circle", {
+              cx: "22",
+              cy: "2",
+              r: "3",
+              fill: "#fff",
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cx",
+                  begin: "0.1s",
+                  dur: "0.4s",
+                  values: "22;18"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cy",
+                  begin: "0.1s",
+                  dur: "0.4s",
+                  values: "2;6"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "r",
+                  begin: "0.1s",
+                  dur: "0.4s",
+                  values: "3;12"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs("circle", {
+              cx: "22",
+              cy: "2",
+              r: "1",
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cx",
+                  begin: "0.1s",
+                  dur: "0.4s",
+                  values: "22;18"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "cy",
+                  begin: "0.1s",
+                  dur: "0.4s",
+                  values: "2;6"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  fill: "freeze",
+                  attributeName: "r",
+                  begin: "0.1s",
+                  dur: "0.4s",
+                  values: "1;10"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("circle", {
+          cx: "12",
+          cy: "12",
+          r: "6",
+          mask: "url(#lineMdSunnyOutlineToMoonLoopTransition1)",
+          fill: "currentColor",
+          children: [
+            /* @__PURE__ */ jsx("animate", {
+              fill: "freeze",
+              attributeName: "r",
+              begin: "0.1s",
+              dur: "0.4s",
+              values: "6;10"
+            }),
+            /* @__PURE__ */ jsx("set", {
+              fill: "freeze",
+              attributeName: "opacity",
+              begin: "0.5s",
+              to: "0"
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+const image$1 = "_image_5s2ag_11";
+const fallback = "_fallback_5s2ag_33";
 const styles$g = {
-  "block-image": "_block-image_zq5gl_1",
-  "image-container": "_image-container_zq5gl_11",
+  "block-image": "_block-image_5s2ag_1",
+  "image-container": "_image-container_5s2ag_11",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_zq5gl_41",
-  "modal-container": "_modal-container_zq5gl_53"
+  "caption-box": "_caption-box_5s2ag_43",
+  "modal-container": "_modal-container_5s2ag_55"
 };
 const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true }) => {
   const isLoading = useSignal(true);
@@ -1075,7 +1582,7 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     isLoading.value = false;
   });
   const handleToggleModal = $(() => {
-    if (enableModal) {
+    if (enableModal && !isLoading.value) {
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -1088,7 +1595,8 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     onLoad$: handleImageLoad,
     style: {
       "--opacity": isLoading.value ? 0 : 1,
-      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default"
+      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default",
+      "--aspect-ratio": width && height ? `${width} / ${height}` : "auto"
     }
   });
   const Modal = /* @__PURE__ */ jsx("div", {
@@ -1958,5 +2466,6 @@ export {
   ElmTableCell,
   ElmTableHeader,
   ElmTableRow,
-  ElmToggle
+  ElmToggle,
+  ElmToggleTheme
 };