npm - @elmethis/qwik - Versions diffs - 0.1.0-alpha.7 → 1.0.0-alpha.9 - Mend

@elmethis/qwik 0.1.0-alpha.7 → 1.0.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/index.qwik.cjs +550 -591
package/lib/index.qwik.mjs +551 -592
package/lib/q-manifest.json +4 -4
package/lib/style.css +409 -391
package/lib-types/components/icon/elm-dot-loading-icon.d.ts +0 -6
package/lib-types/components/others/elm-color-token-sample.d.ts +6 -0
package/lib-types/components/others/elm-color-token-sample.stories.d.ts +6 -0
package/lib-types/styles/variables.d.ts +5 -19
package/package.json +2 -2

package/lib/index.qwik.cjs CHANGED Viewed

@@ -42,15 +42,15 @@ const uuid = require("uuid");
 const autoAnimate = require("@formkit/auto-animate");
 const esToolkit = require("es-toolkit");
 const polished = require("polished");
-const tab = "_tab_1ss3u_18";
-const active$3 = "_active_1ss3u_39";
+const tab = "_tab_1wt9e_14";
+const active$3 = "_active_1wt9e_38";
 const styles$U = {
-  "elm-tabs": "_elm-tabs_1ss3u_1",
-  "tab-container": "_tab-container_1ss3u_18",
+  "elm-tabs": "_elm-tabs_1wt9e_1",
+  "tab-container": "_tab-container_1wt9e_14",
   tab,
   active: active$3,
-  "tab-content": "_tab-content_1ss3u_50",
-  "tab-content-inner": "_tab-content-inner_1ss3u_55"
+  "tab-content": "_tab-content_1wt9e_53",
+  "tab-content-inner": "_tab-content-inner_1wt9e_58"
 };
 const row$2 = "_row_12wiu_5";
 const open$2 = "_open_12wiu_11";
@@ -65,7 +65,7 @@ const styles$T = {
   both,
   inner
 };
-const _hf0$S = (p0) => ({
+const _hf0$Q = (p0) => ({
   "--elmethis-scoped-transition-timing-function": p0.transitionTimingFunction ?? "ease-in-out"
 });
 const ElmCollapse = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -86,7 +86,7 @@ const ElmCollapse = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
       },
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$S, [
+    style: core$1._fnSignal(_hf0$Q, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -98,7 +98,7 @@ function useBindableSignal({ signal, defaultValue }) {
   const internal = core$1.useSignal(defaultValue);
   return signal ?? internal;
 }
-const _hf0$R = (p0, p1) => p0.selectedValue.value === p1.value;
+const _hf0$P = (p0, p1) => p0.selectedValue.value === p1.value;
 const ElmTabsContext = core$1.createContextId("elmethis.tabs");
 const ElmTabs = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
@@ -174,7 +174,7 @@ const ElmTabPanel = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), /* @__PURE__ */ core$1._jsxSorted(ElmCollapse, null, {
     direction: "row",
-    isOpen: core$1._fnSignal(_hf0$R, [
+    isOpen: core$1._fnSignal(_hf0$P, [
       ctx,
       props
     ]),
@@ -183,17 +183,17 @@ const ElmTabPanel = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     class: styles$U["tab-content-inner"]
   }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "lK_6"), 1, null), 1, "lK_7"), 0, "lK_8");
 }, "ElmTabPanel_component_4GhH207NkRY"));
-const h1 = "_h1_z7u1t_23";
-const h2 = "_h2_z7u1t_58";
-const h2__underline = "_h2__underline_z7u1t_92";
-const h3 = "_h3_z7u1t_109";
-const h4 = "_h4_z7u1t_128";
-const h5 = "_h5_z7u1t_132";
-const h6 = "_h6_z7u1t_136";
+const h1 = "_h1_1ppra_23";
+const h2 = "_h2_1ppra_50";
+const h2__underline = "_h2__underline_1ppra_76";
+const h3 = "_h3_1ppra_89";
+const h4 = "_h4_1ppra_104";
+const h5 = "_h5_1ppra_108";
+const h6 = "_h6_1ppra_112";
 const styles$S = {
-  "heading-common": "_heading-common_z7u1t_1",
+  "heading-common": "_heading-common_1ppra_1",
   h1,
-  "heading-stretch": "_heading-stretch_z7u1t_1",
+  "heading-stretch": "_heading-stretch_1ppra_1",
   h2,
   h2__underline,
   h3,
@@ -201,11 +201,11 @@ const styles$S = {
   h5,
   h6
 };
-const text$5 = "_text_h3mwy_1";
+const text$4 = "_text_1a71m_1";
 const textStyles = {
-  text: text$5
+  text: text$4
 };
-const fragment = "_fragment_1rl9f_1";
+const fragment = "_fragment_w9jju_1";
 const styles$R = {
   fragment
 };
@@ -284,21 +284,21 @@ const ElmHeading = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
     }, null, 3, "sL_3")
   ], 0, "sL_4");
 }, "ElmHeading_component_O0GozTFBBog"));
-const text$4 = "_text_1nwpy_1";
-const code$2 = "_code_1nwpy_12";
-const kbd = "_kbd_1nwpy_21";
-const link$1 = "_link_1nwpy_50";
+const text$3 = "_text_yfzp9_1";
+const code$2 = "_code_yfzp9_12";
+const kbd = "_kbd_yfzp9_21";
+const link$1 = "_link_yfzp9_55";
 const styles$Q = {
-  text: text$4,
+  text: text$3,
   code: code$2,
   kbd,
   link: link$1
 };
-const icon$5 = "_icon_1pv7j_1";
+const icon$6 = "_icon_1pv7j_1";
 const styles$P = {
-  icon: icon$5
+  icon: icon$6
 };
-const _hf0$Q = (p0) => p0.width ?? p0.size ?? 16;
+const _hf0$O = (p0) => p0.width ?? p0.size ?? 16;
 const _hf1$h = (p0) => p0.height ?? p0.size ?? 16;
 const ElmInlineIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
@@ -321,19 +321,13 @@ const ElmInlineIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
       _rawProps
     ]),
     src: core$1._wrapProp(_rawProps, "src"),
-    width: core$1._fnSignal(_hf0$Q, [
+    width: core$1._fnSignal(_hf0$O, [
       _rawProps
     ])
   }, {
     class: styles$P.icon
   }, null, 3, null), 0, "D4_0");
 }, "ElmInlineIcon_component_9LkENpSGozA"));
-const _hf0$P = (p0) => ({
-  ...p0.style,
-  "--elmethis-scoped-color": p0.color,
-  "--elmethis-scoped-font-size": p0.size ?? "1em",
-  "--elmethis-scoped-background-color": p0.backgroundColor
-});
 const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const rest = core$1._restProps(_rawProps, [
     "class",
@@ -391,17 +385,21 @@ const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
       textStyles.text,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$P, [
-      _rawProps
-    ]),
+    style: {
+      ..._rawProps.style,
+      color: _rawProps.color ?? "var(--elmethis-color-mono-fg)",
+      "--elmethis-scoped-color": _rawProps.color,
+      "--elmethis-scoped-font-size": _rawProps.size ?? "1em",
+      "--elmethis-scoped-background-color": _rawProps.backgroundColor
+    },
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), vnode, 0, "7t_10");
 }, "ElmInlineText_component_MdjKbLJ3SR0"));
-const paragraph = "_paragraph_1ja1t_1";
+const paragraph = "_paragraph_15bb1_1";
 const styles$O = {
   paragraph
 };
-const _hf0$O = (p0) => ({
+const _hf0$N = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-background-color": p0.backgroundColor
@@ -419,7 +417,7 @@ const ElmParagraph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       textStyles.text,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$O, [
+    style: core$1._fnSignal(_hf0$N, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -432,7 +430,7 @@ const list = "_list_4ps3c_64";
 const card = "_card_4ps3c_81";
 const button$1 = "_button_4ps3c_91";
 const image$3 = "_image_4ps3c_122";
-const icon$4 = "_icon_4ps3c_130";
+const icon$5 = "_icon_4ps3c_130";
 const divider$2 = "_divider_4ps3c_139";
 const label$1 = "_label_4ps3c_161";
 const input$2 = "_input_4ps3c_167";
@@ -454,7 +452,7 @@ const styles$N = {
   button: button$1,
   "button-primary": "_button-primary_4ps3c_110",
   image: image$3,
-  icon: icon$4,
+  icon: icon$5,
   divider: divider$2,
   "divider-vertical": "_divider-vertical_4ps3c_145",
   "text-field": "_text-field_4ps3c_155",
@@ -539,7 +537,7 @@ function firstChildMargin(index) {
     marginBlockStart: 0
   } : void 0;
 }
-const _hf0$N = (p0) => p0.props.min ?? 0;
+const _hf0$M = (p0) => p0.props.min ?? 0;
 const _hf1$g = (p0) => p0.props.max;
 const textFieldInputType = {
   shortText: "text",
@@ -700,7 +698,7 @@ const basicCatalog = new CatalogRenderer([
       max: core$1._fnSignal(_hf1$g, [
         _rawProps
       ]),
-      min: core$1._fnSignal(_hf0$N, [
+      min: core$1._fnSignal(_hf0$M, [
         _rawProps
       ]),
       "q-e:change": /* @__PURE__ */ core$1.inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", Number(el.value)), "basicCatalog_defineRenderer_input_q_e_change_U0Dwvjz0O9o"),
@@ -1197,7 +1195,7 @@ const katex = "_katex_19jd6_1";
 const styles$M = {
   katex
 };
-const _hf0$M = (p0) => p0.value ?? "";
+const _hf0$L = (p0) => p0.value ?? "";
 const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -1219,24 +1217,24 @@ const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
       props.block ? styles$M.katex : void 0,
       props.class
     ],
-    dangerouslySetInnerHTML: core$1._fnSignal(_hf0$M, [
+    dangerouslySetInnerHTML: core$1._fnSignal(_hf0$L, [
       html
     ]),
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), null, 0, "FX_0");
 }, "ElmKatex_component_83EW4M1WU0k"));
-const caption$1 = "_caption_1dt3k_27";
-const divider$1 = "_divider_1dt3k_52";
-const code$1 = "_code_1dt3k_1";
+const caption$1 = "_caption_n4s8a_22";
+const divider$1 = "_divider_n4s8a_33";
+const code$1 = "_code_n4s8a_1";
 const styles$L = {
-  "code-block": "_code-block_1dt3k_1",
-  "language-icon": "_language-icon_1dt3k_22",
+  "code-block": "_code-block_n4s8a_1",
+  "language-icon": "_language-icon_n4s8a_17",
   caption: caption$1,
-  "copy-icon": "_copy-icon_1dt3k_34",
+  "copy-icon": "_copy-icon_n4s8a_29",
   divider: divider$1,
   code: code$1
 };
-const _hf0$L = (p0) => p0.size ?? 24;
+const _hf0$K = (p0) => p0.size ?? 24;
 const Rust = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
@@ -1245,10 +1243,10 @@ const Rust = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
     fill: "#a84f33",
-    width: core$1._fnSignal(_hf0$L, [
+    width: core$1._fnSignal(_hf0$K, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$L, [
+    height: core$1._fnSignal(_hf0$K, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -1256,17 +1254,17 @@ const Rust = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
     d: "M62.96.242c-.232.135-1.203 1.528-2.16 3.097c-2.4 3.94-2.426 3.942-5.65.55c-2.098-2.208-2.605-2.612-3.28-2.607c-.44.002-.995.152-1.235.332s-.916 1.612-1.504 3.183c-1.346 3.6-1.41 3.715-2.156 3.86c-.46.086-1.343-.407-3.463-1.929c-1.565-1.125-3.1-2.045-3.411-2.045c-1.291 0-1.655.706-2.27 4.4c-.78 4.697-.754 4.681-4.988 2.758c-1.71-.776-3.33-1.41-3.603-1.41s-.792.293-1.15.652c-.652.652-.653.655-.475 4.246l.178 3.595l-.68.364c-.602.322-1.017.283-3.684-.348c-3.48-.822-4.216-.8-4.92.15l-.516.693l.692 2.964c.38 1.63.745 3.2.814 3.487c.067.287-.05.746-.26 1.02c-.348.448-.717.49-3.94.44c-5.452-.086-5.761.382-3.51 5.3c.718 1.56 1.305 2.98 1.305 3.15c0 .898-.717 1.224-3.794 1.727c-1.722.28-3.218.51-3.326.51c-.107 0-.43.235-.717.522c-.937.936-.671 1.816 1.453 4.814c2.646 3.735 2.642 3.75-1.73 5.421c-4.971 1.902-5.072 2.37-1.287 5.96c3.525 3.344 3.53 3.295-.461 5.804C.208 62.8.162 62.846.085 63.876c-.093 1.253-.071 1.275 3.538 3.48c3.57 2.18 3.57 2.246.067 5.56C-.078 76.48.038 77 5.013 78.877c4.347 1.64 4.353 1.66 1.702 5.394c-1.502 2.117-1.981 3-1.981 3.653c0 1.223.637 1.535 4.44 2.174c3.206.54 3.92.857 3.92 1.741c0 .182-.588 1.612-1.307 3.177c-2.236 4.87-1.981 5.275 3.31 5.275c4.93 0 4.799-.15 3.737 4.294c-.8 3.35-.813 3.992-.088 4.715c.554.556 1.6.494 4.87-.289c2.499-.596 2.937-.637 3.516-.328l.66.354l-.177 3.594c-.178 3.593-.177 3.595.475 4.248c.358.36.884.652 1.165.652s1.903-.63 3.604-1.404c4.22-1.916 4.194-1.932 4.973 2.75c.617 3.711.977 4.4 2.294 4.4c.327 0 1.83-.88 3.34-1.958c2.654-1.893 3.342-2.19 4.049-1.74c.182.115.89 1.67 1.572 3.455c1.003 2.625 1.37 3.31 1.929 3.576c1.062.51 1.72.1 4.218-2.62c3.016-3.286 3.14-3.27 5.602.72c2.72 4.406 3.424 4.396 6.212-.089c2.402-3.864 2.374-3.862 5.621-.47c2.157 2.25 2.616 2.61 3.343 2.61c.464 0 1.019-.175 1.23-.388c.214-.213.92-1.786 1.568-3.496c.649-1.71 1.321-3.2 1.495-3.31c.687-.436 1.398-.13 4.048 1.752c1.56 1.108 3.028 1.96 3.377 1.96c1.296 0 1.764-.92 2.302-4.535c.46-3.082.554-3.378 1.16-3.685c.596-.302.954-.2 3.75 1.07c1.701.77 3.323 1.402 3.604 1.402s.816-.302 1.184-.672l.672-.67l-.184-3.448c-.177-3.29-.16-3.468.364-3.943c.54-.488.596-.486 3.615.204c3.656.835 4.338.857 5.025.17c.671-.67.664-.818-.254-4.69c-1.03-4.346-1.168-4.19 3.78-4.19c3.374 0 3.75-.049 4.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 4.065-1.767c2.033-.329 3.553-.71 3.829-.96c.923-.833.584-1.918-1.523-4.873c-2.642-3.703-2.63-3.738 1.599-5.297c5.064-1.866 5.209-2.488 1.419-6.09c-3.51-3.335-3.512-3.317.333-5.677c4.648-2.853 4.655-3.496.082-6.335c-3.933-2.44-3.93-2.406-.405-5.753c3.78-3.593 3.678-4.063-1.295-5.965c-4.388-1.679-4.402-1.72-1.735-5.38c1.588-2.18 1.982-2.903 1.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 1.307-3.113c1.406-3.013 1.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 0-1.884.64-3.583 1.421c-2.838 1.306-3.143 1.393-3.757 1.072c-.612-.32-.714-.637-1.237-3.829c-.603-3.693-.977-4.412-2.288-4.412c-.311 0-1.853.925-3.426 2.055c-2.584 1.856-2.93 2.032-3.574 1.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 0-1.213.458-3.28 2.604c-3.25 3.375-3.261 3.374-5.65-.545C66.073 1.78 65.075.382 64.81.24c-.597-.32-1.3-.32-1.85.002m2.96 11.798c2.83 2.014 1.326 6.75-2.144 6.75c-3.368 0-5.064-4.057-2.66-6.36c1.358-1.3 3.304-1.459 4.805-.39m-3.558 12.507c1.855.705 2.616.282 6.852-3.8l3.182-3.07l1.347.18c4.225.56 12.627 4.25 17.455 7.666c4.436 3.14 10.332 9.534 12.845 13.93l.537.942l-2.38 5.364c-1.31 2.95-2.382 5.673-2.382 6.053c0 .878.576 2.267 1.13 2.726c.234.195 2.457 1.265 4.939 2.378l4.51 2.025l.178 1.148c.23 1.495.26 5.167.052 6.21l-.163.816h-2.575c-2.987 0-2.756-.267-2.918 3.396c-.118 2.656-.76 4.124-2.22 5.075c-2.377 1.551-6.304 1.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 2.145-1.803c4.298-3.24 6.77-7.012 7.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 0-25.56-.092-25.56-.204c0-.263 3.125-3.295 4.965-4.816c5.054-4.178 11.618-7.465 18.417-9.22l2.35-.61l3.34 3.387c1.839 1.863 3.64 3.5 4.003 3.637M20.3 46.34c1.539 1.008 2.17 3.54 1.26 5.062c-1.405 2.356-4.966 2.455-6.373.178c-2.046-3.309 1.895-7.349 5.113-5.24m90.672.13c4.026 2.454.906 8.493-3.404 6.586c-2.877-1.273-2.97-5.206-.155-6.64c1.174-.6 2.523-.579 3.56.053M32.163 61.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 4.706-2.262 4.943-2.625c1.038-1.584.94-2.715-.518-5.933l-.68-1.502h6.523V61.5M70.39 47.132c2.843.74 4.345 2.245 4.349 4.355c.002 1.55-.765 2.52-2.67 3.38c-1.348.61-1.562.625-10.063.708l-8.686.084v-8.92h7.782c6.078 0 8.112.086 9.288.393m-2.934 21.554c1.41.392 3.076 1.616 3.93 2.888c.898 1.337 1.423 3.076 2.667 8.836c1.05 4.87 1.727 6.46 3.62 8.532c2.345 2.566 1.8 2.466 13.514 2.466c5.61 0 10.198.09 10.198.2c0 .197-3.863 4.764-4.03 4.764c-.048 0-2.066-.422-4.484-.939c-6.829-1.458-7.075-1.287-8.642 6.032l-1.008 4.702l-.91.448c-1.518.75-6.453 2.292-9.01 2.82c-4.228.87-8.828 1.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 0-3.923-4.249-3.923-4.535c0-.09 8.728-.194 19.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 7.02.12 7.539.264M37.57 100.02c3.084 1.88 1.605 6.804-2.043 6.8c-3.74 0-5.127-4.88-1.94-6.826c1.055-.643 2.908-.63 3.983.026m56.48.206c1.512 1.108 2.015 3.413 1.079 4.95c-2.46 4.034-8.612.827-6.557-3.419c1.01-2.085 3.695-2.837 5.478-1.53"
   }, null, 3, null), 0, "YT_0");
 }, "Rust_component_FAp1GAc0j08"));
-const _hf0$K = (p0) => p0.size ?? 24;
+const _hf0$J = (p0) => p0.size ?? 24;
 const Javascript = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$K, [
+    width: core$1._fnSignal(_hf0$J, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$K, [
+    height: core$1._fnSignal(_hf0$J, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1282,17 +1280,17 @@ const Javascript = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
     }, null, 3, null)
   ], 0, "9U_0");
 }, "Javascript_component_PsVeZ5WAECA"));
-const _hf0$J = (p0) => p0.size ?? 24;
+const _hf0$I = (p0) => p0.size ?? 24;
 const Typescript = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$J, [
+    width: core$1._fnSignal(_hf0$I, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$J, [
+    height: core$1._fnSignal(_hf0$I, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1312,7 +1310,7 @@ const path = "_path_1ces9_1";
 const styles$K = {
   path
 };
-const _hf0$I = (p0) => p0.size ?? 24;
+const _hf0$H = (p0) => p0.size ?? 24;
 const Bash = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
@@ -1320,10 +1318,10 @@ const Bash = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
-    width: core$1._fnSignal(_hf0$I, [
+    width: core$1._fnSignal(_hf0$H, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$I, [
+    height: core$1._fnSignal(_hf0$H, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -1342,17 +1340,17 @@ const Bash = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
     }, null, 3, null)
   ], 0, "Zd_0");
 }, "Bash_component_ZQtXAfkWqew"));
-const _hf0$H = (p0) => p0.size ?? 24;
+const _hf0$G = (p0) => p0.size ?? 24;
 const Terraform = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$H, [
+    width: core$1._fnSignal(_hf0$G, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$H, [
+    height: core$1._fnSignal(_hf0$G, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1374,17 +1372,17 @@ const Terraform = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
     }, null, 3, null)
   ], 3, null), 0, "ph_0");
 }, "Terraform_component_Rcw24hjU5y8"));
-const _hf0$G = (p0) => p0.size ?? 24;
+const _hf0$F = (p0) => p0.size ?? 24;
 const Html = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$G, [
+    width: core$1._fnSignal(_hf0$F, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$G, [
+    height: core$1._fnSignal(_hf0$F, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1408,7 +1406,7 @@ const Html = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
     }, null, 3, null)
   ], 0, "69_0");
 }, "Html_component_oech6CSvP0E"));
-const _hf0$F = (p0) => p0.size ?? 24;
+const _hf0$E = (p0) => p0.size ?? 24;
 const Css = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
@@ -1416,10 +1414,10 @@ const Css = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQr
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    width: core$1._fnSignal(_hf0$F, [
+    width: core$1._fnSignal(_hf0$E, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$F, [
+    height: core$1._fnSignal(_hf0$E, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -1428,17 +1426,17 @@ const Css = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQr
     d: "m5 3l-.65 3.34h13.59L17.5 8.5H3.92l-.66 3.33h13.59l-.76 3.81l-5.48 1.81l-4.75-1.81l.33-1.64H2.85l-.79 4l7.85 3l9.05-3l1.2-6.03l.24-1.21L21.94 3z"
   }, null, 3, null), 0, "0U_0");
 }, "Css_component_Cd0p31J5fL4"));
-const _hf0$E = (p0) => p0.size ?? 24;
+const _hf0$D = (p0) => p0.size ?? 24;
 const Npm = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$E, [
+    width: core$1._fnSignal(_hf0$D, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$E, [
+    height: core$1._fnSignal(_hf0$D, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1454,17 +1452,17 @@ const Npm = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQr
     }, null, 3, null)
   ], 0, "IW_0");
 }, "Npm_component_y4SGkU0mN4s"));
-const _hf0$D = (p0) => p0.size ?? 24;
+const _hf0$C = (p0) => p0.size ?? 24;
 const Java = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$D, [
+    width: core$1._fnSignal(_hf0$C, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$D, [
+    height: core$1._fnSignal(_hf0$C, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1492,17 +1490,17 @@ const Java = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
     }, null, 3, null)
   ], 0, "ZF_0");
 }, "Java_component_vsaqvkillVU"));
-const _hf0$C = (p0) => p0.size ?? 24;
+const _hf0$B = (p0) => p0.size ?? 24;
 const Kotlin = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$C, [
+    width: core$1._fnSignal(_hf0$B, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$C, [
+    height: core$1._fnSignal(_hf0$B, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1536,17 +1534,17 @@ const Kotlin = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inline
     }, null, 3, null)
   ], 0, "Tq_0");
 }, "Kotlin_component_1pW6m4cmRZQ"));
-const _hf0$B = (p0) => p0.size ?? 24;
+const _hf0$A = (p0) => p0.size ?? 24;
 const Go = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$B, [
+    width: core$1._fnSignal(_hf0$A, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$B, [
+    height: core$1._fnSignal(_hf0$A, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1564,17 +1562,17 @@ const Go = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl
     }, null, 3, null)
   ], 3, null), 0, "go_0");
 }, "Go_component_0UX0vi2zT7c"));
-const _hf0$A = (p0) => p0.size ?? 24;
+const _hf0$z = (p0) => p0.size ?? 24;
 const Python = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$A, [
+    width: core$1._fnSignal(_hf0$z, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$A, [
+    height: core$1._fnSignal(_hf0$z, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1652,17 +1650,17 @@ const Python = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inline
     }, null, 3, null)
   ], 0, "m7_0");
 }, "Python_component_QseUf5f00nc"));
-const _hf0$z = (p0) => p0.size ?? 24;
+const _hf0$y = (p0) => p0.size ?? 24;
 const Sql = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$z, [
+    width: core$1._fnSignal(_hf0$y, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$z, [
+    height: core$1._fnSignal(_hf0$y, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1672,17 +1670,17 @@ const Sql = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQr
     d: "M117.688 98.242c-6.973-.191-12.297.461-16.852 2.379c-1.293.547-3.355.559-3.566 2.18c.711.746.82 1.859 1.387 2.777c1.086 1.754 2.922 4.113 4.559 5.352c1.789 1.348 3.633 2.793 5.551 3.961c3.414 2.082 7.223 3.27 10.504 5.352c1.938 1.23 3.859 2.777 5.75 4.164c.934.684 1.563 1.75 2.773 2.18v-.195c-.637-.812-.801-1.93-1.387-2.777l-2.578-2.578c-2.52-3.344-5.719-6.281-9.117-8.719c-2.711-1.949-8.781-4.578-9.91-7.73l-.199-.199c1.922-.219 4.172-.914 5.949-1.391c2.98-.797 5.645-.59 8.719-1.387l4.164-1.187v-.793c-1.555-1.594-2.664-3.707-4.359-5.152c-4.441-3.781-9.285-7.555-14.273-10.703c-2.766-1.746-6.184-2.883-9.117-4.363c-.988-.496-2.719-.758-3.371-1.586c-1.539-1.961-2.379-4.449-3.566-6.738c-2.488-4.793-4.93-10.023-7.137-15.066c-1.504-3.437-2.484-6.828-4.359-9.91c-9-14.797-18.687-23.73-33.695-32.508c-3.195-1.867-7.039-2.605-11.102-3.57l-6.543-.395c-1.332-.555-2.715-2.184-3.965-2.977C16.977 3.52 4.223-3.312.539 5.672C-1.785 11.34 4.016 16.871 6.09 19.746c1.457 2.012 3.32 4.273 4.359 6.539c.688 1.492.805 2.984 1.391 4.559c1.438 3.883 2.695 8.109 4.559 11.695c.941 1.816 1.98 3.727 3.172 5.352c.727.996 1.98 1.438 2.18 2.973c-1.227 1.715-1.297 4.375-1.984 6.543c-3.098 9.77-1.926 21.91 2.578 29.137c1.383 2.223 4.641 6.98 9.117 5.156c3.918-1.598 3.043-6.539 4.164-10.902c.254-.988.098-1.715.594-2.379v.199l3.57 7.133c2.641 4.254 7.324 8.699 11.297 11.699c2.059 1.555 3.68 4.242 6.344 5.152v-.199h-.199c-.516-.805-1.324-1.137-1.98-1.781c-1.551-1.523-3.277-3.414-4.559-5.156c-3.613-4.902-6.805-10.27-9.711-15.855c-1.391-2.668-2.598-5.609-3.77-8.324c-.453-1.047-.445-2.633-1.387-3.172c-1.281 1.988-3.172 3.598-4.164 5.945c-1.582 3.754-1.789 8.336-2.375 13.082c-.348.125-.195.039-.398.199c-2.762-.668-3.73-3.508-4.758-5.949c-2.594-6.164-3.078-16.09-.793-23.191c.59-1.836 3.262-7.617 2.18-9.316c-.516-1.691-2.219-2.672-3.172-3.965c-1.18-1.598-2.355-3.703-3.172-5.551c-2.125-4.805-3.113-10.203-5.352-15.062c-1.07-2.324-2.875-4.676-4.359-6.738c-1.645-2.289-3.484-3.977-4.758-6.742c-.453-.984-1.066-2.559-.398-3.566c.215-.684.516-.969 1.191-1.191c1.148-.887 4.352.297 5.547.793c3.18 1.32 5.832 2.578 8.527 4.363c1.289.855 2.598 2.512 4.16 2.973h1.785c2.789.641 5.914.195 8.523.988c4.609 1.402 8.738 3.582 12.488 5.949c11.422 7.215 20.766 17.48 27.156 29.734c1.027 1.973 1.473 3.852 2.379 5.945c1.824 4.219 4.125 8.559 5.941 12.688c1.816 4.113 3.582 8.27 6.148 11.695c1.348 1.801 6.551 2.766 8.918 3.766c1.66.699 4.379 1.43 5.949 2.379c3 1.809 5.906 3.965 8.723 5.945c1.402.992 5.73 3.168 5.945 4.957zm-88.605-75.52c-1.453-.027-2.48.156-3.566.395v.199h.195c.695 1.422 1.918 2.34 2.777 3.566l1.98 4.164l.199-.195c1.227-.867 1.789-2.25 1.781-4.363c-.492-.52-.562-1.164-.992-1.785c-.562-.824-1.66-1.289-2.375-1.98zm0 0"
   }, null, 3, null), 0, "j8_0");
 }, "Sql_component_4n1zvVUQlz4"));
-const _hf0$y = (p0) => p0.size ?? 24;
+const _hf0$x = (p0) => p0.size ?? 24;
 const Json = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$y, [
+    width: core$1._fnSignal(_hf0$x, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$y, [
+    height: core$1._fnSignal(_hf0$x, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1736,17 +1734,17 @@ const Json = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQ
     }, null, 3, null)
   ], 0, "AB_0");
 }, "Json_component_fcFOewcgaQQ"));
-const _hf0$x = (p0) => p0.size ?? 24;
+const _hf0$w = (p0) => p0.size ?? 24;
 const Lua = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: core$1._fnSignal(_hf0$x, [
+    width: core$1._fnSignal(_hf0$w, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$x, [
+    height: core$1._fnSignal(_hf0$w, [
       _rawProps
     ]),
     viewBox: "0 0 128 128",
@@ -1766,7 +1764,7 @@ const Lua = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQr
     }, null, 3, null)
   ], 0, "et_0");
 }, "Lua_component_Nu4TK4es0Xo"));
-const _hf0$w = (p0) => p0.size ?? 24;
+const _hf0$v = (p0) => p0.size ?? 24;
 const Csharp = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
@@ -1774,10 +1772,10 @@ const Csharp = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inline
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
-    width: core$1._fnSignal(_hf0$w, [
+    width: core$1._fnSignal(_hf0$v, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$w, [
+    height: core$1._fnSignal(_hf0$v, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -1796,7 +1794,7 @@ const Csharp = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inline
     }, null, 3, null)
   ], 0, "0a_0");
 }, "Csharp_component_yFicJlZ0ehE"));
-const _hf0$v = (p0) => p0.size ?? 24;
+const _hf0$u = (p0) => p0.size ?? 24;
 const Cplusplus = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
@@ -1804,10 +1802,10 @@ const Cplusplus = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
-    width: core$1._fnSignal(_hf0$v, [
+    width: core$1._fnSignal(_hf0$u, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$v, [
+    height: core$1._fnSignal(_hf0$u, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -1830,7 +1828,7 @@ const Cplusplus = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
     }, null, 3, null)
   ], 0, "n0_0");
 }, "Cplusplus_component_We60oaxTljI"));
-const _hf0$u = (p0) => p0.size ?? 24;
+const _hf0$t = (p0) => p0.size ?? 24;
 const C = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "size"
@@ -1838,10 +1836,10 @@ const C = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl(
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 128 128",
-    width: core$1._fnSignal(_hf0$u, [
+    width: core$1._fnSignal(_hf0$t, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf0$u, [
+    height: core$1._fnSignal(_hf0$t, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -1860,16 +1858,17 @@ const C = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl(
     }, null, 3, null)
   ], 0, "gG_0");
 }, "C_component_8furXfuHI4I"));
-const icon$3 = "_icon_6xpxf_1";
+const icon$4 = "_icon_6xpxf_1";
 const styles$J = {
-  icon: icon$3
+  icon: icon$4
 };
-const _hf0$t = (p0) => ({
-  "--elmethis-scoped-color": p0.lightColor ?? p0.color,
-  "--dark-color": p0.darkColor ?? p0.color,
+const _hf0$s = (p0) => ({
+  "--elmethis-scoped-color": p0.lightColor ?? p0.color ?? "currentColor",
+  "--dark-color": p0.darkColor ?? p0.color ?? "currentColor",
   ...p0.style
 });
 const _hf1$f = (p0) => p0.size ?? "1em";
+const _hf2$a = (p0) => p0.color ?? "currentColor";
 const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -1885,7 +1884,7 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
       styles$J.icon,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$t, [
+    style: core$1._fnSignal(_hf0$s, [
       _rawProps
     ]),
     width: core$1._fnSignal(_hf1$f, [
@@ -1895,7 +1894,9 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
       _rawProps
     ]),
     viewBox: "0 0 24 24",
-    fill: core$1._wrapProp(_rawProps, "color"),
+    fill: core$1._fnSignal(_hf2$a, [
+      _rawProps
+    ]),
     xmlns: "http://www.w3.org/2000/svg",
     focusable: "false",
     role: "img",
@@ -1904,7 +1905,7 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
     d: core$1._wrapProp(_rawProps, "d")
   }, null, null, 3, null), 0, "IA_0");
 }, "ElmMdiIcon_component_AUxPCIu3tI0"));
-const _hf0$s = (p0) => p0.size ?? 24;
+const _hf0$r = (p0) => p0.size ?? 24;
 const normalizeLanguage = (language) => {
   switch (language) {
     case "rust":
@@ -1990,14 +1991,14 @@ const renderMap = {
 };
 const ElmLanguageIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   return /* @__PURE__ */ core$1._jsxSorted(renderMap[normalizeLanguage(_rawProps.language)], null, {
-    size: core$1._fnSignal(_hf0$s, [
+    size: core$1._fnSignal(_hf0$r, [
       _rawProps
     ]),
     class: core$1._wrapProp(_rawProps, "class"),
     style: core$1._wrapProp(_rawProps, "style")
   }, null, 3, "bu_1");
 }, "ElmLanguageIcon_component_nXOhYnvIKLk"));
-const code = "_code_1b5oo_1";
+const code = "_code_1hxr7_1";
 const styles$I = {
   code
 };
@@ -2041,9 +2042,73 @@ const ElmShikiHighlighter = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), null, 0, "ZN_0");
 }, "ElmShikiHighlighter_component_vKuHJZdaUdo"));
-const _hf0$r = (p0) => p0.language ?? "txt";
+const styles$H = {
+  "use-clipboard": "_use-clipboard_spnps_1",
+  "use-clipboard-icon-copied": "_use-clipboard-icon-copied_spnps_16"
+};
+const useClipboard = (options) => {
+  const copied = core$1.useSignal(false);
+  const resetTimerId = core$1.useSignal(void 0);
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup }) => {
+    const resetTimerId2 = core$1._captures[0];
+    cleanup(() => {
+      if (resetTimerId2.value !== void 0) clearTimeout(resetTimerId2.value);
+    });
+  }, "useClipboard_useTask_0QBF5GEj0aQ", [
+    resetTimerId
+  ]));
+  const copy = /* @__PURE__ */ core$1.inlinedQrl(async () => {
+    const copied2 = core$1._captures[0], options2 = core$1._captures[1], resetTimerId2 = core$1._captures[2];
+    if (typeof options2.content === "string") {
+      await window.navigator.clipboard.writeText(options2.content);
+    } else {
+      await window.navigator.clipboard.write(options2.content.map((item) => new ClipboardItem(item)));
+    }
+    if (resetTimerId2.value !== void 0) {
+      clearTimeout(resetTimerId2.value);
+    }
+    copied2.value = true;
+    resetTimerId2.value = core$1.noSerialize(setTimeout(() => {
+      copied2.value = false;
+      resetTimerId2.value = void 0;
+    }, options2.delay ?? 1500));
+  }, "useClipboard_copy_lwkIxmzZUeM", [
+    copied,
+    options,
+    resetTimerId
+  ]);
+  const CopyButton = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl(() => {
+    const copied2 = core$1._captures[0], copy2 = core$1._captures[1], options2 = core$1._captures[2];
+    return /* @__PURE__ */ core$1._jsxSorted("span", {
+      class: [
+        styles$H["use-clipboard"],
+        options2.class
+      ],
+      style: core$1._wrapProp(options2, "style")
+    }, {
+      "q-e:click": copy2
+    }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
+      class: [
+        {
+          [styles$H["use-clipboard-icon-copied"]]: copied2.value
+        }
+      ],
+      d: copied2.value ? js.mdiClipboardCheckOutline : js.mdiClipboardOutline
+    }, {
+      size: "1.25rem"
+    }, null, 3, "eS_0"), 1, "eS_1");
+  }, "useClipboard_CopyButton_component_coZZtY9bwxs", [
+    copied,
+    copy,
+    options
+  ]));
+  return {
+    CopyButton,
+    copy
+  };
+};
+const _hf0$q = (p0) => p0.language ?? "txt";
 const _hf1$e = (p0) => p0.caption || (p0.language ?? "txt");
-const _hf2$a = (p0) => p0.value !== null ? "#59b57c" : void 0;
 const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -2051,23 +2116,9 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     "language",
     "caption"
   ]);
-  const timerId = core$1.useSignal(null);
-  const copyToClipboard = /* @__PURE__ */ core$1.inlinedQrl(async () => {
-    const _rawProps2 = core$1._captures[0], timerId2 = core$1._captures[1];
-    if (timerId2.value !== null) {
-      window.clearTimeout(timerId2.value);
-      timerId2.value = null;
-    }
-    try {
-      await navigator.clipboard.writeText(_rawProps2.code);
-      timerId2.value = window.setTimeout(() => timerId2.value = null, 1500);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  }, "ElmCodeBlock_component_copyToClipboard_jgUvzMp0xS4", [
-    _rawProps,
-    timerId
-  ]);
+  const clipboard = useClipboard({
+    content: _rawProps.code
+  });
   return /* @__PURE__ */ core$1._jsxSplit("figure", {
     class: [
       styles$L["code-block"],
@@ -2078,7 +2129,7 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     /* @__PURE__ */ core$1._jsxSorted("span", null, {
       class: styles$L["language-icon"]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmLanguageIcon, null, {
-      language: core$1._fnSignal(_hf0$r, [
+      language: core$1._fnSignal(_hf0$q, [
         _rawProps
       ])
     }, null, 3, "sK_0"), 1, null),
@@ -2091,16 +2142,8 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "sK_1")
     ], 1, "sK_2"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$L["copy-icon"],
-      "q-e:click": copyToClipboard
-    }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
-      d: timerId.value !== null ? js.mdiClipboardCheckMultipleOutline : js.mdiClipboardMultipleOutline
-    }, {
-      size: "1.25rem",
-      color: core$1._fnSignal(_hf2$a, [
-        timerId
-      ])
-    }, null, 3, "sK_3"), 1, null),
+      class: styles$L["copy-icon"]
+    }, /* @__PURE__ */ core$1._jsxSorted(clipboard.CopyButton, null, null, null, 3, "sK_3"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("hr", null, {
       class: styles$L.divider
     }, null, 3, null),
@@ -2108,24 +2151,25 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       class: styles$L.code
     }, /* @__PURE__ */ core$1._jsxSorted(ElmShikiHighlighter, null, {
       code: core$1._wrapProp(_rawProps, "code"),
-      language: core$1._fnSignal(_hf0$r, [
+      language: core$1._fnSignal(_hf0$q, [
         _rawProps
       ])
     }, null, 3, "sK_4"), 1, null)
   ], 0, "sK_5");
 }, "ElmCodeBlock_component_rH8kn9Tvguw"));
-const image$2 = "_image_am45j_12";
-const fallback$1 = "_fallback_am45j_36";
-const styles$H = {
-  "block-image": "_block-image_am45j_1",
-  "image-container": "_image-container_am45j_12",
+const image$2 = "_image_1mddb_12";
+const fallback$1 = "_fallback_1mddb_36";
+const styles$G = {
+  "block-image": "_block-image_1mddb_1",
+  "image-container": "_image-container_1mddb_12",
   image: image$2,
   fallback: fallback$1,
-  "caption-box": "_caption-box_am45j_46",
-  "modal-container": "_modal-container_am45j_58"
+  "caption-box": "_caption-box_1mddb_46",
+  "caption-icon": "_caption-icon_1mddb_57",
+  "modal-container": "_modal-container_1mddb_63"
 };
-const styles$G = {
-  "rectangle-wave": "_rectangle-wave_1f0rb_21"
+const styles$F = {
+  "rectangle-wave": "_rectangle-wave_kcleh_21"
 };
 const ElmRectangleWave = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
@@ -2134,16 +2178,16 @@ const ElmRectangleWave = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ cor
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     "aria-hidden": "true",
     class: [
-      styles$G["rectangle-wave"],
+      styles$F["rectangle-wave"],
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), null, 0, "vI_0");
 }, "ElmRectangleWave_component_4z0HAhT3758"));
-const _hf0$q = (p0) => p0.alt ?? p0.caption ?? "Image";
+const _hf0$p = (p0) => p0.alt ?? p0.caption ?? "Image";
 const _hf1$d = (p0, p1) => p0 ? void 0 : p1.srcset;
 const _hf2$9 = (p0, p1) => p0 ? void 0 : p1.sizes;
-const _hf3$9 = (p0) => ({
+const _hf3$8 = (p0) => ({
   pointerEvents: p0.value ? "auto" : "none",
   "--elmethis-scoped-opacity": p0.value ? 1 : 0
 });
@@ -2194,7 +2238,7 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     isLoading
   ]));
   const ImageComponent = (isModal) => /* @__PURE__ */ core$1._jsxSorted("img", {
-    alt: core$1._fnSignal(_hf0$q, [
+    alt: core$1._fnSignal(_hf0$p, [
       props
     ]),
     fetchPriority: isModal ? "low" : "auto",
@@ -2217,25 +2261,25 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     },
     width: core$1._wrapProp(props, "width")
   }, {
-    class: styles$H.image,
+    class: styles$G.image,
     "q-e:load": handleImageLoad
   }, null, 3, "zM_0");
   const Modal = /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$H["modal-container"],
-    style: core$1._fnSignal(_hf3$9, [
+    class: styles$G["modal-container"],
+    style: core$1._fnSignal(_hf3$8, [
       isShowModal
     ]),
     "q-e:click": handleToggleModal
   }, isShowModal.value && ImageComponent(true), 1, "zM_1");
   return /* @__PURE__ */ core$1._jsxSplit("figure", {
     class: [
-      styles$H["block-image"],
+      styles$G["block-image"],
       props.class
     ],
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), [
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$H["image-container"],
+      class: styles$G["image-container"],
       style: core$1._fnSignal(_hf4$5, [
         isLoading
       ]),
@@ -2243,22 +2287,19 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     }, [
       ImageComponent(false),
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$H.fallback
+        class: styles$G.fallback
       }, /* @__PURE__ */ core$1._jsxSorted(ElmRectangleWave, null, null, null, 3, "zM_2"), 1, null)
     ], 1, null),
     props.caption && /* @__PURE__ */ core$1._jsxSorted("figcaption", null, {
-      class: styles$H["caption-box"],
+      class: styles$G["caption-box"],
       style: core$1._fnSignal(_hf5$4, [
         isLoading
       ])
     }, [
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        style: {
-          flex: "1"
-        }
+        class: styles$G["caption-icon"]
       }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
         d: js.mdiMessageImageOutline,
-        color: "#cdb57b",
         size: "1.25rem"
       }, null, 3, "zM_3"), 1, null),
       /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
@@ -2269,7 +2310,7 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   ], 0, "zM_6");
 }, "ElmBlockImage_component_XGyydMLGB8M"));
 const file = "_file_1gxyy_1";
-const styles$F = {
+const styles$E = {
   file,
   "file-size": "_file-size_1gxyy_17",
   "download-icon": "_download-icon_1gxyy_22"
@@ -2307,7 +2348,7 @@ const ElmFile = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$F.file,
+      styles$E.file,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
@@ -2318,10 +2359,10 @@ const ElmFile = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
     }, null, 3, "r0_0"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, null, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, _rawProps.name ?? getLastPathSegmentWithoutQueryOrHash(_rawProps.src), 1, "r0_1"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$F["file-size"]
+      class: styles$E["file-size"]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(_rawProps, "filesize"), 1, "r0_2"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$F["download-icon"],
+      class: styles$E["download-icon"],
       "q-e:click": downloadFile
     }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
       d: js.mdiDownload,
@@ -2336,7 +2377,7 @@ const content$2 = "_content_1ypvd_56";
 const title = "_title_1ypvd_76";
 const description = "_description_1ypvd_80";
 const link = "_link_1ypvd_85";
-const styles$E = {
+const styles$D = {
   bookmark,
   container: container$3,
   image: image$1,
@@ -2345,7 +2386,7 @@ const styles$E = {
   description,
   link
 };
-const _hf0$p = (p0, p1, p2) => p2.value || p0.image == null ? p1 : {};
+const _hf0$o = (p0, p1, p2) => p2.value || p0.image == null ? p1 : {};
 const ElmBookmark = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -2368,50 +2409,50 @@ const ElmBookmark = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   };
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$E.bookmark,
+      styles$D.bookmark,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), /* @__PURE__ */ core$1._jsxSorted("a", {
     href: core$1._wrapProp(_rawProps, "url")
   }, {
-    class: styles$E.container,
+    class: styles$D.container,
     target: "_blank",
     rel: "noopener noreferrer"
   }, [
     /* @__PURE__ */ core$1._jsxSorted("img", {
       src: core$1._wrapProp(_rawProps, "image"),
-      style: core$1._fnSignal(_hf0$p, [
+      style: core$1._fnSignal(_hf0$o, [
         _rawProps,
         hiddenStyle,
         isError
       ])
     }, {
-      class: styles$E.image,
+      class: styles$D.image,
       alt: "OGP Image",
       "q-e:error": handleImageOnError
     }, null, 3, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$E.content
+      class: styles$D.content
     }, [
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$E.title
+        class: styles$D.title
       }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
         bold: true
       }, core$1._wrapProp(_rawProps, "title"), 1, "cr_0"), 1, null),
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$E.description
+        class: styles$D.description
       }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
         size: "0.75rem"
       }, core$1._wrapProp(_rawProps, "description"), 1, "cr_1"), 1, null),
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$E.link
+        class: styles$D.link
       }, [
         _rawProps.favicon ? /* @__PURE__ */ core$1._jsxSorted(ElmInlineIcon, null, {
           src: core$1._wrapProp(_rawProps, "favicon")
         }, null, 3, "cr_2") : /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
           d: js.mdiLinkVariant,
-          color: "#6987b8"
+          color: "var(--elmethis-accent-info)"
         }, null, 3, "cr_3"),
         /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
           size: "0.75rem"
@@ -2420,27 +2461,27 @@ const ElmBookmark = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     ], 1, null)
   ], 1, null), 0, "cr_5");
 }, "ElmBookmark_component_SFTt0EvJVYc"));
-const toggle = "_toggle_q0tcq_1";
-const open$1 = "_open_q0tcq_9";
-const summary$1 = "_summary_q0tcq_14";
-const divider = "_divider_q0tcq_35";
-const chevron = "_chevron_q0tcq_53";
-const cross = "_cross_q0tcq_66";
-const border = "_border_q0tcq_80";
-const content$1 = "_content_q0tcq_88";
-const styles$D = {
+const toggle = "_toggle_11gju_1";
+const open$1 = "_open_11gju_9";
+const summary$1 = "_summary_11gju_14";
+const divider = "_divider_11gju_36";
+const chevron$1 = "_chevron_11gju_50";
+const cross = "_cross_11gju_63";
+const border = "_border_11gju_77";
+const content$1 = "_content_11gju_85";
+const styles$C = {
   toggle,
   open: open$1,
   summary: summary$1,
-  "summary-left": "_summary-left_q0tcq_28",
+  "summary-left": "_summary-left_11gju_29",
   divider,
-  chevron,
+  chevron: chevron$1,
   cross,
   border,
   content: content$1
 };
-const _hf0$o = (p0) => p0.monochrome ? "var(--elmethis-color-accent-muted)" : "var(--elmethis-color-primary)";
-const _hf1$c = (p0, p1) => p1.monochrome ? "var(--elmethis-color-accent-muted)" : p0.value ? "var(--elmethis-accent-error)" : "var(--elmethis-color-primary)";
+const _hf0$n = (p0) => p0.monochrome ? "var(--elmethis-color-mono-fg-weak)" : "var(--elmethis-color-primary-fg)";
+const _hf1$c = (p0, p1) => p1.monochrome ? "var(--elmethis-color-mono-fg-weak)" : p0.value ? "var(--elmethis-accent-error)" : "var(--elmethis-color-primary-fg)";
 const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -2456,9 +2497,9 @@ const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
   });
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$D.toggle,
+      styles$C.toggle,
       {
-        [styles$D.open]: isOpen.value
+        [styles$C.open]: isOpen.value
       },
       props.class
     ],
@@ -2473,22 +2514,22 @@ const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
         isOpen
       ])
     }, {
-      class: styles$D.summary,
+      class: styles$C.summary,
       "preventdefault:click": true
     }, [
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$D["summary-left"]
+        class: styles$C["summary-left"]
       }, [
         /* @__PURE__ */ core$1._jsxSorted("span", {
           class: [
-            styles$D.chevron,
+            styles$C.chevron,
             {
-              [styles$D.open]: isOpen.value
+              [styles$C.open]: isOpen.value
             }
           ]
         }, null, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
           d: js.mdiChevronRight,
-          color: core$1._fnSignal(_hf0$o, [
+          color: core$1._fnSignal(_hf0$n, [
             props
           ]),
           size: "1rem"
@@ -2498,13 +2539,13 @@ const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
         }, null, 3, "VD_2"), 1, null)
       ], 1, null),
       /* @__PURE__ */ core$1._jsxSorted("hr", null, {
-        class: styles$D.divider
+        class: styles$C.divider
       }, null, 3, null),
       /* @__PURE__ */ core$1._jsxSorted("span", {
         class: [
-          styles$D.cross,
+          styles$C.cross,
           {
-            [styles$D.open]: isOpen.value
+            [styles$C.open]: isOpen.value
           }
         ]
       }, null, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
@@ -2517,25 +2558,27 @@ const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
       }, null, 3, "VD_3"), 1, null)
     ], 0, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$D.border
+      class: styles$C.border
     }, null, 3, null),
     /* @__PURE__ */ core$1._jsxSorted("div", {
       class: [
-        styles$D.content,
+        styles$C.content,
         {
-          [styles$D.open]: isOpen.value
+          [styles$C.open]: isOpen.value
         }
       ]
     }, null, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "VD_4"), 1, null)
   ], 0, "VD_5");
 }, "ElmToggle_component_Gna1lAQa8FY"));
-const blockquote = "_blockquote_1t2bo_1";
-const body$3 = "_body_1t2bo_24";
-const icon$2 = "_icon_1t2bo_29";
-const styles$C = {
+const blockquote = "_blockquote_124q8_1";
+const body$3 = "_body_124q8_22";
+const icon$3 = "_icon_124q8_27";
+const styles$B = {
   blockquote,
   body: body$3,
-  icon: icon$2
+  icon: icon$3,
+  "icon-top-left": "_icon-top-left_124q8_33",
+  "icon-bottom-right": "_icon-bottom-right_124q8_37"
 };
 const ElmBlockQuote = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
@@ -2543,28 +2586,28 @@ const ElmBlockQuote = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("blockquote", {
     class: [
-      styles$C.blockquote,
+      styles$B.blockquote,
       textStyles.text,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), [
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$C.icon,
-      style: {
-        "--elmethis-scoped-inset": "0.25rem auto auto 0.5rem"
-      }
+      class: [
+        styles$B.icon,
+        styles$B["icon-top-left"]
+      ]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
       d: js.mdiFormatQuoteOpen
     }, null, 3, "Cw_0"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$C.body
+      class: styles$B.body
     }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "Cw_1"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$C.icon,
-      style: {
-        "--elmethis-scoped-inset": "auto 0.25rem 0.25rem auto"
-      }
+      class: [
+        styles$B.icon,
+        styles$B["icon-bottom-right"]
+      ]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
       d: js.mdiFormatQuoteClose
     }, null, 3, "Cw_2"), 1, null)
@@ -2573,30 +2616,30 @@ const ElmBlockQuote = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
 const callout = "_callout_lasqb_1";
 const header$2 = "_header_lasqb_28";
 const content = "_content_lasqb_34";
-const styles$B = {
+const styles$A = {
   callout,
   header: header$2,
   content
 };
 const COLOR_MAP = Object.freeze({
   note: {
-    code: "#6987b8",
+    code: "var(--elmethis-accent-info)",
     icon: js.mdiInformation
   },
   tip: {
-    code: "#59b57c",
+    code: "var(--elmethis-accent-success)",
     icon: js.mdiLightbulbOn
   },
   important: {
-    code: "#9771bd",
+    code: "var(--elmethis-accent-important)",
     icon: js.mdiShieldAlert
   },
   warning: {
-    code: "#b8a36e",
+    code: "var(--elmethis-accent-warning)",
     icon: js.mdiAlert
   },
   caution: {
-    code: "#b36472",
+    code: "var(--elmethis-accent-error)",
     icon: js.mdiAlertOctagram
   }
 });
@@ -2608,7 +2651,7 @@ const ElmCallout = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("aside", {
     class: [
-      styles$B.callout,
+      styles$A.callout,
       _rawProps.class
     ],
     style: {
@@ -2618,7 +2661,7 @@ const ElmCallout = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), [
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$B.header
+      class: styles$A.header
     }, [
       /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
         color: COLOR_MAP[_rawProps.type ?? "note"].code,
@@ -2629,12 +2672,12 @@ const ElmCallout = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
       /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, (_rawProps.type ?? "note").toLocaleUpperCase(), 1, "qp_1")
     ], 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$B.content
+      class: styles$A.content
     }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "qp_2"), 1, null)
   ], 0, "qp_3");
 }, "ElmCallout_component_vJ404ghu0V8"));
-const hr = "_hr_1tiqz_1";
-const styles$A = {
+const hr = "_hr_o8h6x_1";
+const styles$z = {
   hr
 };
 const ElmDivider = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -2643,16 +2686,16 @@ const ElmDivider = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("hr", {
     class: [
-      styles$A.hr,
+      styles$z.hr,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), null, 0, "70_0");
 }, "ElmDivider_component_SDbNuDT10PU"));
-const styles$z = {
-  "elmethis-list-common": "_elmethis-list-common_lbcuy_1",
-  "elmethis-bulleted-list": "_elmethis-bulleted-list_lbcuy_9",
-  "elmethis-numbered-list": "_elmethis-numbered-list_lbcuy_58"
+const styles$y = {
+  "elmethis-list-common": "_elmethis-list-common_1z0ra_1",
+  "elmethis-bulleted-list": "_elmethis-bulleted-list_1z0ra_9",
+  "elmethis-numbered-list": "_elmethis-numbered-list_1z0ra_58"
 };
 const ElmList = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
@@ -2664,8 +2707,8 @@ const ElmList = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
     return /* @__PURE__ */ core$1._jsxSplit("ol", {
       class: [
         textStyles.text,
-        styles$z["elmethis-list-common"],
-        styles$z["elmethis-numbered-list"],
+        styles$y["elmethis-list-common"],
+        styles$y["elmethis-numbered-list"],
         _rawProps.class
       ],
       style: core$1._wrapProp(_rawProps, "style"),
@@ -2675,8 +2718,8 @@ const ElmList = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
     return /* @__PURE__ */ core$1._jsxSplit("ul", {
       class: [
         textStyles.text,
-        styles$z["elmethis-list-common"],
-        styles$z["elmethis-bulleted-list"],
+        styles$y["elmethis-list-common"],
+        styles$y["elmethis-bulleted-list"],
         _rawProps.class
       ],
       style: core$1._wrapProp(_rawProps, "style"),
@@ -2687,7 +2730,7 @@ const ElmList = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
 const table = "_table_8qd0n_1";
 const caption = "_caption_8qd0n_8";
 const spacing = "_spacing_8qd0n_25";
-const styles$y = {
+const styles$x = {
   table,
   caption,
   "caption-inner": "_caption-inner_8qd0n_18",
@@ -2712,20 +2755,20 @@ const ElmTable = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
   core$1.useContextProvider(HasRowHeaderContext, hasRowHeader);
   return /* @__PURE__ */ core$1._jsxSplit("table", {
     class: [
-      styles$y.table,
+      styles$x.table,
       textStyles.text,
       props.class
     ],
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), [
     props.caption && /* @__PURE__ */ core$1._jsxSorted("caption", null, null, /* @__PURE__ */ core$1._jsxSorted("span", null, {
-      class: styles$y.caption
+      class: styles$x.caption
     }, [
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        class: styles$y.spacing
+        class: styles$x.spacing
       }, null, 3, null),
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        class: styles$y["caption-inner"]
+        class: styles$x["caption-inner"]
       }, [
         /* @__PURE__ */ core$1._jsxSorted("svg", null, {
           viewBox: "0 0 24 24",
@@ -2733,19 +2776,19 @@ const ElmTable = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
           height: "1rem"
         }, /* @__PURE__ */ core$1._jsxSorted("path", null, {
           d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z",
-          fill: "#6987b8"
+          fill: "var(--elmethis-accent-info)"
         }, null, 3, null), 3, null),
         /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(props, "caption"), 1, "Yw_0")
       ], 1, null),
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        class: styles$y.spacing
+        class: styles$x.spacing
       }, null, 3, null)
     ], 1, null), 1, "Yw_1"),
     /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "Yw_2")
   ], 0, "Yw_3");
 }, "ElmTable_component_UT2AChu46oY"));
 const thead = "_thead_81oxp_1";
-const styles$x = {
+const styles$w = {
   thead
 };
 const ElmTableHeader = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -2755,7 +2798,7 @@ const ElmTableHeader = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
   core$1.useContextProvider(TableSectionContext, "head");
   return /* @__PURE__ */ core$1._jsxSplit("thead", {
     class: [
-      styles$x.thead,
+      styles$w.thead,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
@@ -2772,7 +2815,7 @@ const ElmTableBody = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
   }, core$1._getConstProps(props), /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "d6_0"), 0, "d6_1");
 }, "ElmTableBody_component_cc34lI5xf6Y"));
 const tr = "_tr_1sv2a_1";
-const styles$w = {
+const styles$v = {
   tr
 };
 const ElmTableRow = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -2781,7 +2824,7 @@ const ElmTableRow = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("tr", {
     class: [
-      styles$w.tr,
+      styles$v.tr,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
@@ -2790,7 +2833,7 @@ const ElmTableRow = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
 const common = "_common_n2t7b_1";
 const td = "_td_n2t7b_26";
 const th = "_th_n2t7b_34";
-const styles$v = {
+const styles$u = {
   common,
   td,
   th
@@ -2814,8 +2857,8 @@ const ElmTableCell = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
   const scope = props.scope ?? (inHead ? "col" : isRowHeader ? "row" : void 0);
   return renderAsTh ? /* @__PURE__ */ core$1._jsxSplit("th", {
     class: [
-      styles$v.common,
-      styles$v.th,
+      styles$u.common,
+      styles$u.th,
       props.class
     ],
     style: core$1._wrapProp(props, "style"),
@@ -2823,22 +2866,22 @@ const ElmTableCell = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), props.text != null ? props.text : /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "Vm_0"), 0, "Vm_1") : /* @__PURE__ */ core$1._jsxSplit("td", {
     class: [
-      styles$v.common,
-      styles$v.td,
+      styles$u.common,
+      styles$u.td,
       props.class
     ],
     style: core$1._wrapProp(props, "style"),
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), props.text != null ? props.text : /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "Vm_2"), 0, "Vm_3");
 }, "ElmTableCell_component_cdS0ELa7S1k"));
-const unsupported = "_unsupported_1i3v6_1";
-const message = "_message_1i3v6_14";
-const icon$1 = "_icon_1i3v6_21";
-const details = "_details_1i3v6_25";
-const styles$u = {
+const unsupported = "_unsupported_1nmw6_1";
+const message = "_message_1nmw6_18";
+const icon$2 = "_icon_1nmw6_25";
+const details = "_details_1nmw6_29";
+const styles$t = {
   unsupported,
   message,
-  icon: icon$1,
+  icon: icon$2,
   details
 };
 const ElmUnsupportedBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -2848,45 +2891,41 @@ const ElmUnsupportedBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$u.unsupported,
+      styles$t.unsupported,
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), [
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$u.message
+      class: styles$t.message
     }, [
       /* @__PURE__ */ core$1._jsxSorted("svg", null, {
         viewBox: "0 0 24 24",
         width: "1.25rem",
         height: "1.25rem",
-        class: styles$u.icon
+        class: styles$t.icon
       }, /* @__PURE__ */ core$1._jsxSorted("path", null, {
         d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
       }, null, 3, null), 3, null),
-      /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
-        color: "var(--elmethis-color-accent-muted)"
-      }, "UNSUPPORTED BLOCK", 3, "90_0")
+      /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, "UNSUPPORTED BLOCK", 3, "90_0")
     ], 1, null),
     _rawProps.details && /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$u.details
-    }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
-      color: "var(--elmethis-color-accent-muted)"
-    }, core$1._wrapProp(_rawProps, "details"), 1, "90_1"), 1, "90_2")
+      class: styles$t.details
+    }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(_rawProps, "details"), 1, "90_1"), 1, "90_2")
   ], 0, "90_3");
 }, "ElmUnsupportedBlock_component_yKqwfnlPSP4"));
-const _hf0$n = (p0) => p0.props.color;
+const _hf0$m = (p0) => p0.props.color;
 const _hf1$b = (p0) => p0.props.ruby;
 const _hf10$1 = (p0) => p0.props.width;
 const _hf11$1 = (p0) => p0.props.height;
 const _hf12$1 = (p0) => p0.props.hasRowHeader;
 const _hf13$1 = (p0) => p0.props.isHeader;
 const _hf2$8 = (p0) => p0.props.href;
-const _hf3$8 = (p0) => p0.props.favicon;
+const _hf3$7 = (p0) => p0.props.favicon;
 const _hf4$4 = (p0) => p0.props.alt;
 const _hf5$3 = (p0) => p0.props.level;
-const _hf6$3 = (p0) => p0.props.backgroundColor;
-const _hf7$2 = (p0) => p0.props.style ?? "unordered";
+const _hf6$2 = (p0) => p0.props.backgroundColor;
+const _hf7$1 = (p0) => p0.props.style ?? "unordered";
 const _hf8$1 = (p0) => p0.props.cite;
 const _hf9$1 = (p0) => p0.props.type;
 function extractChildIds(value) {
@@ -2922,7 +2961,7 @@ const blockCatalog = basicCatalog.extend(
       strikethrough: decoration.includes("strikethrough"),
       underline: decoration.includes("underline")
     }, {
-      color: core$1._fnSignal(_hf0$n, [
+      color: core$1._fnSignal(_hf0$m, [
         _rawProps
       ]),
       ruby: core$1._fnSignal(_hf1$b, [
@@ -2934,7 +2973,7 @@ const blockCatalog = basicCatalog.extend(
     href: core$1._fnSignal(_hf2$8, [
       _rawProps
     ]),
-    favicon: core$1._fnSignal(_hf3$8, [
+    favicon: core$1._fnSignal(_hf3$7, [
       _rawProps
     ])
   }, _rawProps.resolve(_rawProps.props.text), 1, "Fl_2")),
@@ -2979,17 +3018,17 @@ const blockCatalog = basicCatalog.extend(
   defineRenderer(core.ParagraphApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmParagraph, {
     style: firstChildMargin(_rawProps.index)
   }, {
-    color: core$1._fnSignal(_hf0$n, [
+    color: core$1._fnSignal(_hf0$m, [
       _rawProps
     ]),
-    backgroundColor: core$1._fnSignal(_hf6$3, [
+    backgroundColor: core$1._fnSignal(_hf6$2, [
       _rawProps
     ])
   }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path: path2 }, i) => /* @__PURE__ */ core$1._jsxSorted("span", null, null, _rawProps.renderChild(id, path2, i), 1, `${id}:${i}`)), 1, "Fl_7")),
   defineRenderer(core.ListApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmList, {
     style: firstChildMargin(_rawProps.index)
   }, {
-    listStyle: core$1._fnSignal(_hf7$2, [
+    listStyle: core$1._fnSignal(_hf7$1, [
       _rawProps
     ])
   }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path: path2 }, i) => /* @__PURE__ */ core$1._jsxSorted("li", null, null, _rawProps.renderChild(id, path2, i), 1, `${id}:${i}`)), 1, "Fl_8")),
@@ -3203,7 +3242,7 @@ function compactReasoningMessageEvents(events) {
 function compactEventsExtended(events) {
   return client.compactEvents(compactReasoningMessageEvents(events));
 }
-const styles$t = {
+const styles$s = {
   "message-content-user-wrapper": "_message-content-user-wrapper_80z92_8",
   "message-content-user-inner": "_message-content-user-inner_80z92_14",
   "message-content-user-content": "_message-content-user-content_80z92_22",
@@ -3260,25 +3299,25 @@ const ElmAgUiEventRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
           if (!userMsg) break;
           const contents = userMsg.content;
           const userInputComponent = /* @__PURE__ */ core$1._jsxSorted("div", null, {
-            class: styles$t["message-content-user-wrapper"]
+            class: styles$s["message-content-user-wrapper"]
           }, /* @__PURE__ */ core$1._jsxSorted("div", null, {
-            class: styles$t["message-content-user-inner"]
+            class: styles$s["message-content-user-inner"]
           }, [
             /* @__PURE__ */ core$1._jsxSorted("div", null, {
-              class: styles$t["message-content-type"]
+              class: styles$s["message-content-type"]
             }, [
               /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
-                class: styles$t["message-content-icon"],
+                class: styles$s["message-content-icon"],
                 d: js.mdiAccount
               }, null, 3, "Ds_3"),
               /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, "User", 3, "Ds_4"),
               /* @__PURE__ */ core$1._jsxSorted("div", null, {
                 "aria-hidden": "true",
-                class: styles$t["message-content-spacer"]
+                class: styles$s["message-content-spacer"]
               }, null, 3, null)
             ], 1, null),
             /* @__PURE__ */ core$1._jsxSorted("div", null, {
-              class: styles$t["message-content-user-content"]
+              class: styles$s["message-content-user-content"]
             }, typeof contents === "string" ? /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, contents, 1, "Ds_5") : contents.map((item, i) => /* @__PURE__ */ core$1._jsxSorted("span", null, null, renderInputContent(item), 1, i)), 1, null)
           ], 1, null), 1, "Ds_6");
           components.push(userInputComponent);
@@ -3294,14 +3333,14 @@ const ElmAgUiEventRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
   };
   return /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$t["elm-my-something"],
+      styles$s["elm-my-something"],
       _rawProps.class
     ],
     style: core$1._wrapProp(_rawProps, "style")
   }, null, render(_rawProps.events), 1, "Ds_7");
 }, "ElmAgUiEventRenderer_component_ifhto4pMkTc"));
 const input$1 = "_input_1cg4b_33";
-const styles$s = {
+const styles$r = {
   "elm-ag-ui-input-wrapper": "_elm-ag-ui-input-wrapper_1cg4b_1",
   "picker-container": "_picker-container_1cg4b_9",
   "elm-ag-ui-input": "_elm-ag-ui-input_1cg4b_1",
@@ -3314,7 +3353,7 @@ const panel = "_panel_8yo2s_1";
 const empty = "_empty_8yo2s_16";
 const form = "_form_8yo2s_86";
 const error$1 = "_error_8yo2s_135";
-const styles$r = {
+const styles$q = {
   panel,
   empty,
   "prompt-row": "_prompt-row_8yo2s_23",
@@ -3338,7 +3377,7 @@ const styles$r = {
   "field-hint": "_field-hint_8yo2s_178"
 };
 const open = "_open_1ijyc_17";
-const styles$q = {
+const styles$p = {
   "use-modal": "_use-modal_1ijyc_1",
   open
 };
@@ -3399,9 +3438,9 @@ const useModal = (options = {}) => {
     const delay2 = core$1._captures[0], hide2 = core$1._captures[1], isOpen2 = core$1._captures[2], isShown2 = core$1._captures[3];
     return /* @__PURE__ */ core$1._jsxSorted("div", {
       class: [
-        styles$q["use-modal"],
+        styles$p["use-modal"],
         {
-          [styles$q["open"]]: isShown2.value
+          [styles$p["open"]]: isShown2.value
         }
       ],
       style: {
@@ -3428,10 +3467,10 @@ const useModal = (options = {}) => {
     toggle: toggle2
   };
 };
-const _hf0$m = (p0) => p0.descriptor.name;
+const _hf0$l = (p0) => p0.descriptor.name;
 const _hf1$a = (p0) => p0.descriptor.description;
 const _hf2$7 = (p0, p1) => p1.values[p0.name] ?? "";
-const _hf3$7 = (p0) => p0.patternMessage ?? p0.description;
+const _hf3$6 = (p0) => p0.patternMessage ?? p0.description;
 const _hf4$3 = (p0) => p0.submitting ? "Resolving…" : "Use prompt";
 const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const modal2 = useModal({});
@@ -3542,12 +3581,12 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
   return /* @__PURE__ */ core$1._jsxSorted(jsxRuntime.Fragment, null, null, [
     /* @__PURE__ */ core$1._jsxSorted("div", {
       class: [
-        styles$r.panel,
+        styles$q.panel,
         _rawProps.class
       ],
       style: core$1._wrapProp(_rawProps, "style")
     }, null, _rawProps.prompts.length === 0 ? /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$r.empty
+      class: styles$q.empty
     }, "No prompts available.", 3, "O0_0") : _rawProps.prompts.map((p, idx) => {
       const qrl_4294901764 = /* @__PURE__ */ core$1.inlinedQrl((_, _1, p2) => {
         const onRowClick$2 = core$1._captures[0];
@@ -3557,41 +3596,41 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
       ]);
       return /* @__PURE__ */ core$1._jsxSorted("div", {
         class: [
-          styles$r["prompt-row"],
-          idx === _rawProps.activeIndex && styles$r["prompt-row-active"]
+          styles$q["prompt-row"],
+          idx === _rawProps.activeIndex && styles$q["prompt-row-active"]
         ],
         "q-e:click": qrl_4294901764,
         "q:p": p
       }, null, [
         /* @__PURE__ */ core$1._jsxSorted("div", null, {
-          class: styles$r["prompt-head"]
+          class: styles$q["prompt-head"]
         }, /* @__PURE__ */ core$1._jsxSorted("span", null, {
-          class: styles$r["prompt-name"]
+          class: styles$q["prompt-name"]
         }, core$1._wrapProp(p, "name"), 1, null), 1, null),
         p.description && /* @__PURE__ */ core$1._jsxSorted("span", null, {
-          class: styles$r["prompt-description"]
+          class: styles$q["prompt-description"]
         }, core$1._wrapProp(p, "description"), 1, "O0_1")
       ], 4, p.key);
     }), 1, null),
     /* @__PURE__ */ core$1._jsxSorted(modal2.Modal, null, null, /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$r["modal-card"]
+      class: styles$q["modal-card"]
     }, active2.descriptor && /* @__PURE__ */ core$1._jsxSorted(jsxRuntime.Fragment, null, null, [
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$r["modal-header"]
+        class: styles$q["modal-header"]
       }, [
         /* @__PURE__ */ core$1._jsxSorted("span", null, {
-          class: styles$r["modal-title"]
-        }, core$1._fnSignal(_hf0$m, [
+          class: styles$q["modal-title"]
+        }, core$1._fnSignal(_hf0$l, [
           active2
         ]), 3, null),
         active2.descriptor.description && /* @__PURE__ */ core$1._jsxSorted("span", null, {
-          class: styles$r["modal-description"]
+          class: styles$q["modal-description"]
         }, core$1._fnSignal(_hf1$a, [
           active2
         ]), 3, "O0_2")
       ], 1, null),
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$r.form
+        class: styles$q.form
       }, [
         (active2.descriptor.arguments ?? []).map((a, idx) => {
           const qrl_4294901765 = /* @__PURE__ */ core$1.inlinedQrl((_, el, a2) => {
@@ -3607,14 +3646,14 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
             active2
           ]);
           return /* @__PURE__ */ core$1._jsxSorted("label", null, {
-            class: styles$r["field-label"]
+            class: styles$q["field-label"]
           }, [
             /* @__PURE__ */ core$1._jsxSorted("span", null, {
-              class: styles$r["field-name"]
+              class: styles$q["field-name"]
             }, [
               core$1._wrapProp(a, "name"),
               a.required && /* @__PURE__ */ core$1._jsxSorted("span", null, {
-                class: styles$r["field-required"]
+                class: styles$q["field-required"]
               }, "*", 3, "O0_3")
             ], 1, null),
             a.enum && a.enum.length > 0 ? /* @__PURE__ */ core$1._jsxSorted("select", {
@@ -3627,7 +3666,7 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
                 active2
               ])
             }, {
-              class: styles$r["field-input"]
+              class: styles$q["field-input"]
             }, [
               !a.required && /* @__PURE__ */ core$1._jsxSorted("option", null, {
                 value: ""
@@ -3647,7 +3686,7 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
               "q-e:input": qrl_4294901766,
               "q:p": a,
               ref: idx === 0 ? firstFieldRef : void 0,
-              title: core$1._fnSignal(_hf3$7, [
+              title: core$1._fnSignal(_hf3$6, [
                 a
               ]),
               value: core$1._fnSignal(_hf2$7, [
@@ -3655,29 +3694,29 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
                 active2
               ])
             }, {
-              class: styles$r["field-input"],
+              class: styles$q["field-input"],
               type: "text"
             }, null, 6, "O0_6"),
             a.enum && a.description && /* @__PURE__ */ core$1._jsxSorted("span", null, {
-              class: styles$r["field-hint"]
+              class: styles$q["field-hint"]
             }, core$1._wrapProp(a, "description"), 1, "O0_7")
           ], 1, a.name);
         }),
         active2.error && /* @__PURE__ */ core$1._jsxSorted("div", null, {
-          class: styles$r.error
+          class: styles$q.error
         }, core$1._wrapProp(active2, "error"), 3, "O0_8")
       ], 1, null),
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$r["form-actions"]
+        class: styles$q["form-actions"]
       }, [
         /* @__PURE__ */ core$1._jsxSorted("button", null, {
           type: "button",
-          class: styles$r["cancel-button"],
+          class: styles$q["cancel-button"],
           "q-e:click": onCancel$
         }, "Cancel", 3, null),
         /* @__PURE__ */ core$1._jsxSorted("button", null, {
           type: "button",
-          class: styles$r["use-button"],
+          class: styles$q["use-button"],
           disabled: core$1._wrapProp(active2, "submitting"),
           "q-e:click": onSubmit$
         }, core$1._fnSignal(_hf4$3, [
@@ -3687,10 +3726,10 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     ], 1, "O0_9"), 1, null), 1, "O0_10")
   ], 1, "O0_11");
 }, "ElmAgUiPromptPicker_component_rrSAnBfqqKQ"));
-const _hf0$l = (p0, p1, p2) => p0 && (p1.value || p2.value !== null);
+const _hf0$k = (p0, p1, p2) => p0 && (p1.value || p2.value !== null);
 const _hf1$9 = (p0, p1, p2) => p2.value !== null ? p1.value : p0.prompts ?? [];
 const _hf2$6 = (p0, p1) => p1.value !== null ? p0.value : void 0;
-const _hf3$6 = (p0) => p0.value ? "Close prompts" : "Open prompts";
+const _hf3$5 = (p0) => p0.value ? "Close prompts" : "Open prompts";
 const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const textAreaRef = core$1.useSignal();
   const isPickerOpen = core$1.useSignal(false);
@@ -3824,18 +3863,18 @@ const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
   ]);
   return /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$s["elm-ag-ui-input-wrapper"],
+      styles$r["elm-ag-ui-input-wrapper"],
       _rawProps.class
     ],
     style: core$1._wrapProp(_rawProps, "style")
   }, null, [
     /* @__PURE__ */ core$1._jsxSorted(ElmCollapse, null, {
-      isOpen: core$1._fnSignal(_hf0$l, [
+      isOpen: core$1._fnSignal(_hf0$k, [
         hasPicker,
         isPickerOpen,
         slashRange
       ]),
-      class: styles$s["picker-container"]
+      class: styles$r["picker-container"]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmAgUiPromptPicker, null, {
       prompts: core$1._fnSignal(_hf1$9, [
         _rawProps,
@@ -3851,7 +3890,7 @@ const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     }, null, 3, "C8_0"), 1, "C8_1"),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
       class: [
-        styles$s["elm-ag-ui-input"],
+        styles$r["elm-ag-ui-input"],
         textStyles["text"]
       ]
     }, [
@@ -3860,12 +3899,12 @@ const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       }, {
         name: "prompt",
         "aria-label": "Prompt",
-        class: styles$s["input"],
+        class: styles$r["input"],
         "q-e:input": handleInput$,
         "q-e:keydown": handleKeyDown$
       }, null, 3, null),
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$s["button-row"]
+        class: styles$r["button-row"]
       }, [
         hasPicker && /* @__PURE__ */ core$1._jsxSorted("div", {
           "q-e:click": /* @__PURE__ */ core$1.inlinedQrl((_, _1, isPickerOpen2, textAreaRef2) => {
@@ -3884,8 +3923,8 @@ const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
             textAreaRef
           ]
         }, {
-          class: styles$s["plus-button"],
-          "aria-label": core$1._fnSignal(_hf3$6, [
+          class: styles$r["plus-button"],
+          "aria-label": core$1._fnSignal(_hf3$5, [
             isPickerOpen
           ])
         }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
@@ -3897,7 +3936,7 @@ const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
         /* @__PURE__ */ core$1._jsxSorted("div", {
           "q-e:click": _rawProps.isRunning ? _rawProps.onAbort$ : onSubmit
         }, {
-          class: styles$s["submit-button"]
+          class: styles$r["submit-button"]
         }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
           d: _rawProps.isRunning ? js.mdiStop : js.mdiSend
         }, {
@@ -3908,7 +3947,7 @@ const ElmAgUiInput = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     ], 1, null)
   ], 1, "C8_5");
 }, "ElmAgUiInput_component_Q6DXfNqyu3E"));
-const styles$p = {
+const styles$o = {
   "message-content-assistant-wrapper": "_message-content-assistant-wrapper_1jrzm_1",
   "message-content-user-wrapper": "_message-content-user-wrapper_1jrzm_8",
   "message-content-user-inner": "_message-content-user-inner_1jrzm_14",
@@ -3919,10 +3958,10 @@ const styles$p = {
   "clickable-icon": "_clickable-icon_1jrzm_51",
   "reasoning-running": "_reasoning-running_1jrzm_65"
 };
-const styles$o = {
+const styles$n = {
   "markdown-body": "_markdown-body_1mr56_1"
 };
-const _hf0$k = (p0) => p0.ordered ? "ordered" : "unordered";
+const _hf0$j = (p0) => p0.ordered ? "ordered" : "unordered";
 const renderByToken = (tokens) => {
   const results = [];
   for (let i = 0; i < tokens.length; i++) {
@@ -4003,7 +4042,7 @@ const renderByToken = (tokens) => {
       case "list": {
         const listItems = token.items.map((item, index) => /* @__PURE__ */ core$1._jsxSorted("li", null, null, renderByToken(item.tokens), 1, index));
         results.push(/* @__PURE__ */ core$1._jsxSorted(ElmList, null, {
-          listStyle: core$1._fnSignal(_hf0$k, [
+          listStyle: core$1._fnSignal(_hf0$j, [
             token
           ])
         }, listItems, 1, i));
@@ -4077,7 +4116,7 @@ const ElmMarkdown = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   ]));
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$o["markdown-body"],
+      styles$n["markdown-body"],
       props.class
     ],
     ...core$1._getVarProps(rest)
@@ -4089,7 +4128,7 @@ const ElmMarkdown = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   ], 0, "c0_5");
 }, "ElmMarkdown_component_MjKh8ZU4JE4"));
 const summary = "_summary_1ya7x_2";
-const styles$n = {
+const styles$m = {
   "elm-ag-ui-tool-execution": "_elm-ag-ui-tool-execution_1ya7x_1",
   summary
 };
@@ -4171,7 +4210,7 @@ function useThrottledQueue(minInterval = 200) {
   ]));
   return queueRef;
 }
-const _hf0$j = (p0) => ({
+const _hf0$i = (p0) => ({
   "--margin-block": "0",
   ...p0.style
 });
@@ -4241,10 +4280,10 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
   ]));
   return /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$n["elm-ag-ui-tool-execution"],
+      styles$m["elm-ag-ui-tool-execution"],
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$j, [
+    style: core$1._fnSignal(_hf0$i, [
       _rawProps
     ])
   }, null, /* @__PURE__ */ core$1._jsxSorted(ElmToggle, null, {
@@ -4254,7 +4293,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     /* @__PURE__ */ core$1._jsxSorted("div", {
       "q:slot": "summary"
     }, {
-      class: styles$n.summary
+      class: styles$m.summary
     }, [
       /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
         d: js.mdiHammerScrewdriver,
@@ -4263,10 +4302,10 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
       /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(_rawProps, "toolName"), 1, "o2_1")
     ], 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$n.summary
+      class: styles$m.summary
     }, [
       /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
-        color: _rawProps.toolEventType === core$2.EventType.TOOL_CALL_START ? "#6987b8" : "#59b57c"
+        color: _rawProps.toolEventType === core$2.EventType.TOOL_CALL_START ? "var(--elmethis-accent-info)" : "var(--elmethis-accent-success)"
       }, {
         d: js.mdiFunctionVariant,
         size: "1rem"
@@ -4280,7 +4319,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
       /* @__PURE__ */ core$1._jsxSorted("div", {
         "q:slot": "summary"
       }, {
-        class: styles$n.summary
+        class: styles$m.summary
       }, [
         /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
           d: js.mdiCodeJson,
@@ -4294,10 +4333,10 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
       }, null, 3, "o2_6")
     ], 1, "o2_7"),
     _rawProps.toolEventType === core$2.EventType.TOOL_CALL_START ? null : /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$n.summary
+      class: styles$m.summary
     }, [
       /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
-        color: _rawProps.toolEventType === core$2.EventType.TOOL_CALL_ARGS || _rawProps.toolEventType === core$2.EventType.TOOL_CALL_END ? "#6987b8" : "#59b57c"
+        color: _rawProps.toolEventType === core$2.EventType.TOOL_CALL_ARGS || _rawProps.toolEventType === core$2.EventType.TOOL_CALL_END ? "var(--elmethis-accent-info)" : "var(--elmethis-accent-success)"
       }, {
         d: js.mdiWrenchClock,
         size: "1rem"
@@ -4311,7 +4350,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
       /* @__PURE__ */ core$1._jsxSorted("div", {
         "q:slot": "summary"
       }, {
-        class: styles$n.summary
+        class: styles$m.summary
       }, [
         /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
           d: js.mdiCodeJson,
@@ -4326,69 +4365,6 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     ], 1, "o2_14")
   ], 1, "o2_15"), 1, "o2_16");
 }, "ElmAgUiToolExecution_component_UlE8ZaFD82E"));
-const styles$m = {
-  "use-clipboard": "_use-clipboard_1cdrt_1"
-};
-const _hf0$i = (p0) => p0.value ? "#cdb57b" : void 0;
-const useClipboard = (options) => {
-  const copied = core$1.useSignal(false);
-  const resetTimerId = core$1.useSignal(void 0);
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup }) => {
-    const resetTimerId2 = core$1._captures[0];
-    cleanup(() => {
-      if (resetTimerId2.value !== void 0) clearTimeout(resetTimerId2.value);
-    });
-  }, "useClipboard_useTask_0QBF5GEj0aQ", [
-    resetTimerId
-  ]));
-  const copy = /* @__PURE__ */ core$1.inlinedQrl(async () => {
-    const copied2 = core$1._captures[0], options2 = core$1._captures[1], resetTimerId2 = core$1._captures[2];
-    if (typeof options2.content === "string") {
-      await window.navigator.clipboard.writeText(options2.content);
-    } else {
-      await window.navigator.clipboard.write(options2.content.map((item) => new ClipboardItem(item)));
-    }
-    if (resetTimerId2.value !== void 0) {
-      clearTimeout(resetTimerId2.value);
-    }
-    copied2.value = true;
-    resetTimerId2.value = core$1.noSerialize(setTimeout(() => {
-      copied2.value = false;
-      resetTimerId2.value = void 0;
-    }, options2.delay ?? 1500));
-  }, "useClipboard_copy_lwkIxmzZUeM", [
-    copied,
-    options,
-    resetTimerId
-  ]);
-  const CopyButton = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl(() => {
-    const copied2 = core$1._captures[0], copy2 = core$1._captures[1], options2 = core$1._captures[2];
-    return /* @__PURE__ */ core$1._jsxSorted("span", {
-      class: [
-        styles$m["use-clipboard"],
-        options2.class
-      ],
-      style: core$1._wrapProp(options2, "style")
-    }, {
-      "q-e:click": copy2
-    }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
-      d: copied2.value ? js.mdiClipboardCheckOutline : js.mdiClipboardOutline
-    }, {
-      color: core$1._fnSignal(_hf0$i, [
-        copied2
-      ]),
-      size: "1.25rem"
-    }, null, 3, "eS_0"), 1, "eS_1");
-  }, "useClipboard_CopyButton_component_coZZtY9bwxs", [
-    copied,
-    copy,
-    options
-  ]));
-  return {
-    CopyButton,
-    copy
-  };
-};
 const ElmCopyIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const clipboard = useClipboard({
     class: _rawProps.class,
@@ -4398,13 +4374,13 @@ const ElmCopyIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   return /* @__PURE__ */ core$1._jsxSorted(clipboard.CopyButton, null, null, null, 3, "83_0");
 }, "ElmCopyIcon_component_F4DnU406zxQ"));
 const image = "_image_1lvlw_30";
-const text$3 = "_text_1lvlw_36";
+const text$2 = "_text_1lvlw_36";
 const styles$l = {
   "elm-ag-ui-input-content": "_elm-ag-ui-input-content_1lvlw_1",
   "media-component-container": "_media-component-container_1lvlw_8",
   "media-component": "_media-component_1lvlw_8",
   image,
-  text: text$3,
+  text: text$2,
   "type-icon": "_type-icon_1lvlw_50",
   "mime-type-label": "_mime-type-label_1lvlw_57",
   "message-content-user-content": "_message-content-user-content_1lvlw_87"
@@ -4503,7 +4479,7 @@ const ElmAgUiInputContent = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
 const _hf0$g = (p0) => p0.function.name;
 const _hf1$7 = (p0) => p0.function.arguments;
 const _hf2$5 = (p0) => p0?.content;
-const _hf3$5 = (p0, p1) => p0.messages.length - 1 === p1;
+const _hf3$4 = (p0, p1) => p0.messages.length - 1 === p1;
 const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const renderTool = (toolCall, messages2) => {
     let toolEventType = core$2.EventType.TOOL_CALL_START;
@@ -4541,19 +4517,19 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
           return /* @__PURE__ */ core$1._jsxSorted(jsxRuntime.Fragment, null, null, [
             message2.toolCalls?.map((toolCall) => renderTool(toolCall, _rawProps.messages)),
             message2.content != null && /* @__PURE__ */ core$1._jsxSorted("div", null, {
-              class: styles$p["message-content-assistant-wrapper"]
+              class: styles$o["message-content-assistant-wrapper"]
             }, [
               /* @__PURE__ */ core$1._jsxSorted("div", null, {
-                class: styles$p["message-content-type"]
+                class: styles$o["message-content-type"]
               }, [
                 /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
-                  class: styles$p["message-content-icon"],
+                  class: styles$o["message-content-icon"],
                   d: js.mdiCreation
                 }, null, 3, "nO_2"),
                 /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, "Assistant", 3, "nO_3"),
                 /* @__PURE__ */ core$1._jsxSorted("div", null, {
                   "aria-hidden": "true",
-                  class: styles$p["message-content-spacer"]
+                  class: styles$o["message-content-spacer"]
                 }, null, 3, null)
               ], 1, null),
               /* @__PURE__ */ core$1._jsxSorted(ElmMarkdown, null, {
@@ -4561,7 +4537,7 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
                 streaming: true
               }, null, 3, "nO_4"),
               !_rawProps.isRunning && /* @__PURE__ */ core$1._jsxSorted("div", null, {
-                class: styles$p["message-content-assistant-actions"]
+                class: styles$o["message-content-assistant-actions"]
               }, [
                 /* @__PURE__ */ core$1._jsxSorted(ElmCopyIcon, null, {
                   content: core$1._wrapProp(message2, "content")
@@ -4569,7 +4545,7 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
                 /* @__PURE__ */ core$1._jsxSorted("span", {
                   "q-e:click": _rawProps.handleRetry$
                 }, {
-                  class: styles$p["clickable-icon"]
+                  class: styles$o["clickable-icon"]
                 }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
                   d: js.mdiRefresh,
                   size: "1.25rem"
@@ -4629,22 +4605,22 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
             /* @__PURE__ */ core$1._jsxSorted("div", {
               "q:slot": "summary"
             }, {
-              class: styles$p["message-content-type"]
+              class: styles$o["message-content-type"]
             }, [
               /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
-                class: styles$p["message-content-icon"],
+                class: styles$o["message-content-icon"],
                 d: js.mdiLightbulbOn
               }, null, 3, "nO_12"),
               /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, "Reasoning", 3, "nO_13"),
               /* @__PURE__ */ core$1._jsxSorted("div", null, {
                 "aria-hidden": "true",
-                class: styles$p["message-content-spacer"]
+                class: styles$o["message-content-spacer"]
               }, null, 3, null)
             ], 1, null),
             /* @__PURE__ */ core$1._jsxSorted("div", {
               class: [
                 {
-                  [styles$p["reasoning-running"]]: props.isReasoningRunning
+                  [styles$o["reasoning-running"]]: props.isReasoningRunning
                 }
               ],
               ref: reasoningRef
@@ -4654,7 +4630,7 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
           ], 1, "nO_15");
         }, "ElmAgUiMessageRenderer_component_render_Reasoning_component_aNX9iol0O8o"));
         return /* @__PURE__ */ core$1._jsxSorted(Reasoning, null, {
-          isReasoningRunning: core$1._fnSignal(_hf3$5, [
+          isReasoningRunning: core$1._fnSignal(_hf3$4, [
             _rawProps,
             index
           ]),
@@ -4676,21 +4652,21 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
           return "";
         };
         return /* @__PURE__ */ core$1._jsxSorted("div", null, {
-          class: styles$p["message-content-user-wrapper"]
+          class: styles$o["message-content-user-wrapper"]
         }, /* @__PURE__ */ core$1._jsxSorted("div", null, {
-          class: styles$p["message-content-user-inner"]
+          class: styles$o["message-content-user-inner"]
         }, [
           /* @__PURE__ */ core$1._jsxSorted("div", null, {
-            class: styles$p["message-content-type"]
+            class: styles$o["message-content-type"]
           }, [
             /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
-              class: styles$p["message-content-icon"],
+              class: styles$o["message-content-icon"],
               d: js.mdiAccount
             }, null, 3, "nO_17"),
             /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, "User", 3, "nO_18"),
             /* @__PURE__ */ core$1._jsxSorted("div", null, {
               "aria-hidden": "true",
-              class: styles$p["message-content-spacer"]
+              class: styles$o["message-content-spacer"]
             }, null, 3, null)
           ], 1, null),
           /* @__PURE__ */ core$1._jsxSorted(ElmAgUiInputContent, null, {
@@ -4705,24 +4681,25 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
   };
   return /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$p["elm-my-something"],
+      styles$o["elm-my-something"],
       _rawProps.class
     ],
     style: core$1._wrapProp(_rawProps, "style")
   }, null, _rawProps.messages.map((msg, i) => /* @__PURE__ */ core$1._jsxSorted("div", null, null, render(msg, i), 1, msg.id ?? i)), 1, "nO_22");
 }, "ElmAgUiMessageRenderer_component_0OscNQKsfZA"));
-const messages = "_messages_1a0xh_20";
-const error = "_error_1a0xh_27";
+const messages = "_messages_907xd_20";
+const error = "_error_907xd_27";
 const styles$k = {
-  "use-agent": "_use-agent_1a0xh_1",
-  "agent-container": "_agent-container_1a0xh_14",
+  "use-agent": "_use-agent_907xd_1",
+  "agent-container": "_agent-container_907xd_14",
   messages,
   error,
-  "agent-input-container": "_agent-input-container_1a0xh_40",
-  "agent-input": "_agent-input_1a0xh_40",
-  "prompt-template-container": "_prompt-template-container_1a0xh_52",
-  "prompt-template-tip": "_prompt-template-tip_1a0xh_61",
-  "clickable-icon": "_clickable-icon_1a0xh_80"
+  "agent-input-container": "_agent-input-container_907xd_40",
+  "agent-input": "_agent-input_907xd_40",
+  "prompt-template-container": "_prompt-template-container_907xd_52",
+  "prompt-template-tip": "_prompt-template-tip_907xd_61",
+  "prompt-template-tip-icon": "_prompt-template-tip-icon_907xd_71",
+  "clickable-icon": "_clickable-icon_907xd_84"
 };
 const _hf0$f = (p0) => ({
   "--agent-ui-width": p0.width ?? "clamp(300px, 100%, 600px)",
@@ -4730,7 +4707,7 @@ const _hf0$f = (p0) => ({
 });
 const _hf1$6 = (p0) => p0.state.isRunning;
 const _hf2$4 = (p0) => p0.state.messages;
-const _hf3$4 = (p0) => p0.state.error;
+const _hf3$3 = (p0) => p0.state.error;
 const ElmAgUiAgent = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const input2 = core$1.useSignal("");
   const containerRef = core$1.useSignal();
@@ -4817,14 +4794,14 @@ const ElmAgUiAgent = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
         }, [
           /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
             d: js.mdiAlert,
-            color: "#c56565",
+            color: "var(--elmethis-accent-error)",
             style: {
               flexShrink: 0
             }
           }, null, 3, "Oj_1"),
           /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
-            color: "#c56565"
-          }, core$1._fnSignal(_hf3$4, [
+            color: "var(--elmethis-accent-error)"
+          }, core$1._fnSignal(_hf3$3, [
             props
           ]), 1, "Oj_2")
         ], 1, null),
@@ -4852,8 +4829,8 @@ const ElmAgUiAgent = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
         "q-e:click": onTemplateClick$
       }, [
         /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
-          d: js.mdiForumOutline,
-          color: "#cdb57b"
+          class: styles$k["prompt-template-tip-icon"],
+          d: js.mdiForumOutline
         }, null, 3, "Oj_5"),
         /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(template, "description"), 1, "Oj_6")
       ], 1, index)), 1, "Oj_7"),
@@ -5601,23 +5578,21 @@ const ElmTooltip = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
 const styles$g = {
   "block-fallback": "_block-fallback_1xthk_1"
 };
-const wrapper$5 = "_wrapper_ofl2b_15";
-const dot = "_dot_ofl2b_25";
+const wrapper$5 = "_wrapper_1tt16_15";
+const dot = "_dot_1tt16_25";
 const styles$f = {
   wrapper: wrapper$5,
   dot
 };
 const _hf0$d = (p0) => ({
   "--elmethis-scoped-size": p0.size ?? "4em",
-  "--elmethis-scoped-color": p0.color ?? "#606875",
   ...p0.style
 });
 const ElmDotLoadingIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
     "style",
-    "size",
-    "color"
+    "size"
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("span", {
     class: [
@@ -5667,16 +5642,15 @@ const ElmBlockFallback = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ cor
     /* @__PURE__ */ core$1._jsxSorted(ElmRectangleWave, null, null, null, 3, "Jl_1")
   ], 0, "Jl_2");
 }, "ElmBlockFallback_component_R0mGF6D5fyk"));
-const button = "_button_bc88k_1";
-const normal = "_normal_bc88k_34";
-const primary = "_primary_bc88k_44";
-const colored = "_colored_bc88k_54";
-const enable = "_enable_bc88k_58";
-const flex = "_flex_bc88k_89";
-const ripple = "_ripple_bc88k_113";
+const button = "_button_1739c_1";
+const normal = "_normal_1739c_23";
+const primary = "_primary_1739c_28";
+const colored = "_colored_1739c_33";
+const enable = "_enable_1739c_37";
+const flex = "_flex_1739c_68";
+const ripple = "_ripple_1739c_92";
 const styles$e = {
   button,
-  "button-ornament": "_button-ornament_bc88k_23",
   normal,
   primary,
   colored,
@@ -5735,10 +5709,7 @@ const ElmButton = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
       size: "1.5rem"
     }, null, 3, "3N_1") : /* @__PURE__ */ core$1._jsxSorted("span", null, {
       class: styles$e.flex
-    }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "3N_2"), 1, "3N_3"),
-    /* @__PURE__ */ core$1._jsxSorted("span", null, {
-      class: styles$e["button-ornament"]
-    }, null, 3, null)
+    }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "3N_2"), 1, "3N_3")
   ], 0, "3N_4");
 }, "ElmButton_component_f1UuOse0UGw"));
 const container$2 = "_container_1rbc2_1";
@@ -5934,32 +5905,30 @@ const ElmCheckbox = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(props, "label"), 1, "UZ_1")
   ], 1, null), 0, "UZ_2");
 }, "ElmCheckbox_component_a3MV4MkaYBo"));
-const wrapper$4 = "_wrapper_1kxet_1";
-const active$2 = "_active_1kxet_23";
-const label = "_label_1kxet_32";
-const body$2 = "_body_1kxet_50";
-const fallback = "_fallback_1kxet_67";
-const pulldown = "_pulldown_1kxet_75";
-const option = "_option_1kxet_60";
+const wrapper$4 = "_wrapper_1nmfl_1";
+const disabled$3 = "_disabled_1nmfl_23";
+const active$2 = "_active_1nmfl_27";
+const label = "_label_1nmfl_31";
+const body$2 = "_body_1nmfl_49";
+const fallback = "_fallback_1nmfl_66";
+const pulldown = "_pulldown_1nmfl_74";
+const option = "_option_1nmfl_59";
 const styles$c = {
   wrapper: wrapper$4,
+  disabled: disabled$3,
   active: active$2,
   label,
-  "label-active": "_label-active_1kxet_45",
+  "label-active": "_label-active_1nmfl_44",
   body: body$2,
-  "selected-option": "_selected-option_1kxet_57",
-  "option-content": "_option-content_1kxet_60",
+  "selected-option": "_selected-option_1nmfl_56",
+  "option-content": "_option-content_1nmfl_59",
   fallback,
   pulldown,
   option
 };
-const _hf0$a = (p0) => ({
-  backgroundColor: p0.disabled || p0.loading ? "rgba(0,0,0,0.15)" : void 0,
-  ...p0.style
-});
-const _hf1$5 = (p0) => p0.value.icon;
-const _hf2$3 = (p0) => p0.value.label;
-const _hf3$3 = (p0) => p0.placeholder ?? "Select an option";
+const _hf0$a = (p0) => p0.value.icon;
+const _hf1$5 = (p0) => p0.value.label;
+const _hf2$3 = (p0) => p0.placeholder ?? "Select an option";
 const ElmSelect = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -5999,11 +5968,12 @@ const ElmSelect = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
     class: [
       styles$c.wrapper,
       isOpen.value && styles$c.active,
-      props.class
+      props.class,
+      {
+        [styles$c.disabled]: props.disabled || props.loading
+      }
     ],
-    style: core$1._fnSignal(_hf0$a, [
-      props
-    ]),
+    style: core$1._wrapProp(props, "style"),
     "q-e:click": /* @__PURE__ */ core$1.inlinedQrl(() => {
       const isOpen2 = core$1._captures[0], props2 = core$1._captures[1];
       if (!props2.disabled && !props2.loading) {
@@ -6043,16 +6013,16 @@ const ElmSelect = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
         class: styles$c["option-content"]
       }, [
         selectedOption.value.icon && /* @__PURE__ */ core$1._jsxSorted(ElmInlineIcon, null, {
-          src: core$1._fnSignal(_hf1$5, [
+          src: core$1._fnSignal(_hf0$a, [
             selectedOption
           ])
         }, null, 3, "5b_2"),
-        /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._fnSignal(_hf2$3, [
+        /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._fnSignal(_hf1$5, [
           selectedOption
         ]), 3, "5b_3")
       ], 1, selectedOption.value.id) : /* @__PURE__ */ core$1._jsxSorted("div", null, {
         class: styles$c.fallback
-      }, /* @__PURE__ */ core$1._jsxSorted("span", null, null, core$1._fnSignal(_hf3$3, [
+      }, /* @__PURE__ */ core$1._jsxSorted("span", null, null, core$1._fnSignal(_hf2$3, [
         props
       ]), 1, null), 1, "5b_4"), 1, null),
       /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
@@ -6083,7 +6053,7 @@ const ElmSelect = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
         }, [
           /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
             d: js.mdiChevronRight,
-            color: "var(--elmethis-color-accent-muted)",
+            color: "var(--elmethis-color-primary-common-fg-weak)",
             size: "0.75em"
           }, null, 3, "5b_6"),
           option2.icon && /* @__PURE__ */ core$1._jsxSorted(ElmInlineIcon, {
@@ -6097,13 +6067,13 @@ const ElmSelect = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
 }, "ElmSelect_component_5jGhwsE6oU0"));
 const bar = "_bar_6xrsu_5";
 const checked = "_checked_6xrsu_19";
-const disabled = "_disabled_6xrsu_24";
+const disabled$2 = "_disabled_6xrsu_24";
 const circle = "_circle_6xrsu_29";
 const styles$b = {
   "switch": "_switch_6xrsu_1",
   bar,
   checked,
-  disabled,
+  disabled: disabled$2,
   circle
 };
 const _hf0$9 = (p0) => p0.checked.value;
@@ -6116,7 +6086,7 @@ const ElmSwitch = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
     "disabled",
     "checked"
   ]);
-  const resolvedColor = props.color ?? "var(--elmethis-color-primary)";
+  const resolvedColor = props.color ?? "var(--elmethis-color-primary-common-fg)";
   const resolvedSize = props.size ?? "18px";
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     "q-e:click": /* @__PURE__ */ core$1.inlinedQrl(() => {
@@ -6161,37 +6131,35 @@ const ElmSwitch = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
     }, null, null, 3, null), 1, null)
   ], 0, "hS_0");
 }, "ElmSwitch_component_vkfpyHRHmhQ"));
-const loading$1 = "_loading_1xl38_23";
-const wrapper$3 = "_wrapper_1xl38_37";
-const active$1 = "_active_1xl38_59";
-const header$1 = "_header_1xl38_69";
-const requierd$1 = "_requierd_1xl38_87";
-const body$1 = "_body_1xl38_93";
-const textarea = "_textarea_1xl38_98";
+const loading$1 = "_loading_vywzw_23";
+const wrapper$3 = "_wrapper_vywzw_37";
+const disabled$1 = "_disabled_vywzw_59";
+const active$1 = "_active_vywzw_63";
+const header$1 = "_header_vywzw_73";
+const requierd$1 = "_requierd_vywzw_91";
+const body$1 = "_body_vywzw_97";
+const textarea = "_textarea_vywzw_102";
 const styles$a = {
   loading: loading$1,
   wrapper: wrapper$3,
+  disabled: disabled$1,
   active: active$1,
   header: header$1,
-  "label-active": "_label-active_1xl38_82",
+  "label-active": "_label-active_vywzw_86",
   requierd: requierd$1,
   body: body$1,
   textarea
 };
-const _hf0$8 = (p0) => ({
-  backgroundColor: p0.disabled || p0.loading ? "rgba(0,0,0,0.15)" : void 0,
-  ...p0.style
-});
-const _hf1$4 = (p0) => p0.maxLength != null && p0.value.value.length > p0.maxLength ? "var(--elmethis-color-error)" : "gray";
-const _hf2$2 = (p0) => p0.maxLength != null ? `${p0.value.value.length} / ${p0.maxLength}` : `${p0.value.value.length}`;
-const _hf3$2 = (p0) => p0.value?.value;
-const _hf4$2 = (p0) => p0.rows ?? 3;
-const _hf5$2 = (p0) => p0.disabled || p0.loading;
-const _hf6$2 = (p0) => ({
+const _hf0$8 = (p0) => p0.maxLength != null && p0.value.value.length > p0.maxLength ? "var(--elmethis-accent-error)" : "gray";
+const _hf1$4 = (p0) => p0.maxLength != null ? `${p0.value.value.length} / ${p0.maxLength}` : `${p0.value.value.length}`;
+const _hf2$2 = (p0) => p0.value?.value;
+const _hf3$2 = (p0) => p0.rows ?? 3;
+const _hf4$2 = (p0) => p0.disabled || p0.loading;
+const _hf5$2 = (p0) => ({
   cursor: p0.disabled ? "not-allowed" : p0.loading ? "progress" : "auto"
 });
-const _hf7$1 = (p0) => ({
-  opacity: p0.loading ? 0.2 : 0
+const _hf6$1 = (p0) => ({
+  opacity: p0.loading ? 1 : 0
 });
 const ElmTextArea = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
@@ -6211,11 +6179,12 @@ const ElmTextArea = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     class: [
       styles$a.wrapper,
       isFocused.value && styles$a.active,
-      props.class
+      props.class,
+      {
+        [styles$a.disabled]: props.disabled || props.loading
+      }
     ],
-    style: core$1._fnSignal(_hf0$8, [
-      props
-    ]),
+    style: core$1._wrapProp(props, "style"),
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), [
     /* @__PURE__ */ core$1._jsxSorted("span", {
@@ -6239,11 +6208,11 @@ const ElmTextArea = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
         }, "*", 3, "RT_2")
       ], 1, null),
       props.value != null && /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
-        color: core$1._fnSignal(_hf1$4, [
+        color: core$1._fnSignal(_hf0$8, [
           props
         ]),
         size: "0.75rem"
-      }, core$1._fnSignal(_hf2$2, [
+      }, core$1._fnSignal(_hf1$4, [
         props
       ]), 1, "RT_3")
     ], 1, null),
@@ -6251,7 +6220,7 @@ const ElmTextArea = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
       class: styles$a.body
     }, /* @__PURE__ */ core$1._jsxSorted("textarea", {
       "aria-required": core$1._wrapProp(props, "required"),
-      disabled: core$1._fnSignal(_hf5$2, [
+      disabled: core$1._fnSignal(_hf4$2, [
         props
       ]),
       placeholder: core$1._wrapProp(props, "placeholder"),
@@ -6264,20 +6233,20 @@ const ElmTextArea = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
         props
       ]),
       "q:p": isFocused,
-      rows: core$1._fnSignal(_hf4$2, [
+      rows: core$1._fnSignal(_hf3$2, [
         props
       ]),
-      style: core$1._fnSignal(_hf6$2, [
+      style: core$1._fnSignal(_hf5$2, [
         props
       ]),
-      value: core$1._fnSignal(_hf3$2, [
+      value: core$1._fnSignal(_hf2$2, [
         props
       ])
     }, {
       class: styles$a.textarea
     }, null, 6, null), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", {
-      style: core$1._fnSignal(_hf7$1, [
+      style: core$1._fnSignal(_hf6$1, [
         props
       ])
     }, {
@@ -6285,39 +6254,37 @@ const ElmTextArea = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     }, null, 3, null)
   ], 0, "RT_4");
 }, "ElmTextArea_component_eI5Hurm0OV8"));
-const loading = "_loading_10lo5_23";
-const wrapper$2 = "_wrapper_10lo5_37";
-const active = "_active_10lo5_59";
-const header = "_header_10lo5_69";
-const requierd = "_requierd_10lo5_87";
-const body = "_body_10lo5_93";
-const input = "_input_10lo5_101";
+const loading = "_loading_12gf1_23";
+const wrapper$2 = "_wrapper_12gf1_37";
+const disabled = "_disabled_12gf1_59";
+const active = "_active_12gf1_63";
+const header = "_header_12gf1_68";
+const requierd = "_requierd_12gf1_86";
+const body = "_body_12gf1_92";
+const input = "_input_12gf1_100";
 const styles$9 = {
   loading,
   wrapper: wrapper$2,
+  disabled,
   active,
   header,
-  "label-active": "_label-active_10lo5_82",
+  "label-active": "_label-active_12gf1_81",
   requierd,
   body,
   input,
-  "right-icon-box": "_right-icon-box_10lo5_132",
-  "clickable-icon": "_clickable-icon_10lo5_137",
-  "prefix-suffix": "_prefix-suffix_10lo5_153"
+  "right-icon-box": "_right-icon-box_12gf1_121",
+  "clickable-icon": "_clickable-icon_12gf1_126",
+  "prefix-suffix": "_prefix-suffix_12gf1_142"
 };
-const _hf0$7 = (p0) => ({
-  backgroundColor: p0.disabled || p0.loading ? "rgba(0,0,0,0.15)" : void 0,
-  ...p0.style
-});
-const _hf1$3 = (p0) => p0.maxLength != null && p0.value.value.length > p0.maxLength ? "var(--elmethis-color-error)" : "gray";
-const _hf2$1 = (p0) => p0.maxLength != null ? `${p0.value.value.length} / ${p0.maxLength}` : `${p0.value.value.length}`;
-const _hf3$1 = (p0) => p0.value?.value;
-const _hf4$1 = (p0) => p0.disabled || p0.loading;
-const _hf5$1 = (p0) => ({
+const _hf0$7 = (p0) => p0.maxLength != null && p0.value.value.length > p0.maxLength ? "var(--elmethis-accent-error)" : "gray";
+const _hf1$3 = (p0) => p0.maxLength != null ? `${p0.value.value.length} / ${p0.maxLength}` : `${p0.value.value.length}`;
+const _hf2$1 = (p0) => p0.value?.value;
+const _hf3$1 = (p0) => p0.disabled || p0.loading;
+const _hf4$1 = (p0) => ({
   cursor: p0.disabled ? "not-allowed" : p0.loading ? "progress" : "auto"
 });
-const _hf6$1 = (p0) => ({
-  opacity: p0.loading ? 0.2 : 0
+const _hf5$1 = (p0) => ({
+  opacity: p0.loading ? 1 : 0
 });
 const ElmTextField = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
@@ -6340,11 +6307,12 @@ const ElmTextField = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     class: [
       styles$9.wrapper,
       isFocused.value && styles$9.active,
-      props.class
+      props.class,
+      {
+        [styles$9.disabled]: props.disabled || props.loading
+      }
     ],
-    style: core$1._fnSignal(_hf0$7, [
-      props
-    ]),
+    style: core$1._wrapProp(props, "style"),
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), [
     /* @__PURE__ */ core$1._jsxSorted("span", {
@@ -6368,11 +6336,11 @@ const ElmTextField = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
         }, "*", 3, "3a_2")
       ], 1, null),
       props.value != null && /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, {
-        color: core$1._fnSignal(_hf1$3, [
+        color: core$1._fnSignal(_hf0$7, [
           props
         ]),
         size: "0.75rem"
-      }, core$1._fnSignal(_hf2$1, [
+      }, core$1._fnSignal(_hf1$3, [
         props
       ]), 1, "3a_3")
     ], 1, null),
@@ -6384,7 +6352,7 @@ const ElmTextField = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       }, core$1._wrapProp(props, "prefix"), 1, "3a_4"),
       /* @__PURE__ */ core$1._jsxSorted("input", {
         "aria-required": core$1._wrapProp(props, "required"),
-        disabled: core$1._fnSignal(_hf4$1, [
+        disabled: core$1._fnSignal(_hf3$1, [
           props
         ]),
         placeholder: core$1._wrapProp(props, "placeholder"),
@@ -6397,10 +6365,10 @@ const ElmTextField = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
           props
         ]),
         "q:p": isFocused,
-        style: core$1._fnSignal(_hf5$1, [
+        style: core$1._fnSignal(_hf4$1, [
           props
         ]),
-        value: core$1._fnSignal(_hf3$1, [
+        value: core$1._fnSignal(_hf2$1, [
           props
         ])
       }, {
@@ -6450,7 +6418,7 @@ const ElmTextField = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       ], 1, null)
     ], 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", {
-      style: core$1._fnSignal(_hf6$1, [
+      style: core$1._fnSignal(_hf5$1, [
         props
       ])
     }, {
@@ -6466,7 +6434,7 @@ const _hf0$6 = (p0) => ({
   "--elmethis-scoped-opacity": p0.isValid ? 1 : 0.5,
   ...p0.style
 });
-const _hf1$2 = (p0) => p0.isValid ? p0.validColor ?? "#449763" : void 0;
+const _hf1$2 = (p0) => p0.isValid ? p0.validColor ?? "var(--elmethis-accent-success)" : void 0;
 const ElmValidation = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -7031,8 +6999,8 @@ const useSessionStorage = (_rawProps) => {
     channel: `elmethis:sessionStorage:${_rawProps.key}`
   });
 };
-const wrapper$1 = "_wrapper_6ha16_19";
-const square = "_square_6ha16_28";
+const wrapper$1 = "_wrapper_1okjt_19";
+const square = "_square_1okjt_28";
 const styles$7 = {
   wrapper: wrapper$1,
   square
@@ -7068,9 +7036,9 @@ const ElmSquareLoadingIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     class: styles$7.square
   }, null, 3, `${rowIndex}-${columnIndex}`))), 0, "dY_0");
 }, "ElmSquareLoadingIcon_component_URq2y0Vp5Ws"));
-const icon = "_icon_2hapk_1";
+const icon$1 = "_icon_2hapk_1";
 const styles$6 = {
-  icon
+  icon: icon$1
 };
 const _hf0$4 = (p0) => p0.size ?? "2rem";
 const ElmToggleTheme = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -7522,12 +7490,16 @@ const ElmToggleTheme = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
     ], 3, null)
   ], 2, "7Z_1"), 1, "7Z_2");
 }, "ElmToggleTheme_component_UCPPH0ZjWO4"));
-const container$1 = "_container_1or5s_1";
-const text$2 = "_text_1or5s_34";
+const container$1 = "_container_qcstr_1";
+const icon = "_icon_qcstr_23";
+const chunk = "_chunk_qcstr_40";
+const chevron = "_chevron_qcstr_44";
 const styles$5 = {
   container: container$1,
-  "link-container": "_link-container_1or5s_9",
-  text: text$2
+  "link-container": "_link-container_qcstr_9",
+  icon,
+  chunk,
+  chevron
 };
 const ElmBreadcrumb = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
@@ -7546,35 +7518,22 @@ const ElmBreadcrumb = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     }, {
       class: styles$5["link-container"]
     }, [
-      /* @__PURE__ */ core$1._jsxSorted("span", {
-        style: {
-          "--elmethis-scoped-delay": `${index * 100}ms`
-        }
-      }, {
+      /* @__PURE__ */ core$1._jsxSorted("span", null, {
         class: styles$5.icon
       }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
         d: index === 0 ? js.mdiHome : index === _rawProps.links.length - 1 ? js.mdiApplicationOutline : js.mdiFolderOpen
       }, {
         size: "1.25em"
       }, null, 3, "wL_0"), 1, null),
-      /* @__PURE__ */ core$1._jsxSorted("span", {
-        style: {
-          "--elmethis-scoped-delay": `${index * 100 + 50}ms`
-        }
-      }, {
-        class: styles$5.text
+      /* @__PURE__ */ core$1._jsxSorted("span", null, {
+        class: styles$5.chunk
       }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(link2, "text"), 1, "wL_1"), 1, null)
     ], 0, null),
-    _rawProps.links.length !== index + 1 && /* @__PURE__ */ core$1._jsxSorted("span", {
-      style: {
-        "--elmethis-scoped-delay": `${index * 100 + 100}ms`
-      }
-    }, {
-      class: styles$5.text
+    _rawProps.links.length !== index + 1 && /* @__PURE__ */ core$1._jsxSorted("span", null, {
+      class: styles$5.chevron
     }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
       d: js.mdiChevronRight,
-      size: "1em",
-      color: "#b69545"
+      size: "1em"
     }, null, 3, "wL_2"), 1, "wL_3")
   ], 1, "wL_4")), 0, "wL_5");
 }, "ElmBreadcrumb_component_Bm4cHEZjNRM"));