@elmethis/qwik 0.0.25 → 0.0.27

package/lib/index.qwik.mjs

@@ -774,7 +774,7 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     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) {
@@ -790,9 +790,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
   });
   return /* @__PURE__ */ jsxs("figure", {
     class: styles$z["code-block"],
-    style: {
-      margin
-    },
+    style,
     children: [
       /* @__PURE__ */ jsx("span", {
         class: styles$z["language-icon"],
@@ -867,31 +865,31 @@ 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 toggle = "_toggle_pbyu8_1";
+const summary = "_summary_pbyu8_14";
+const content$2 = "_content_pbyu8_60";
+const footer = "_footer_pbyu8_80";
 const styles$s = {
   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;
@@ -904,6 +902,7 @@ const ElmToggle = component$(({ summary: summary2 }) => {
         [styles$s["toggle-closed"]]: !isOpen.value
       }
     ],
+    style,
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
@@ -2174,17 +2173,17 @@ const ElmToggleTheme = component$(({ size = "2rem" }) => {
     })
   });
 });
-const image$1 = "_image_5s2ag_11";
-const fallback = "_fallback_5s2ag_33";
+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 +2198,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 +2220,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 +2262,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 +2292,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 +2322,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,9 +2338,18 @@ 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;
+  });
+  const hiddenStyle = {
+    visibility: "hidden",
+    width: "0"
+  };
   return /* @__PURE__ */ jsx("div", {
     class: styles$f.bookmark,
+    style,
     children: /* @__PURE__ */ jsxs("a", {
       class: styles$f.container,
       href: url,
@@ -2347,7 +2359,9 @@ const ElmBookmark = component$(({ url, image: image2, title: title2, description
         /* @__PURE__ */ jsx("img", {
           class: styles$f.image,
           src: image2,
-          alt: "OGP Image"
+          alt: "OGP Image",
+          onError$: handleImageOnError,
+          style: isError.value || image2 == null ? hiddenStyle : {}
         }),
         /* @__PURE__ */ jsxs("div", {
           class: styles$f.content,
@@ -2501,21 +2515,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,
@@ -2542,9 +2557,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,
@@ -2572,11 +2587,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", {
@@ -2599,16 +2615,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";
@@ -2633,15 +2647,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,
@@ -2658,7 +2672,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: [
@@ -2667,7 +2681,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", {
@@ -2690,11 +2705,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: [
@@ -2702,6 +2717,7 @@ const ElmList = component$(({ listStyle = "unordered" }) => {
         styles$7["elmethis-list-common"],
         styles$7["elmethis-numbered-list"]
       ],
+      style,
       children: /* @__PURE__ */ jsx(Slot, {})
     });
   } else {
@@ -2715,7 +2731,7 @@ const ElmList = component$(({ listStyle = "unordered" }) => {
     });
   }
 });
-const paragraph = "_paragraph_jz10s_1";
+const paragraph = "_paragraph_1klqe_1";
 const styles$6 = {
   paragraph
 };
@@ -2765,7 +2781,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", {
@@ -2774,7 +2790,7 @@ const ElmTable = component$((props) => {
       textStyles.text
     ],
     style: {
-      "--margin-block": margin
+      ...style
     },
     children: [
       caption2 && /* @__PURE__ */ jsx("caption", {
@@ -2872,10 +2888,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) => {
@@ -3041,7 +3056,10 @@ const ElmJarkup = component$((props) => {
     });
   };
   return /* @__PURE__ */ jsx("div", {
-    class: styles$1["jarkup-body"],
+    style: {
+      "--margin-block": "3rem",
+      ...props.style
+    },
     children: render(props.jsonComponents)
   });
 });