@elmethis/react 0.3.7 → 0.3.8

package/lib/index.react.mjs

@@ -1,22 +1,24 @@
-import { t as e } from "./ElmMermaid-BFqvHKdQ.js";
+import { t as e } from "./ElmMermaid-CUeT_XM9.js";
 import t, { Suspense as n, createContext as r, lazy as i, useCallback as a, useContext as o, useEffect as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { darken as h, getLuminance as g, opacify as _, parseToHsl as v, parseToRgb as ee, rgbToColorString as te } from "polished";
-import { mdiAccount as y, mdiAlert as ne, mdiAlertCircle as re, mdiAlertOctagram as ie, mdiApplicationOutline as ae, mdiArchive as oe, mdiArrowDownDropCircleOutline as se, mdiArrowLeft as ce, mdiBackspaceOutline as le, mdiCalendarMonth as ue, mdiCalendarRefresh as de, mdiCheck as fe, mdiCheckCircle as pe, mdiCheckCircleOutline as me, mdiChevronRight as he, mdiChevronUp as ge, mdiClipboardCheckMultipleOutline as _e, mdiClipboardMultipleOutline as ve, mdiCloseCircleOutline as ye, mdiConsoleLine as be, mdiDownload as xe, mdiEarth as Se, mdiEmail as Ce, mdiEyeOffOutline as we, mdiEyeOutline as Te, mdiFileOutline as Ee, mdiFolderOpen as De, mdiFormatQuoteClose as Oe, mdiFormatQuoteOpen as ke, mdiHome as Ae, mdiInformation as je, mdiKey as Me, mdiKeyboardReturn as Ne, mdiLightbulbOn as Pe, mdiLinkVariant as Fe, mdiLoading as Ie, mdiLock as Le, mdiLoginVariant as Re, mdiLogoutVariant as ze, mdiMagnify as Be, mdiMenuDown as Ve, mdiMessageImageOutline as He, mdiPen as Ue, mdiPlus as We, mdiReload as Ge, mdiShieldAlert as Ke, mdiTable as qe, mdiTag as Je, mdiText as Ye } from "@mdi/js";
-import { createPortal as Xe } from "react-dom";
-import { kebabCase as Ze } from "lodash-es";
-import { marked as Qe } from "marked";
-var $e = { icon: "_icon_k0isg_1" }, b = ({ src: e, alt: t }) => {
-	let [n, r] = d(e);
+import { darken as h, getLuminance as g, opacify as _, parseToHsl as v, parseToRgb as y, rgbToColorString as ee } from "polished";
+import { mdiAccount as b, mdiAlert as x, mdiAlertCircle as te, mdiAlertOctagram as ne, mdiApplicationOutline as re, mdiArchive as ie, mdiArrowDownDropCircleOutline as ae, mdiArrowLeft as oe, mdiBackspaceOutline as se, mdiCalendarMonth as ce, mdiCalendarRefresh as le, mdiCheck as ue, mdiCheckCircle as de, mdiCheckCircleOutline as fe, mdiChevronRight as pe, mdiClipboardCheckMultipleOutline as me, mdiClipboardMultipleOutline as he, mdiCloseCircleOutline as ge, mdiConsoleLine as _e, mdiDownload as ve, mdiEarth as ye, mdiEmail as be, mdiEyeOffOutline as xe, mdiEyeOutline as Se, mdiFileOutline as Ce, mdiFolderOpen as we, mdiFormatQuoteClose as Te, mdiFormatQuoteOpen as Ee, mdiHome as De, mdiInformation as Oe, mdiKey as ke, mdiKeyboardReturn as Ae, mdiLightbulbOn as je, mdiLinkVariant as Me, mdiLoading as Ne, mdiLock as Pe, mdiLoginVariant as Fe, mdiLogoutVariant as Ie, mdiMagnify as Le, mdiMenuDown as Re, mdiMessageImageOutline as ze, mdiPen as Be, mdiPlus as Ve, mdiReload as He, mdiShieldAlert as Ue, mdiTable as We, mdiTag as Ge, mdiText as Ke } from "@mdi/js";
+import { createPortal as qe } from "react-dom";
+import { useControllableState as Je } from "@radix-ui/react-use-controllable-state";
+import S from "clsx";
+import { kebabCase as Ye } from "lodash-es";
+import { marked as Xe } from "marked";
+var Ze = { icon: "_icon_k0isg_1" }, C = ({ src: e, alt: t, className: n }) => {
+	let [r, i] = d(e);
 	return /* @__PURE__ */ p("img", {
-		className: $e.icon,
-		src: n,
+		className: [Ze.icon, n].filter(Boolean).join(" "),
+		src: r,
 		alt: t,
 		onError: () => {
-			r("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"gray\" d=\"M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2\"/></svg>");
+			i("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"gray\" d=\"M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2\"/></svg>");
 		}
 	});
-}, et = { icon: "_icon_18sdb_1" }, tt = {
+}, Qe = { icon: "_icon_18sdb_1" }, $e = {
 	rust: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%20fill='%23a84f33'%20width='128'%20height='128'%20%3e%3cpath%20d='M62.96.242c-.232.135-1.203%201.528-2.16%203.097c-2.4%203.94-2.426%203.942-5.65.55c-2.098-2.208-2.605-2.612-3.28-2.607c-.44.002-.995.152-1.235.332s-.916%201.612-1.504%203.183c-1.346%203.6-1.41%203.715-2.156%203.86c-.46.086-1.343-.407-3.463-1.929c-1.565-1.125-3.1-2.045-3.411-2.045c-1.291%200-1.655.706-2.27%204.4c-.78%204.697-.754%204.681-4.988%202.758c-1.71-.776-3.33-1.41-3.603-1.41s-.792.293-1.15.652c-.652.652-.653.655-.475%204.246l.178%203.595l-.68.364c-.602.322-1.017.283-3.684-.348c-3.48-.822-4.216-.8-4.92.15l-.516.693l.692%202.964c.38%201.63.745%203.2.814%203.487c.067.287-.05.746-.26%201.02c-.348.448-.717.49-3.94.44c-5.452-.086-5.761.382-3.51%205.3c.718%201.56%201.305%202.98%201.305%203.15c0%20.898-.717%201.224-3.794%201.727c-1.722.28-3.218.51-3.326.51c-.107%200-.43.235-.717.522c-.937.936-.671%201.816%201.453%204.814c2.646%203.735%202.642%203.75-1.73%205.421c-4.971%201.902-5.072%202.37-1.287%205.96c3.525%203.344%203.53%203.295-.461%205.804C.208%2062.8.162%2062.846.085%2063.876c-.093%201.253-.071%201.275%203.538%203.48c3.57%202.18%203.57%202.246.067%205.56C-.078%2076.48.038%2077%205.013%2078.877c4.347%201.64%204.353%201.66%201.702%205.394c-1.502%202.117-1.981%203-1.981%203.653c0%201.223.637%201.535%204.44%202.174c3.206.54%203.92.857%203.92%201.741c0%20.182-.588%201.612-1.307%203.177c-2.236%204.87-1.981%205.275%203.31%205.275c4.93%200%204.799-.15%203.737%204.294c-.8%203.35-.813%203.992-.088%204.715c.554.556%201.6.494%204.87-.289c2.499-.596%202.937-.637%203.516-.328l.66.354l-.177%203.594c-.178%203.593-.177%203.595.475%204.248c.358.36.884.652%201.165.652s1.903-.63%203.604-1.404c4.22-1.916%204.194-1.932%204.973%202.75c.617%203.711.977%204.4%202.294%204.4c.327%200%201.83-.88%203.34-1.958c2.654-1.893%203.342-2.19%204.049-1.74c.182.115.89%201.67%201.572%203.455c1.003%202.625%201.37%203.31%201.929%203.576c1.062.51%201.72.1%204.218-2.62c3.016-3.286%203.14-3.27%205.602.72c2.72%204.406%203.424%204.396%206.212-.089c2.402-3.864%202.374-3.862%205.621-.47c2.157%202.25%202.616%202.61%203.343%202.61c.464%200%201.019-.175%201.23-.388c.214-.213.92-1.786%201.568-3.496c.649-1.71%201.321-3.2%201.495-3.31c.687-.436%201.398-.13%204.048%201.752c1.56%201.108%203.028%201.96%203.377%201.96c1.296%200%201.764-.92%202.302-4.535c.46-3.082.554-3.378%201.16-3.685c.596-.302.954-.2%203.75%201.07c1.701.77%203.323%201.402%203.604%201.402s.816-.302%201.184-.672l.672-.67l-.184-3.448c-.177-3.29-.16-3.468.364-3.943c.54-.488.596-.486%203.615.204c3.656.835%204.338.857%205.025.17c.671-.67.664-.818-.254-4.69c-1.03-4.346-1.168-4.19%203.78-4.19c3.374%200%203.75-.049%204.18-.523c.718-.793.547-1.702-.896-4.779c-.729-1.55-1.32-2.96-1.315-3.135c.024-.914.743-1.227%204.065-1.767c2.033-.329%203.553-.71%203.829-.96c.923-.833.584-1.918-1.523-4.873c-2.642-3.703-2.63-3.738%201.599-5.297c5.064-1.866%205.209-2.488%201.419-6.09c-3.51-3.335-3.512-3.317.333-5.677c4.648-2.853%204.655-3.496.082-6.335c-3.933-2.44-3.93-2.406-.405-5.753c3.78-3.593%203.678-4.063-1.295-5.965c-4.388-1.679-4.402-1.72-1.735-5.38c1.588-2.18%201.982-2.903%201.982-3.65c0-1.306-.586-1.598-4.436-2.22c-3.216-.52-3.924-.835-3.924-1.75c0-.174.588-1.574%201.307-3.113c1.406-3.013%201.604-4.22.808-4.94c-.428-.387-1-.443-4.067-.392c-3.208.054-3.618.008-4.063-.439c-.486-.488-.48-.557.278-3.725c.931-3.88.935-3.975.17-4.694c-.777-.73-1.262-.718-4.826.121c-2.597.612-3.027.653-3.617.337l-.67-.36l.185-3.582l.186-3.58l-.67-.67c-.369-.37-.891-.67-1.163-.67c-.27%200-1.884.64-3.583%201.421c-2.838%201.306-3.143%201.393-3.757%201.072c-.612-.32-.714-.637-1.237-3.829c-.603-3.693-.977-4.412-2.288-4.412c-.311%200-1.853.925-3.426%202.055c-2.584%201.856-2.93%202.032-3.574%201.807c-.533-.186-.843-.59-1.221-1.599c-.28-.742-.817-2.172-1.194-3.177c-.762-2.028-1.187-2.482-2.328-2.482c-.637%200-1.213.458-3.28%202.604c-3.25%203.375-3.261%203.374-5.65-.545C66.073%201.78%2065.075.382%2064.81.24c-.597-.32-1.3-.32-1.85.002m2.96%2011.798c2.83%202.014%201.326%206.75-2.144%206.75c-3.368%200-5.064-4.057-2.66-6.36c1.358-1.3%203.304-1.459%204.805-.39m-3.558%2012.507c1.855.705%202.616.282%206.852-3.8l3.182-3.07l1.347.18c4.225.56%2012.627%204.25%2017.455%207.666c4.436%203.14%2010.332%209.534%2012.845%2013.93l.537.942l-2.38%205.364c-1.31%202.95-2.382%205.673-2.382%206.053c0%20.878.576%202.267%201.13%202.726c.234.195%202.457%201.265%204.939%202.378l4.51%202.025l.178%201.148c.23%201.495.26%205.167.052%206.21l-.163.816h-2.575c-2.987%200-2.756-.267-2.918%203.396c-.118%202.656-.76%204.124-2.22%205.075c-2.377%201.551-6.304%201.27-7.97-.57c-.255-.284-.752-1.705-1.105-3.16c-1.03-4.254-2.413-6.64-5.193-8.965c-.878-.733-1.595-1.418-1.595-1.522c0-.102.965-.915%202.145-1.803c4.298-3.24%206.77-7.012%207.04-10.747c.519-7.126-5.158-13.767-13.602-15.92c-2.002-.51-2.857-.526-27.624-.526c-14.057%200-25.56-.092-25.56-.204c0-.263%203.125-3.295%204.965-4.816c5.054-4.178%2011.618-7.465%2018.417-9.22l2.35-.61l3.34%203.387c1.839%201.863%203.64%203.5%204.003%203.637M20.3%2046.34c1.539%201.008%202.17%203.54%201.26%205.062c-1.405%202.356-4.966%202.455-6.373.178c-2.046-3.309%201.895-7.349%205.113-5.24m90.672.13c4.026%202.454.906%208.493-3.404%206.586c-2.877-1.273-2.97-5.206-.155-6.64c1.174-.6%202.523-.579%203.56.053M32.163%2061.5v15.02h-13.28l-.526-2.285c-1.036-4.5-1.472-9.156-1.211-12.969l.182-2.679l4.565-2.047c2.864-1.283%204.706-2.262%204.943-2.625c1.038-1.584.94-2.715-.518-5.933l-.68-1.502h6.523V61.5M70.39%2047.132c2.843.74%204.345%202.245%204.349%204.355c.002%201.55-.765%202.52-2.67%203.38c-1.348.61-1.562.625-10.063.708l-8.686.084v-8.92h7.782c6.078%200%208.112.086%209.288.393m-2.934%2021.554c1.41.392%203.076%201.616%203.93%202.888c.898%201.337%201.423%203.076%202.667%208.836c1.05%204.87%201.727%206.46%203.62%208.532c2.345%202.566%201.8%202.466%2013.514%202.466c5.61%200%2010.198.09%2010.198.2c0%20.197-3.863%204.764-4.03%204.764c-.048%200-2.066-.422-4.484-.939c-6.829-1.458-7.075-1.287-8.642%206.032l-1.008%204.702l-.91.448c-1.518.75-6.453%202.292-9.01%202.82c-4.228.87-8.828%201.162-12.871.821c-6.893-.585-16.02-3.259-16.377-4.8c-.075-.327-.535-2.443-1.018-4.704c-.485-2.26-1.074-4.404-1.31-4.764c-1.13-1.724-2.318-1.83-7.547-.674c-1.98.44-3.708.796-3.84.796c-.248%200-3.923-4.249-3.923-4.535c0-.09%208.728-.194%2019.396-.23l19.395-.066l.07-6.89c.05-4.865-.018-6.997-.23-7.25c-.234-.284-1.485-.358-6.011-.358H53.32v-8.36l6.597.001c3.626.002%207.02.12%207.539.264M37.57%20100.02c3.084%201.88%201.605%206.804-2.043%206.8c-3.74%200-5.127-4.88-1.94-6.826c1.055-.643%202.908-.63%203.983.026m56.48.206c1.512%201.108%202.015%203.413%201.079%204.95c-2.46%204.034-8.612.827-6.557-3.419c1.01-2.085%203.695-2.837%205.478-1.53'%20/%3e%3c/svg%3e",
 	javascript: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%20viewBox='0%200%20128%20128'%3e%3cpath%20fill='%23f0db4f'%20d='M1.408%201.408h125.184v125.185H1.408z'%20/%3e%3cpath%20fill='%23323330'%20d='M116.347%2096.736c-.917-5.711-4.641-10.508-15.672-14.981c-3.832-1.761-8.104-3.022-9.377-5.926c-.452-1.69-.512-2.642-.226-3.665c.821-3.32%204.784-4.355%207.925-3.403c2.023.678%203.938%202.237%205.093%204.724c5.402-3.498%205.391-3.475%209.163-5.879c-1.381-2.141-2.118-3.129-3.022-4.045c-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902%202.748-8.877%205.235c-5.926%206.724-4.236%2018.492%202.975%2023.335c7.104%205.332%2017.54%206.545%2018.873%2011.531c1.297%206.104-4.486%208.08-10.234%207.378c-4.236-.881-6.592-3.034-9.139-6.949c-4.688%202.713-4.688%202.713-9.508%205.485c1.143%202.499%202.344%203.63%204.26%205.795c9.068%209.198%2031.76%208.746%2035.83-5.176c.165-.478%201.261-3.666.38-8.581M69.462%2058.943H57.753l-.048%2030.272c0%206.438.333%2012.34-.714%2014.149c-1.713%203.558-6.152%203.117-8.175%202.427c-2.059-1.012-3.106-2.451-4.319-4.485c-.333-.584-.583-1.036-.667-1.071l-9.52%205.83c1.583%203.249%203.915%206.069%206.902%207.901c4.462%202.678%2010.459%203.499%2016.731%202.059c4.082-1.189%207.604-3.652%209.448-7.401c2.666-4.915%202.094-10.864%202.07-17.444c.06-10.735.001-21.468.001-32.237'%20/%3e%3c/svg%3e",
 	typescript: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%20viewBox='0%200%20128%20128'%3e%3cpath%20fill='%23fff'%20d='M22.67%2047h99.67v73.67H22.67z'%20/%3e%3cpath%20fill='%23007acc'%20d='M1.5%2063.91v62.5h125v-125H1.5zm100.73-5a15.56%2015.56%200%200%201%207.82%204.5a20.6%2020.6%200%200%201%203%204c0%20.16-5.4%203.81-8.69%205.85c-.12.08-.6-.44-1.13-1.23a7.09%207.09%200%200%200-5.87-3.53c-3.79-.26-6.23%201.73-6.21%205a4.6%204.6%200%200%200%20.54%202.34c.83%201.73%202.38%202.76%207.24%204.86c8.95%203.85%2012.78%206.39%2015.16%2010c2.66%204%203.25%2010.46%201.45%2015.24c-2%205.2-6.9%208.73-13.83%209.9a38.3%2038.3%200%200%201-9.52-.1a23%2023%200%200%201-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9%209%200%200%201%201.15-.73L82%20101l3.59-2.08l.75%201.11a16.8%2016.8%200%200%200%204.74%204.54c4%202.1%209.46%201.81%2012.16-.62a5.43%205.43%200%200%200%20.69-6.92c-1-1.39-3-2.56-8.59-5c-6.45-2.78-9.23-4.5-11.77-7.24a16.5%2016.5%200%200%201-3.43-6.25a25%2025%200%200%201-.22-8c1.33-6.23%206-10.58%2012.82-11.87a31.7%2031.7%200%200%201%209.49.26zm-29.34%205.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49%2049%200%200%201%20.12-5.17C29.08%2059%2039%2059%2051%2059h21.83z'%20/%3e%3c/svg%3e",
@@ -36,9 +38,9 @@ var $e = { icon: "_icon_k0isg_1" }, b = ({ src: e, alt: t }) => {
 	cpp: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%20128%20128'%3e%3cpath%20fill='%2300599c'%20d='M118.766%2095.82c.89-1.543%201.441-3.28%201.441-4.843V36.78c0-1.558-.55-3.297-1.441-4.84l-55.32%2031.94Zm0%200'%20/%3e%3cpath%20fill='%23004482'%20d='m68.36%20126.586l46.933-27.094c1.352-.781%202.582-2.129%203.473-3.672l-55.32-31.94L8.12%2095.82c.89%201.543%202.121%202.89%203.473%203.672l46.933%2027.094c2.703%201.562%207.13%201.562%209.832%200Zm0%200'%20/%3e%3cpath%20fill='%23659ad2'%20d='M118.766%2031.941c-.891-1.546-2.121-2.894-3.473-3.671L68.359%201.172c-2.703-1.563-7.129-1.563-9.832%200L11.594%2028.27C8.89%2029.828%206.68%2033.66%206.68%2036.78v54.196c0%201.562.55%203.3%201.441%204.843L63.445%2063.88Zm0%200'%20/%3e%3cpath%20fill='%23fff'%20d='M63.445%2026.035c-20.867%200-37.843%2016.977-37.843%2037.844s16.976%2037.844%2037.843%2037.844c13.465%200%2026.024-7.247%2032.77-18.91L79.84%2073.335c-3.38%205.84-9.66%209.465-16.395%209.465c-10.433%200-18.922-8.488-18.922-18.922s8.49-18.922%2018.922-18.922c6.73%200%2013.017%203.629%2016.39%209.465l16.38-9.477c-6.75-11.664-19.305-18.91-32.77-18.91zM92.88%2057.57v4.207h-4.207v4.203h4.207v4.207h4.203V65.98h4.203v-4.203h-4.203V57.57zm15.766%200v4.207h-4.204v4.203h4.204v4.207h4.207V65.98h4.203v-4.203h-4.203V57.57z'%20/%3e%3c/svg%3e",
 	c: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%20128%20128'%3e%3cpath%20fill='%23659ad3'%20d='M115.4%2030.7L67.1%202.9c-.8-.5-1.9-.7-3.1-.7s-2.3.3-3.1.7l-48%2027.9c-1.7%201-2.9%203.5-2.9%205.4v55.7c0%201.1.2%202.4%201%203.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7'%20/%3e%3cpath%20fill='%2303599c'%20d='M10.7%2095.3c.5.8%201.2%201.5%201.9%201.9l48.2%2027.9c.8.5%201.9.7%203.1.7s2.3-.3%203.1-.7l48-27.9c1.7-1%202.9-3.5%202.9-5.4V36.1c0-.9-.1-1.9-.6-2.8z'%20/%3e%3cpath%20fill='%23fff'%20d='M85.3%2076.1C81.1%2083.5%2073.1%2088.5%2064%2088.5c-13.5%200-24.5-11-24.5-24.5s11-24.5%2024.5-24.5c9.1%200%2017.1%205%2021.3%2012.5l13-7.5c-6.8-11.9-19.6-20-34.3-20c-21.8%200-39.5%2017.7-39.5%2039.5s17.7%2039.5%2039.5%2039.5c14.6%200%2027.4-8%2034.2-19.8z'%20/%3e%3c/svg%3e",
 	file: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23788191'%20d='m12.89%203l1.96.4L11.11%2021l-1.96-.4zm6.7%209L16%208.41V5.58L22.42%2012L16%2018.41v-2.83zM1.58%2012L8%205.58v2.83L4.41%2012L8%2015.58v2.83z'%20/%3e%3c/svg%3e"
-}, nt = (e) => /* @__PURE__ */ p("img", {
-	className: et.icon,
-	src: tt[e.language] || "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23788191'%20d='m12.89%203l1.96.4L11.11%2021l-1.96-.4zm6.7%209L16%208.41V5.58L22.42%2012L16%2018.41v-2.83zM1.58%2012L8%205.58v2.83L4.41%2012L8%2015.58v2.83z'%20/%3e%3c/svg%3e",
+}, et = (e) => /* @__PURE__ */ p("img", {
+	className: [Qe.icon, e.className].filter(Boolean).join(" "),
+	src: $e[e.language] || "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23788191'%20d='m12.89%203l1.96.4L11.11%2021l-1.96-.4zm6.7%209L16%208.41V5.58L22.42%2012L16%2018.41v-2.83zM1.58%2012L8%205.58v2.83L4.41%2012L8%2015.58v2.83z'%20/%3e%3c/svg%3e",
 	width: e.size,
 	height: e.size,
 	alt: e.language,
@@ -47,7 +49,7 @@ var $e = { icon: "_icon_k0isg_1" }, b = ({ src: e, alt: t }) => {
 		height: e.size,
 		...e.style
 	}
-}), rt = [
+}), tt = [
 	"rust",
 	"javascript",
 	"typescript",
@@ -67,10 +69,11 @@ var $e = { icon: "_icon_k0isg_1" }, b = ({ src: e, alt: t }) => {
 	"cpp",
 	"c",
 	"file"
-], it = {
+], nt = {
 	icon: "_icon_g71ox_1",
 	"icon-theme-color": "_icon-theme-color_g71ox_10"
-}, x = (e) => /* @__PURE__ */ p("div", {
+}, w = (e) => /* @__PURE__ */ p("div", {
+	className: e.className,
 	style: e.style,
 	children: /* @__PURE__ */ p("svg", {
 		width: e.size || "1.25rem",
@@ -84,19 +87,19 @@ var $e = { icon: "_icon_k0isg_1" }, b = ({ src: e, alt: t }) => {
 				"--elmethis-scoped-color-dark": e.colorDark ?? e.color,
 				...e.style
 			},
-			className: e.useThemeColor ? it["icon-theme-color"] : it.icon,
+			className: e.useThemeColor ? nt["icon-theme-color"] : nt.icon,
 			fill: "currentColor",
 			d: e.d
 		})
 	})
-}), at = {
+}), rt = {
 	wrapper: "_wrapper_1q92c_15",
 	dot: "_dot_1q92c_22",
 	bounce: "_bounce_1q92c_1"
-}, S = (e) => {
+}, T = (e) => {
 	let { color: t, size: n = "64px", style: r } = e;
 	return /* @__PURE__ */ p("div", {
-		className: at.wrapper,
+		className: [rt.wrapper, e.className].filter(Boolean).join(" "),
 		style: {
 			width: n,
 			height: n,
@@ -107,51 +110,51 @@ var $e = { icon: "_icon_k0isg_1" }, b = ({ src: e, alt: t }) => {
 			2,
 			3
 		].map((e) => /* @__PURE__ */ p("div", {
-			className: at.dot,
+			className: rt.dot,
 			"aria-hidden": !0,
 			style: t ? { backgroundColor: t } : void 0
 		}, e))
 	});
-}, ot = {
+}, it = {
 	wrapper: "_wrapper_1yu3x_19",
 	square: "_square_1yu3x_28",
 	appear: "_appear_1yu3x_1"
-}, st = 1200, ct = (e) => {
-	let { size: t = "3rem", dimensions: n = 4, style: r } = e, i = st / (n * 3), a = Array.from({ length: n });
+}, at = 1200, ot = (e) => {
+	let { size: t = "3rem", dimensions: n = 4, style: r } = e, i = at / (n * 3), a = Array.from({ length: n });
 	return /* @__PURE__ */ p("div", {
-		className: ot.wrapper,
+		className: [it.wrapper, e.className].filter(Boolean).join(" "),
 		style: {
 			"--size": t,
 			"--dimensions": n,
-			"--duration": `${st}ms`,
+			"--duration": `${at}ms`,
 			...r
 		},
 		children: a.map((e, t) => a.map((e, n) => /* @__PURE__ */ p("div", {
-			className: ot.square,
+			className: it.square,
 			style: { "--delay": `${i * (t + n)}ms` }
 		}, `${t}-${n}`)))
 	});
-}, lt = { icon: "_icon_x4u0f_1" }, ut = "elmethis-theme";
-function dt() {
+}, st = { icon: "_icon_x4u0f_1" }, ct = "elmethis-theme";
+function lt() {
 	if (typeof document < "u") {
 		let e = document.documentElement.getAttribute("data-theme");
 		if (e != null) return e === "dark";
 	}
 	if (typeof localStorage < "u") {
-		let e = localStorage.getItem(ut);
+		let e = localStorage.getItem(ct);
 		if (e != null) return e === "dark";
 	}
 	return !1;
 }
-function ft() {
-	let [e, t] = d(dt), n = a(() => {
+function ut() {
+	let [e, t] = d(lt), n = a(() => {
 		t((e) => !e);
 	}, []);
 	return s(() => {
 		if (typeof document < "u") {
 			document.documentElement.setAttribute("data-theme", e ? "dark" : "light");
 			let t = document.querySelector("body");
-			t != null && (t.style.colorScheme = e ? "dark" : "light"), typeof localStorage < "u" && localStorage.setItem(ut, e ? "dark" : "light");
+			t != null && (t.style.colorScheme = e ? "dark" : "light"), typeof localStorage < "u" && localStorage.setItem(ct, e ? "dark" : "light");
 		}
 	}, [e]), {
 		isDarkTheme: e,
@@ -160,16 +163,16 @@ function ft() {
 }
 //#endregion
 //#region src/components/icon/ElmToggleTheme.tsx
-var pt = (e) => {
-	let { size: t = "2rem", style: n } = e, { isDarkTheme: r, toggleTheme: i } = ft();
-	return r ? /* @__PURE__ */ m("svg", {
+var dt = (e) => {
+	let { size: t = "2rem", style: n, className: r } = e, { isDarkTheme: i, toggleTheme: a } = ut();
+	return i ? /* @__PURE__ */ m("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: t,
 		height: t,
 		viewBox: "0 0 24 24",
-		className: lt.icon,
+		className: [st.icon, r].filter(Boolean).join(" "),
 		style: n,
-		onClick: i,
+		onClick: a,
 		children: [
 			/* @__PURE__ */ m("path", {
 				fillOpacity: "0",
@@ -396,9 +399,9 @@ var pt = (e) => {
 		width: t,
 		height: t,
 		viewBox: "0 0 24 24",
-		className: lt.icon,
+		className: st.icon,
 		style: n,
-		onClick: i,
+		onClick: a,
 		children: [
 			/* @__PURE__ */ m("g", {
 				fill: "none",
@@ -589,19 +592,20 @@ var pt = (e) => {
 			})
 		]
 	});
-}, C = {
+}, E = {
 	arrow: "_arrow_kn879_19",
 	loading: "_loading_kn879_49",
 	normal: "_normal_kn879_55",
 	pending: "_pending_kn879_64"
-}, mt = (e) => {
+}, ft = (e) => {
 	let { direction: t = "right", loading: n = !1, pending: r = !1, size: i = "2rem", style: a } = e, o = t === "up" ? "rotate(270deg)" : t === "down" ? "rotate(90deg)" : t === "left" ? "rotate(180deg)" : "rotate(0deg)";
 	return /* @__PURE__ */ p("div", {
 		className: [
-			C.arrow,
-			!n && !r ? C.normal : void 0,
-			n ? C.loading : void 0,
-			!n && r ? C.pending : void 0
+			E.arrow,
+			!n && !r ? E.normal : void 0,
+			n ? E.loading : void 0,
+			!n && r ? E.pending : void 0,
+			e.className
 		].filter(Boolean).join(" "),
 		style: {
 			"--size": i,
@@ -609,26 +613,26 @@ var pt = (e) => {
 			...a
 		}
 	});
-}, ht = {
+}, pt = {
 	wrapper: "_wrapper_1c6r3_1",
 	favicon: "_favicon_1c6r3_24",
 	text: "_text_1c6r3_29"
-}, gt = {
+}, mt = {
 	text: "_text_1nnze_1",
 	link: "_link_1nnze_19"
-}, w = (e) => {
+}, D = (e) => {
 	let t = (e) => {
 		let t = e.children;
 		return e.kbd && (t = /* @__PURE__ */ p("kbd", { children: t })), e.code && (t = /* @__PURE__ */ p("code", { children: t })), e.strikethrough && (t = /* @__PURE__ */ p("del", { children: t })), e.underline && (t = /* @__PURE__ */ p("ins", { children: t })), e.italic && (t = /* @__PURE__ */ p("em", { children: t })), e.bold && (t = /* @__PURE__ */ p("strong", { children: t })), e.ruby && (t = /* @__PURE__ */ m("ruby", { children: [t, /* @__PURE__ */ p("rt", { children: e.ruby })] })), t;
 	}, n = ({ favicon: e, href: t, children: n }) => /* @__PURE__ */ m("a", {
-		className: gt.link,
+		className: mt.link,
 		href: t,
 		target: "_blank",
 		rel: "noopener noreferrer",
-		children: [e && /* @__PURE__ */ p(b, { src: e }), n]
+		children: [e && /* @__PURE__ */ p(C, { src: e }), n]
 	}), r = (e) => e.href ? n(e) : t(e);
 	return /* @__PURE__ */ p("span", {
-		className: gt.text,
+		className: [mt.text, e.className].filter(Boolean).join(" "),
 		style: {
 			"--elmethis-text-color-light": e.color,
 			"--elmethis-text-color-dark": e.color,
@@ -640,35 +644,35 @@ var pt = (e) => {
 		},
 		children: r(e)
 	});
-}, _t = (e) => {
+}, ht = (e) => {
 	let { name: t, href: n, favicon: r, style: i } = e;
 	return /* @__PURE__ */ m("a", {
-		className: ht.wrapper,
+		className: [pt.wrapper, e.className].filter(Boolean).join(" "),
 		href: n,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		style: i,
-		children: [r == null ? /* @__PURE__ */ p(x, {
-			d: Se,
+		children: [r == null ? /* @__PURE__ */ p(w, {
+			d: ye,
 			size: "2.5rem",
 			style: { opacity: .7 }
 		}) : /* @__PURE__ */ p("img", {
-			className: ht.favicon,
+			className: pt.favicon,
 			src: r,
 			alt: `favicon of ${t ?? n}`
 		}), /* @__PURE__ */ p("div", {
-			className: ht.text,
-			children: /* @__PURE__ */ p(w, {
+			className: pt.text,
+			children: /* @__PURE__ */ p(D, {
 				size: ".6rem",
 				children: t ?? n
 			})
 		})]
 	});
-}, vt = {
+}, gt = {
 	cube: "_cube_1merk_1",
 	"elmethis-cube-icon-rotate": "_elmethis-cube-icon-rotate_1merk_1",
 	face: "_face_1merk_8"
-}, yt = [
+}, _t = [
 	{
 		name: "front",
 		rotate: ""
@@ -693,51 +697,51 @@ var pt = (e) => {
 		name: "bottom",
 		rotate: "rotateX(-90deg)"
 	}
-], bt = (e) => {
+], vt = (e) => {
 	let { size: t = 128, style: n } = e, r = l(() => `translateZ(${t / 2}px)`, [t]);
 	return /* @__PURE__ */ p("div", {
-		className: vt.cube,
+		className: [gt.cube, e.className].filter(Boolean).join(" "),
 		style: {
 			width: `${t}px`,
 			height: `${t}px`,
 			...n
 		},
-		children: yt.map((e) => /* @__PURE__ */ p("div", {
-			className: vt.face,
+		children: _t.map((e) => /* @__PURE__ */ p("div", {
+			className: gt.face,
 			style: { transform: `${e.rotate} ${r}` }
 		}, e.name))
 	});
-}, xt = { icon: "_icon_140bn_1" }, St = (e) => {
-	let { size: t = "2rem", isLogin: n = !1, isLoading: r = !1, style: i } = e, a = r ? Ie : n ? ze : Re, o = r ? "gray" : n ? "#b36472" : "#6987b8";
+}, yt = { icon: "_icon_140bn_1" }, bt = (e) => {
+	let { size: t = "2rem", isLogin: n = !1, isLoading: r = !1, style: i } = e, a = r ? Ne : n ? Ie : Fe, o = r ? "gray" : n ? "#b36472" : "#6987b8";
 	return /* @__PURE__ */ p("div", {
-		className: xt.icon,
+		className: [yt.icon, e.className].filter(Boolean).join(" "),
 		style: i,
-		children: /* @__PURE__ */ p(x, {
+		children: /* @__PURE__ */ p(w, {
 			d: a,
 			color: o,
 			size: t
 		})
 	});
-}, Ct = { paragraph: "_paragraph_ewdky_1" }, wt = (e) => /* @__PURE__ */ p("p", {
-	className: Ct.paragraph,
+}, xt = { paragraph: "_paragraph_ewdky_1" }, St = (e) => /* @__PURE__ */ p("p", {
+	className: [xt.paragraph, e.className].filter(Boolean).join(" "),
 	style: {
 		backgroundColor: e.backgroundColor,
 		...e.style
 	},
 	children: e.children
-}), T = {
+}), O = {
 	blockquote: "_blockquote_x79j0_1",
 	cite: "_cite_x79j0_16",
 	icon: "_icon_x79j0_37"
-}, Tt = (e) => /* @__PURE__ */ m("blockquote", {
+}, Ct = (e) => /* @__PURE__ */ m("blockquote", {
 	ref: u(null),
-	className: T.blockquote,
+	className: [O.blockquote, e.className].filter(Boolean).join(" "),
 	cite: e.cite,
 	style: { ...e.style },
 	children: [
 		e.children,
 		e.cite && /* @__PURE__ */ p("cite", {
-			className: T.cite,
+			className: O.cite,
 			children: /* @__PURE__ */ p("a", {
 				href: e.cite,
 				target: "_blank",
@@ -746,7 +750,7 @@ var pt = (e) => {
 			})
 		}),
 		/* @__PURE__ */ p("svg", {
-			className: T.icon,
+			className: O.icon,
 			style: {
 				top: "0.25rem",
 				left: "0.25rem"
@@ -754,10 +758,10 @@ var pt = (e) => {
 			viewBox: "0 0 24 24",
 			width: "1rem",
 			height: "1rem",
-			children: /* @__PURE__ */ p("path", { d: ke })
+			children: /* @__PURE__ */ p("path", { d: Ee })
 		}),
 		/* @__PURE__ */ p("svg", {
-			className: T.icon,
+			className: O.icon,
 			style: {
 				bottom: "0.25rem",
 				right: "0.25rem"
@@ -765,69 +769,69 @@ var pt = (e) => {
 			viewBox: "0 0 24 24",
 			width: "1rem",
 			height: "1rem",
-			children: /* @__PURE__ */ p("path", { d: Oe })
+			children: /* @__PURE__ */ p("path", { d: Te })
 		})
 	]
-}), Et = {
+}), wt = {
 	callout: "_callout_16oli_1",
 	header: "_header_16oli_24"
-}, Dt = Object.freeze({
+}, Tt = Object.freeze({
 	note: {
 		code: "#6987b8",
-		icon: je
+		icon: Oe
 	},
 	tip: {
 		code: "#59b57c",
-		icon: Pe
+		icon: je
 	},
 	important: {
 		code: "#9771bd",
-		icon: Ke
+		icon: Ue
 	},
 	warning: {
 		code: "#b8a36e",
-		icon: ne
+		icon: x
 	},
 	caution: {
 		code: "#b36472",
-		icon: ie
+		icon: ne
 	}
-}), Ot = ({ type: e = "note", ...t }) => {
-	let n = Dt[e];
+}), Et = ({ type: e = "note", ...t }) => {
+	let n = Tt[e];
 	return /* @__PURE__ */ m("aside", {
-		className: Et.callout,
+		className: [wt.callout, t.className].filter(Boolean).join(" "),
 		style: {
 			"--elmethis-scoped-border-color": n.code,
 			"--elmethis-scoped-background-color": `color-mix(in srgb, ${n.code} 10%, transparent)`,
 			...t.style
 		},
 		children: [/* @__PURE__ */ m("div", {
-			className: Et.header,
-			children: [/* @__PURE__ */ p(x, {
+			className: wt.header,
+			children: [/* @__PURE__ */ p(w, {
 				d: n.icon,
 				size: "1.25em",
 				color: n.code
-			}), /* @__PURE__ */ p(w, {
+			}), /* @__PURE__ */ p(D, {
 				color: n.code,
 				children: e.toUpperCase()
 			})]
 		}), /* @__PURE__ */ p("div", { children: t.children })]
 	});
-}, kt = { divider: "_divider_uq5jr_1" }, At = (e) => /* @__PURE__ */ p("hr", {
-	className: kt.divider,
+}, Dt = { divider: "_divider_uq5jr_1" }, Ot = (e) => /* @__PURE__ */ p("hr", {
+	className: [Dt.divider, e.className].filter(Boolean).join(" "),
 	style: e.style
-}), jt = { fragment: "_fragment_il7xb_1" }, Mt = (e) => {
+}), kt = { fragment: "_fragment_il7xb_1" }, At = (e) => {
 	let t = a((e) => {
 		let t = new URL(window.location.href);
 		t.hash = e, window.history.replaceState(null, "", t.toString()), document.getElementById(e)?.scrollIntoView({ behavior: "smooth" });
 	}, []);
 	return /* @__PURE__ */ p("span", {
-		className: jt.fragment,
+		className: [kt.fragment, e.className].filter(Boolean).join(" "),
 		style: e.style,
 		onClick: () => t(e.id),
 		children: "#"
 	});
-}, E = {
+}, jt = {
 	"heading-common": "_heading-common_1ytfd_1",
 	h1: "_h1_1ytfd_22",
 	h2: "_h2_1ytfd_57",
@@ -837,14 +841,14 @@ var pt = (e) => {
 	h5: "_h5_1ytfd_134",
 	h6: "_h6_1ytfd_138",
 	"heading-stretch": "_heading-stretch_1ytfd_1"
-}, Nt = Object.freeze({
+}, Mt = Object.freeze({
 	1: 1.5,
 	2: 1.4,
 	3: 1.3,
 	4: 1.2,
 	5: 1.15,
 	6: 1.1
-}), Pt = (e) => e.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), D = ({ level: e = 1, disableFragmentIdentifier: t = !1, ...n }) => {
+}), Nt = (e) => e.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), k = ({ level: e = 1, disableFragmentIdentifier: t = !1, ...n }) => {
 	let r = u(null), [i, a] = d(!1);
 	s(() => {
 		let e = r.current;
@@ -854,13 +858,17 @@ var pt = (e) => {
 		});
 		return t.observe(e), () => t.disconnect();
 	}, []);
-	let o = `h${e}`, c = n.id ?? (n.text ? Pt(n.text) : void 0);
+	let o = `h${e}`, c = n.id ?? (n.text ? Nt(n.text) : void 0);
 	return /* @__PURE__ */ m(o, {
 		ref: r,
-		className: [E["heading-common"], E[`h${e}`]].filter(Boolean).join(" "),
+		className: [
+			jt["heading-common"],
+			jt[`h${e}`],
+			n.className
+		].filter(Boolean).join(" "),
 		id: c,
 		style: {
-			"--font-size": n.size ?? `${Nt[e]}rem`,
+			"--font-size": n.size ?? `${Mt[e]}rem`,
 			"--scale": +!!i,
 			"--opacity": +!!i,
 			...n.style
@@ -868,71 +876,75 @@ var pt = (e) => {
 		children: [
 			n.text && /* @__PURE__ */ p("span", { children: n.text }),
 			n.children,
-			!t && c && /* @__PURE__ */ p(Mt, { id: c }),
+			!t && c && /* @__PURE__ */ p(At, { id: c }),
 			e === 2 && /* @__PURE__ */ p("span", {
-				className: E.h2__underline,
+				className: jt.h2__underline,
 				"aria-hidden": "true"
 			})
 		]
 	});
-}, Ft = {
+}, Pt = {
 	"elmethis-list-common": "_elmethis-list-common_1qwri_1",
 	"elmethis-bulleted-list": "_elmethis-bulleted-list_1qwri_7",
 	"elmethis-numbered-list": "_elmethis-numbered-list_1qwri_25"
-}, It = ({ listStyle: e = "unordered", ...t }) => {
-	let n = [Ft["elmethis-list-common"], e === "unordered" ? Ft["elmethis-bulleted-list"] : Ft["elmethis-numbered-list"]].join(" ");
+}, Ft = ({ listStyle: e = "unordered", ...t }) => {
+	let n = [
+		Pt["elmethis-list-common"],
+		e === "unordered" ? Pt["elmethis-bulleted-list"] : Pt["elmethis-numbered-list"],
+		t.className
+	].filter(Boolean).join(" ");
 	return p(e === "ordered" ? "ol" : "ul", {
 		className: n,
 		style: t.style,
 		children: t.children
 	});
-}, Lt = {
+}, It = {
 	text: "_text_zrzts_1",
 	cursor: "_cursor_zrzts_30",
 	blink: "_blink_zrzts_1"
-}, O = (e) => new Promise((t) => {
+}, A = (e) => new Promise((t) => {
 	setTimeout(t, e);
-}), Rt = ({ texts: e = [], interval: t = 3e3, fontSize: n = "1rem", ...r }) => {
+}), Lt = ({ texts: e = [], interval: t = 3e3, fontSize: n = "1rem", ...r }) => {
 	let [i, a] = d(""), o = u(!1);
 	return s(() => (o.current = !1, (async () => {
 		for (; !o.current;) for (let n of e) {
 			for (let e = 0; e < n.length; e++) {
-				if (o.current || (await O(75), o.current)) return;
+				if (o.current || (await A(75), o.current)) return;
 				a(n.slice(0, e + 1));
 			}
-			if (await O(t), o.current) return;
-			for (let e = n.length; e >= 0; e--) if (o.current || (a(n.slice(0, e)), await O(25), o.current)) return;
-			if (await O(200), o.current) return;
+			if (await A(t), o.current) return;
+			for (let e = n.length; e >= 0; e--) if (o.current || (a(n.slice(0, e)), await A(25), o.current)) return;
+			if (await A(200), o.current) return;
 		}
 	})(), () => {
 		o.current = !0;
 	}), [e, t]), /* @__PURE__ */ m("span", {
-		className: Lt.text,
+		className: [It.text, r.className].filter(Boolean).join(" "),
 		style: {
 			fontSize: n,
 			...r.style
 		},
 		children: [i, /* @__PURE__ */ p("span", {
-			className: Lt.cursor,
+			className: It.cursor,
 			children: "\xA0"
 		})]
 	});
-}, zt = { "elm-template": "_elm-template_18rwn_1" }, Bt = (e) => /* @__PURE__ */ p("div", {
-	className: zt["elm-template"],
+}, Rt = { "elm-template": "_elm-template_18rwn_1" }, zt = (e) => /* @__PURE__ */ p("div", {
+	className: [Rt["elm-template"], e.className].filter(Boolean).join(" "),
 	style: e.style,
 	children: "PLACEHOLDER"
-}), k = {
+}), j = {
 	progress: "_progress_e6hmw_1",
 	container: "_container_e6hmw_27",
 	value: "_value_e6hmw_41",
 	loading: "_loading_e6hmw_56",
 	buffer: "_buffer_e6hmw_72"
-}, Vt = ({ value: e, buffer: t, max: n = 100, weight: r = "4px", round: i = !0, color: a, loading: o = !1, style: s }) => /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("progress", {
-	className: k.progress,
+}, Bt = ({ value: e, buffer: t, max: n = 100, weight: r = "4px", round: i = !0, color: a, loading: o = !1, style: s, className: c }) => /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("progress", {
+	className: j.progress,
 	value: e,
 	max: n
 }), /* @__PURE__ */ m("div", {
-	className: k.container,
+	className: [j.container, c].filter(Boolean).join(" "),
 	style: {
 		"--weight": r,
 		"--border-radius": i ? "calc(var(--weight) / 2)" : void 0,
@@ -941,20 +953,20 @@ var pt = (e) => {
 	},
 	children: [
 		/* @__PURE__ */ p("div", {
-			className: k.value,
+			className: j.value,
 			style: { "--scale-x": `scaleX(${o ? 0 : e / n})` }
 		}),
-		o && /* @__PURE__ */ p("div", { className: k.loading }),
+		o && /* @__PURE__ */ p("div", { className: j.loading }),
 		/* @__PURE__ */ p("div", {
-			className: k.buffer,
+			className: j.buffer,
 			style: { "--scale-x": `scaleX(${o ? 0 : t == null ? e / n : t / n})` }
 		})
 	]
-})] }), Ht = {
+})] }), Vt = {
 	container: "_container_13d02_1",
 	bar: "_bar_13d02_15"
-}, Ut = ({ progress: e, weight: t = "4px", round: n = !0, style: r }) => {
-	let i = l(() => {
+}, Ht = ({ progress: e, weight: t = "4px", round: n = !0, style: r, className: i }) => {
+	let a = l(() => {
 		let t = e.reduce((e, t) => e + t.value, 0), n = e.map((e) => e.value / t * 100);
 		return e.map((e, t) => ({
 			...e,
@@ -963,52 +975,52 @@ var pt = (e) => {
 		}));
 	}, [e]);
 	return /* @__PURE__ */ p("div", {
-		className: Ht.container,
+		className: [Vt.container, i].filter(Boolean).join(" "),
 		style: {
 			"--weight": t,
 			"--border-radius": n ? "calc(var(--weight) / 2)" : void 0,
 			...r
 		},
-		children: i.map((e, t) => /* @__PURE__ */ p("div", {
-			className: Ht.bar,
+		children: a.map((e, t) => /* @__PURE__ */ p("div", {
+			className: Vt.bar,
 			style: {
 				"--transform": `translateX(${e.start}%) scaleX(${e.scale})`,
 				"--color": e.color
 			}
 		}, t))
 	});
-}, Wt = { wrapper: "_wrapper_17chp_1" }, Gt = Object.freeze({
+}, Ut = { wrapper: "_wrapper_17chp_1" }, Wt = Object.freeze({
 	pending: {
 		color: "#6987b8",
-		icon: Ge
+		icon: He
 	},
 	error: {
 		color: "#c56565",
-		icon: re
+		icon: te
 	},
 	warning: {
 		color: "#cdb57b",
-		icon: ne
+		icon: x
 	},
 	success: {
 		color: "#59b57c",
-		icon: pe
+		icon: de
 	}
-}), Kt = ({ status: e, message: t, style: n }) => {
-	let { color: r, icon: i } = Gt[e];
+}), Gt = ({ status: e, message: t, style: n, className: r }) => {
+	let { color: i, icon: a } = Wt[e];
 	return /* @__PURE__ */ m("div", {
-		className: Wt.wrapper,
+		className: [Ut.wrapper, r].filter(Boolean).join(" "),
 		style: n,
-		children: [/* @__PURE__ */ p(x, {
-			d: i,
-			color: r,
+		children: [/* @__PURE__ */ p(w, {
+			d: a,
+			color: i,
 			size: "1em"
-		}), /* @__PURE__ */ p(w, {
-			color: r,
+		}), /* @__PURE__ */ p(D, {
+			color: i,
 			children: t
 		})]
 	});
-}, A = {
+}, M = {
 	wrapper: "_wrapper_gcui5_1",
 	error: "_error_gcui5_9",
 	"image-frame": "_image-frame_gcui5_21",
@@ -1020,80 +1032,80 @@ var pt = (e) => {
 	"alt-text": "_alt-text_gcui5_90",
 	modal: "_modal_gcui5_94",
 	"modal-image": "_modal-image_gcui5_108"
-}, j = ({ src: e, alt: t, block: n = !1, enableModal: r = !1, width: i, height: a, style: o }) => {
-	let [c, l] = d(!0), [f, h] = d(!1), [g, _] = d(!1), v = u(null);
+}, N = ({ src: e, alt: t, block: n = !1, enableModal: r = !1, width: i, height: a, style: o, className: c }) => {
+	let [l, f] = d(!0), [h, g] = d(!1), [_, v] = d(!1), y = u(null);
 	return s(() => {
 		let t = new Image();
 		t.src = e, t.onload = () => {
-			l(!1), h(!1);
+			f(!1), g(!1);
 		}, t.onerror = () => {
-			l(!1), h(!0);
+			f(!1), g(!0);
 		};
 	}, [e]), s(() => {
 		let e = (e) => {
-			e.key === "Escape" && (e.preventDefault(), _(!1));
+			e.key === "Escape" && (e.preventDefault(), v(!1));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, []), /* @__PURE__ */ m("div", {
-		className: A.wrapper,
-		ref: v,
+		className: [M.wrapper, c].filter(Boolean).join(" "),
+		ref: y,
 		style: o,
 		children: [
-			f && /* @__PURE__ */ p("div", {
-				className: A.error,
-				children: /* @__PURE__ */ p(w, {
+			h && /* @__PURE__ */ p("div", {
+				className: M.error,
+				children: /* @__PURE__ */ p(D, {
 					color: "#c56565",
 					size: "1.5rem",
 					children: "Error loading image"
 				})
 			}),
 			/* @__PURE__ */ m("div", {
-				className: A["image-frame"],
+				className: M["image-frame"],
 				style: o,
-				children: [c && /* @__PURE__ */ p("div", {
-					className: A.fallback,
+				children: [l && /* @__PURE__ */ p("div", {
+					className: M.fallback,
 					style: {
 						aspectRatio: i && a ? `${i} / ${a}` : "1200 / 630",
 						width: i ? `${i}px` : void 0,
 						height: a ? `${a}px` : void 0
 					}
 				}), /* @__PURE__ */ p("img", {
-					className: n ? A["image-block"] : A["image-inline"],
+					className: n ? M["image-block"] : M["image-inline"],
 					src: e,
 					alt: t,
 					width: i,
 					height: a,
 					onClick: () => {
-						r && _(!0);
+						r && v(!0);
 					},
 					style: {
 						"--width": i ? `${i}px` : void 0,
 						"--height": a ? `${a}px` : void 0,
 						cursor: r ? "zoom-in" : void 0,
-						opacity: +(!c && !f),
-						pointerEvents: !c && !f ? void 0 : "none"
+						opacity: +(!l && !h),
+						pointerEvents: !l && !h ? void 0 : "none"
 					}
 				})]
 			}),
-			n && !c && t != null && t.trim() !== "" && /* @__PURE__ */ m("div", {
-				className: A["alt-container"],
-				children: [/* @__PURE__ */ p(x, {
-					d: He,
+			n && !l && t != null && t.trim() !== "" && /* @__PURE__ */ m("div", {
+				className: M["alt-container"],
+				children: [/* @__PURE__ */ p(w, {
+					d: ze,
 					color: "#b69545",
 					style: { flexShrink: 0 }
 				}), /* @__PURE__ */ p("div", {
-					className: A["alt-text"],
-					children: /* @__PURE__ */ p(w, {
+					className: M["alt-text"],
+					children: /* @__PURE__ */ p(D, {
 						size: "0.8rem",
 						children: t
 					})
 				})]
 			}),
-			g && /* @__PURE__ */ p("div", {
-				className: A.modal,
-				onClick: () => _(!1),
+			_ && /* @__PURE__ */ p("div", {
+				className: M.modal,
+				onClick: () => v(!1),
 				children: /* @__PURE__ */ p("img", {
-					className: A["modal-image"],
+					className: M["modal-image"],
 					src: e,
 					alt: t,
 					width: i,
@@ -1102,7 +1114,7 @@ var pt = (e) => {
 			})
 		]
 	});
-}, M = {
+}, P = {
 	file: "_file_sk4pw_1",
 	"left-container": "_left-container_sk4pw_19",
 	"right-container": "_right-container_sk4pw_26",
@@ -1110,49 +1122,49 @@ var pt = (e) => {
 };
 //#endregion
 //#region src/components/media/ElmFile.tsx
-function qt(e) {
+function Kt(e) {
 	let t = e.split(/[?#]/)[0].split("/").filter(Boolean);
 	return t.length > 0 ? t[t.length - 1] : null;
 }
-var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
-	let i = a(async () => {
+var qt = ({ name: e, src: t, filesize: n, style: r, className: i }) => {
+	let o = a(async () => {
 		let n;
 		try {
 			let r = await fetch(t);
 			if (!r.ok) throw Error("Failed to download file");
 			let i = await r.blob();
-			n = document.createElement("a"), n.href = URL.createObjectURL(i), n.download = e ?? qt(t) ?? "file", n.click();
+			n = document.createElement("a"), n.href = URL.createObjectURL(i), n.download = e ?? Kt(t) ?? "file", n.click();
 		} catch (e) {
 			console.error("ERROR:", e);
 		} finally {
 			n && URL.revokeObjectURL(n.href);
 		}
-	}, [t, e]), o = e ?? qt(t) ?? "unknown file";
+	}, [t, e]), s = e ?? Kt(t) ?? "unknown file";
 	return /* @__PURE__ */ m("div", {
-		className: M.file,
+		className: [P.file, i].filter(Boolean).join(" "),
 		style: r,
 		children: [/* @__PURE__ */ m("div", {
-			className: M["left-container"],
-			children: [/* @__PURE__ */ p(x, {
-				d: Ee,
+			className: P["left-container"],
+			children: [/* @__PURE__ */ p(w, {
+				d: Ce,
 				size: "1.25em"
-			}), /* @__PURE__ */ p(w, { children: o })]
+			}), /* @__PURE__ */ p(D, { children: s })]
 		}), /* @__PURE__ */ m("div", {
-			className: M["right-container"],
+			className: P["right-container"],
 			children: [n && /* @__PURE__ */ p("span", {
 				style: { opacity: .6 },
-				children: /* @__PURE__ */ p(w, { children: n })
+				children: /* @__PURE__ */ p(D, { children: n })
 			}), /* @__PURE__ */ p("div", {
-				className: M["download-icon"],
-				onClick: i,
-				children: /* @__PURE__ */ p(x, {
-					d: xe,
+				className: P["download-icon"],
+				onClick: o,
+				children: /* @__PURE__ */ p(w, {
+					d: ve,
 					size: "1.25em"
 				})
 			})]
 		})]
 	});
-}, N = {
+}, F = {
 	parent: "_parent_1hx4v_1",
 	bookmark: "_bookmark_1hx4v_23",
 	image: "_image_1hx4v_42",
@@ -1161,25 +1173,25 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	date: "_date_1hx4v_81",
 	link: "_link_1hx4v_90",
 	favicon: "_favicon_1hx4v_100"
-}, Yt = ({ hideUrl: e = !1, openInNewTab: t = !0, title: n, description: r = "No description provided", image: i, url: a, createdAt: o, updatedAt: s, onClick: c, favicon: l, style: u }) => {
-	let [h, g] = d(!1), _ = (e) => {
+}, Jt = ({ hideUrl: e = !1, openInNewTab: t = !0, title: n, description: r = "No description provided", image: i, url: a, createdAt: o, updatedAt: s, onClick: c, favicon: l, style: u, className: h }) => {
+	let [g, _] = d(!1), v = (e) => {
 		c && (e.preventDefault(), c());
-	}, v = r != null && r.length > 100 ? r.slice(0, 100) + "..." : r;
+	}, y = r != null && r.length > 100 ? r.slice(0, 100) + "..." : r;
 	return /* @__PURE__ */ p("div", {
-		className: N.parent,
+		className: [F.parent, h].filter(Boolean).join(" "),
 		style: u,
 		children: /* @__PURE__ */ m("a", {
-			className: N.bookmark,
+			className: F.bookmark,
 			href: a,
 			target: t ? "_blank" : void 0,
 			rel: "noopener noreferrer",
-			onClick: _,
-			children: [i != null && !h && /* @__PURE__ */ p("div", {
-				className: N.image,
+			onClick: v,
+			children: [i != null && !g && /* @__PURE__ */ p("div", {
+				className: F.image,
 				children: /* @__PURE__ */ p("img", {
 					src: i,
 					alt: "OGP Image",
-					onError: () => g(!0),
+					onError: () => _(!0),
 					style: {
 						width: "100%",
 						height: "100%",
@@ -1187,41 +1199,41 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 					}
 				})
 			}), /* @__PURE__ */ m("div", {
-				className: N.typography,
+				className: F.typography,
 				children: [
 					/* @__PURE__ */ p("div", {
-						className: N.title,
-						children: /* @__PURE__ */ p(w, {
+						className: F.title,
+						children: /* @__PURE__ */ p(D, {
 							bold: !0,
 							children: n ?? "No title provided"
 						})
 					}),
-					/* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(w, {
+					/* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(D, {
 						size: "0.8rem",
 						children: /* @__PURE__ */ p("span", {
 							style: { opacity: .6 },
-							children: v
+							children: y
 						})
 					}) }),
 					(o != null || s != null) && /* @__PURE__ */ m("div", {
-						className: N.date,
-						children: [o != null && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(x, {
-							d: ue,
+						className: F.date,
+						children: [o != null && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(w, {
+							d: ce,
 							size: "1em"
-						}), /* @__PURE__ */ p(w, {
+						}), /* @__PURE__ */ p(D, {
 							size: "0.8rem",
 							children: o
-						})] }), s != null && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(x, {
-							d: de,
+						})] }), s != null && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(w, {
+							d: le,
 							size: "1em"
-						}), /* @__PURE__ */ p(w, {
+						}), /* @__PURE__ */ p(D, {
 							size: "0.8rem",
 							children: s
 						})] })]
 					}),
 					!e && a != null && /* @__PURE__ */ m("div", {
-						className: N.link,
-						children: [l && /* @__PURE__ */ p(b, { src: l }), /* @__PURE__ */ p(w, {
+						className: F.link,
+						children: [l && /* @__PURE__ */ p(C, { src: l }), /* @__PURE__ */ p(D, {
 							size: "0.8rem",
 							color: "#6987b8",
 							children: a
@@ -1231,152 +1243,157 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			})]
 		})
 	});
-}, P = {
+}, I = {
 	container: "_container_1r6mu_1",
 	"link-container": "_link-container_1r6mu_10",
 	text: "_text_1r6mu_36"
-}, Xt = ({ links: e, style: n }) => {
-	let r = u(null), [i, a] = d(!1);
+}, Yt = ({ links: e, style: n, className: r }) => {
+	let i = u(null), [a, o] = d(!1);
 	return s(() => {
-		let e = r.current;
+		let e = i.current;
 		if (!e) return;
 		let t = new IntersectionObserver(([e]) => {
-			a(e.isIntersecting);
+			o(e.isIntersecting);
 		});
 		return t.observe(e), () => t.disconnect();
 	}, []), /* @__PURE__ */ p("nav", {
-		className: P.container,
-		ref: r,
+		className: [I.container, r].filter(Boolean).join(" "),
+		ref: i,
 		style: {
-			"--opacity": +!!i,
+			"--opacity": +!!a,
 			...n
 		},
 		children: e.map((n, r) => /* @__PURE__ */ m(t.Fragment, { children: [/* @__PURE__ */ m("div", {
-			className: P["link-container"],
+			className: I["link-container"],
 			onClick: n.onClick,
 			children: [/* @__PURE__ */ p("span", {
-				className: P.text,
+				className: I.text,
 				style: { "--delay": `${r * 100}ms` },
-				children: /* @__PURE__ */ p(x, {
-					d: r === 0 ? Ae : r === e.length - 1 ? ae : De,
+				children: /* @__PURE__ */ p(w, {
+					d: r === 0 ? De : r === e.length - 1 ? re : we,
 					size: "1.25em"
 				})
 			}), /* @__PURE__ */ p("span", {
-				className: P.text,
+				className: I.text,
 				style: { "--delay": `${r * 100 + 50}ms` },
-				children: /* @__PURE__ */ p(w, { children: n.text })
+				children: /* @__PURE__ */ p(D, { children: n.text })
 			})]
 		}), e.length !== r + 1 && /* @__PURE__ */ p("span", {
-			className: P.text,
+			className: I.text,
 			style: { "--delay": `${r * 100 + 100}ms` },
-			children: /* @__PURE__ */ p(x, {
-				d: he,
+			children: /* @__PURE__ */ p(w, {
+				d: pe,
 				size: "1em",
 				color: "#b69545"
 			})
 		})] }, r))
 	});
-}, F = {
+}, L = {
 	wrapper: "_wrapper_1tlqa_1",
 	"wrapper--visible": "_wrapper--visible_1tlqa_33",
 	partial: "_partial_1tlqa_63",
 	move: "_move_1tlqa_1",
 	text: "_text_1tlqa_104"
-}, Zt = ({ position: e = "right", style: t }) => {
-	let [n, r] = d(!1);
+}, Xt = ({ position: e = "right", style: t, className: n }) => {
+	let [r, i] = d(!1);
 	s(() => {
 		let e = () => {
-			r(window.scrollY > 100);
+			i(window.scrollY > 100);
 		};
 		return window.addEventListener("scroll", e, { passive: !0 }), e(), () => window.removeEventListener("scroll", e);
 	}, []);
-	let i = () => {
+	let a = () => {
 		window.scrollTo({
 			top: 0,
 			behavior: "smooth"
 		});
 	};
 	return /* @__PURE__ */ m("nav", {
-		className: `${F.wrapper} ${n ? F["wrapper--visible"] : ""}`,
+		className: [
+			L.wrapper,
+			r ? L["wrapper--visible"] : void 0,
+			n
+		].filter(Boolean).join(" "),
 		style: {
 			"--size": "64px",
 			left: e === "left" ? "0" : "auto",
 			right: e === "right" ? "0" : "auto",
 			...t
 		},
-		onClick: i,
+		onClick: a,
 		children: [
 			/* @__PURE__ */ p("div", {
 				"aria-hidden": "true",
-				className: F.partial
+				className: L.partial
 			}),
 			/* @__PURE__ */ p("div", {
 				"aria-hidden": "true",
-				className: F.partial
+				className: L.partial
 			}),
 			/* @__PURE__ */ p("div", {
 				"aria-hidden": "true",
-				className: F.partial
+				className: L.partial
 			}),
 			/* @__PURE__ */ p("span", {
-				className: F.text,
+				className: L.text,
 				children: "Back to Top"
 			})
 		]
 	});
-}, Qt = {
+}, Zt = {
 	toc: "_toc_eubcy_1",
 	link: "_link_eubcy_15"
-}, $t = ({ headings: e, style: t }) => /* @__PURE__ */ p("nav", {
-	className: Qt.toc,
+}, Qt = ({ headings: e, style: t, className: n }) => /* @__PURE__ */ p("nav", {
+	className: [Zt.toc, n].filter(Boolean).join(" "),
 	style: t,
 	children: e.map((e, t) => /* @__PURE__ */ m("a", {
-		className: Qt.link,
+		className: Zt.link,
 		href: `#${e.id ?? e.text}`,
 		style: { "--padding-left": `${e.level * .5}rem` },
 		children: [
-			/* @__PURE__ */ p("sup", { children: /* @__PURE__ */ p(w, {
+			/* @__PURE__ */ p("sup", { children: /* @__PURE__ */ p(D, {
 				size: "0.6rem",
 				color: "#6987b8",
 				children: `H${e.level}`
 			}) }),
-			/* @__PURE__ */ p(w, { children: e.text }),
-			/* @__PURE__ */ p(x, {
-				d: Ve,
+			/* @__PURE__ */ p(D, { children: e.text }),
+			/* @__PURE__ */ p(w, {
+				d: Re,
 				size: "1em",
 				color: "#6987b8"
 			})
 		]
 	}, t))
-}), en = { "block-fallback": "_block-fallback_adya7_1" }, tn = {
+}), $t = { "block-fallback": "_block-fallback_adya7_1" }, en = {
 	"rectangle-wave": "_rectangle-wave_gxedo_21",
 	"elm-rectangle-wave": "_elm-rectangle-wave_gxedo_1"
-}, nn = (e) => /* @__PURE__ */ p("div", {
+}, tn = (e) => /* @__PURE__ */ p("div", {
 	"aria-hidden": !0,
-	className: tn["rectangle-wave"],
+	className: [en["rectangle-wave"], e.className].filter(Boolean).join(" "),
 	style: e.style
-}), rn = (e) => {
+}), nn = (e) => {
 	let { height: t = "16rem", style: n } = e;
 	return /* @__PURE__ */ m("div", {
-		className: en["block-fallback"],
+		className: [$t["block-fallback"], e.className].filter(Boolean).join(" "),
 		style: {
 			"--height": t,
 			...n
 		},
-		children: [/* @__PURE__ */ p(S, {}), /* @__PURE__ */ p(nn, {})]
+		children: [/* @__PURE__ */ p(T, {}), /* @__PURE__ */ p(tn, {})]
 	});
-}, an = {
+}, rn = {
 	circle: "_circle_ycu2l_19",
 	"draw-line": "_draw-line_ycu2l_1",
 	rotate: "_rotate_ycu2l_1"
-}, on = (e) => {
+}, an = (e) => {
 	let { radius: t = 16, weight: n = 2, style: r } = e;
 	return /* @__PURE__ */ p("svg", {
+		className: e.className,
 		height: t * 2,
 		width: t * 2,
 		style: r,
 		children: /* @__PURE__ */ p("circle", {
-			className: an.circle,
+			className: rn.circle,
 			cx: t,
 			cy: t,
 			r: t - n,
@@ -1384,34 +1401,34 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			strokeWidth: n
 		})
 	});
-}, I = {
+}, R = {
 	unsupported: "_unsupported_1xu4c_1",
 	message: "_message_1xu4c_13",
 	icon: "_icon_1xu4c_20",
 	details: "_details_1xu4c_24"
-}, sn = (e) => /* @__PURE__ */ m("div", {
-	className: I.unsupported,
+}, on = (e) => /* @__PURE__ */ m("div", {
+	className: [R.unsupported, e.className].filter(Boolean).join(" "),
 	style: e.style,
 	children: [/* @__PURE__ */ m("div", {
-		className: I.message,
+		className: R.message,
 		children: [/* @__PURE__ */ p("svg", {
 			viewBox: "0 0 24 24",
 			width: "1.25rem",
 			height: "1.25rem",
-			className: I.icon,
-			children: /* @__PURE__ */ p("path", { d: je })
-		}), /* @__PURE__ */ p(w, {
+			className: R.icon,
+			children: /* @__PURE__ */ p("path", { d: Oe })
+		}), /* @__PURE__ */ p(D, {
 			color: "#868e9c",
 			children: "UNSUPPORTED BLOCK"
 		})]
 	}), e.details && /* @__PURE__ */ p("div", {
-		className: I.details,
-		children: /* @__PURE__ */ p(w, {
+		className: R.details,
+		children: /* @__PURE__ */ p(D, {
 			color: "#868e9c",
 			children: e.details
 		})
 	})]
-}), L = {
+}), z = {
 	button: "_button_c0mex_1",
 	"button-ornament": "_button-ornament_c0mex_29",
 	normal: "_normal_c0mex_40",
@@ -1421,7 +1438,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	flex: "_flex_c0mex_95",
 	ripple: "_ripple_c0mex_117",
 	"button-ripple": "_button-ripple_c0mex_1"
-}, cn = ({ loading: e = !1, block: t = !1, disabled: n = !1, primary: r = !1, ...i }) => {
+}, sn = ({ loading: e = !1, block: t = !1, disabled: n = !1, primary: r = !1, ...i }) => {
 	let [o, c] = d(!1), l = u(void 0), { onClick: f } = i, h = a(() => {
 		!e && !n && f && (c(!0), l.current = window.setTimeout(() => c(!1), 300), f());
 	}, [
@@ -1433,11 +1450,12 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		l.current && clearTimeout(l.current);
 	}, []), /* @__PURE__ */ m("button", {
 		className: [
-			L.button,
-			!e && !n ? L.enable : "",
-			i.color ? L.colored : "",
-			!i.color && !r ? L.normal : "",
-			!i.color && r ? L.primary : ""
+			z.button,
+			!e && !n ? z.enable : "",
+			i.color ? z.colored : "",
+			!i.color && !r ? z.normal : "",
+			!i.color && r ? z.primary : "",
+			i.className
 		].filter(Boolean).join(" "),
 		style: {
 			display: t ? "flex" : "inline-flex",
@@ -1449,15 +1467,15 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		},
 		onClick: h,
 		children: [
-			o && /* @__PURE__ */ p("div", { className: L.ripple }),
-			e ? /* @__PURE__ */ p(S, { size: "1.5rem" }) : /* @__PURE__ */ p("span", {
-				className: L.flex,
+			o && /* @__PURE__ */ p("div", { className: z.ripple }),
+			e ? /* @__PURE__ */ p(T, { size: "1.5rem" }) : /* @__PURE__ */ p("span", {
+				className: z.flex,
 				children: i.children
 			}),
-			/* @__PURE__ */ p("div", { className: L["button-ornament"] })
+			/* @__PURE__ */ p("div", { className: z["button-ornament"] })
 		]
 	});
-}, R = {
+}, B = {
 	container: "_container_12edl_1",
 	"container-disable": "_container-disable_12edl_14",
 	checkbox: "_checkbox_12edl_23",
@@ -1467,7 +1485,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	loading: "_loading_12edl_48",
 	"check-line": "_check-line_12edl_67",
 	"elmethis-checkbox-check-line": "_elmethis-checkbox-check-line_12edl_1"
-}, ln = ({ loading: e = !1, disable: t = !1, checked: n = !1, ...r }) => {
+}, cn = ({ loading: e = !1, disable: t = !1, checked: n = !1, ...r }) => {
 	let { onChange: i } = r, o = a(() => {
 		!e && !t && i && i(!n);
 	}, [
@@ -1475,10 +1493,14 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		t,
 		n,
 		i
-	]), s = [R.container, t ? R["container-disable"] : ""].filter(Boolean).join(" "), c = [
-		R.rect,
-		n ? R["rect-checked"] : "",
-		e ? R["rect-loading"] : ""
+	]), s = [
+		B.container,
+		t ? B["container-disable"] : "",
+		r.className
+	].filter(Boolean).join(" "), c = [
+		B.rect,
+		n ? B["rect-checked"] : "",
+		e ? B["rect-loading"] : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ p("div", {
 		className: s,
@@ -1493,13 +1515,13 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			children: [/* @__PURE__ */ m("svg", {
 				width: "24",
 				height: "24",
-				className: R.checkbox,
+				className: B.checkbox,
 				children: [
 					/* @__PURE__ */ m("circle", {
 						cx: "0",
 						cy: "0",
 						r: "2",
-						className: R.loading,
+						className: B.loading,
 						style: { opacity: +!!e },
 						children: [/* @__PURE__ */ p("animate", {
 							attributeName: "cx",
@@ -1521,7 +1543,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 						cx: "20",
 						cy: "20",
 						r: "2",
-						className: R.loading,
+						className: B.loading,
 						style: { opacity: +!!e },
 						children: [/* @__PURE__ */ p("animate", {
 							attributeName: "cx",
@@ -1548,7 +1570,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 						strokeWidth: "0.8"
 					}),
 					n && /* @__PURE__ */ p("polyline", {
-						className: R["check-line"],
+						className: B["check-line"],
 						points: "5,12 10,17 19,8",
 						strokeWidth: "1.5",
 						fill: "transparent"
@@ -1613,7 +1635,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			}), /* @__PURE__ */ p("span", { children: r.label })]
 		})
 	});
-}, z = {
+}, V = {
 	wrapper: "_wrapper_3ipdq_1",
 	active: "_active_3ipdq_29",
 	header: "_header_3ipdq_33",
@@ -1625,7 +1647,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	pulldown: "_pulldown_3ipdq_85",
 	option: "_option_3ipdq_105",
 	description: "_description_3ipdq_127"
-}, un = ({ disabled: e = !1, loading: t = !1, ...n }) => {
+}, ln = ({ disabled: e = !1, loading: t = !1, ...n }) => {
 	let [r, i] = d(!1), o = u(null), c = a(() => {
 		!e && !t && i((e) => !e);
 	}, [e, t]), { options: l, onSelect: f } = n, h = a((e) => {
@@ -1639,7 +1661,11 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []), /* @__PURE__ */ m("div", {
 		ref: o,
-		className: [z.wrapper, r ? z.active : ""].filter(Boolean).join(" "),
+		className: [
+			V.wrapper,
+			r ? V.active : "",
+			n.className
+		].filter(Boolean).join(" "),
 		style: {
 			backgroundColor: e || t ? "rgba(0,0,0,0.15)" : void 0,
 			"--highlight-color": r ? "#bfa056" : void 0,
@@ -1647,46 +1673,46 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		},
 		onClick: c,
 		children: [/* @__PURE__ */ p("div", {
-			className: z.header,
+			className: V.header,
 			children: /* @__PURE__ */ p("span", {
-				className: z.label,
+				className: V.label,
 				children: n.label
 			})
 		}), /* @__PURE__ */ p("div", {
-			className: z.body,
+			className: V.body,
 			children: /* @__PURE__ */ m("div", {
-				className: z.select,
+				className: V.select,
 				children: [
 					/* @__PURE__ */ p("div", {
-						className: z.selected,
+						className: V.selected,
 						children: n.selectedOption ? /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", { children: n.selectedOption.label }), n.selectedOption.description && /* @__PURE__ */ p("span", {
-							className: z.description,
+							className: V.description,
 							children: n.selectedOption.description
 						})] }) : /* @__PURE__ */ m("div", {
-							className: z.fallback,
-							children: [/* @__PURE__ */ p(x, { d: se }), /* @__PURE__ */ p("span", { children: n.placeholder ?? "Select an option" })]
+							className: V.fallback,
+							children: [/* @__PURE__ */ p(w, { d: ae }), /* @__PURE__ */ p("span", { children: n.placeholder ?? "Select an option" })]
 						})
 					}),
-					/* @__PURE__ */ p(x, {
-						d: Ve,
+					/* @__PURE__ */ p(w, {
+						d: Re,
 						size: "1.5rem"
 					}),
 					r && /* @__PURE__ */ p("div", {
-						className: z.pulldown,
+						className: V.pulldown,
 						children: n.options.map((e) => /* @__PURE__ */ m("div", {
-							className: z.option,
+							className: V.option,
 							onClick: (t) => {
 								t.stopPropagation(), h(e.id);
 							},
 							children: [
-								/* @__PURE__ */ p(x, {
-									d: he,
+								/* @__PURE__ */ p(w, {
+									d: pe,
 									color: "#868e9c",
 									size: "0.75em"
 								}),
 								/* @__PURE__ */ p("span", { children: e.label }),
 								e.description && /* @__PURE__ */ p("span", {
-									className: z.description,
+									className: V.description,
 									children: e.description
 								})
 							]
@@ -1696,7 +1722,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			})
 		})]
 	});
-}, B = {
+}, H = {
 	switch: "_switch_8t362_1",
 	bar: "_bar_8t362_5",
 	"bar-checked": "_bar-checked_8t362_21",
@@ -1704,7 +1730,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	circle: "_circle_8t362_30",
 	"circle-checked": "_circle-checked_8t362_45",
 	"circle-disabled": "_circle-disabled_8t362_49"
-}, dn = ({ color: e = "#bfa056", size: t = "18px", disabled: n = !1, checked: r = !1, ...i }) => {
+}, un = ({ color: e = "#bfa056", size: t = "18px", disabled: n = !1, checked: r = !1, ...i }) => {
 	let { onChange: o } = i, s = a(() => {
 		!n && o && o(!r);
 	}, [
@@ -1712,15 +1738,16 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		r,
 		o
 	]), c = [
-		B.bar,
-		r ? B["bar-checked"] : "",
-		n ? B["bar-disabled"] : ""
+		H.bar,
+		r ? H["bar-checked"] : "",
+		n ? H["bar-disabled"] : ""
 	].filter(Boolean).join(" "), l = [
-		B.circle,
-		r ? B["circle-checked"] : "",
-		n ? B["circle-disabled"] : ""
+		H.circle,
+		r ? H["circle-checked"] : "",
+		n ? H["circle-disabled"] : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ m("div", {
+		className: i.className,
 		onClick: s,
 		style: {
 			"--color": e,
@@ -1730,7 +1757,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			...i.style
 		},
 		children: [/* @__PURE__ */ p("input", {
-			className: B.switch,
+			className: H.switch,
 			type: "checkbox",
 			checked: r,
 			disabled: n,
@@ -1740,7 +1767,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			children: /* @__PURE__ */ p("div", { className: l })
 		})]
 	});
-}, V = {
+}, U = {
 	loading: "_loading_1y96m_23",
 	wrapper: "_wrapper_1y96m_38",
 	active: "_active_1y96m_66",
@@ -1754,32 +1781,36 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	suffix: "_suffix_1y96m_159",
 	counter: "_counter_1y96m_172",
 	"counter-over": "_counter-over_1y96m_177"
-}, fn = {
-	text: Ye,
-	pen: Ue,
-	email: Ce,
-	user: y,
-	lock: Le,
-	key: Me,
-	earth: Se,
-	tag: Je,
-	archive: oe,
-	link: Fe,
-	search: Be
-}, pn = ({ disabled: e = !1, loading: t = !1, isPassword: n = !1, required: r = !1, value: i = "", ...o }) => {
-	let s = c(), l = u(null), [f, h] = d(!1), [g, _] = d(n ? "password" : "text"), { onChange: v } = o, ee = a(() => {
+}, dn = {
+	text: Ke,
+	pen: Be,
+	email: be,
+	user: b,
+	lock: Pe,
+	key: ke,
+	earth: ye,
+	tag: Ge,
+	archive: ie,
+	link: Me,
+	search: Le
+}, fn = ({ disabled: e = !1, loading: t = !1, isPassword: n = !1, required: r = !1, value: i = "", ...o }) => {
+	let s = c(), l = u(null), [f, h] = d(!1), [g, _] = d(n ? "password" : "text"), { onChange: v } = o, y = a(() => {
 		!t && !e && v && v("");
 	}, [
 		t,
 		e,
 		v
-	]), te = a(() => {
+	]), ee = a(() => {
 		!t && !e && _((e) => e === "text" ? "password" : "text");
-	}, [t, e]), y = a((e) => (t) => {
+	}, [t, e]), b = a((e) => (t) => {
 		(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e());
 	}, []);
 	return /* @__PURE__ */ m("div", {
-		className: [V.wrapper, f ? V.active : ""].filter(Boolean).join(" "),
+		className: [
+			U.wrapper,
+			f ? U.active : "",
+			o.className
+		].filter(Boolean).join(" "),
 		style: {
 			backgroundColor: e || t ? "rgba(0,0,0,0.15)" : void 0,
 			"--highlight-color": f ? "#bfa056" : void 0,
@@ -1787,16 +1818,16 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		},
 		children: [
 			/* @__PURE__ */ m("div", {
-				className: V.header,
+				className: U.header,
 				children: [/* @__PURE__ */ m("label", {
 					htmlFor: s,
-					className: V.label,
+					className: U.label,
 					children: [/* @__PURE__ */ p("span", { children: o.label }), r && /* @__PURE__ */ p("span", {
-						className: V.required,
+						className: U.required,
 						children: "*"
 					})]
 				}), o.maxLength != null && /* @__PURE__ */ m("span", {
-					className: [V.counter, i.length > o.maxLength ? V["counter-over"] : ""].filter(Boolean).join(" "),
+					className: [U.counter, i.length > o.maxLength ? U["counter-over"] : ""].filter(Boolean).join(" "),
 					children: [
 						i.length,
 						" / ",
@@ -1805,10 +1836,10 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 				})]
 			}),
 			/* @__PURE__ */ m("div", {
-				className: V.body,
+				className: U.body,
 				children: [
-					o.icon && /* @__PURE__ */ p(x, {
-						d: fn[o.icon],
+					o.icon && /* @__PURE__ */ p(w, {
+						d: dn[o.icon],
 						size: "1.5rem",
 						color: "gray"
 					}),
@@ -1816,7 +1847,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 						id: s,
 						ref: l,
 						type: g,
-						className: V.input,
+						className: U.input,
 						placeholder: o.placeholder,
 						value: i,
 						onChange: (e) => v?.(e.target.value),
@@ -1827,32 +1858,32 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 						"aria-required": r
 					}),
 					/* @__PURE__ */ m("div", {
-						className: V["icon-box"],
+						className: U["icon-box"],
 						children: [
 							o.suffix != null && /* @__PURE__ */ p("span", {
-								className: V.suffix,
+								className: U.suffix,
 								children: o.suffix
 							}),
 							/* @__PURE__ */ p("div", {
-								className: V.icon,
-								onClick: te,
-								onKeyDown: y(te),
+								className: U.icon,
+								onClick: ee,
+								onKeyDown: b(ee),
 								role: "button",
 								tabIndex: 0,
-								children: /* @__PURE__ */ p(x, {
-									d: g === "text" ? Te : we,
+								children: /* @__PURE__ */ p(w, {
+									d: g === "text" ? Se : xe,
 									size: "1.75em",
 									color: "gray"
 								})
 							}),
 							/* @__PURE__ */ p("div", {
-								className: V.icon,
-								onClick: ee,
-								onKeyDown: y(ee),
+								className: U.icon,
+								onClick: y,
+								onKeyDown: b(y),
 								role: "button",
 								tabIndex: 0,
-								children: /* @__PURE__ */ p(x, {
-									d: le,
+								children: /* @__PURE__ */ p(w, {
+									d: se,
 									size: "1.75em",
 									color: "gray"
 								})
@@ -1862,36 +1893,36 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 				]
 			}),
 			/* @__PURE__ */ p("div", {
-				className: V.loading,
+				className: U.loading,
 				style: { opacity: t ? .2 : 0 }
 			})
 		]
 	});
-}, mn = { validation: "_validation_wuw0j_1" }, hn = ({ validColor: e = "#449763", ...t }) => /* @__PURE__ */ m("div", {
-	className: mn.validation,
+}, pn = { validation: "_validation_wuw0j_1" }, mn = ({ validColor: e = "#449763", ...t }) => /* @__PURE__ */ m("div", {
+	className: [pn.validation, t.className].filter(Boolean).join(" "),
 	style: {
 		"--opacity": t.isValid ? 1 : .5,
 		...t.style
 	},
-	children: [/* @__PURE__ */ p(x, {
-		d: t.isValid ? pe : me,
+	children: [/* @__PURE__ */ p(w, {
+		d: t.isValid ? de : fe,
 		color: t.isValid ? e : void 0
 	}), /* @__PURE__ */ p("span", {
 		style: { color: t.isValid ? e : void 0 },
 		children: t.text
 	})]
-}), gn = { column: "_column_12uje_1" }, _n = (e) => /* @__PURE__ */ p("div", {
-	className: gn.column,
+}), hn = { column: "_column_12uje_1" }, gn = (e) => /* @__PURE__ */ p("div", {
+	className: [hn.column, e.className].filter(Boolean).join(" "),
 	style: e.style,
 	children: e.children
-}), vn = { "column-list": "_column-list_rt1o3_1" }, yn = (e) => /* @__PURE__ */ p("div", {
-	className: vn["column-list"],
+}), _n = { "column-list": "_column-list_rt1o3_1" }, vn = (e) => /* @__PURE__ */ p("div", {
+	className: [_n["column-list"], e.className].filter(Boolean).join(" "),
 	style: e.style,
 	children: e.children
-}), bn = {
+}), yn = {
 	body: "_body_gd5gc_1",
 	button: "_button_gd5gc_5"
-}, H = {
+}, bn = {
 	provider: "_provider_94i7o_1",
 	"provider-enter": "_provider-enter_94i7o_19",
 	"provider-exit": "_provider-exit_94i7o_23",
@@ -1912,11 +1943,11 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	}, [e, t]), l = a((e) => {
 		e.stopPropagation();
 	}, []);
-	return !o && !r ? null : Xe(/* @__PURE__ */ p("div", {
-		className: `${H.provider} ${o ? H["provider-enter"] : H["provider-exit"]}`,
+	return !o && !r ? null : qe(/* @__PURE__ */ p("div", {
+		className: `${bn.provider} ${o ? bn["provider-enter"] : bn["provider-exit"]}`,
 		onClick: c,
 		children: /* @__PURE__ */ p("div", {
-			className: H.modal,
+			className: [bn.modal, n.className].filter(Boolean).join(" "),
 			style: {
 				"--width": n.width,
 				...n.style
@@ -1945,59 +1976,60 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		value: o.value,
 		onChange: t,
 		closeOnClickOutside: e,
+		className: o.className,
 		children: /* @__PURE__ */ m("div", { children: [
-			/* @__PURE__ */ p(D, {
+			/* @__PURE__ */ p(k, {
 				level: 2,
 				disableFragmentIdentifier: !0,
 				children: o.title
 			}),
 			/* @__PURE__ */ p("div", {
-				className: bn.body,
+				className: yn.body,
 				children: o.children
 			}),
 			/* @__PURE__ */ m("div", {
-				className: bn.button,
-				children: [/* @__PURE__ */ m(cn, {
+				className: yn.button,
+				children: [/* @__PURE__ */ m(sn, {
 					block: !0,
 					onClick: l,
 					loading: s,
-					children: [/* @__PURE__ */ p(x, { d: ce }), /* @__PURE__ */ p("span", { children: "Cancel" })]
-				}), /* @__PURE__ */ m(cn, {
+					children: [/* @__PURE__ */ p(w, { d: oe }), /* @__PURE__ */ p("span", { children: "Cancel" })]
+				}), /* @__PURE__ */ m(sn, {
 					block: !0,
 					onClick: u,
 					primary: !0,
 					loading: s,
-					children: [/* @__PURE__ */ p(x, {
-						d: pe,
+					children: [/* @__PURE__ */ p(w, {
+						d: de,
 						color: "currentColor"
 					}), /* @__PURE__ */ p("span", { children: "Confirm" })]
 				})]
 			})
 		] })
 	});
-}, U = {
+}, W = {
 	window: "_window_l8snl_1",
 	header: "_header_l8snl_14",
 	dot: "_dot_l8snl_25"
 }, Cn = ({ minHeight: e = "6rem", ...t }) => /* @__PURE__ */ m("div", {
-	className: U.window,
+	className: [W.window, t.className].filter(Boolean).join(" "),
 	style: t.style,
 	children: [/* @__PURE__ */ m("div", {
-		className: U.header,
+		className: W.header,
 		children: [
 			/* @__PURE__ */ p("div", {
 				"aria-hidden": !0,
-				className: U.dot,
+				className: W.dot,
 				style: { "--bg": "#c48691" }
 			}),
 			/* @__PURE__ */ p("div", {
 				"aria-hidden": !0,
-				className: U.dot,
+				className: W.dot,
 				style: { "--bg": "#c9b990" }
 			}),
 			/* @__PURE__ */ p("div", {
 				"aria-hidden": !0,
-				className: U.dot,
+				className: W.dot,
 				style: { "--bg": "#7cc598" }
 			})
 		]
@@ -2005,30 +2037,30 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		style: { minHeight: e },
 		children: t.children
 	})]
-}), wn = { parallax: "_parallax_1tovg_1" }, Tn = (e) => {
-	let [t, n] = d(0);
+}), wn = { parallax: "_parallax_1tovg_1" }, Tn = ({ className: e, ...t }) => {
+	let [n, r] = d(0);
 	return s(() => {
 		let e = null, t = () => {
 			e ?? (e = requestAnimationFrame(() => {
-				n(window.scrollY), e = null;
+				r(window.scrollY), e = null;
 			}));
 		};
 		return window.addEventListener("scroll", t, { passive: !0 }), () => {
 			window.removeEventListener("scroll", t), e != null && cancelAnimationFrame(e);
 		};
 	}, []), /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
-		className: wn.parallax,
+		className: [wn.parallax, e].filter(Boolean).join(" "),
 		style: {
-			backgroundImage: `url(${e.imageUrl1})`,
-			transform: `scale(1.2) translateY(${t / 400}%)`,
+			backgroundImage: `url(${t.imageUrl1})`,
+			transform: `scale(1.2) translateY(${n / 400}%)`,
 			transformOrigin: "bottom",
-			...e.style
+			...t.style
 		}
 	}), /* @__PURE__ */ p("div", {
 		className: wn.parallax,
 		style: {
-			backgroundImage: `url(${e.imageUrl2})`,
-			transform: `scale(1.2) translateY(${t / 900}%)`,
+			backgroundImage: `url(${t.imageUrl2})`,
+			transform: `scale(1.2) translateY(${n / 900}%)`,
 			transformOrigin: "bottom"
 		}
 	})] });
@@ -2057,7 +2089,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 		n && c();
 	}, [n, c]), /* @__PURE__ */ m("span", {
 		ref: t,
-		className: Dn.original,
+		className: [Dn.original, e.className].filter(Boolean).join(" "),
 		onMouseOver: () => r(!0),
 		onMouseLeave: () => r(!1),
 		style: e.style,
@@ -2070,7 +2102,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 }, kn = (e) => /* @__PURE__ */ p(On, {
 	original: e.children,
 	tooltip: /* @__PURE__ */ m("div", {
-		className: En.container,
+		className: [En.container, e.className].filter(Boolean).join(" "),
 		style: e.style,
 		children: [e.title && /* @__PURE__ */ p("div", {
 			className: En.title,
@@ -2085,15 +2117,15 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	icon: "_icon_1f0go_19",
 	progress: "_progress_1f0go_45"
 }, jn = ({ timeout: e = 5e3, ...t }) => /* @__PURE__ */ m("div", {
-	className: An.snackbar,
+	className: [An.snackbar, t.className].filter(Boolean).join(" "),
 	style: t.style,
 	children: [
-		t.label == null ? t.children : /* @__PURE__ */ p(w, { children: t.label }),
+		t.label == null ? t.children : /* @__PURE__ */ p(D, { children: t.label }),
 		/* @__PURE__ */ p("div", {
 			className: An.icon,
 			onClick: t.close,
-			children: /* @__PURE__ */ p(x, {
-				d: ye,
+			children: /* @__PURE__ */ p(w, {
+				d: ge,
 				size: "1em"
 			})
 		}),
@@ -2107,7 +2139,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	"snackbar-container": "_snackbar-container_up7j2_14",
 	"snackbar-item": "_snackbar-item_up7j2_23"
 }, Nn = (e) => /* @__PURE__ */ p("div", {
-	className: Mn["snackbar-screen"],
+	className: [Mn["snackbar-screen"], e.className].filter(Boolean).join(" "),
 	style: e.style,
 	children: /* @__PURE__ */ p("div", {
 		className: Mn["snackbar-container"],
@@ -2121,7 +2153,7 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 			})
 		}, e.id))
 	})
-}), W = {
+}), G = {
 	"elm-tabs": "_elm-tabs_ykoqx_1",
 	"tab-container": "_tab-container_ykoqx_18",
 	tab: "_tab_ykoqx_18",
@@ -2131,158 +2163,149 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 }, Pn = (e) => {
 	let [t, n] = d(0);
 	return /* @__PURE__ */ m("div", {
-		className: W["elm-tabs"],
+		className: [G["elm-tabs"], e.className].filter(Boolean).join(" "),
 		style: e.style,
 		children: [/* @__PURE__ */ p("div", {
-			className: W["tab-container"],
+			className: G["tab-container"],
 			children: e.tabLabels.map((e, r) => /* @__PURE__ */ p("div", {
-				className: `${W.tab} ${t === r ? W.active : ""}`,
+				className: `${G.tab} ${t === r ? G.active : ""}`,
 				onClick: () => n(r),
 				children: e
 			}, r))
 		}), /* @__PURE__ */ p("div", {
-			className: W["tab-content-container"],
+			className: G["tab-content-container"],
 			children: e.tabContents.map((e, n) => /* @__PURE__ */ p("div", {
-				className: `${W["tab-content"]} ${t === n ? W.active : ""}`,
+				className: `${G["tab-content"]} ${t === n ? G.active : ""}`,
 				children: e
 			}, n))
 		})]
 	});
-}, G = {
-	toggle: "_toggle_1c0pb_1",
-	open: "_open_1c0pb_8",
-	summary: "_summary_1c0pb_12",
-	"summary-left": "_summary-left_1c0pb_31",
-	content: "_content_1c0pb_37",
-	"content-open": "_content-open_1c0pb_60",
-	close: "_close_1c0pb_65",
-	"close-button": "_close-button_1c0pb_74"
+}, K = {
+	toggle: "_toggle_16f85_1",
+	open: "_open_16f85_14",
+	summary: "_summary_16f85_19",
+	"summary-left": "_summary-left_16f85_33",
+	divider: "_divider_16f85_40",
+	chevron: "_chevron_16f85_57",
+	cross: "_cross_16f85_70",
+	border: "_border_16f85_84",
+	content: "_content_16f85_92",
+	close: "_close_16f85_96"
 }, Fn = (e) => {
-	let [t, n] = d(!1), r = e.value !== void 0, i = r ? e.value : t, a = (t) => {
-		t.preventDefault();
-		let a = !i;
-		r ? e.onChange?.(a) : n(a);
+	let [t, n] = Je({
+		prop: e.isOpen,
+		defaultProp: !1,
+		onChange: e.setIsOpen
+	}), r = (e) => {
+		e.preventDefault(), n(!t);
 	};
 	return /* @__PURE__ */ m("div", {
-		className: `${G.toggle} ${i ? G.open : ""}`,
+		className: S(K.toggle, e.className, { [K.open]: t }),
 		style: { ...e.style },
 		children: [
 			/* @__PURE__ */ m("div", {
-				className: G.summary,
-				onClick: a,
-				style: { borderRadius: i ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem" },
-				children: [/* @__PURE__ */ m("div", {
-					className: G["summary-left"],
-					children: [/* @__PURE__ */ p("span", {
-						style: {
-							transform: `rotate(${i ? "90deg" : "0deg"})`,
-							transition: "transform 200ms",
-							display: "flex"
-						},
-						children: /* @__PURE__ */ p(x, {
-							d: he,
+				className: K.summary,
+				onClick: r,
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: K["summary-left"],
+						children: [/* @__PURE__ */ p(w, {
+							className: S(K.chevron, { [K.open]: t }),
+							d: pe,
 							color: "#59b57c",
-							size: "1.25em"
-						})
-					}), /* @__PURE__ */ p("div", { children: e.summary == null ? e.summaryContent : /* @__PURE__ */ p(w, { children: e.summary }) })]
-				}), /* @__PURE__ */ p("span", {
-					style: {
-						transform: `rotate(${i ? "135deg" : "0deg"})`,
-						transition: "transform 200ms",
-						display: "flex"
-					},
-					children: /* @__PURE__ */ p(x, {
-						d: We,
-						color: i ? "#b36472" : "#59b57c"
+							size: "1rem"
+						}), /* @__PURE__ */ p("div", { children: e.summary == null ? e.summaryContent : /* @__PURE__ */ p(D, { children: e.summary }) })]
+					}),
+					/* @__PURE__ */ p("hr", { className: K.divider }),
+					/* @__PURE__ */ p(w, {
+						className: S(K.cross, { [K.open]: t }),
+						d: Ve,
+						size: "1rem",
+						color: t ? "#b36472" : "#59b57c"
 					})
-				})]
+				]
 			}),
+			/* @__PURE__ */ p("div", { className: K.border }),
 			/* @__PURE__ */ p("div", {
-				className: `${G.content} ${i ? G["content-open"] : ""}`,
+				className: S(K.content, { [K.close]: !t }),
 				children: e.children
-			}),
-			i && /* @__PURE__ */ p("div", {
-				className: G.close,
-				onClick: a,
-				children: /* @__PURE__ */ m("div", {
-					className: G["close-button"],
-					children: [/* @__PURE__ */ p(x, {
-						d: ge,
-						size: "1.25em",
-						color: "#c56565"
-					}), /* @__PURE__ */ p(w, {
-						color: "#8e3636",
-						children: "CLOSE"
-					})]
-				})
 			})
 		]
 	});
-}, K = {
+}, q = {
 	table: "_table_197ge_1",
 	caption: "_caption_197ge_8",
 	"caption-inner": "_caption-inner_197ge_18",
 	spacing: "_spacing_197ge_25"
-}, In = r(!1), Ln = r(!1), q = ({ caption: e, hasRowHeader: t = !1, header: n, body: r, style: i }) => /* @__PURE__ */ p(Ln.Provider, {
+}, In = r(!1), Ln = r(!1), Rn = ({ caption: e, hasRowHeader: t = !1, header: n, body: r, style: i, className: a }) => /* @__PURE__ */ p(Ln.Provider, {
 	value: t,
 	children: /* @__PURE__ */ m("table", {
-		className: K.table,
+		className: [q.table, a].filter(Boolean).join(" "),
 		style: i,
 		children: [
 			e != null && /* @__PURE__ */ p("caption", { children: /* @__PURE__ */ m("span", {
-				className: K.caption,
+				className: q.caption,
 				children: [
-					/* @__PURE__ */ p("span", { className: K.spacing }),
+					/* @__PURE__ */ p("span", { className: q.spacing }),
 					/* @__PURE__ */ m("span", {
-						className: K["caption-inner"],
+						className: q["caption-inner"],
 						children: [/* @__PURE__ */ p("svg", {
 							viewBox: "0 0 24 24",
 							width: "1rem",
 							height: "1rem",
 							children: /* @__PURE__ */ p("path", {
-								d: qe,
+								d: We,
 								fill: "#6987b8"
 							})
-						}), /* @__PURE__ */ p(w, { children: e })]
+						}), /* @__PURE__ */ p(D, { children: e })]
 					}),
-					/* @__PURE__ */ p("span", { className: K.spacing })
+					/* @__PURE__ */ p("span", { className: q.spacing })
 				]
 			}) }),
 			n,
 			r
 		]
 	})
-}), Rn = ({ children: e, style: t }) => /* @__PURE__ */ p(In.Provider, {
+}), zn = ({ children: e, style: t, className: n }) => /* @__PURE__ */ p(In.Provider, {
 	value: !1,
 	children: /* @__PURE__ */ p("tbody", {
+		className: n,
 		style: t,
 		children: e
 	})
-}), zn = {
+}), Bn = {
 	common: "_common_15vhm_1",
 	td: "_td_15vhm_26",
 	th: "_th_15vhm_34"
-}, Bn = ({ children: e, style: t, hasHeader: n = !1, text: r }) => {
-	let i = o(In), a = n || i;
-	return /* @__PURE__ */ p(a ? "th" : "td", {
-		className: `${zn.common} ${a ? zn.th : zn.td}`,
+}, Vn = ({ children: e, style: t, hasHeader: n = !1, text: r, className: i }) => {
+	let a = o(In), s = n || a;
+	return /* @__PURE__ */ p(s ? "th" : "td", {
+		className: [
+			Bn.common,
+			s ? Bn.th : Bn.td,
+			i
+		].filter(Boolean).join(" "),
 		style: t,
 		children: r ?? e
 	});
-}, Vn = { thead: "_thead_184mb_1" }, Hn = ({ children: e, style: t }) => /* @__PURE__ */ p(In.Provider, {
+}, Hn = { thead: "_thead_184mb_1" }, Un = ({ children: e, style: t, className: n }) => /* @__PURE__ */ p(In.Provider, {
 	value: !0,
 	children: /* @__PURE__ */ p("thead", {
-		className: Vn.thead,
+		className: [Hn.thead, n].filter(Boolean).join(" "),
 		style: t,
 		children: e
 	})
-}), Un = {
+}), Wn = {
 	tr: "_tr_1l64j_1",
 	"has-row-header": "_has-row-header_1l64j_25"
-}, J = ({ children: e, style: t }) => {
-	let n = o(Ln);
+}, J = ({ children: e, style: t, className: n }) => {
+	let r = o(Ln);
 	return /* @__PURE__ */ p("tr", {
-		className: `${Un.tr} ${n ? Un["has-row-header"] : ""}`,
+		className: [
+			Wn.tr,
+			r ? Wn["has-row-header"] : void 0,
+			n
+		].filter(Boolean).join(" "),
 		style: t,
 		children: e
 	});
@@ -2296,22 +2319,22 @@ var Jt = ({ name: e, src: t, filesize: n, style: r }) => {
 	code: "_code_1yj17_81",
 	"code-body": "_code-body_1yj17_89",
 	fallback: "_fallback_1yj17_93"
-}, Wn = { code: "_code_1nyfa_1" }, Gn = null;
-function Kn() {
-	return Gn || (Gn = import("shiki").then(({ createHighlighter: e }) => e({
+}, Gn = { code: "_code_1nyfa_1" }, Kn = null;
+function qn() {
+	return Kn || (Kn = import("shiki").then(({ createHighlighter: e }) => e({
 		langs: /* @__PURE__ */ "abap.bash.c.clojure.coffeescript.cpp.csharp.css.dart.diff.docker.elixir.elm.erlang.fsharp.gherkin.glsl.go.graphql.groovy.haskell.html.java.javascript.json.julia.kotlin.latex.less.lisp.lua.makefile.markdown.matlab.mermaid.nix.objective-c.ocaml.pascal.perl.php.plaintext.powershell.prolog.protobuf.python.r.ruby.rust.sass.scala.scheme.scss.shell.sql.swift.toml.typescript.wasm.xml.yaml".split("."),
 		themes: ["vitesse-light", "vitesse-dark"]
-	}))), Gn;
+	}))), Kn;
 }
 //#endregion
 //#region src/components/code/ElmShikiHighlighter.tsx
-var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
-	let [i, a] = d(`<pre>${e}</pre>`);
+var Jn = ({ code: e, language: t = "txt", onRendered: n, style: r, className: i }) => {
+	let [a, o] = d(`<pre>${e}</pre>`);
 	return s(() => {
 		let r = !1;
-		return Kn().then((i) => {
+		return qn().then((i) => {
 			if (!r) try {
-				let o = i.codeToHtml(e, {
+				let a = i.codeToHtml(e, {
 					lang: t,
 					themes: {
 						dark: "vitesse-dark",
@@ -2322,7 +2345,7 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 						"#121212": "transparent"
 					}
 				});
-				r || (a(o), n?.(!0));
+				r || (o(a), n?.(!0));
 			} catch {
 				r || n?.(!0);
 			}
@@ -2336,57 +2359,57 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 		t,
 		n
 	]), /* @__PURE__ */ p("div", {
-		className: Wn.code,
+		className: [Gn.code, i].filter(Boolean).join(" "),
 		style: r,
 		children: /* @__PURE__ */ p("div", {
 			className: "shiki",
-			dangerouslySetInnerHTML: { __html: i }
+			dangerouslySetInnerHTML: { __html: a }
 		})
 	});
-}, Jn = ({ code: e, language: t = "txt", caption: n, style: r }) => {
-	let [i, o] = d(!1), [c, l] = d(!1), [f, h] = d(!1), g = u(null), _ = u(null);
+}, Yn = ({ code: e, language: t = "txt", caption: n, style: r, className: i }) => {
+	let [o, c] = d(!1), [l, f] = d(!1), [h, g] = d(!1), _ = u(null), v = u(null);
 	s(() => {
-		let e = g.current;
+		let e = _.current;
 		if (!e) return;
 		let t = new IntersectionObserver(([e]) => {
-			h(e.isIntersecting);
+			g(e.isIntersecting);
 		});
 		return t.observe(e), () => t.disconnect();
 	}, []);
-	let v = a(() => {
+	let y = a(() => {
 		navigator.clipboard.writeText(e).then(() => {
-			l(!0), _.current && clearTimeout(_.current), _.current = setTimeout(() => l(!1), 2e3);
+			f(!0), v.current && clearTimeout(v.current), v.current = setTimeout(() => f(!1), 2e3);
 		});
 	}, [e]);
 	return s(() => () => {
-		_.current && clearTimeout(_.current);
+		v.current && clearTimeout(v.current);
 	}, []), /* @__PURE__ */ m("div", {
-		ref: g,
-		className: Y.wrapper,
+		ref: _,
+		className: [Y.wrapper, i].filter(Boolean).join(" "),
 		style: {
-			opacity: +!!f,
+			opacity: +!!h,
 			...r
 		},
 		children: [/* @__PURE__ */ m("div", {
 			className: Y.header,
 			children: [/* @__PURE__ */ m("div", {
 				className: Y.header__left,
-				children: [/* @__PURE__ */ p(nt, {
+				children: [/* @__PURE__ */ p(et, {
 					language: t,
 					size: 20
 				}), /* @__PURE__ */ p("span", {
 					className: Y.caption,
-					children: /* @__PURE__ */ p(w, { children: n ?? t })
+					children: /* @__PURE__ */ p(D, { children: n ?? t })
 				})]
 			}), /* @__PURE__ */ p("div", {
 				className: Y.header__right,
 				children: /* @__PURE__ */ p("div", {
 					className: Y["copy-icon"],
-					onClick: v,
-					children: /* @__PURE__ */ p(x, {
+					onClick: y,
+					children: /* @__PURE__ */ p(w, {
 						size: "1.25em",
-						d: c ? _e : ve,
-						useThemeColor: c
+						d: l ? me : he,
+						useThemeColor: l
 					})
 				})
 			})]
@@ -2394,25 +2417,25 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 			className: Y.code,
 			children: [/* @__PURE__ */ p("div", {
 				className: Y["code-body"],
-				style: { opacity: +!!i },
-				children: /* @__PURE__ */ p(qn, {
+				style: { opacity: +!!o },
+				children: /* @__PURE__ */ p(Jn, {
 					code: e,
 					language: t,
-					onRendered: o
+					onRendered: c
 				})
 			}), /* @__PURE__ */ p("div", {
 				className: Y.fallback,
-				style: { opacity: +!i },
-				children: /* @__PURE__ */ p(S, { size: "48px" })
+				style: { opacity: +!o },
+				children: /* @__PURE__ */ p(T, { size: "48px" })
 			})]
 		})]
 	});
-}, Yn = { katex: "_katex_1a1aj_1" }, Xn = ({ expression: e, block: t = !1, style: n }) => {
-	let [r, i] = d();
+}, Xn = { katex: "_katex_1a1aj_1" }, Zn = ({ expression: e, block: t = !1, style: n, className: r }) => {
+	let [i, a] = d();
 	s(() => {
 		import("katex").then(({ renderToString: n }) => {
 			try {
-				i(n(e, {
+				a(n(e, {
 					displayMode: t,
 					output: "mathml"
 				}));
@@ -2421,22 +2444,23 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 			}
 		}).catch(() => {});
 	}, [e, t]);
-	let a = `${Yn.katex}`;
+	let o = [Xn.katex, r].filter(Boolean).join(" ");
 	return p(t ? "div" : "span", {
-		className: a,
+		className: o,
 		style: n,
-		dangerouslySetInnerHTML: r ? { __html: r } : void 0
+		dangerouslySetInnerHTML: i ? { __html: i } : void 0
 	});
 }, X = {
 	"color-bg": "_color-bg_yiibu_1",
 	text: "_text_yiibu_17"
-}, Zn = ({ color: e, style: t }) => {
-	let [n, r] = d(!1), i = u(null), o = ee(e), { hue: s, saturation: c, lightness: l } = v(e), h = te(o), g = `rgb(${o.red}, ${o.green}, ${o.blue})`, _ = `hsl(${Math.floor(s)}, ${Math.floor(c * 100)}%, ${Math.floor(l * 100)}%)`, y = a((e) => {
+}, Qn = ({ color: e, style: t, className: n }) => {
+	let [r, i] = d(!1), o = u(null), s = y(e), { hue: c, saturation: l, lightness: h } = v(e), g = ee(s), _ = `rgb(${s.red}, ${s.green}, ${s.blue})`, b = `hsl(${Math.floor(c)}, ${Math.floor(l * 100)}%, ${Math.floor(h * 100)}%)`, x = a((e) => {
 		navigator.clipboard.writeText(e).then(() => {
-			r(!0), i.current && clearTimeout(i.current), i.current = setTimeout(() => r(!1), 1500);
+			i(!0), o.current && clearTimeout(o.current), o.current = setTimeout(() => i(!1), 1500);
 		});
 	}, []);
 	return /* @__PURE__ */ p("div", {
+		className: n,
 		style: {
 			"--color": e,
 			...t
@@ -2445,41 +2469,41 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 			original: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
 				className: X["color-bg"],
 				style: { "--background-color": e },
-				onClick: () => y(h),
-				children: n && /* @__PURE__ */ p(x, {
-					d: fe,
+				onClick: () => x(g),
+				children: r && /* @__PURE__ */ p(w, {
+					d: ue,
 					size: "1em",
 					color: "white"
 				})
 			}), /* @__PURE__ */ p("div", {
 				className: X.text,
-				onClick: () => y(h),
-				children: h
+				onClick: () => x(g),
+				children: g
 			})] }),
 			tooltip: /* @__PURE__ */ m(f, { children: [
 				/* @__PURE__ */ p("div", {
 					className: X.text,
-					onClick: () => y(h),
-					children: h
+					onClick: () => x(g),
+					children: g
 				}),
 				/* @__PURE__ */ p("div", {
 					className: X.text,
-					onClick: () => y(g),
-					children: g
+					onClick: () => x(_),
+					children: _
 				}),
 				/* @__PURE__ */ p("div", {
 					className: X.text,
-					onClick: () => y(_),
-					children: _
+					onClick: () => x(b),
+					children: b
 				})
 			] })
 		})
 	});
-}, Qn = {
+}, $n = {
 	container: "_container_a7c06_1",
 	"row-container": "_row-container_a7c06_9",
 	"color-name": "_color-name_a7c06_17"
-}, $n = [
+}, er = [
 	-3,
 	-.25,
 	-.2,
@@ -2493,29 +2517,29 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 	.2,
 	.25,
 	.3
-], er = ({ colors: e, style: t }) => /* @__PURE__ */ p("div", {
-	className: Qn.container,
+], tr = ({ colors: e, style: t, className: n }) => /* @__PURE__ */ p("div", {
+	className: [$n.container, n].filter(Boolean).join(" "),
 	style: t,
 	children: e.map((e) => /* @__PURE__ */ m("div", {
-		className: Qn["row-container"],
+		className: $n["row-container"],
 		children: [/* @__PURE__ */ p("div", {
-			className: Qn["color-name"],
+			className: $n["color-name"],
 			style: { "--color": e.code },
 			children: e.name
-		}), $n.map((t) => /* @__PURE__ */ p(Zn, { color: h(t, e.code) }, t))]
+		}), er.map((t) => /* @__PURE__ */ p(Qn, { color: h(t, e.code) }, t))]
 	}, e.name))
 }), Z = {
-	palette: "_palette_1u43p_1",
-	header: "_header_1u43p_11",
-	input: "_input_1u43p_31",
-	body: "_body_1u43p_43",
-	"empty-result": "_empty-result_1u43p_60",
-	command: "_command_1u43p_71",
-	"command-selected": "_command-selected_1u43p_99",
-	"command-icon": "_command-icon_1u43p_104",
-	tag: "_tag_1u43p_108",
-	footer: "_footer_1u43p_119"
-}, tr = {
+	palette: "_palette_1glfh_1",
+	header: "_header_1glfh_11",
+	input: "_input_1glfh_31",
+	body: "_body_1glfh_43",
+	"empty-result": "_empty-result_1glfh_60",
+	command: "_command_1glfh_71",
+	"command-selected": "_command-selected_1glfh_98",
+	"command-icon": "_command-icon_1glfh_103",
+	tag: "_tag_1glfh_107",
+	footer: "_footer_1glfh_118"
+}, nr = {
 	brown: "#a17c5b",
 	crimson: "#c56565",
 	amber: "#d48b70",
@@ -2526,37 +2550,37 @@ var qn = ({ code: e, language: t = "txt", onRendered: n, style: r }) => {
 	purple: "#9771bd",
 	pink: "#c9699e"
 };
-function nr(e, t) {
+function rr(e, t) {
 	if (!t.trim()) return [];
 	let n = t.toLowerCase();
 	return e.filter((e) => e.label.toLowerCase().includes(n) || e.description?.toLowerCase().includes(n) || e.keywords?.some((e) => e.toLowerCase().includes(n)));
 }
-var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
-	let [r, i] = d(""), [o, c] = d([]), [l, f] = d(null), h = u(null);
+var ir = ({ commands: e, onCommandInvoked: t, style: n, className: r }) => {
+	let [i, o] = d(""), [c, l] = d([]), [f, h] = d(null), g = u(null);
 	s(() => {
-		h.current?.focus();
+		g.current?.focus();
 	}, []);
-	let g = a((t) => {
+	let v = a((t) => {
 		let n = t.target.value;
-		i(n);
-		let r = nr(e, n);
-		c(r), f(r.length > 0 ? 0 : null);
-	}, [e]), v = a((e) => {
+		o(n);
+		let r = rr(e, n);
+		l(r), h(r.length > 0 ? 0 : null);
+	}, [e]), y = a((e) => {
 		if (e === null) return;
-		let n = o[e];
+		let n = c[e];
 		n && (n.onInvoke?.(), t?.(n));
-	}, [o, t]);
+	}, [c, t]);
 	return s(() => {
 		let e = (e) => {
-			e.key === "ArrowDown" || e.key === "Tab" ? (e.preventDefault(), f((e) => e === null ? 0 : e < o.length - 1 ? e + 1 : e)) : e.key === "ArrowUp" ? (e.preventDefault(), f((e) => e === null ? 0 : e > 0 ? e - 1 : 0)) : e.key === "Enter" && (e.preventDefault(), v(l));
+			e.key === "ArrowDown" || e.key === "Tab" ? (e.preventDefault(), h((e) => e === null ? 0 : e < c.length - 1 ? e + 1 : e)) : e.key === "ArrowUp" ? (e.preventDefault(), h((e) => e === null ? 0 : e > 0 ? e - 1 : 0)) : e.key === "Enter" && (e.preventDefault(), y(f));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		v,
-		l,
-		o.length
+		y,
+		f,
+		c.length
 	]), /* @__PURE__ */ m("div", {
-		className: Z.palette,
+		className: [Z.palette, r].filter(Boolean).join(" "),
 		style: {
 			"--height": "500px",
 			"--width": "800px",
@@ -2565,40 +2589,40 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 		children: [
 			/* @__PURE__ */ m("header", {
 				className: Z.header,
-				children: [/* @__PURE__ */ p(x, { d: be }), /* @__PURE__ */ p("input", {
-					ref: h,
+				children: [/* @__PURE__ */ p(w, { d: _e }), /* @__PURE__ */ p("input", {
+					ref: g,
 					className: Z.input,
-					value: r,
-					onChange: g,
+					value: i,
+					onChange: v,
 					type: "text",
 					inputMode: "text"
 				})]
 			}),
 			/* @__PURE__ */ p("div", {
 				className: Z.body,
-				children: o.length === 0 ? /* @__PURE__ */ p("div", {
+				children: c.length === 0 ? /* @__PURE__ */ p("div", {
 					className: Z["empty-result"],
-					children: /* @__PURE__ */ p(w, { children: "search anything..." })
-				}) : o.map((e, t) => /* @__PURE__ */ m("button", {
-					className: `${Z.command} ${t === l ? Z["command-selected"] : ""}`,
+					children: /* @__PURE__ */ p(D, { children: "search anything..." })
+				}) : c.map((e, t) => /* @__PURE__ */ m("button", {
+					className: `${Z.command} ${t === f ? Z["command-selected"] : ""}`,
 					onClick: () => {
-						f(t), v(t);
+						h(t), y(t);
 					},
 					children: [
 						e.icon ? /* @__PURE__ */ p("img", {
 							className: Z["command-icon"],
 							src: e.icon,
 							alt: e.label
-						}) : /* @__PURE__ */ p(x, {
-							d: be,
+						}) : /* @__PURE__ */ p(w, {
+							d: _e,
 							size: "1rem"
 						}),
 						e.tag ? /* @__PURE__ */ p("div", {
 							className: Z.tag,
-							style: { "--tag-color": _(-.3, tr[e.tag.color]) },
+							style: { "--tag-color": _(-.3, nr[e.tag.color]) },
 							children: e.tag.name
 						}) : /* @__PURE__ */ p("div", { className: Z.tag }),
-						/* @__PURE__ */ p(w, {
+						/* @__PURE__ */ p(D, {
 							style: {
 								whiteSpace: "nowrap",
 								overflow: "hidden",
@@ -2607,7 +2631,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 							},
 							children: e.label
 						}),
-						/* @__PURE__ */ p(w, {
+						/* @__PURE__ */ p(D, {
 							style: {
 								opacity: .4,
 								whiteSpace: "nowrap",
@@ -2616,40 +2640,40 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 							},
 							children: e.description ?? "-"
 						}),
-						/* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(x, { d: Ne }) })
+						/* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(w, { d: Ae }) })
 					]
 				}, e.id))
 			}),
 			/* @__PURE__ */ m("footer", {
 				className: Z.footer,
-				children: [/* @__PURE__ */ p(w, {
+				children: [/* @__PURE__ */ p(D, {
 					kbd: !0,
 					children: "Esc"
-				}), /* @__PURE__ */ p(w, { children: "Close" })]
+				}), /* @__PURE__ */ p(D, { children: "Close" })]
 			})
 		]
 	});
-}, ir = {
+}, ar = {
 	"jarkup-body": "_jarkup-body_jsvhx_1",
 	"unsupported-block": "_unsupported-block_jsvhx_5"
-}, ar = ({ jsonComponents: e, style: t }) => /* @__PURE__ */ p("div", {
-	className: ir["jarkup-body"],
+}, or = ({ jsonComponents: e, style: t, className: n }) => /* @__PURE__ */ p("div", {
+	className: [ar["jarkup-body"], n].filter(Boolean).join(" "),
 	style: t,
 	children: e.map((e, t) => /* @__PURE__ */ p("div", {
-		className: ir["unsupported-block"],
+		className: ar["unsupported-block"],
 		children: /* @__PURE__ */ p("code", { children: JSON.stringify(e, null, 2) })
 	}, t))
-}), or = {
+}), sr = {
 	"jarkup-body": "_jarkup-body_1rlbi_1",
 	"column-list": "_column-list_1rlbi_9",
 	column: "_column_1rlbi_9"
-}, sr = i(() => import("./ElmMermaid-BFqvHKdQ.js").then((e) => e.n).then((e) => ({ default: e.ElmMermaid }))), cr = (e) => e.map((e) => e.type === "Text" ? e.props.text : "").join(""), lr = {
+}, cr = i(() => import("./ElmMermaid-CUeT_XM9.js").then((e) => e.n).then((e) => ({ default: e.ElmMermaid }))), lr = (e) => e.map((e) => e.type === "Text" ? e.props.text : "").join(""), ur = {
 	Text: (e, t, n, r) => {
 		let i = e.id ?? n, a = e.props;
-		return a.katex ? /* @__PURE__ */ p(Xn, {
+		return a.katex ? /* @__PURE__ */ p(Zn, {
 			expression: a.text,
 			block: !1
-		}, i) : /* @__PURE__ */ p(w, {
+		}, i) : /* @__PURE__ */ p(D, {
 			color: a.color,
 			backgroundColor: a.backgroundColor,
 			bold: a.bold,
@@ -2665,7 +2689,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Icon: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(b, {
+		return /* @__PURE__ */ p(C, {
 			src: e.props.src,
 			alt: e.props.alt
 		}, i);
@@ -2676,16 +2700,16 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Heading: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(D, {
+		return /* @__PURE__ */ p(k, {
 			level: e.props.level,
-			id: Ze(cr(e.slots.default)),
+			id: Ye(lr(e.slots.default)),
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0,
 			children: t(e.slots.default)
 		}, i);
 	},
 	Paragraph: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(wt, {
+		return /* @__PURE__ */ p(St, {
 			backgroundColor: e.props?.backgroundColor,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0,
 			children: t(e.slots.default)
@@ -2697,7 +2721,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	List: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(It, {
+		return /* @__PURE__ */ p(Ft, {
 			listStyle: e.props?.listStyle === "unordered" ? "unordered" : "ordered",
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0,
 			children: t(e.slots.default)
@@ -2705,7 +2729,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	BlockQuote: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Tt, {
+		return /* @__PURE__ */ p(Ct, {
 			cite: e.props?.cite,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0,
 			children: t(e.slots.default)
@@ -2713,7 +2737,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Callout: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Ot, {
+		return /* @__PURE__ */ p(Et, {
 			type: e.props?.type,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0,
 			children: t(e.slots.default)
@@ -2721,7 +2745,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Divider: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(At, { style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0 }, i);
+		return /* @__PURE__ */ p(Ot, { style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0 }, i);
 	},
 	Toggle: (e, t, n, r) => {
 		let i = e.id ?? n;
@@ -2733,7 +2757,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Bookmark: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Yt, {
+		return /* @__PURE__ */ p(Jt, {
 			url: e.props.url,
 			title: e.props.title,
 			description: e.props.description,
@@ -2743,7 +2767,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	File: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Jt, {
+		return /* @__PURE__ */ p(qt, {
 			src: e.props.src,
 			name: e.props.name,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0
@@ -2751,7 +2775,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Image: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(j, {
+		return /* @__PURE__ */ p(N, {
 			src: e.props.src,
 			alt: e.props.alt,
 			width: e.props.width,
@@ -2763,7 +2787,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	CodeBlock: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Jn, {
+		return /* @__PURE__ */ p(Yn, {
 			code: e.props.code,
 			language: e.props.language,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0
@@ -2771,7 +2795,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Katex: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Xn, {
+		return /* @__PURE__ */ p(Zn, {
 			expression: e.props.expression,
 			block: !0,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0
@@ -2780,8 +2804,8 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	Mermaid: (e, t, r, i) => {
 		let a = e.id ?? r;
 		return /* @__PURE__ */ p(n, {
-			fallback: /* @__PURE__ */ p(rn, {}),
-			children: /* @__PURE__ */ p(sr, {
+			fallback: /* @__PURE__ */ p(nn, {}),
+			children: /* @__PURE__ */ p(cr, {
 				code: e.props.code,
 				style: r === 0 ? { "--elmethis-margin-block-start": "0" } : void 0
 			})
@@ -2798,11 +2822,11 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Table: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(q, {
+		return /* @__PURE__ */ p(Rn, {
 			caption: e.props?.caption,
 			hasRowHeader: e.props?.hasRowHeader,
-			header: e.slots.header ? /* @__PURE__ */ p(Hn, { children: t(e.slots.header) }) : void 0,
-			body: /* @__PURE__ */ p(Rn, { children: t(e.slots.body) }),
+			header: e.slots.header ? /* @__PURE__ */ p(Un, { children: t(e.slots.header) }) : void 0,
+			body: /* @__PURE__ */ p(zn, { children: t(e.slots.body) }),
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0
 		}, i);
 	},
@@ -2812,12 +2836,12 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	TableCell: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return /* @__PURE__ */ p(Bn, { children: t(e.slots.default) }, i);
+		return /* @__PURE__ */ p(Vn, { children: t(e.slots.default) }, i);
 	},
 	ColumnList: (e, t, n, r) => {
 		let i = e.id ?? n;
 		return /* @__PURE__ */ p("div", {
-			className: or["column-list"],
+			className: sr["column-list"],
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0,
 			children: t(e.slots.default)
 		}, i);
@@ -2825,7 +2849,7 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	Column: (e, t, n, r) => {
 		let i = e.id ?? n;
 		return /* @__PURE__ */ p("div", {
-			className: or.column,
+			className: sr.column,
 			style: {
 				"--width-ratio": e.props?.widthRatio ?? 1,
 				width: e.props?.widthRatio ? `${e.props.widthRatio * 100}%` : void 0,
@@ -2836,157 +2860,157 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	Unsupported: (e, t, n, r) => {
 		let i = e.id ?? n;
-		return r?.skipUnsupportedComponentWarning ? null : /* @__PURE__ */ p(sn, {
+		return r?.skipUnsupportedComponentWarning ? null : /* @__PURE__ */ p(on, {
 			details: e.props?.details ?? `Unsupported component type: ${e.type}`,
 			style: n === 0 ? { "--elmethis-margin-block-start": "0" } : void 0
 		}, i);
 	}
-}, ur = ({ jsonComponents: e, skipUnsupportedComponentWarning: t = !1, renderFunctionMap: n, style: r }) => {
-	let i = {
-		...lr,
+}, dr = ({ jsonComponents: e, skipUnsupportedComponentWarning: t = !1, renderFunctionMap: n, style: r, className: i }) => {
+	let a = {
+		...ur,
 		...n
-	}, a = (e) => e.map((e, n) => {
-		let o = e.id ?? n, s = i[e.type];
-		return s ? s(e, a, n, {
+	}, o = (e) => e.map((e, n) => {
+		let i = e.id ?? n, s = a[e.type];
+		return s ? s(e, o, n, {
 			skipUnsupportedComponentWarning: t,
 			style: r
-		}) : t ? null : /* @__PURE__ */ p(sn, { details: `Unsupported component type: ${e.type}` }, o);
+		}) : t ? null : /* @__PURE__ */ p(on, { details: `Unsupported component type: ${e.type}` }, i);
 	});
 	return /* @__PURE__ */ p("div", {
-		className: or["jarkup-body"],
+		className: [sr["jarkup-body"], i].filter(Boolean).join(" "),
 		style: {
 			"--elmethis-margin-block-start": r?.["--elmethis-margin-block-start"] ?? "2.5rem",
 			...r
 		},
-		children: a(e)
+		children: o(e)
 	});
-}, dr = { "markdown-body": "_markdown-body_130yx_1" }, Q = (e) => e === 0 ? { "--elmethis-margin-block-start": "0" } : void 0, fr = {
+}, fr = { "markdown-body": "_markdown-body_130yx_1" }, Q = (e) => e === 0 ? { "--elmethis-margin-block-start": "0" } : void 0, pr = {
 	blockquote: (e, t, n) => {
 		if (!e.tokens || e.tokens.length === 0) return null;
 		let r = e.tokens.flatMap((e) => e.type === "paragraph" && e.tokens ? e.tokens : [e]);
-		return /* @__PURE__ */ p(Tt, {
+		return /* @__PURE__ */ p(Ct, {
 			style: Q(n),
 			children: t(r)
 		}, n);
 	},
 	br: (e, t, n) => /* @__PURE__ */ p("br", {}, n),
-	checkbox: (e, t, n) => /* @__PURE__ */ p(ln, {
+	checkbox: (e, t, n) => /* @__PURE__ */ p(cn, {
 		label: e.raw,
 		checked: e.checked,
 		style: Q(n)
 	}, n),
-	code: (e, t, n) => /* @__PURE__ */ p(Jn, {
+	code: (e, t, n) => /* @__PURE__ */ p(Yn, {
 		code: e.text.trim(),
 		language: e.lang,
 		style: Q(n)
 	}, n),
-	codespan: (e, t, n) => /* @__PURE__ */ p(w, {
+	codespan: (e, t, n) => /* @__PURE__ */ p(D, {
 		code: !0,
 		children: e.text
 	}, n),
 	def: () => null,
-	del: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(w, {
+	del: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(D, {
 		strikethrough: !0,
 		children: t(e.tokens)
-	}, n) : /* @__PURE__ */ p(w, {
+	}, n) : /* @__PURE__ */ p(D, {
 		strikethrough: !0,
 		children: e.text
 	}, n),
-	em: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(w, {
+	em: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(D, {
 		italic: !0,
 		children: t(e.tokens)
-	}, n) : /* @__PURE__ */ p(w, {
+	}, n) : /* @__PURE__ */ p(D, {
 		italic: !0,
 		children: e.text
 	}, n),
 	escape: () => null,
 	heading: (e, t, n) => {
 		let r = e.depth;
-		return e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(D, {
+		return e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(k, {
 			level: r,
 			style: Q(n),
 			children: t(e.tokens)
-		}, n) : /* @__PURE__ */ p(D, {
+		}, n) : /* @__PURE__ */ p(k, {
 			level: r,
 			text: e.text,
 			style: Q(n)
 		}, n);
 	},
-	hr: (e, t, n) => /* @__PURE__ */ p(At, { style: Q(n) }, n),
+	hr: (e, t, n) => /* @__PURE__ */ p(Ot, { style: Q(n) }, n),
 	html: () => null,
-	image: (e, t, n) => /* @__PURE__ */ p(j, {
+	image: (e, t, n) => /* @__PURE__ */ p(N, {
 		block: !0,
 		enableModal: !0,
 		src: e.href,
 		alt: e.text,
 		style: Q(n)
 	}, n),
-	link: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(w, {
+	link: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(D, {
 		href: e.href,
 		children: t(e.tokens)
-	}, n) : /* @__PURE__ */ p(w, {
+	}, n) : /* @__PURE__ */ p(D, {
 		href: e.href,
 		children: e.text
 	}, n),
 	list: (e, t, n) => {
 		let r = e.items.map((e, n) => /* @__PURE__ */ p("li", { children: t(e.tokens) }, n));
-		return /* @__PURE__ */ p(It, {
+		return /* @__PURE__ */ p(Ft, {
 			listStyle: e.ordered ? "ordered" : "unordered",
 			style: Q(n),
 			children: r
 		}, n);
 	},
 	list_item: (e, t, n) => /* @__PURE__ */ p("li", { children: e.tokens && e.tokens.length !== 0 ? t(e.tokens) : e.text }, n),
-	paragraph: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(wt, {
+	paragraph: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(St, {
 		style: Q(n),
 		children: t(e.tokens)
 	}, n) : null,
 	space: () => null,
-	strong: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(w, {
+	strong: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(D, {
 		bold: !0,
 		children: t(e.tokens)
-	}, n) : /* @__PURE__ */ p(w, {
+	}, n) : /* @__PURE__ */ p(D, {
 		bold: !0,
 		children: e.text
 	}, n),
 	table: (e, t, n) => {
-		let r = (e) => e.map((e, n) => /* @__PURE__ */ p(Bn, { children: t(e.tokens) }, n)), i = /* @__PURE__ */ p(J, { children: r(e.header) }), a = e.rows.map((e, t) => /* @__PURE__ */ p(J, { children: r(e) }, t));
-		return /* @__PURE__ */ p(q, {
-			header: /* @__PURE__ */ p(Hn, { children: i }),
-			body: /* @__PURE__ */ p(Rn, { children: a }),
+		let r = (e) => e.map((e, n) => /* @__PURE__ */ p(Vn, { children: t(e.tokens) }, n)), i = /* @__PURE__ */ p(J, { children: r(e.header) }), a = e.rows.map((e, t) => /* @__PURE__ */ p(J, { children: r(e) }, t));
+		return /* @__PURE__ */ p(Rn, {
+			header: /* @__PURE__ */ p(Un, { children: i }),
+			body: /* @__PURE__ */ p(zn, { children: a }),
 			style: Q(n)
 		}, n);
 	},
-	text: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(w, { children: t(e.tokens) }, n) : /* @__PURE__ */ p(w, { children: e.text }, n)
-}, pr = ({ markdown: e, style: t, renderFunctionMap: n }) => {
-	let r = {
-		...fr,
-		...n
-	}, i = (e) => e.map((e, t) => {
-		let n = r[e.type];
-		return n ? n(e, i, t) : null;
-	}), a = Qe.setOptions({ gfm: !0 }).lexer(e);
+	text: (e, t, n) => e.tokens && e.tokens.length !== 0 ? /* @__PURE__ */ p(D, { children: t(e.tokens) }, n) : /* @__PURE__ */ p(D, { children: e.text }, n)
+}, mr = ({ markdown: e, style: t, className: n, renderFunctionMap: r }) => {
+	let i = {
+		...pr,
+		...r
+	}, a = (e) => e.map((e, t) => {
+		let n = i[e.type];
+		return n ? n(e, a, t) : null;
+	}), o = Xe.setOptions({ gfm: !0 }).lexer(e);
 	return /* @__PURE__ */ p("div", {
-		className: dr["markdown-body"],
+		className: [fr["markdown-body"], n].filter(Boolean).join(" "),
 		style: {
 			"--elmethis-margin-block-start": "2.5rem",
 			...t
 		},
-		children: i(a)
+		children: a(o)
 	});
 }, $ = {
 	char: "_char_sojtj_1",
 	typed: "_typed_sojtj_20",
 	current: "_current_sojtj_24",
 	incorrect: "_incorrect_sojtj_29"
-}, mr = ({ target: e = "Typing game", style: t }) => {
-	let [n, r] = d(() => {
+}, hr = ({ target: e = "Typing game", style: t, className: n }) => {
+	let [r, i] = d(() => {
 		let t = e.split("").map((e) => ({
 			char: e,
 			status: "default"
 		}));
 		return t.length > 0 && (t[0].status = "current"), t;
-	}), [i, a] = d(0), [o, c] = d(0), [l, u] = d(!1);
+	}), [a, o] = d(0), [c, l] = d(0), [u, f] = d(!1);
 	return s(() => {
 		let t = e.split("").map((e) => ({
 			char: e,
@@ -2994,31 +3018,32 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 		}));
 		t.length > 0 && (t[0].status = "current");
 		let n = window.setTimeout(() => {
-			r(t), a(0), c(0), u(!1);
+			i(t), o(0), l(0), f(!1);
 		}, 0);
 		return () => clearTimeout(n);
 	}, [e]), s(() => {
 		let e = (e) => {
-			l || e.key.length !== 1 || r((t) => {
-				if (!t[i]) return t;
+			u || e.key.length !== 1 || i((t) => {
+				if (!t[a]) return t;
 				let n = [...t];
-				return e.key === n[i].char ? (n[i] = {
-					...n[i],
+				return e.key === n[a].char ? (n[a] = {
+					...n[a],
 					status: "typed"
-				}, i === n.length - 1 ? u(!0) : a((e) => (n[e + 1] = {
+				}, a === n.length - 1 ? f(!0) : o((e) => (n[e + 1] = {
 					...n[e + 1],
 					status: "current"
-				}, e + 1))) : (n[i] = {
-					...n[i],
+				}, e + 1))) : (n[a] = {
+					...n[a],
 					status: "incorrect"
-				}, c((e) => e + 1)), n;
+				}, l((e) => e + 1)), n;
 			});
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [i, l]), /* @__PURE__ */ m("div", {
+	}, [a, u]), /* @__PURE__ */ m("div", {
+		className: n,
 		style: t,
 		children: [
-			/* @__PURE__ */ p("div", { children: n.map((e, t) => /* @__PURE__ */ p("span", {
+			/* @__PURE__ */ p("div", { children: r.map((e, t) => /* @__PURE__ */ p("span", {
 				className: [
 					$.char,
 					e.status === "typed" ? $.typed : "",
@@ -3027,13 +3052,14 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 				].filter(Boolean).join(" "),
 				children: e.char
 			}, t)) }),
-			l && /* @__PURE__ */ p("div", { children: "FINISH!" }),
-			o > 0 && /* @__PURE__ */ m("div", { children: ["Mistakes: ", o] })
+			u && /* @__PURE__ */ p("div", { children: "FINISH!" }),
+			c > 0 && /* @__PURE__ */ m("div", { children: ["Mistakes: ", c] })
 		]
 	});
-}, hr = ({ oEmbed: e, style: t }) => e.type === "photo" ? /* @__PURE__ */ p("div", {
+}, gr = ({ oEmbed: e, style: t, className: n }) => e.type === "photo" ? /* @__PURE__ */ p("div", {
+	className: n,
 	style: t,
-	children: /* @__PURE__ */ p(j, {
+	children: /* @__PURE__ */ p(N, {
 		src: e.url,
 		alt: e.title,
 		width: e.width,
@@ -3048,11 +3074,12 @@ var rr = ({ commands: e, onCommandInvoked: t, style: n }) => {
 	},
 	dangerouslySetInnerHTML: { __html: e.html }
 }) : /* @__PURE__ */ p("div", {
+	className: n,
 	style: t,
-	children: /* @__PURE__ */ p(w, {
+	children: /* @__PURE__ */ p(D, {
 		href: e.author_url ?? e.provider_url ?? "#",
 		children: e.title ?? e.author_name ?? e.provider_name ?? "Link"
 	})
 });
 //#endregion
-export { mt as ElmArrowIcon, rn as ElmBlockFallback, Tt as ElmBlockQuote, Yt as ElmBookmark, _t as ElmBookmarkIcon, Xt as ElmBreadcrumb, cn as ElmButton, Ot as ElmCallout, ln as ElmCheckbox, Jn as ElmCodeBlock, Zn as ElmColorSample, er as ElmColorTable, _n as ElmColumn, yn as ElmColumnList, rr as ElmCommandPalette, Sn as ElmConfirmModal, bt as ElmCubeIcon, Cn as ElmDesktopWindow, At as ElmDivider, S as ElmDotLoadingIcon, Jt as ElmFile, Mt as ElmFragmentIdentifier, D as ElmHeading, j as ElmImage, b as ElmInlineIcon, w as ElmInlineText, ur as ElmJarkup, ar as ElmJsonComponentRenderer, Xn as ElmKatex, nt as ElmLanguageIcon, It as ElmList, St as ElmLoginIcon, pr as ElmMarkdown, x as ElmMdiIcon, e as ElmMermaid, xn as ElmModal, Ut as ElmMultiProgress, hr as ElmOEmbed, Zt as ElmPageTop, wt as ElmParagraph, Tn as ElmParallax, Vt as ElmProgress, nn as ElmRectangleWave, un as ElmSelect, qn as ElmShikiHighlighter, kn as ElmSimpleTooltip, jn as ElmSnackbar, Nn as ElmSnackbarContainer, on as ElmSpinner, ct as ElmSquareLoadingIcon, Kt as ElmStatusMessage, dn as ElmSwitch, q as ElmTable, Rn as ElmTableBody, Bn as ElmTableCell, Hn as ElmTableHeader, $t as ElmTableOfContents, J as ElmTableRow, Pn as ElmTabs, Bt as ElmTemplate, pn as ElmTextField, Fn as ElmToggle, pt as ElmToggleTheme, On as ElmTooltip, mr as ElmTyping, Rt as ElmTypingAnimation, sn as ElmUnsupportedBlock, hn as ElmValidation, rt as LANGUAGES };
+export { ft as ElmArrowIcon, nn as ElmBlockFallback, Ct as ElmBlockQuote, Jt as ElmBookmark, ht as ElmBookmarkIcon, Yt as ElmBreadcrumb, sn as ElmButton, Et as ElmCallout, cn as ElmCheckbox, Yn as ElmCodeBlock, Qn as ElmColorSample, tr as ElmColorTable, gn as ElmColumn, vn as ElmColumnList, ir as ElmCommandPalette, Sn as ElmConfirmModal, vt as ElmCubeIcon, Cn as ElmDesktopWindow, Ot as ElmDivider, T as ElmDotLoadingIcon, qt as ElmFile, At as ElmFragmentIdentifier, k as ElmHeading, N as ElmImage, C as ElmInlineIcon, D as ElmInlineText, dr as ElmJarkup, or as ElmJsonComponentRenderer, Zn as ElmKatex, et as ElmLanguageIcon, Ft as ElmList, bt as ElmLoginIcon, mr as ElmMarkdown, w as ElmMdiIcon, e as ElmMermaid, xn as ElmModal, Ht as ElmMultiProgress, gr as ElmOEmbed, Xt as ElmPageTop, St as ElmParagraph, Tn as ElmParallax, Bt as ElmProgress, tn as ElmRectangleWave, ln as ElmSelect, Jn as ElmShikiHighlighter, kn as ElmSimpleTooltip, jn as ElmSnackbar, Nn as ElmSnackbarContainer, an as ElmSpinner, ot as ElmSquareLoadingIcon, Gt as ElmStatusMessage, un as ElmSwitch, Rn as ElmTable, zn as ElmTableBody, Vn as ElmTableCell, Un as ElmTableHeader, Qt as ElmTableOfContents, J as ElmTableRow, Pn as ElmTabs, zt as ElmTemplate, fn as ElmTextField, Fn as ElmToggle, dt as ElmToggleTheme, On as ElmTooltip, hr as ElmTyping, Lt as ElmTypingAnimation, on as ElmUnsupportedBlock, mn as ElmValidation, tt as LANGUAGES };