@elmethis/qwik 0.0.38 → 0.0.39

package/lib/index.qwik.cjs

@@ -10,7 +10,7 @@ const marked = require("marked");
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$B = {
+const styles$C = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -70,7 +70,7 @@ const Typescript = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$A = {
+const styles$B = {
   path
 };
 const Bash = qwik.component$(({ size = 24, ...props }) => {
@@ -86,7 +86,7 @@ const Bash = qwik.component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
-        class: styles$A.path,
+        class: styles$B.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__ */ jsxRuntime.jsx("path", {
@@ -526,13 +526,13 @@ const C = qwik.component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const icon$4 = "_icon_1gvln_1";
-const styles$z = {
-  icon: icon$4
+const icon$5 = "_icon_1gvln_1";
+const styles$A = {
+  icon: icon$5
 };
 const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    class: styles$z.icon,
+    class: styles$A.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -641,7 +641,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$y = {
+const styles$z = {
   text: text$3,
   code: code$1,
   kbd,
@@ -651,17 +651,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$3 = "_icon_1tbvt_1";
-const styles$x = {
-  icon: icon$3
+const icon$4 = "_icon_1tbvt_1";
+const styles$y = {
+  icon: icon$4
 };
 const ElmInlineIcon = qwik.component$(({ src, alt, width, height, size = 16 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    class: styles$x.icon,
+    class: styles$y.icon,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       src,
       alt,
-      class: styles$x.icon,
+      class: styles$y.icon,
       width: width ?? size,
       height: height ?? size
     })
@@ -674,7 +674,7 @@ const ElmInlineText = qwik.component$((props) => {
   }) : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("kbd", {
-      class: styles$y.kbd,
+      class: styles$z.kbd,
       children: vnode
     });
   }
@@ -700,13 +700,13 @@ const ElmInlineText = qwik.component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("code", {
-      class: styles$y.code,
+      class: styles$z.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxRuntime.jsxs("ruby", {
-      class: styles$y.text,
+      class: styles$z.text,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: vnode
@@ -719,7 +719,7 @@ const ElmInlineText = qwik.component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsxRuntime.jsx("span", {
     class: [
-      styles$y.text,
+      styles$z.text,
       textStyles.text
     ],
     style: {
@@ -732,7 +732,7 @@ const ElmInlineText = qwik.component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxRuntime.jsxs("a", {
-      class: styles$y.link,
+      class: styles$z.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -751,7 +751,7 @@ const ElmInlineText = qwik.component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$w = {
+const styles$x = {
   code
 };
 const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" }) => {
@@ -776,7 +776,7 @@ const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" })
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("pre", {
-    class: styles$w.code,
+    class: styles$x.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -795,17 +795,17 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {
-    class: styles$B["code-block"],
+    class: styles$C["code-block"],
     style,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$B["language-icon"],
+        class: styles$C["language-icon"],
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$B.caption,
+        class: styles$C.caption,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -814,7 +814,7 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$B["copy-icon"],
+        class: styles$C["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -823,10 +823,10 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", {
-        class: styles$B.divider
+        class: styles$C.divider
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$B.code,
+        class: styles$C.code,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -846,7 +846,7 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$v = {
+const styles$w = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -855,13 +855,13 @@ const ElmParallax = qwik.component$(({ images }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$v["parallax-watcher"],
+        class: styles$w["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$v.parallax,
+        class: styles$w.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -873,7 +873,7 @@ const ElmParallax = qwik.component$(({ images }) => {
 });
 const tab = "_tab_hloyu_18";
 const active$2 = "_active_hloyu_40";
-const styles$u = {
+const styles$v = {
   "elm-tabs": "_elm-tabs_hloyu_1",
   "tab-container": "_tab-container_hloyu_18",
   tab,
@@ -887,15 +887,15 @@ const ElmTabs = qwik.component$(({ tabLabels, tabContents }) => {
     selectedTabIndex.value = index;
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$u["elm-tabs"],
+    class: styles$v["elm-tabs"],
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$u["tab-container"],
+        class: styles$v["tab-container"],
         children: tabLabels.map((tabLabel, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: [
-            styles$u["tab"],
+            styles$v["tab"],
             {
-              [styles$u["active"]]: selectedTabIndex.value === index
+              [styles$v["active"]]: selectedTabIndex.value === index
             }
           ],
           onClick$: () => selectTab(index),
@@ -903,12 +903,12 @@ const ElmTabs = qwik.component$(({ tabLabels, tabContents }) => {
         }, index))
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$u["tab-content-container"],
+        class: styles$v["tab-content-container"],
         children: tabContents.map((content2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: [
-            styles$u["tab-content"],
+            styles$v["tab-content"],
             {
-              [styles$u["active"]]: selectedTabIndex.value === index
+              [styles$v["active"]]: selectedTabIndex.value === index
             }
           ],
           children: content2
@@ -921,7 +921,7 @@ const toggle = "_toggle_pbyu8_1";
 const summary = "_summary_pbyu8_14";
 const content$2 = "_content_pbyu8_60";
 const footer = "_footer_pbyu8_80";
-const styles$t = {
+const styles$u = {
   toggle,
   "toggle-closed": "_toggle-closed_pbyu8_7",
   "toggle-open": "_toggle-open_pbyu8_10",
@@ -948,30 +948,30 @@ const ElmToggle = qwik.component$(({ summary: summary2, style }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: [
-      styles$t.toggle,
+      styles$u.toggle,
       {
-        [styles$t["toggle-open"]]: isOpen.value,
-        [styles$t["toggle-closed"]]: !isOpen.value
+        [styles$u["toggle-open"]]: isOpen.value,
+        [styles$u["toggle-closed"]]: !isOpen.value
       }
     ],
     style,
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
         class: [
-          styles$t.summary,
+          styles$u.summary,
           {
-            [styles$t["summary-open"]]: isOpen.value,
-            [styles$t["summary-closed"]]: !isOpen.value
+            [styles$u["summary-open"]]: isOpen.value,
+            [styles$u["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$t["chevron-icon"],
+              styles$u["chevron-icon"],
               {
-                [styles$t["chevron-icon-open"]]: isOpen.value,
-                [styles$t["chevron-icon-closed"]]: !isOpen.value
+                [styles$u["chevron-icon-open"]]: isOpen.value,
+                [styles$u["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -979,17 +979,17 @@ const ElmToggle = qwik.component$(({ summary: summary2, style }) => {
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$t["summary-text"],
+            class: styles$u["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$t["plus-icon"],
+              styles$u["plus-icon"],
               {
-                [styles$t["plus-icon-open"]]: isOpen.value,
-                [styles$t["plus-icon-closed"]]: !isOpen.value
+                [styles$u["plus-icon-open"]]: isOpen.value,
+                [styles$u["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -1002,16 +1002,16 @@ const ElmToggle = qwik.component$(({ summary: summary2, style }) => {
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: [
-          styles$t.content,
+          styles$u.content,
           {
-            [styles$t["content-open"]]: isOpen.value,
-            [styles$t["content-closed"]]: !isOpen.value
+            [styles$u["content-open"]]: isOpen.value,
+            [styles$u["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: styles$t.footer,
+        class: styles$u.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
@@ -1021,10 +1021,10 @@ const ElmToggle = qwik.component$(({ summary: summary2, style }) => {
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$t["footer-line"]
+            class: styles$u["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$t["footer-cross-icon"],
+            class: styles$u["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
@@ -1034,14 +1034,14 @@ const ElmToggle = qwik.component$(({ summary: summary2, style }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$t["footer-cross-icon"],
+            class: styles$u["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$t["footer-line"]
+            class: styles$u["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             style: {
@@ -1057,50 +1057,50 @@ const ElmToggle = qwik.component$(({ summary: summary2, style }) => {
     ]
   });
 });
-const styles$s = {
+const styles$t = {
   "block-fallback": "_block-fallback_rt986_1"
 };
 const wrapper$4 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$r = {
+const styles$s = {
   wrapper: wrapper$4,
   dot
 };
 const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$r.wrapper,
+    class: styles$s.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$r.dot,
+        class: styles$s.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$r.dot,
+        class: styles$s.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$r.dot,
+        class: styles$s.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$q = {
+const styles$r = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = qwik.component$(() => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     "aria-hidden": "true",
-    class: styles$q["rectangle-wave"]
+    class: styles$r["rectangle-wave"]
   });
 });
 const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$s["block-fallback"],
+    class: styles$t["block-fallback"],
     style: {
       "--height": height
     },
@@ -1110,6 +1110,48 @@ const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
     ]
   });
 });
+const unsupported = "_unsupported_1vja3_1";
+const message = "_message_1vja3_13";
+const icon$3 = "_icon_1vja3_20";
+const details = "_details_1vja3_24";
+const styles$q = {
+  unsupported,
+  message,
+  icon: icon$3,
+  details
+};
+const ElmUnsupportedBlock = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: styles$q.unsupported,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: styles$q.message,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", {
+            viewBox: "0 0 24 24",
+            width: "1.25rem",
+            height: "1.25rem",
+            class: styles$q.icon,
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+              d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+            text: "UNSUPPORTED BLOCK",
+            color: "#868e9c"
+          })
+        ]
+      }),
+      props.details && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: styles$q.details,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          text: props.details,
+          color: "#868e9c"
+        })
+      })
+    ]
+  });
+});
 const button = "_button_1ykfy_1";
 const normal = "_normal_1ykfy_32";
 const primary = "_primary_1ykfy_41";
@@ -2996,6 +3038,11 @@ const ElmJarkup = qwik.component$((props) => {
             src: component.props.src,
             alt: component.props.alt
           }, key);
+        case "Fragment": {
+          return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: render(component.slots.default)
+          });
+        }
         case "Heading":
           return /* @__PURE__ */ jsxRuntime.jsx(ElmHeading, {
             level: component.props.level,
@@ -3121,16 +3168,16 @@ const ElmJarkup = qwik.component$((props) => {
             },
             children: render(component.slots.default)
           }, key);
+        case "Unsupported": {
+          if (props.skipUnsupportedComponentWarning) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(ElmUnsupportedBlock, {
+            details: `Unsupported component type: ${component.props?.details || component.type}`
+          }, key);
+        }
         default:
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-            style: {
-              color: "red",
-              border: "1px solid red"
-            },
-            children: [
-              "Unsupported component type: ",
-              component.type
-            ]
+          if (props.skipUnsupportedComponentWarning) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(ElmUnsupportedBlock, {
+            details: `Unsupported component type: ${component.type}`
           }, key);
       }
     });
@@ -3427,6 +3474,7 @@ exports.ElmTabs = ElmTabs;
 exports.ElmTextField = ElmTextField;
 exports.ElmToggle = ElmToggle;
 exports.ElmToggleTheme = ElmToggleTheme;
+exports.ElmUnsupportedBlock = ElmUnsupportedBlock;
 exports.ElmValidation = ElmValidation;
 exports.useDelayedSignal = useDelayedSignal;
 exports.useElmethisTheme = useElmethisTheme;

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$B = {
+const styles$C = {
   "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$A = {
+const styles$B = {
   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$A.path,
+        class: styles$B.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", {
@@ -524,13 +524,13 @@ const C = component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const icon$4 = "_icon_1gvln_1";
-const styles$z = {
-  icon: icon$4
+const icon$5 = "_icon_1gvln_1";
+const styles$A = {
+  icon: icon$5
 };
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$z.icon,
+    class: styles$A.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$y = {
+const styles$z = {
   text: text$3,
   code: code$1,
   kbd,
@@ -649,17 +649,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$3 = "_icon_1tbvt_1";
-const styles$x = {
-  icon: icon$3
+const icon$4 = "_icon_1tbvt_1";
+const styles$y = {
+  icon: icon$4
 };
 const ElmInlineIcon = component$(({ src, alt, width, height, size = 16 }) => {
   return /* @__PURE__ */ jsx("span", {
-    class: styles$x.icon,
+    class: styles$y.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$x.icon,
+      class: styles$y.icon,
       width: width ?? size,
       height: height ?? size
     })
@@ -672,7 +672,7 @@ const ElmInlineText = component$((props) => {
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$y.kbd,
+      class: styles$z.kbd,
       children: vnode
     });
   }
@@ -698,13 +698,13 @@ const ElmInlineText = component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$y.code,
+      class: styles$z.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$y.text,
+      class: styles$z.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -717,7 +717,7 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$y.text,
+      styles$z.text,
       textStyles.text
     ],
     style: {
@@ -730,7 +730,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$y.link,
+      class: styles$z.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -749,7 +749,7 @@ const ElmInlineText = component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$w = {
+const styles$x = {
   code
 };
 const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
@@ -774,7 +774,7 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: styles$w.code,
+    class: styles$x.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -793,17 +793,17 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$B["code-block"],
+    class: styles$C["code-block"],
     style,
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$B["language-icon"],
+        class: styles$C["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$B.caption,
+        class: styles$C.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -812,7 +812,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$B["copy-icon"],
+        class: styles$C["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -821,10 +821,10 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$B.divider
+        class: styles$C.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$B.code,
+        class: styles$C.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -844,7 +844,7 @@ const ElmKatex = component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$v = {
+const styles$w = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -853,13 +853,13 @@ const ElmParallax = component$(({ images }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$v["parallax-watcher"],
+        class: styles$w["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsx("div", {
-        class: styles$v.parallax,
+        class: styles$w.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -871,7 +871,7 @@ const ElmParallax = component$(({ images }) => {
 });
 const tab = "_tab_hloyu_18";
 const active$2 = "_active_hloyu_40";
-const styles$u = {
+const styles$v = {
   "elm-tabs": "_elm-tabs_hloyu_1",
   "tab-container": "_tab-container_hloyu_18",
   tab,
@@ -885,15 +885,15 @@ const ElmTabs = component$(({ tabLabels, tabContents }) => {
     selectedTabIndex.value = index;
   });
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$u["elm-tabs"],
+    class: styles$v["elm-tabs"],
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$u["tab-container"],
+        class: styles$v["tab-container"],
         children: tabLabels.map((tabLabel, index) => /* @__PURE__ */ jsx("div", {
           class: [
-            styles$u["tab"],
+            styles$v["tab"],
             {
-              [styles$u["active"]]: selectedTabIndex.value === index
+              [styles$v["active"]]: selectedTabIndex.value === index
             }
           ],
           onClick$: () => selectTab(index),
@@ -901,12 +901,12 @@ const ElmTabs = component$(({ tabLabels, tabContents }) => {
         }, index))
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$u["tab-content-container"],
+        class: styles$v["tab-content-container"],
         children: tabContents.map((content2, index) => /* @__PURE__ */ jsx("div", {
           class: [
-            styles$u["tab-content"],
+            styles$v["tab-content"],
             {
-              [styles$u["active"]]: selectedTabIndex.value === index
+              [styles$v["active"]]: selectedTabIndex.value === index
             }
           ],
           children: content2
@@ -919,7 +919,7 @@ const toggle = "_toggle_pbyu8_1";
 const summary = "_summary_pbyu8_14";
 const content$2 = "_content_pbyu8_60";
 const footer = "_footer_pbyu8_80";
-const styles$t = {
+const styles$u = {
   toggle,
   "toggle-closed": "_toggle-closed_pbyu8_7",
   "toggle-open": "_toggle-open_pbyu8_10",
@@ -946,30 +946,30 @@ const ElmToggle = component$(({ summary: summary2, style }) => {
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$t.toggle,
+      styles$u.toggle,
       {
-        [styles$t["toggle-open"]]: isOpen.value,
-        [styles$t["toggle-closed"]]: !isOpen.value
+        [styles$u["toggle-open"]]: isOpen.value,
+        [styles$u["toggle-closed"]]: !isOpen.value
       }
     ],
     style,
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          styles$t.summary,
+          styles$u.summary,
           {
-            [styles$t["summary-open"]]: isOpen.value,
-            [styles$t["summary-closed"]]: !isOpen.value
+            [styles$u["summary-open"]]: isOpen.value,
+            [styles$u["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$t["chevron-icon"],
+              styles$u["chevron-icon"],
               {
-                [styles$t["chevron-icon-open"]]: isOpen.value,
-                [styles$t["chevron-icon-closed"]]: !isOpen.value
+                [styles$u["chevron-icon-open"]]: isOpen.value,
+                [styles$u["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -977,17 +977,17 @@ const ElmToggle = component$(({ summary: summary2, style }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$t["summary-text"],
+            class: styles$u["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$t["plus-icon"],
+              styles$u["plus-icon"],
               {
-                [styles$t["plus-icon-open"]]: isOpen.value,
-                [styles$t["plus-icon-closed"]]: !isOpen.value
+                [styles$u["plus-icon-open"]]: isOpen.value,
+                [styles$u["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -1000,16 +1000,16 @@ const ElmToggle = component$(({ summary: summary2, style }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$t.content,
+          styles$u.content,
           {
-            [styles$t["content-open"]]: isOpen.value,
-            [styles$t["content-closed"]]: !isOpen.value
+            [styles$u["content-open"]]: isOpen.value,
+            [styles$u["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$t.footer,
+        class: styles$u.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
@@ -1019,10 +1019,10 @@ const ElmToggle = component$(({ summary: summary2, style }) => {
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$t["footer-line"]
+            class: styles$u["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$t["footer-cross-icon"],
+            class: styles$u["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -1032,14 +1032,14 @@ const ElmToggle = component$(({ summary: summary2, style }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$t["footer-cross-icon"],
+            class: styles$u["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$t["footer-line"]
+            class: styles$u["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
             style: {
@@ -1055,50 +1055,50 @@ const ElmToggle = component$(({ summary: summary2, style }) => {
     ]
   });
 });
-const styles$s = {
+const styles$t = {
   "block-fallback": "_block-fallback_rt986_1"
 };
 const wrapper$4 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$r = {
+const styles$s = {
   wrapper: wrapper$4,
   dot
 };
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$r.wrapper,
+    class: styles$s.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$r.dot,
+        class: styles$s.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$r.dot,
+        class: styles$s.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$r.dot,
+        class: styles$s.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$q = {
+const styles$r = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = component$(() => {
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: styles$q["rectangle-wave"]
+    class: styles$r["rectangle-wave"]
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$s["block-fallback"],
+    class: styles$t["block-fallback"],
     style: {
       "--height": height
     },
@@ -1108,6 +1108,48 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
+const unsupported = "_unsupported_1vja3_1";
+const message = "_message_1vja3_13";
+const icon$3 = "_icon_1vja3_20";
+const details = "_details_1vja3_24";
+const styles$q = {
+  unsupported,
+  message,
+  icon: icon$3,
+  details
+};
+const ElmUnsupportedBlock = component$((props) => {
+  return /* @__PURE__ */ jsxs("div", {
+    class: styles$q.unsupported,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: styles$q.message,
+        children: [
+          /* @__PURE__ */ jsx("svg", {
+            viewBox: "0 0 24 24",
+            width: "1.25rem",
+            height: "1.25rem",
+            class: styles$q.icon,
+            children: /* @__PURE__ */ jsx("path", {
+              d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+            })
+          }),
+          /* @__PURE__ */ jsx(ElmInlineText, {
+            text: "UNSUPPORTED BLOCK",
+            color: "#868e9c"
+          })
+        ]
+      }),
+      props.details && /* @__PURE__ */ jsx("div", {
+        class: styles$q.details,
+        children: /* @__PURE__ */ jsx(ElmInlineText, {
+          text: props.details,
+          color: "#868e9c"
+        })
+      })
+    ]
+  });
+});
 const button = "_button_1ykfy_1";
 const normal = "_normal_1ykfy_32";
 const primary = "_primary_1ykfy_41";
@@ -2994,6 +3036,11 @@ const ElmJarkup = component$((props) => {
             src: component.props.src,
             alt: component.props.alt
           }, key);
+        case "Fragment": {
+          return /* @__PURE__ */ jsx(Fragment, {
+            children: render(component.slots.default)
+          });
+        }
         case "Heading":
           return /* @__PURE__ */ jsx(ElmHeading, {
             level: component.props.level,
@@ -3119,16 +3166,16 @@ const ElmJarkup = component$((props) => {
             },
             children: render(component.slots.default)
           }, key);
+        case "Unsupported": {
+          if (props.skipUnsupportedComponentWarning) return null;
+          return /* @__PURE__ */ jsx(ElmUnsupportedBlock, {
+            details: `Unsupported component type: ${component.props?.details || component.type}`
+          }, key);
+        }
         default:
-          return /* @__PURE__ */ jsxs("div", {
-            style: {
-              color: "red",
-              border: "1px solid red"
-            },
-            children: [
-              "Unsupported component type: ",
-              component.type
-            ]
+          if (props.skipUnsupportedComponentWarning) return null;
+          return /* @__PURE__ */ jsx(ElmUnsupportedBlock, {
+            details: `Unsupported component type: ${component.type}`
           }, key);
       }
     });
@@ -3426,6 +3473,7 @@ export {
   ElmTextField,
   ElmToggle,
   ElmToggleTheme,
+  ElmUnsupportedBlock,
   ElmValidation,
   useDelayedSignal,
   useElmethisTheme,

package/lib/style.css

@@ -504,6 +504,31 @@
 }
 [data-theme=dark] ._rectangle-wave_hej9g_17 {
   border-color: rgba(255, 255, 255, 0.7);
+}._unsupported_1vja3_1 {
+  box-sizing: border-box;
+  padding: 4rem;
+  margin-block: var(--margin-block, 2rem) 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  border: 1px dashed rgba(134, 142, 156, 0.5);
+}
+
+._message_1vja3_13 {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+._icon_1vja3_20 {
+  fill: #868e9c;
+}
+
+._details_1vja3_24 {
+  opacity: 0.75;
 }._button_1ykfy_1 {
   all: unset;
   position: relative;

package/lib-types/components/fallback/elm-unsupported-block.d.ts

@@ -0,0 +1,4 @@
+export interface ElmUnsupportedBlockProps {
+    details?: string;
+}
+export declare const ElmUnsupportedBlock: import("@builder.io/qwik").Component<ElmUnsupportedBlockProps>;

package/lib-types/components/fallback/elm-unsupported-block.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmUnsupportedBlock } from "./elm-unsupported-block";
+declare const meta: Meta<typeof ElmUnsupportedBlock>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/lib-types/components/others/elm-jarkup.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from "@builder.io/qwik";
 import type { Component } from "jarkup-ts";
 export interface ElmJarkupProps {
     jsonComponents: Component[];
+    skipUnsupportedComponentWarning?: boolean;
     style?: CSSProperties;
 }
 export declare const ElmJarkup: import("@builder.io/qwik").Component<ElmJarkupProps>;

package/lib-types/index.d.ts

@@ -6,6 +6,7 @@ export { ElmTabs, type ElmTabsProps } from "./components/containments/elm-tabs";
 export { ElmToggle, type ElmToggleProps, } from "./components/containments/elm-toggle";
 export { ElmBlockFallback, type ElmBlockFallbackProps, } from "./components/fallback/elm-block-fallback";
 export { ElmRectangleWave, type ElmRectangleWaveProps, } from "./components/fallback/elm-rectangle-wave";
+export { ElmUnsupportedBlock, type ElmUnsupportedBlockProps, } from "./components/fallback/elm-unsupported-block";
 export { ElmButton, type ElmButtonProps } from "./components/form/elm-button";
 export { ElmCheckbox, type ElmCheckboxProps, } from "./components/form/elm-checkbox";
 export { ElmSelect, type ElmSelectOption, type ElmSelectProps, } from "./components/form/elm-select";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,7 @@
     "eslint": "10.1.0",
     "eslint-plugin-qwik": "1.19.2",
     "globals": "17.4.0",
-    "jarkup-ts": "^0.11.0",
+    "jarkup-ts": "^0.12.0",
     "np": "^11.0.2",
     "prettier": "3.8.1",
     "sass": "^1.98.0",
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "katex": "^0.16.42",
+    "katex": "^0.16.43",
     "lodash-es": "^4.17.23",
     "marked": "^17.0.5",
     "polished": "^4.3.1",