@elmethis/qwik 0.0.26 → 0.0.28

package/lib/index.qwik.mjs

@@ -8,7 +8,7 @@ import { marked } from "marked";
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$z = {
+const styles$A = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -68,7 +68,7 @@ const Typescript = component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$y = {
+const styles$z = {
   path
 };
 const Bash = component$(({ size = 24, ...props }) => {
@@ -84,7 +84,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: styles$y.path,
+        class: styles$z.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", {
@@ -525,12 +525,12 @@ const C = component$(({ size = 24, ...props }) => {
   });
 });
 const icon$4 = "_icon_1gvln_1";
-const styles$x = {
+const styles$y = {
   icon: icon$4
 };
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$x.icon,
+    class: styles$y.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -639,7 +639,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$w = {
+const styles$x = {
   text: text$3,
   code: code$1,
   kbd,
@@ -650,16 +650,16 @@ const textStyles = {
   text: text$2
 };
 const icon$3 = "_icon_19g82_1";
-const styles$v = {
+const styles$w = {
   icon: icon$3
 };
 const ElmInlineIcon = component$(({ src, alt }) => {
   return /* @__PURE__ */ jsx("span", {
-    class: styles$v.icon,
+    class: styles$w.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$v.icon
+      class: styles$w.icon
     })
   });
 });
@@ -670,7 +670,7 @@ const ElmInlineText = component$((props) => {
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$w.kbd,
+      class: styles$x.kbd,
       children: vnode
     });
   }
@@ -696,13 +696,13 @@ const ElmInlineText = component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$w.code,
+      class: styles$x.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$w.text,
+      class: styles$x.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -715,7 +715,7 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$w.text,
+      styles$x.text,
       textStyles.text
     ],
     style: {
@@ -727,7 +727,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$w.link,
+      class: styles$x.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -745,7 +745,7 @@ const ElmInlineText = component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$u = {
+const styles$v = {
   code
 };
 const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
@@ -770,11 +770,11 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: styles$u.code,
+    class: styles$v.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
-const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: caption2, margin }) => {
+const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: caption2, style }) => {
   const timerId = useSignal(null);
   const copyToClipboard = $(async () => {
     if (timerId.value !== null) {
@@ -789,19 +789,17 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$z["code-block"],
-    style: {
-      margin
-    },
+    class: styles$A["code-block"],
+    style,
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$z["language-icon"],
+        class: styles$A["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$z.caption,
+        class: styles$A.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -810,7 +808,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$z["copy-icon"],
+        class: styles$A["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -819,10 +817,10 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$z.divider
+        class: styles$A.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$z.code,
+        class: styles$A.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -842,7 +840,7 @@ const ElmKatex = component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$t = {
+const styles$u = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -851,13 +849,13 @@ const ElmParallax = component$(({ images }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$t["parallax-watcher"],
+        class: styles$u["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsx("div", {
-        class: styles$t.parallax,
+        class: styles$u.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -867,60 +865,61 @@ const ElmParallax = component$(({ images }) => {
     ]
   });
 });
-const toggle = "_toggle_nwv84_1";
-const summary = "_summary_nwv84_14";
-const content$2 = "_content_nwv84_60";
-const footer = "_footer_nwv84_80";
-const styles$s = {
+const toggle = "_toggle_pbyu8_1";
+const summary = "_summary_pbyu8_14";
+const content$2 = "_content_pbyu8_60";
+const footer = "_footer_pbyu8_80";
+const styles$t = {
   toggle,
-  "toggle-closed": "_toggle-closed_nwv84_7",
-  "toggle-open": "_toggle-open_nwv84_10",
+  "toggle-closed": "_toggle-closed_pbyu8_7",
+  "toggle-open": "_toggle-open_pbyu8_10",
   summary,
-  "summary-open": "_summary-open_nwv84_29",
-  "summary-closed": "_summary-closed_nwv84_33",
-  "chevron-icon": "_chevron-icon_nwv84_37",
-  "chevron-icon-open": "_chevron-icon-open_nwv84_40",
-  "chevron-icon-closed": "_chevron-icon-closed_nwv84_43",
-  "plus-icon": "_plus-icon_nwv84_47",
-  "plus-icon-open": "_plus-icon-open_nwv84_53",
-  "plus-icon-closed": "_plus-icon-closed_nwv84_56",
+  "summary-open": "_summary-open_pbyu8_29",
+  "summary-closed": "_summary-closed_pbyu8_33",
+  "chevron-icon": "_chevron-icon_pbyu8_37",
+  "chevron-icon-open": "_chevron-icon-open_pbyu8_40",
+  "chevron-icon-closed": "_chevron-icon-closed_pbyu8_43",
+  "plus-icon": "_plus-icon_pbyu8_47",
+  "plus-icon-open": "_plus-icon-open_pbyu8_53",
+  "plus-icon-closed": "_plus-icon-closed_pbyu8_56",
   content: content$2,
-  "content-open": "_content-open_nwv84_73",
-  "content-closed": "_content-closed_nwv84_76",
+  "content-open": "_content-open_pbyu8_73",
+  "content-closed": "_content-closed_pbyu8_76",
   footer,
-  "footer-line": "_footer-line_nwv84_99",
-  "footer-cross-icon": "_footer-cross-icon_nwv84_105"
+  "footer-line": "_footer-line_pbyu8_99",
+  "footer-cross-icon": "_footer-cross-icon_pbyu8_105"
 };
-const ElmToggle = component$(({ summary: summary2 }) => {
+const ElmToggle = component$(({ summary: summary2, style }) => {
   const isOpen = useSignal(false);
   const toggle2 = $(() => {
     isOpen.value = !isOpen.value;
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$s.toggle,
+      styles$t.toggle,
       {
-        [styles$s["toggle-open"]]: isOpen.value,
-        [styles$s["toggle-closed"]]: !isOpen.value
+        [styles$t["toggle-open"]]: isOpen.value,
+        [styles$t["toggle-closed"]]: !isOpen.value
       }
     ],
+    style,
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          styles$s.summary,
+          styles$t.summary,
           {
-            [styles$s["summary-open"]]: isOpen.value,
-            [styles$s["summary-closed"]]: !isOpen.value
+            [styles$t["summary-open"]]: isOpen.value,
+            [styles$t["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$s["chevron-icon"],
+              styles$t["chevron-icon"],
               {
-                [styles$s["chevron-icon-open"]]: isOpen.value,
-                [styles$s["chevron-icon-closed"]]: !isOpen.value
+                [styles$t["chevron-icon-open"]]: isOpen.value,
+                [styles$t["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -928,17 +927,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$s["summary-text"],
+            class: styles$t["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$s["plus-icon"],
+              styles$t["plus-icon"],
               {
-                [styles$s["plus-icon-open"]]: isOpen.value,
-                [styles$s["plus-icon-closed"]]: !isOpen.value
+                [styles$t["plus-icon-open"]]: isOpen.value,
+                [styles$t["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -951,16 +950,16 @@ const ElmToggle = component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$s.content,
+          styles$t.content,
           {
-            [styles$s["content-open"]]: isOpen.value,
-            [styles$s["content-closed"]]: !isOpen.value
+            [styles$t["content-open"]]: isOpen.value,
+            [styles$t["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$s.footer,
+        class: styles$t.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
@@ -970,10 +969,10 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$s["footer-line"]
+            class: styles$t["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$s["footer-cross-icon"],
+            class: styles$t["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -983,14 +982,14 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$s["footer-cross-icon"],
+            class: styles$t["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$s["footer-line"]
+            class: styles$t["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
             style: {
@@ -1006,50 +1005,50 @@ const ElmToggle = component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$r = {
+const styles$s = {
   "block-fallback": "_block-fallback_rt986_1"
 };
-const wrapper$3 = "_wrapper_1yktj_12";
+const wrapper$4 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$q = {
-  wrapper: wrapper$3,
+const styles$r = {
+  wrapper: wrapper$4,
   dot
 };
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$q.wrapper,
+    class: styles$r.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$q.dot,
+        class: styles$r.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$q.dot,
+        class: styles$r.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$q.dot,
+        class: styles$r.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$p = {
+const styles$q = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = component$(() => {
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: styles$p["rectangle-wave"]
+    class: styles$q["rectangle-wave"]
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$r["block-fallback"],
+    class: styles$s["block-fallback"],
     style: {
       "--height": height
     },
@@ -1066,7 +1065,7 @@ const colored = "_colored_1ykfy_50";
 const enable = "_enable_1ykfy_54";
 const flex = "_flex_1ykfy_76";
 const ripple = "_ripple_1ykfy_97";
-const styles$o = {
+const styles$p = {
   button,
   "button-ornament": "_button-ornament_1ykfy_21",
   normal,
@@ -1090,11 +1089,11 @@ const ElmButton = component$((props) => {
   return /* @__PURE__ */ jsxs("button", {
     onClick$: handleClick,
     class: [
-      styles$o.button,
-      !props.loading && !props.disabled && styles$o.enable,
-      props.color && styles$o.colored,
-      !props.color && !props.primary && styles$o.normal,
-      !props.color && props.primary && styles$o.primary
+      styles$p.button,
+      !props.loading && !props.disabled && styles$p.enable,
+      props.color && styles$p.colored,
+      !props.color && !props.primary && styles$p.normal,
+      !props.color && props.primary && styles$p.primary
     ],
     style: {
       display: props.block ? "flex" : "inline-flex",
@@ -1105,16 +1104,16 @@ const ElmButton = component$((props) => {
     },
     children: [
       clicked.value && /* @__PURE__ */ jsx("div", {
-        class: styles$o.ripple
+        class: styles$p.ripple
       }),
       props.loading ? /* @__PURE__ */ jsx(ElmDotLoadingIcon, {
         size: "1.5rem"
       }) : /* @__PURE__ */ jsx("span", {
-        class: styles$o.flex,
+        class: styles$p.flex,
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$o["button-ornament"]
+        class: styles$p["button-ornament"]
       })
     ]
   });
@@ -1123,7 +1122,7 @@ const container$2 = "_container_101ok_1";
 const checkbox = "_checkbox_101ok_19";
 const rect = "_rect_101ok_27";
 const loading$1 = "_loading_101ok_40";
-const styles$n = {
+const styles$o = {
   container: container$2,
   "container--disable": "_container--disable_101ok_11",
   checkbox,
@@ -1143,8 +1142,8 @@ const ElmCheckbox = component$((props) => {
   });
   return /* @__PURE__ */ jsx("div", {
     class: [
-      styles$n.container,
-      props.disable && styles$n["container--disable"]
+      styles$o.container,
+      props.disable && styles$o["container--disable"]
     ],
     onClick$: toggleCheck,
     children: /* @__PURE__ */ jsxs("div", {
@@ -1157,13 +1156,13 @@ const ElmCheckbox = component$((props) => {
         /* @__PURE__ */ jsxs("svg", {
           width: "24",
           height: "24",
-          class: styles$n.checkbox,
+          class: styles$o.checkbox,
           children: [
             /* @__PURE__ */ jsxs("circle", {
               cx: "0",
               cy: "0",
               r: "2",
-              class: styles$n.loading,
+              class: styles$o.loading,
               style: {
                 opacity: props.loading ? 1 : 0
               },
@@ -1190,7 +1189,7 @@ const ElmCheckbox = component$((props) => {
               cx: "20",
               cy: "20",
               r: "2",
-              class: styles$n.loading,
+              class: styles$o.loading,
               style: {
                 opacity: props.loading ? 1 : 0
               },
@@ -1219,14 +1218,14 @@ const ElmCheckbox = component$((props) => {
               width: "16",
               height: "16",
               class: [
-                styles$n.rect,
-                isChecked.value && styles$n["rect--checked"],
-                props.loading && styles$n["rect--loading"]
+                styles$o.rect,
+                isChecked.value && styles$o["rect--checked"],
+                props.loading && styles$o["rect--loading"]
               ],
               "stroke-width": "0.8"
             }),
             isChecked.value && /* @__PURE__ */ jsx("polyline", {
-              class: styles$n["check-line"],
+              class: styles$o["check-line"],
               points: "5,12 10,17 19,8",
               "stroke-width": "1.5",
               fill: "transparent"
@@ -1298,7 +1297,7 @@ const ElmCheckbox = component$((props) => {
     })
   });
 });
-const wrapper$2 = "_wrapper_1o5x2_1";
+const wrapper$3 = "_wrapper_1o5x2_1";
 const active$1 = "_active_1o5x2_23";
 const header$2 = "_header_1o5x2_27";
 const label$1 = "_label_1o5x2_35";
@@ -1309,8 +1308,8 @@ const fallback$1 = "_fallback_1o5x2_71";
 const pulldown = "_pulldown_1o5x2_79";
 const option = "_option_1o5x2_96";
 const description$1 = "_description_1o5x2_116";
-const styles$m = {
-  wrapper: wrapper$2,
+const styles$n = {
+  wrapper: wrapper$3,
   active: active$1,
   header: header$2,
   label: label$1,
@@ -1351,8 +1350,8 @@ const ElmSelect = component$((props) => {
   return /* @__PURE__ */ jsxs("div", {
     ref: containerRef,
     class: [
-      styles$m.wrapper,
-      isActive.value && styles$m.active
+      styles$n.wrapper,
+      isActive.value && styles$n.active
     ],
     style: {
       backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
@@ -1361,23 +1360,23 @@ const ElmSelect = component$((props) => {
     onClick$: handleToggle,
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$m.header,
+        class: styles$n.header,
         children: /* @__PURE__ */ jsx("span", {
           class: [
-            styles$m.label,
+            styles$n.label,
             textStyles.text
           ],
           children: props.label
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$m.body,
+        class: styles$n.body,
         children: /* @__PURE__ */ jsxs("div", {
-          class: styles$m.select,
+          class: styles$n.select,
           children: [
             /* @__PURE__ */ jsx("div", {
               class: [
-                styles$m.selected,
+                styles$n.selected,
                 textStyles.text
               ],
               children: selectedOption.value ? /* @__PURE__ */ jsxs("div", {
@@ -1386,12 +1385,12 @@ const ElmSelect = component$((props) => {
                     children: selectedOption.value.label
                   }),
                   selectedOption.value.description && /* @__PURE__ */ jsx("span", {
-                    class: styles$m.description,
+                    class: styles$n.description,
                     children: selectedOption.value.description
                   })
                 ]
               }, selectedOption.value.id) : /* @__PURE__ */ jsxs("div", {
-                class: styles$m.fallback,
+                class: styles$n.fallback,
                 children: [
                   /* @__PURE__ */ jsx(ElmMdiIcon, {
                     d: mdiArrowDownDropCircleOutline
@@ -1407,10 +1406,10 @@ const ElmSelect = component$((props) => {
               size: "1.5rem"
             }),
             isActive.value && /* @__PURE__ */ jsx("div", {
-              class: styles$m.pulldown,
+              class: styles$n.pulldown,
               children: props.options.map((option2) => /* @__PURE__ */ jsxs("div", {
                 class: [
-                  styles$m.option,
+                  styles$n.option,
                   textStyles.text
                 ],
                 onClick$: (e) => {
@@ -1428,7 +1427,7 @@ const ElmSelect = component$((props) => {
                     children: option2.label
                   }),
                   option2.description && /* @__PURE__ */ jsx("span", {
-                    class: styles$m.description,
+                    class: styles$n.description,
                     children: option2.description
                   })
                 ]
@@ -1442,7 +1441,7 @@ const ElmSelect = component$((props) => {
 });
 const bar = "_bar_gpty5_5";
 const circle = "_circle_gpty5_25";
-const styles$l = {
+const styles$m = {
   "switch": "_switch_gpty5_1",
   bar,
   "bar--checked": "_bar--checked_gpty5_17",
@@ -1471,22 +1470,22 @@ const ElmSwitch = component$((props) => {
     },
     children: [
       /* @__PURE__ */ jsx("input", {
-        class: styles$l.switch,
+        class: styles$m.switch,
         type: "checkbox",
         checked: checked.value,
         disabled: props.disabled
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$l.bar,
-          checked.value && styles$l["bar--checked"],
-          props.disabled && styles$l["bar--disabled"]
+          styles$m.bar,
+          checked.value && styles$m["bar--checked"],
+          props.disabled && styles$m["bar--disabled"]
         ],
         children: /* @__PURE__ */ jsx("div", {
           class: [
-            styles$l.circle,
-            checked.value && styles$l["circle--checked"],
-            props.disabled && styles$l["circle--disabled"]
+            styles$m.circle,
+            checked.value && styles$m["circle--checked"],
+            props.disabled && styles$m["circle--disabled"]
           ]
         })
       })
@@ -1494,7 +1493,7 @@ const ElmSwitch = component$((props) => {
   });
 });
 const loading = "_loading_1yj0v_19";
-const wrapper$1 = "_wrapper_1yj0v_33";
+const wrapper$2 = "_wrapper_1yj0v_33";
 const active = "_active_1yj0v_55";
 const header$1 = "_header_1yj0v_59";
 const label = "_label_1yj0v_67";
@@ -1503,9 +1502,9 @@ const body$1 = "_body_1yj0v_88";
 const input = "_input_1yj0v_109";
 const icon$2 = "_icon_1yj0v_136";
 const suffix = "_suffix_1yj0v_153";
-const styles$k = {
+const styles$l = {
   loading,
-  wrapper: wrapper$1,
+  wrapper: wrapper$2,
   active,
   header: header$1,
   label,
@@ -1547,8 +1546,8 @@ const ElmTextField = component$((props) => {
   };
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$k.wrapper,
-      isFocused.value && styles$k.active
+      styles$l.wrapper,
+      isFocused.value && styles$l.active
     ],
     style: {
       backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
@@ -1556,17 +1555,17 @@ const ElmTextField = component$((props) => {
     },
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: styles$k.header,
+        class: styles$l.header,
         children: [
           /* @__PURE__ */ jsxs("label", {
             for: id,
-            class: styles$k.label,
+            class: styles$l.label,
             children: [
               /* @__PURE__ */ jsx("span", {
                 children: props.label
               }),
               props.required && /* @__PURE__ */ jsx("span", {
-                class: styles$k.requierd,
+                class: styles$l.requierd,
                 children: "*"
               })
             ]
@@ -1579,7 +1578,7 @@ const ElmTextField = component$((props) => {
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$k.body,
+        class: styles$l.body,
         children: [
           props.icon && /* @__PURE__ */ jsx(ElmMdiIcon, {
             d: iconMap[props.icon],
@@ -1590,7 +1589,7 @@ const ElmTextField = component$((props) => {
             id,
             "bind:value": input2,
             type: inputType.value,
-            class: styles$k.input,
+            class: styles$l.input,
             placeholder: props.placeholder,
             onFocus$: () => isFocused.value = true,
             onBlur$: () => isFocused.value = false,
@@ -1601,16 +1600,16 @@ const ElmTextField = component$((props) => {
             "aria-required": props.required
           }),
           /* @__PURE__ */ jsxs("div", {
-            class: styles$k["icon-box"],
+            class: styles$l["icon-box"],
             children: [
               /* @__PURE__ */ jsx("span", {
-                class: styles$k.suffix,
+                class: styles$l.suffix,
                 children: props.suffix != null && /* @__PURE__ */ jsx(ElmInlineText, {
                   text: props.suffix
                 })
               }),
               /* @__PURE__ */ jsx("div", {
-                class: styles$k.icon,
+                class: styles$l.icon,
                 onClick$: handleVisibleSwitch,
                 children: /* @__PURE__ */ jsx(ElmMdiIcon, {
                   d: inputType.value === "text" ? mdiEyeOutline : mdiEyeOffOutline,
@@ -1619,7 +1618,7 @@ const ElmTextField = component$((props) => {
                 })
               }),
               /* @__PURE__ */ jsx("div", {
-                class: styles$k.icon,
+                class: styles$l.icon,
                 onClick$: handleDelete,
                 children: /* @__PURE__ */ jsx(ElmMdiIcon, {
                   d: mdiBackspaceOutline,
@@ -1632,7 +1631,7 @@ const ElmTextField = component$((props) => {
         ]
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$k.loading,
+        class: styles$l.loading,
         style: {
           opacity: props.loading ? 0.2 : 0
         }
@@ -1641,12 +1640,12 @@ const ElmTextField = component$((props) => {
   });
 });
 const validation = "_validation_r3xix_1";
-const styles$j = {
+const styles$k = {
   validation
 };
 const ElmValidation = component$(({ text: text2, validColor = "#449763", isValid }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$j.validation,
+    class: styles$k.validation,
     style: {
       "--opacity": isValid ? 1 : 0.5
     },
@@ -1709,7 +1708,7 @@ function useElmethisTheme() {
   };
 }
 const icon$1 = "_icon_1husg_1";
-const styles$i = {
+const styles$j = {
   icon: icon$1
 };
 const ElmToggleTheme = component$(({ size = "2rem" }) => {
@@ -1720,7 +1719,7 @@ const ElmToggleTheme = component$(({ size = "2rem" }) => {
       width: size,
       height: size,
       viewBox: "0 0 24 24",
-      class: styles$i.icon,
+      class: styles$j.icon,
       onClick$: toggleTheme,
       children: [
         /* @__PURE__ */ jsxs("g", {
@@ -1928,7 +1927,7 @@ const ElmToggleTheme = component$(({ size = "2rem" }) => {
       width: size,
       height: size,
       viewBox: "0 0 24 24",
-      class: styles$i.icon,
+      class: styles$j.icon,
       onClick$: toggleTheme,
       children: [
         /* @__PURE__ */ jsxs("path", {
@@ -2174,17 +2173,41 @@ const ElmToggleTheme = component$(({ size = "2rem" }) => {
     })
   });
 });
-const image$1 = "_image_5s2ag_11";
-const fallback = "_fallback_5s2ag_33";
+const wrapper$1 = "_wrapper_13xd3_15";
+const square = "_square_13xd3_24";
+const styles$i = {
+  wrapper: wrapper$1,
+  square
+};
+const ElmSquareLoadingIcon = component$(({ size = "3rem", dimensions = 4 }) => {
+  const DURATION = 1200;
+  const DELAY = DURATION / (dimensions * 3);
+  return /* @__PURE__ */ jsx("div", {
+    class: styles$i.wrapper,
+    style: {
+      "--size": size,
+      "--dimensions": dimensions,
+      "--duration": `${DURATION}ms`
+    },
+    children: new Array(dimensions).fill(null).map((_, rowIndex) => new Array(dimensions).fill(null).map((_2, columnIndex) => /* @__PURE__ */ jsx("div", {
+      class: styles$i.square,
+      style: {
+        "--delay": `${DELAY * (rowIndex + columnIndex)}ms`
+      }
+    }, `${rowIndex}-${columnIndex}`)))
+  });
+});
+const image$1 = "_image_sf1wj_12";
+const fallback = "_fallback_sf1wj_34";
 const styles$h = {
-  "block-image": "_block-image_5s2ag_1",
-  "image-container": "_image-container_5s2ag_11",
+  "block-image": "_block-image_sf1wj_1",
+  "image-container": "_image-container_sf1wj_12",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_5s2ag_43",
-  "modal-container": "_modal-container_5s2ag_55"
+  "caption-box": "_caption-box_sf1wj_44",
+  "modal-container": "_modal-container_sf1wj_56"
 };
-const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true }) => {
+const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true, srcset, sizes, style }) => {
   const isLoading = useSignal(true);
   const isShowModal = useSignal(false);
   const handleImageLoad = $(() => {
@@ -2199,6 +2222,8 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     class: styles$h.image,
     src,
     alt: alt ?? caption2 ?? "Image",
+    srcset,
+    sizes,
     width,
     height,
     onLoad$: handleImageLoad,
@@ -2219,6 +2244,7 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
   });
   return /* @__PURE__ */ jsxs("figure", {
     class: styles$h["block-image"],
+    style,
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: styles$h["image-container"],
@@ -2260,18 +2286,18 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     ]
   });
 });
-const file = "_file_14a0w_1";
+const file = "_file_eqa3m_1";
 const styles$g = {
   file,
-  "file-size": "_file-size_14a0w_16",
-  "download-icon": "_download-icon_14a0w_21"
+  "file-size": "_file-size_eqa3m_16",
+  "download-icon": "_download-icon_eqa3m_21"
 };
 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 }) => {
+const ElmFile = component$(({ name, src, filesize, style }) => {
   const downloadFile = $(async () => {
     let link2;
     try {
@@ -2290,6 +2316,7 @@ const ElmFile = component$(({ name, src, filesize }) => {
   });
   return /* @__PURE__ */ jsxs("div", {
     class: styles$g.file,
+    style,
     children: [
       /* @__PURE__ */ jsx("div", {
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -2319,13 +2346,13 @@ const ElmFile = component$(({ name, src, filesize }) => {
     ]
   });
 });
-const bookmark = "_bookmark_rgq1s_1";
-const container$1 = "_container_rgq1s_19";
-const image = "_image_rgq1s_32";
-const content$1 = "_content_rgq1s_53";
-const title = "_title_rgq1s_73";
-const description = "_description_rgq1s_76";
-const link = "_link_rgq1s_80";
+const bookmark = "_bookmark_xxvle_1";
+const container$1 = "_container_xxvle_20";
+const image = "_image_xxvle_33";
+const content$1 = "_content_xxvle_54";
+const title = "_title_xxvle_74";
+const description = "_description_xxvle_77";
+const link = "_link_xxvle_81";
 const styles$f = {
   bookmark,
   container: container$1,
@@ -2335,7 +2362,7 @@ const styles$f = {
   description,
   link
 };
-const ElmBookmark = component$(({ url, image: image2, title: title2, description: description2, favicon }) => {
+const ElmBookmark = component$(({ url, image: image2, title: title2, description: description2, favicon, style }) => {
   const isError = useSignal(false);
   const handleImageOnError = $(() => {
     isError.value = true;
@@ -2346,6 +2373,7 @@ const ElmBookmark = component$(({ url, image: image2, title: title2, description
   };
   return /* @__PURE__ */ jsx("div", {
     class: styles$f.bookmark,
+    style,
     children: /* @__PURE__ */ jsxs("a", {
       class: styles$f.container,
       href: url,
@@ -2511,21 +2539,22 @@ const ElmPageTop = component$(({ position = "right" }) => {
     ]
   });
 });
-const blockquote = "_blockquote_b5jd8_1";
-const body = "_body_b5jd8_18";
-const icon = "_icon_b5jd8_23";
+const blockquote = "_blockquote_1s60i_1";
+const body = "_body_1s60i_19";
+const icon = "_icon_1s60i_24";
 const styles$c = {
   blockquote,
   body,
   icon
 };
-const ElmBlockQuote = component$(({ cite }) => {
+const ElmBlockQuote = component$(({ cite, style }) => {
   return /* @__PURE__ */ jsxs("blockquote", {
     class: [
       styles$c.blockquote,
       textStyles.text
     ],
     cite,
+    style,
     children: [
       /* @__PURE__ */ jsx("div", {
         class: styles$c.icon,
@@ -2552,9 +2581,9 @@ const ElmBlockQuote = component$(({ cite }) => {
     ]
   });
 });
-const callout = "_callout_1d8l2_1";
-const header = "_header_1d8l2_25";
-const content = "_content_1d8l2_31";
+const callout = "_callout_ov76x_1";
+const header = "_header_ov76x_26";
+const content = "_content_ov76x_32";
 const styles$b = {
   callout,
   header,
@@ -2582,11 +2611,12 @@ const COLOR_MAP = Object.freeze({
     icon: mdiAlertOctagram
   }
 });
-const ElmCallout = component$(({ type = "note" }) => {
+const ElmCallout = component$(({ type = "note", style }) => {
   return /* @__PURE__ */ jsxs("aside", {
     class: styles$b.callout,
     style: {
-      "--callout-color": COLOR_MAP[type].code
+      "--callout-color": COLOR_MAP[type].code,
+      ...style
     },
     children: [
       /* @__PURE__ */ jsxs("div", {
@@ -2609,16 +2639,14 @@ const ElmCallout = component$(({ type = "note" }) => {
     ]
   });
 });
-const hr = "_hr_1g58p_1";
+const hr = "_hr_b790w_1";
 const styles$a = {
   hr
 };
-const ElmDivider = component$(({ margin }) => {
+const ElmDivider = component$(({ style }) => {
   return /* @__PURE__ */ jsx("hr", {
     class: styles$a.hr,
-    style: {
-      marginBlock: margin
-    }
+    style
   });
 });
 const fragment = "_fragment_1kofp_1";
@@ -2643,15 +2671,15 @@ const ElmFragmentIdentifier = component$(({ id }) => {
     children: "#"
   });
 });
-const h1 = "_h1_16jof_10";
-const h2 = "_h2_16jof_40";
-const h2__underline = "_h2__underline_16jof_68";
-const h3 = "_h3_16jof_85";
-const h4 = "_h4_16jof_102";
-const h5 = "_h5_16jof_106";
-const h6 = "_h6_16jof_110";
+const h1 = "_h1_1c1xr_10";
+const h2 = "_h2_1c1xr_40";
+const h2__underline = "_h2__underline_1c1xr_68";
+const h3 = "_h3_1c1xr_85";
+const h4 = "_h4_1c1xr_102";
+const h5 = "_h5_1c1xr_106";
+const h6 = "_h6_1c1xr_110";
 const styles$8 = {
-  "heading-common": "_heading-common_16jof_1",
+  "heading-common": "_heading-common_1c1xr_1",
   h1,
   h2,
   h2__underline,
@@ -2668,7 +2696,7 @@ const SIZE_MAP = Object.freeze({
   5: 1.15,
   6: 1.1
 });
-const ElmHeading = component$(({ level, text: text2, id }) => {
+const ElmHeading = component$(({ level, text: text2, id, style }) => {
   const Tag = `h${level}`;
   return /* @__PURE__ */ jsxs(Tag, {
     class: [
@@ -2677,7 +2705,8 @@ const ElmHeading = component$(({ level, text: text2, id }) => {
       styles$8[`h${level}`]
     ],
     style: {
-      "--font-size": `${SIZE_MAP[level]}em`
+      "--font-size": `${SIZE_MAP[level]}em`,
+      ...style
     },
     children: [
       /* @__PURE__ */ jsx("span", {
@@ -2700,11 +2729,11 @@ const ElmHeading = component$(({ level, text: text2, id }) => {
   });
 });
 const styles$7 = {
-  "elmethis-list-common": "_elmethis-list-common_14epx_1",
-  "elmethis-bulleted-list": "_elmethis-bulleted-list_14epx_9",
-  "elmethis-numbered-list": "_elmethis-numbered-list_14epx_24"
+  "elmethis-list-common": "_elmethis-list-common_6g6c5_1",
+  "elmethis-bulleted-list": "_elmethis-bulleted-list_6g6c5_9",
+  "elmethis-numbered-list": "_elmethis-numbered-list_6g6c5_24"
 };
-const ElmList = component$(({ listStyle = "unordered" }) => {
+const ElmList = component$(({ listStyle = "unordered", style }) => {
   if (listStyle === "ordered") {
     return /* @__PURE__ */ jsx("ol", {
       class: [
@@ -2712,6 +2741,7 @@ const ElmList = component$(({ listStyle = "unordered" }) => {
         styles$7["elmethis-list-common"],
         styles$7["elmethis-numbered-list"]
       ],
+      style,
       children: /* @__PURE__ */ jsx(Slot, {})
     });
   } else {
@@ -2725,7 +2755,7 @@ const ElmList = component$(({ listStyle = "unordered" }) => {
     });
   }
 });
-const paragraph = "_paragraph_jz10s_1";
+const paragraph = "_paragraph_1klqe_1";
 const styles$6 = {
   paragraph
 };
@@ -2775,7 +2805,7 @@ const styles$5 = {
 };
 const HasRowHeaderContext = createContextId("HasRowHeaderContext");
 const ElmTable = component$((props) => {
-  const { margin, caption: caption2, hasRowHeader = false } = props;
+  const { caption: caption2, hasRowHeader = false, style } = props;
   const hasRowHeaderComputed = useComputed$(() => hasRowHeader);
   useContextProvider(HasRowHeaderContext, hasRowHeaderComputed);
   return /* @__PURE__ */ jsxs("table", {
@@ -2784,7 +2814,7 @@ const ElmTable = component$((props) => {
       textStyles.text
     ],
     style: {
-      "--margin-block": margin
+      ...style
     },
     children: [
       caption2 && /* @__PURE__ */ jsx("caption", {
@@ -2882,10 +2912,9 @@ const ElmTableCell = component$((props) => {
     })
   });
 });
-const column = "_column_1l2bp_7";
+const column = "_column_1yujg_1";
 const styles$1 = {
-  "jarkup-body": "_jarkup-body_1l2bp_1",
-  "column-list": "_column-list_1l2bp_7",
+  "column-list": "_column-list_1yujg_1",
   column
 };
 const convertInlineComponentsToPlainText = (inlineComponents) => {
@@ -3051,7 +3080,10 @@ const ElmJarkup = component$((props) => {
     });
   };
   return /* @__PURE__ */ jsx("div", {
-    class: styles$1["jarkup-body"],
+    style: {
+      "--margin-block": "3rem",
+      ...props.style
+    },
     children: render(props.jsonComponents)
   });
 });
@@ -3309,6 +3341,7 @@ export {
   ElmRectangleWave,
   ElmSelect,
   ElmShikiHighlighter,
+  ElmSquareLoadingIcon,
   ElmSwitch,
   ElmTable,
   ElmTableBody,