@elmethis/core 0.4.7 → 0.5.1

package/dist/components/others/ElmMarkdown.vue.mjs

@@ -0,0 +1,296 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-fd68c0a3],.v-leave-from[data-v-fd68c0a3]{opacity:1}.v-enter-active[data-v-fd68c0a3],.v-leave-active[data-v-fd68c0a3]{transition:opacity .15s}.v-enter-from[data-v-fd68c0a3],.v-leave-to[data-v-fd68c0a3]{opacity:0}\n.v-enter-to[data-v-d15a5efe],.v-leave-from[data-v-d15a5efe]{opacity:1}.v-enter-active[data-v-d15a5efe],.v-leave-active[data-v-d15a5efe]{transition:opacity .1s}.v-enter-from[data-v-d15a5efe],.v-leave-to[data-v-d15a5efe]{opacity:0}\n.fade-enter-active[data-v-12f55baa],.fade-leave-active[data-v-12f55baa]{transition:all .3s ease}.fade-enter-from[data-v-12f55baa],.fade-leave-to[data-v-12f55baa]{opacity:0;transform:translate(30px)}\n.v-enter-to[data-v-84bc9c5d],.v-leave-from[data-v-84bc9c5d]{opacity:1}.v-enter-active[data-v-84bc9c5d],.v-leave-active[data-v-84bc9c5d]{transition:opacity .15s}.v-enter-from[data-v-84bc9c5d],.v-leave-to[data-v-84bc9c5d]{opacity:0}\n.v-enter-to[data-v-4e995755],.v-leave-from[data-v-4e995755]{opacity:1}.v-enter-active[data-v-4e995755],.v-leave-active[data-v-4e995755]{transition:opacity .3s}.v-enter-from[data-v-4e995755],.v-leave-to[data-v-4e995755]{opacity:0}\n.elmethis-list-common{margin-block:1rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;padding-left:1.25rem}.elmethis-bulleted-list li{box-sizing:border-box;padding-left:.5rem;margin-block:.75rem}.elmethis-bulleted-list li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+)}.elmethis-numbered-list li{box-sizing:border-box;padding-left:.25rem;margin-block:.75rem;margin-left:.25rem;list-style-type:decimal}.elmethis-numbered-list li::marker{font-weight:700;color:#9771bd}.elmethis-numbered-list li ol li{list-style-type:lower-alpha}.elmethis-numbered-list li ol li ol li{list-style-type:lower-roman}.elmethis-numbered-list li ol li ol li ol li{list-style-type:lower-greek}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import { defineComponent, defineAsyncComponent, createElementBlock, openBlock, createBlock, resolveDynamicComponent, h } from "vue";
+import { marked as d } from "../../node_modules/.pnpm/marked@16.2.0/node_modules/marked/lib/marked.esm.mjs";
+import "@mdi/js";
+import "polished";
+import "@vueuse/core";
+import ElmBlockFallback from "../fallback/ElmBlockFallback.vue.mjs";
+
+
+import "lodash-es";
+
+
+import "nanoid";
+
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmMarkdown",
+  props: {
+    markdown: {}
+  },
+  setup(__props) {
+    const AsyncElmInlineText = defineAsyncComponent({
+      loader: () => import("../typography/ElmInlineText.vue.mjs")
+    });
+    const AsyncElmHeading = defineAsyncComponent({
+      loader: () => import("../typography/ElmHeading.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmParagraph = defineAsyncComponent({
+      loader: () => import("../typography/ElmParagraph.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmList = defineAsyncComponent({
+      loader: () => import("../typography/ElmList.vue3.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmBlockQuote = defineAsyncComponent({
+      loader: () => import("../typography/ElmBlockQuote.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmDivider = defineAsyncComponent({
+      loader: () => import("../typography/ElmDivider.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmImage = defineAsyncComponent({
+      loader: () => import("../media/ElmImage.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmCodeBlock = defineAsyncComponent({
+      loader: () => import("../code/ElmCodeBlock.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmTable = defineAsyncComponent({
+      loader: () => import("../table/ElmTable.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmTableHeader = defineAsyncComponent({
+      loader: () => import("../table/ElmTableHeader.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmTableBody = defineAsyncComponent({
+      loader: () => import("../table/ElmTableBody.vue2.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmTableRow = defineAsyncComponent({
+      loader: () => import("../table/ElmTableRow.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const AsyncElmTableCell = defineAsyncComponent({
+      loader: () => import("../table/ElmTableCell.vue.mjs"),
+      loadingComponent: ElmBlockFallback
+    });
+    const renderByToken = ({ tokens }) => {
+      const results = [];
+      for (const token of tokens) {
+        switch (token.type) {
+          case "blockquote":
+            if (token.tokens != null && token.tokens.length !== 0) {
+              results.push(
+                h(
+                  AsyncElmBlockQuote,
+                  {},
+                  {
+                    default: () => renderByToken({ tokens: token.tokens })
+                  }
+                )
+              );
+            }
+            break;
+          case "br":
+            results.push(h("br"));
+            break;
+          case "code":
+            results.push(
+              h(AsyncElmCodeBlock, {
+                code: token.text.trim(),
+                language: token.lang
+              })
+            );
+            break;
+          case "codespan":
+            results.push(h(AsyncElmInlineText, { text: token.text, code: true }));
+            break;
+          case "def":
+            h("span", "aaa");
+            break;
+          case "del":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                AsyncElmInlineText,
+                { strikethrough: true },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(AsyncElmInlineText, { text: token.text, strikethrough: true })
+            );
+            break;
+          case "em":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                AsyncElmInlineText,
+                { italic: true },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(AsyncElmInlineText, { text: token.text, italic: true })
+            );
+            break;
+          case "escape":
+            break;
+          case "heading":
+            if (token.tokens && token.tokens.length !== 0) {
+              results.push(
+                h(
+                  AsyncElmHeading,
+                  { level: token.depth },
+                  {
+                    default: () => renderByToken({ tokens: token.tokens })
+                  }
+                )
+              );
+            } else {
+              results.push(
+                h(AsyncElmHeading, { level: token.depth, text: token.text })
+              );
+            }
+            break;
+          case "hr":
+            results.push(h(AsyncElmDivider));
+            break;
+          case "html":
+            break;
+          case "image":
+            results.push(
+              h(AsyncElmImage, {
+                block: true,
+                enableModal: true,
+                src: token.href,
+                alt: token.text
+              })
+            );
+            break;
+          case "link":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                AsyncElmInlineText,
+                { href: token.href },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(AsyncElmInlineText, { text: token.text, href: token.href })
+            );
+            break;
+          case "list":
+            const listItems = token.items.map(
+              (item) => h("li", {}, renderByToken({ tokens: item.tokens }))
+            );
+            results.push(
+              h(
+                AsyncElmList,
+                {
+                  listStyle: token.ordered ? "ordered" : "unordered"
+                },
+                { default: () => listItems }
+              )
+            );
+            break;
+          case "list_item":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                "li",
+                {},
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h("li", { text: token.text })
+            );
+            break;
+          case "paragraph":
+            if (token.tokens && token.tokens.length !== 0) {
+              results.push(
+                h(
+                  AsyncElmParagraph,
+                  {},
+                  {
+                    default: () => renderByToken({ tokens: token.tokens })
+                  }
+                )
+              );
+            }
+            break;
+          case "space":
+            break;
+          case "strong":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                AsyncElmInlineText,
+                { bold: true },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(AsyncElmInlineText, { text: token.text, bold: true })
+            );
+            break;
+          case "table":
+            const renderTableCells = ({
+              cells
+            }) => cells.map(
+              (cell) => h(
+                AsyncElmTableCell,
+                {},
+                { default: () => renderByToken({ tokens: cell.tokens }) }
+              )
+            );
+            const headerRow = h(
+              AsyncElmTableRow,
+              {},
+              { default: () => renderTableCells({ cells: token.header }) }
+            );
+            const bodyRows = token.rows.map(
+              (row) => h(
+                AsyncElmTableRow,
+                {},
+                { default: () => renderTableCells({ cells: row }) }
+              )
+            );
+            const table = h(
+              AsyncElmTable,
+              {},
+              {
+                header: () => h(AsyncElmTableHeader, {}, { default: () => headerRow }),
+                body: () => h(AsyncElmTableBody, {}, { default: () => bodyRows })
+              }
+            );
+            results.push(table);
+            break;
+          case "text":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                AsyncElmInlineText,
+                {},
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(AsyncElmInlineText, { text: token.text })
+            );
+            break;
+        }
+      }
+      return results;
+    };
+    const render = ({ markdown }) => {
+      const tokens = d.setOptions({ gfm: true }).lexer(markdown);
+      return renderByToken({ tokens });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(), createBlock(resolveDynamicComponent(() => render({ markdown: _ctx.markdown }))))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/others/ElmMarkdown.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./ElmMarkdown.vue.mjs";
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmInlineText.vue.d.ts

@@ -1,9 +1,10 @@
 import { Property } from 'csstype';
+import { VNodeChild } from 'vue';
 export interface ElmInlineTextProps {
     /**
      * The text to display.
      */
-    text: string;
+    text?: string;
     /**
      * Specifies the color of the text.
      *
@@ -56,7 +57,18 @@ export interface ElmInlineTextProps {
         image?: string;
     };
 }
-declare const _default: import('vue').DefineComponent<ElmInlineTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmInlineTextProps> & Readonly<{}>, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => VNodeChild;
+    }> & {
+        default?: () => VNodeChild;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ElmInlineTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmInlineTextProps> & Readonly<{}>, {
     size: Property.FontSize;
     code: boolean;
     bold: boolean;
@@ -64,4 +76,10 @@ declare const _default: import('vue').DefineComponent<ElmInlineTextProps, {}, {}
     underline: boolean;
     strikethrough: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/typography/ElmInlineText.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, useCssModule, resolveComponent, createBlock, openBlock, withCtx, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, unref, toDisplayString, resolveDynamicComponent, h } from "vue";
+import { defineComponent, useCssModule, useSlots, resolveComponent, createBlock, openBlock, withCtx, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, unref, toDisplayString, resolveDynamicComponent, h } from "vue";
 import { getLuminance } from "polished";
 import ElmInlineIcon from "../icon/ElmInlineIcon.vue.mjs";
 import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
@@ -27,12 +27,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const style = useCssModule();
+    const slots = useSlots();
     const renderLink = () => {
       const children = [];
       if (props.favicon) {
         children.push(h(ElmInlineIcon, { src: props.favicon, alt: "favicon" }));
       }
-      children.push(h("span", {}, props.text ?? props.href));
+      if (slots.default) {
+        children.push(h(slots.default));
+      } else {
+        children.push(h("span", {}, props.text ?? props.href));
+      }
       children.push(
         h(ElmMdiIcon, {
           d: mdiOpenInNew,
@@ -55,7 +60,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const render = () => {
       const backgroundColor = props.backgroundColor != null ? getLuminance(props.backgroundColor) < 0.5 ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)" : void 0;
-      let vnode = h(
+      let vnode = slots.default ? h(
+        "span",
+        {
+          class: [style.text, textStyle.text],
+          style: {
+            "--color": props.color ?? backgroundColor,
+            "--font-size": props.size,
+            "--background-color": props.backgroundColor
+          }
+        },
+        { default: slots.default }
+      ) : h(
         "span",
         {
           class: [style.text, textStyle.text],

package/dist/index.d.ts

@@ -80,6 +80,8 @@ export type { ElmColorTableProps } from './components/others/ElmColorTable.vue';
 export { default as ElmColorTable } from './components/others/ElmColorTable.vue';
 export type { ElmJsonComponentRendererProps } from './components/others/ElmJsonComponentRenderer.vue';
 export { default as ElmJsonComponentRenderer } from './components/others/ElmJsonComponentRenderer.vue';
+export type { ElmMarkdownProps } from './components/others/ElmMarkdown.vue';
+export { default as ElmMarkdown } from './components/others/ElmMarkdown.vue';
 export type { ElmTableProps } from './components/table/ElmTable.vue';
 export { default as ElmTable } from './components/table/ElmTable.vue';
 export type { ElmTableHeaderProps } from './components/table/ElmTableHeader.vue';

package/dist/index.mjs

@@ -51,31 +51,32 @@ import { default as default39 } from "./components/navigation/ElmTableOfContents
 import { default as default40 } from "./components/others/ElmColorSample.vue.mjs";
 import { default as default41 } from "./components/others/ElmColorTable.vue.mjs";
 import { default as default42 } from "./components/others/ElmJsonComponentRenderer.vue.mjs";
-import { default as default43 } from "./components/table/ElmTable.vue.mjs";
-import { default as default44 } from "./components/table/ElmTableHeader.vue.mjs";
-import { default as default45 } from "./components/table/ElmTableBody.vue.mjs";
-import { default as default46 } from "./components/table/ElmTableRow.vue.mjs";
-import { default as default47 } from "./components/table/ElmTableCell.vue.mjs";
-import { default as default48 } from "./components/typography/ElmBlockQuote.vue.mjs";
-import { default as default49 } from "./components/typography/ElmCallout.vue.mjs";
-import { default as default50 } from "./components/typography/ElmDivider.vue.mjs";
-import { default as default51 } from "./components/typography/ElmFragmentIdentifier.vue.mjs";
-import { default as default52 } from "./components/typography/ElmHeading.vue.mjs";
-import { default as default53 } from "./components/typography/ElmInlineText.vue.mjs";
-import { default as default54 } from "./components/typography/ElmParagraph.vue.mjs";
-import { default as default55 } from "./components/typography/ElmList.vue.mjs";
+import { default as default43 } from "./components/others/ElmMarkdown.vue.mjs";
+import { default as default44 } from "./components/table/ElmTable.vue.mjs";
+import { default as default45 } from "./components/table/ElmTableHeader.vue.mjs";
+import { default as default46 } from "./components/table/ElmTableBody.vue.mjs";
+import { default as default47 } from "./components/table/ElmTableRow.vue.mjs";
+import { default as default48 } from "./components/table/ElmTableCell.vue.mjs";
+import { default as default49 } from "./components/typography/ElmBlockQuote.vue.mjs";
+import { default as default50 } from "./components/typography/ElmCallout.vue.mjs";
+import { default as default51 } from "./components/typography/ElmDivider.vue.mjs";
+import { default as default52 } from "./components/typography/ElmFragmentIdentifier.vue.mjs";
+import { default as default53 } from "./components/typography/ElmHeading.vue.mjs";
+import { default as default54 } from "./components/typography/ElmInlineText.vue.mjs";
+import { default as default55 } from "./components/typography/ElmParagraph.vue.mjs";
+import { default as default56 } from "./components/typography/ElmList.vue.mjs";
 
 import { useElmethisTheme } from "./hooks/useElmethisTheme.mjs";
 import { useTyping } from "./hooks/useTyping.mjs";
 export {
   default26 as ElmArrowIcon,
   default17 as ElmBlockFallback,
-  default48 as ElmBlockQuote,
+  default49 as ElmBlockQuote,
   default36 as ElmBookmark,
   default27 as ElmBookmarkIcon,
   default37 as ElmBreadcrumb,
   default20 as ElmButton,
-  default49 as ElmCallout,
+  default50 as ElmCallout,
   default21 as ElmCheckbox,
   default2 as ElmCodeBlock,
   default40 as ElmColorSample,
@@ -83,23 +84,24 @@ export {
   default5 as ElmConfirmModal,
   default28 as ElmCubeIcon,
   default4 as ElmDesktopWindow,
-  default50 as ElmDivider,
+  default51 as ElmDivider,
   default29 as ElmDotLoadingIcon,
   default34 as ElmFile,
-  default51 as ElmFragmentIdentifier,
-  default52 as ElmHeading,
+  default52 as ElmFragmentIdentifier,
+  default53 as ElmHeading,
   default35 as ElmImage,
-  default53 as ElmInlineText,
+  default54 as ElmInlineText,
   default42 as ElmJsonComponentRenderer,
   default3 as ElmKatex,
   default30 as ElmLanguageIcon,
-  default55 as ElmList,
+  default56 as ElmList,
   default31 as ElmLoginIcon,
+  default43 as ElmMarkdown,
   default32 as ElmMdiIcon,
   default6 as ElmModal,
   default14 as ElmMultiProgress,
   default38 as ElmPagetop,
-  default54 as ElmParagraph,
+  default55 as ElmParagraph,
   default7 as ElmParallax,
   default13 as ElmProgress,
   default16 as ElmRectangleWave,
@@ -110,12 +112,12 @@ export {
   default18 as ElmSpinner,
   default15 as ElmStatusMessage,
   default23 as ElmSwitch,
-  default43 as ElmTable,
-  default45 as ElmTableBody,
-  default47 as ElmTableCell,
-  default44 as ElmTableHeader,
+  default44 as ElmTable,
+  default46 as ElmTableBody,
+  default48 as ElmTableCell,
+  default45 as ElmTableHeader,
   default39 as ElmTableOfContents,
-  default46 as ElmTableRow,
+  default47 as ElmTableRow,
   default24 as ElmTextField,
   default11 as ElmToggle,
   default33 as ElmToggleTheme,