@elmethis/qwik 0.0.20 → 0.0.22

package/lib/index.qwik.cjs

@@ -10,7 +10,7 @@ const marked = require("marked");
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$t = {
+const styles$u = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -70,7 +70,7 @@ const Typescript = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$s = {
+const styles$t = {
   path
 };
 const Bash = qwik.component$(({ size = 24, ...props }) => {
@@ -86,7 +86,7 @@ const Bash = qwik.component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
-        class: styles$s.path,
+        class: styles$t.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
@@ -526,13 +526,13 @@ const C = qwik.component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const icon$3 = "_icon_1gvln_1";
-const styles$r = {
-  icon: icon$3
+const icon$4 = "_icon_1gvln_1";
+const styles$s = {
+  icon: icon$4
 };
 const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    class: styles$r.icon,
+    class: styles$s.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -641,7 +641,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$q = {
+const styles$r = {
   text: text$3,
   code: code$1,
   kbd,
@@ -651,17 +651,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$2 = "_icon_19g82_1";
-const styles$p = {
-  icon: icon$2
+const icon$3 = "_icon_19g82_1";
+const styles$q = {
+  icon: icon$3
 };
 const ElmInlineIcon = qwik.component$(({ src, alt }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    class: styles$p.icon,
+    class: styles$q.icon,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       src,
       alt,
-      class: styles$p.icon
+      class: styles$q.icon
     })
   });
 });
@@ -672,7 +672,7 @@ const ElmInlineText = qwik.component$((props) => {
   }) : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("kbd", {
-      class: styles$q.kbd,
+      class: styles$r.kbd,
       children: vnode
     });
   }
@@ -698,13 +698,13 @@ const ElmInlineText = qwik.component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("code", {
-      class: styles$q.code,
+      class: styles$r.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxRuntime.jsxs("ruby", {
-      class: styles$q.text,
+      class: styles$r.text,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: vnode
@@ -717,7 +717,7 @@ const ElmInlineText = qwik.component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsxRuntime.jsx("span", {
     class: [
-      styles$q.text,
+      styles$r.text,
       textStyles.text
     ],
     style: {
@@ -729,7 +729,7 @@ const ElmInlineText = qwik.component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxRuntime.jsxs("a", {
-      class: styles$q.link,
+      class: styles$r.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -747,7 +747,7 @@ const ElmInlineText = qwik.component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$o = {
+const styles$p = {
   code
 };
 const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" }) => {
@@ -772,7 +772,7 @@ const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" })
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("pre", {
-    class: styles$o.code,
+    class: styles$p.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -791,19 +791,19 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {
-    class: styles$t["code-block"],
+    class: styles$u["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$t["language-icon"],
+        class: styles$u["language-icon"],
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$t.caption,
+        class: styles$u.caption,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -812,7 +812,7 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$t["copy-icon"],
+        class: styles$u["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -821,10 +821,10 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", {
-        class: styles$t.divider
+        class: styles$u.divider
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$t.code,
+        class: styles$u.code,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -844,7 +844,7 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$n = {
+const styles$o = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -853,13 +853,13 @@ const ElmParallax = qwik.component$(({ images }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$n["parallax-watcher"],
+        class: styles$o["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$n.parallax,
+        class: styles$o.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -873,7 +873,7 @@ const toggle = "_toggle_1nxqa_1";
 const summary = "_summary_1nxqa_14";
 const content$2 = "_content_1nxqa_60";
 const footer = "_footer_1nxqa_80";
-const styles$m = {
+const styles$n = {
   toggle,
   "toggle-closed": "_toggle-closed_1nxqa_7",
   "toggle-open": "_toggle-open_1nxqa_10",
@@ -901,29 +901,29 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: [
-      styles$m.toggle,
+      styles$n.toggle,
       {
-        [styles$m["toggle-open"]]: isOpen.value,
-        [styles$m["toggle-closed"]]: !isOpen.value
+        [styles$n["toggle-open"]]: isOpen.value,
+        [styles$n["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
         class: [
-          styles$m.summary,
+          styles$n.summary,
           {
-            [styles$m["summary-open"]]: isOpen.value,
-            [styles$m["summary-closed"]]: !isOpen.value
+            [styles$n["summary-open"]]: isOpen.value,
+            [styles$n["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$m["chevron-icon"],
+              styles$n["chevron-icon"],
               {
-                [styles$m["chevron-icon-open"]]: isOpen.value,
-                [styles$m["chevron-icon-closed"]]: !isOpen.value
+                [styles$n["chevron-icon-open"]]: isOpen.value,
+                [styles$n["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -931,17 +931,17 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["summary-text"],
+            class: styles$n["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$m["plus-icon"],
+              styles$n["plus-icon"],
               {
-                [styles$m["plus-icon-open"]]: isOpen.value,
-                [styles$m["plus-icon-closed"]]: !isOpen.value
+                [styles$n["plus-icon-open"]]: isOpen.value,
+                [styles$n["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -954,30 +954,30 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: [
-          styles$m.content,
+          styles$n.content,
           {
-            [styles$m["content-open"]]: isOpen.value,
-            [styles$m["content-closed"]]: !isOpen.value
+            [styles$n["content-open"]]: isOpen.value,
+            [styles$n["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: styles$m.footer,
+        class: styles$n.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-chevron-icon"],
+            class: styles$n["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$m["footer-line"]
+            class: styles$n["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-cross-icon"],
+            class: styles$n["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
@@ -987,17 +987,17 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-cross-icon"],
+            class: styles$n["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$m["footer-line"]
+            class: styles$n["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-chevron-icon"],
+            class: styles$n["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
@@ -1008,50 +1008,50 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$l = {
+const styles$m = {
   "block-fallback": "_block-fallback_rt986_1"
 };
-const wrapper$1 = "_wrapper_1yktj_12";
+const wrapper$2 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$k = {
-  wrapper: wrapper$1,
+const styles$l = {
+  wrapper: wrapper$2,
   dot
 };
 const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$k.wrapper,
+    class: styles$l.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$j = {
+const styles$k = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = qwik.component$(() => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     "aria-hidden": "true",
-    class: styles$j["rectangle-wave"]
+    class: styles$k["rectangle-wave"]
   });
 });
 const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$l["block-fallback"],
+    class: styles$m["block-fallback"],
     style: {
       "--height": height
     },
@@ -1061,6 +1061,153 @@ const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
     ]
   });
 });
+const loading = "_loading_1yj0v_19";
+const wrapper$1 = "_wrapper_1yj0v_33";
+const active = "_active_1yj0v_55";
+const header$1 = "_header_1yj0v_59";
+const label = "_label_1yj0v_67";
+const requierd = "_requierd_1yj0v_82";
+const body$1 = "_body_1yj0v_88";
+const input = "_input_1yj0v_109";
+const icon$2 = "_icon_1yj0v_136";
+const suffix = "_suffix_1yj0v_153";
+const styles$j = {
+  loading,
+  wrapper: wrapper$1,
+  active,
+  header: header$1,
+  label,
+  requierd,
+  body: body$1,
+  input,
+  "icon-box": "_icon-box_1yj0v_136",
+  icon: icon$2,
+  suffix
+};
+const ElmTextField = qwik.component$((props) => {
+  const id = qwik.useId();
+  const isFocused = qwik.useSignal(false);
+  const inputType = qwik.useSignal(props.isPassword ? "password" : "text");
+  const internalValue = qwik.useSignal("");
+  const input2 = props.value ?? internalValue;
+  const handleDelete = qwik.$(() => {
+    if (!props.loading && !props.disabled) {
+      input2.value = "";
+    }
+  });
+  const handleVisibleSwitch = qwik.$(() => {
+    if (!props.loading && !props.disabled) {
+      inputType.value = inputType.value === "text" ? "password" : "text";
+    }
+  });
+  const iconMap = {
+    text: js.mdiText,
+    pen: js.mdiPen,
+    email: js.mdiEmail,
+    user: js.mdiAccount,
+    lock: js.mdiLock,
+    key: js.mdiKey,
+    earth: js.mdiEarth,
+    tag: js.mdiTag,
+    archive: js.mdiArchive,
+    link: js.mdiLinkVariant,
+    search: js.mdiMagnify
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: [
+      styles$j.wrapper,
+      isFocused.value && styles$j.active
+    ],
+    style: {
+      backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
+      "--highlight-color": isFocused.value ? "#bfa056" : void 0
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: styles$j.header,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", {
+            for: id,
+            class: styles$j.label,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                children: props.label
+              }),
+              props.required && /* @__PURE__ */ jsxRuntime.jsx("span", {
+                class: styles$j.requierd,
+                children: "*"
+              })
+            ]
+          }),
+          props.maxLength != null && /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+            text: `${input2.value.length} / ${props.maxLength}`,
+            color: input2.value.length > props.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: styles$j.body,
+        children: [
+          props.icon && /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
+            d: iconMap[props.icon],
+            size: "1.5rem",
+            color: "gray"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", {
+            id,
+            "bind:value": input2,
+            type: inputType.value,
+            class: styles$j.input,
+            placeholder: props.placeholder,
+            onFocus$: () => isFocused.value = true,
+            onBlur$: () => isFocused.value = false,
+            disabled: props.disabled || props.loading,
+            style: {
+              cursor: props.disabled ? "not-allowed" : props.loading ? "progress" : "auto"
+            },
+            "aria-required": props.required
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: styles$j["icon-box"],
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                class: styles$j.suffix,
+                children: props.suffix != null && /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+                  text: props.suffix
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: styles$j.icon,
+                onClick$: handleVisibleSwitch,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
+                  d: inputType.value === "text" ? js.mdiEyeOutline : js.mdiEyeOffOutline,
+                  size: "1.75em",
+                  color: "gray"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: styles$j.icon,
+                onClick$: handleDelete,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
+                  d: js.mdiBackspaceOutline,
+                  size: "1.75em",
+                  color: "gray"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: styles$j.loading,
+        style: {
+          opacity: props.loading ? 0.2 : 0
+        }
+      })
+    ]
+  });
+});
 const LOCAL_STORAGE_KEY = "elmethis-theme";
 function useElmethisTheme() {
   const isDarkTheme = qwik.useSignal(false);
@@ -1085,13 +1232,18 @@ function useElmethisTheme() {
     }
   }));
   qwik.useVisibleTask$(() => {
-    const currentTheme = document.documentElement.getAttribute("data-theme");
-    if (currentTheme != null) {
-      isDarkTheme.value = currentTheme === "dark";
+    const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (localStorageTheme != null) {
+      isDarkTheme.value = localStorageTheme === "dark";
+      document.documentElement.setAttribute("data-theme", localStorageTheme);
+      const body2 = document.querySelector("body");
+      if (body2 != null) {
+        body2.style.colorScheme = localStorageTheme;
+      }
     } else {
-      const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
-      if (localStorageTheme != null) {
-        isDarkTheme.value = localStorageTheme === "dark";
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      if (currentTheme != null) {
+        isDarkTheme.value = currentTheme === "dark";
       }
     }
   }, {
@@ -2634,5 +2786,6 @@ exports.ElmTableBody = ElmTableBody;
 exports.ElmTableCell = ElmTableCell;
 exports.ElmTableHeader = ElmTableHeader;
 exports.ElmTableRow = ElmTableRow;
+exports.ElmTextField = ElmTextField;
 exports.ElmToggle = ElmToggle;
 exports.ElmToggleTheme = ElmToggleTheme;