@elmethis/core 1.0.0-alpha.18 → 1.0.0-alpha.181

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

@@ -0,0 +1,72 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, createVNode, withCtx, createElementVNode, unref, normalizeClass, toDisplayString, Transition, createBlock, createCommentVNode } from "vue";
+import { parseToRgb, parseToHsl, rgbToColorString } from "polished";
+import ElmTooltip from "../containments/ElmTooltip.vue.mjs";
+import { useClipboard } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmColorSample",
+  props: {
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { blue, green, red } = parseToRgb(props.color);
+    const { hue, saturation, lightness } = parseToHsl(props.color);
+    const hex = rgbToColorString(parseToRgb(props.color));
+    const rgb = `rgb(${red}, ${green}, ${blue})`;
+    const hsl = `hsl(${Math.floor(hue)}, ${Math.floor(saturation * 100)}%, ${Math.floor(lightness * 100)}%)`;
+    const { copy, copied } = useClipboard();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ "--color": _ctx.color })
+      }, [
+        createVNode(ElmTooltip, null, {
+          original: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["color-bg"]),
+              style: normalizeStyle({
+                "--background-color": _ctx.color
+              }),
+              onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(unref(hex)))
+            }, [
+              createVNode(Transition, null, {
+                default: withCtx(() => [
+                  unref(copied) ? (openBlock(), createBlock(unref(Icon), {
+                    key: 0,
+                    icon: "heroicons:check",
+                    style: { color: "white" },
+                    width: "16",
+                    height: "16"
+                  })) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ], 6),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[1] || (_cache[1] = ($event) => unref(copy)(unref(hex)))
+            }, toDisplayString(unref(hex)), 3)
+          ]),
+          tooltip: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[2] || (_cache[2] = ($event) => unref(copy)(unref(hex)))
+            }, toDisplayString(unref(hex)), 3),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[3] || (_cache[3] = ($event) => unref(copy)(rgb))
+            }, toDisplayString(rgb), 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[4] || (_cache[4] = ($event) => unref(copy)(hsl))
+            }, toDisplayString(hsl), 2)
+          ]),
+          _: 1
+        })
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/others/ElmColorSample.vue3.mjs

@@ -0,0 +1,21 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._color-bg_819fg_1{width:5rem;height:2rem;border-radius:.25rem;background-color:var(--background-color);cursor:pointer;transition:opacity .1s}._color-bg_819fg_1:active{opacity:.5}._text_819fg_13{margin-block:.125rem;padding:.125rem;border-radius:.125rem;transition:color .1s,background-color .1s,opacity .1s;color:var(--color);cursor:pointer}._text_819fg_13:hover{color:#fff;background-color:var(--color)}._text_819fg_13:active{opacity:.5}._text_819fg_13::-moz-selection{color:#fff;background-color:var(--color)}._text_819fg_13::selection{color:#fff;background-color:var(--color)}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_819fg_13";
+const style0 = {
+  "color-bg": "_color-bg_819fg_1",
+  text
+};
+export {
+  style0 as default,
+  text
+};

package/dist/components/others/ElmColorTable.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmColorTable } from './ElmColorTable.vue';
+declare const meta: Meta<typeof ElmColorTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/others/ElmColorTable.vue.d.ts

@@ -0,0 +1,11 @@
+export interface ElmColorTableProps {
+    /**
+     * The colors to display.
+     */
+    colors: {
+        name: string;
+        code: string;
+    }[];
+}
+declare const _default: import('vue').DefineComponent<ElmColorTableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmColorTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmColorTable.vue2.mjs";
+import style0 from "./ElmColorTable.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmColorTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmColorTable as default
+};

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

@@ -0,0 +1,45 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, normalizeStyle, toDisplayString, createVNode, unref } from "vue";
+import { darken } from "polished";
+import ElmColorSample from "./ElmColorSample.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmColorTable",
+  props: {
+    colors: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.colors, (color) => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(_ctx.$style["row-container"])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["color-name"]),
+              style: normalizeStyle({ "--color": color.code })
+            }, toDisplayString(color.name), 7),
+            (openBlock(), createElementBlock(Fragment, null, renderList([
+              -0.2,
+              -0.15,
+              -0.1,
+              -0.05,
+              0,
+              0.05,
+              0.1,
+              0.15,
+              0.2
+            ], (darkness) => {
+              return createVNode(ElmColorSample, {
+                color: unref(darken)(darkness, color.code)
+              }, null, 8, ["color"]);
+            }), 64))
+          ], 2);
+        }), 256))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/others/ElmColorTable.vue3.mjs

@@ -0,0 +1,22 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._container_2ivef_1{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.25rem}._container_2ivef_1 ._row-container_2ivef_8{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:row;gap:.25rem}._container_2ivef_1 ._row-container_2ivef_8 ._color-name_2ivef_15{width:6rem;color:var(--color)}._container_2ivef_1 ._row-container_2ivef_8 ._color-name_2ivef_15::-moz-selection{background-color:var(--color);color:#fff}._container_2ivef_1 ._row-container_2ivef_8 ._color-name_2ivef_15::selection{background-color:var(--color);color:#fff}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const container = "_container_2ivef_1";
+const style0 = {
+  container,
+  "row-container": "_row-container_2ivef_8",
+  "color-name": "_color-name_2ivef_15"
+};
+export {
+  container,
+  style0 as default
+};

package/dist/components/others/ElmTemplate.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmTyping } from './ElmTyping.vue';
+declare const meta: Meta<typeof ElmTyping>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/others/ElmTyping.vue.d.ts

@@ -0,0 +1,4 @@
+export interface ElmTypingProps {
+}
+declare const _default: import('vue').DefineComponent<ElmTypingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTypingProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/renderer/ElmJsonRenderer.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ElmJsonRenderer>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const InlineIcon: Story;
 export declare const Callout: Story;
 export declare const BulletedList: Story;
 export declare const NumberedList: Story;

package/dist/components/renderer/ElmJsonRenderer.vue.d.ts

@@ -1,6 +1,6 @@
 import { ElmInlineTextProps } from '../inline/ElmInlineText.vue';
-import { ElmInlineCodeProps } from '../inline/ElmInlineCode.vue';
 import { ElmInlineLinkProps } from '../inline/ElmInlineLink.vue';
+import { ElmInlineIconProps } from '../inline/ElmInlineIcon.vue';
 import { ElmCalloutProps } from '../typography/ElmCallout.vue';
 import { ElmBulletedListProps } from '../typography/ElmBulletedList.vue';
 import { ElmNumberedListProps } from '../typography/ElmNumberedList.vue';
@@ -22,140 +22,177 @@ import { ElmTableRowProps } from '../table/ElmTableRow.vue';
 import { ElmTableCellProps } from '../table/ElmTableCell.vue';
 import { ElmKatexProps } from '../code/ElmKatex.vue';
 import { ElmImageProps } from '../media/ElmImage.vue';
+import { ElmBlockImageProps } from '../media/ElmBlockImage.vue';
 import { ElmBookmarkProps } from '../navigation/ElmBookmark.vue';
 import { ElmToggleProps } from '../containments/ElmToggle.vue';
 import { ElmCheckboxProps } from '../form/ElmCheckbox.vue';
 import { ElmFileProps } from '../media/ElmFile.vue';
 import { ElmColumnProps } from '../containments/ElmColumn.vue';
 import { ElmColumnListProps } from '../containments/ElmColumnList.vue';
-type ComponentType = 'ElmInlineText' | 'ElmInlineCode' | 'ElmInlineLink' | 'ElmCallout' | 'ElmBulletedList' | 'ElmNumberedList' | 'ElmListItem' | 'ElmBlockQuote' | 'ElmDivider' | 'ElmHeading1' | 'ElmHeading2' | 'ElmHeading3' | 'ElmHeading4' | 'ElmHeading5' | 'ElmHeading6' | 'ElmCodeBlock' | 'ElmParagraph' | 'ElmTable' | 'ElmTableHeader' | 'ElmTableBody' | 'ElmTableRow' | 'ElmTableCell' | 'ElmKatex' | 'ElmImage' | 'ElmBookmark' | 'ElmToggle' | 'ElmCheckbox' | 'ElmFile' | 'ElmColumn' | 'ElmColumnList';
-type ComponentProps = ElmInlineTextProps | ElmInlineCodeProps | ElmInlineLinkProps | ElmCalloutProps | ElmBulletedListProps | ElmNumberedListProps | ElmListItemProps | ElmBlockQuoteProps | ElmDividerProps | ElmHeading1Props | ElmHeading2Props | ElmHeading3Props | ElmHeading4Props | ElmHeading5Props | ElmHeading6Props | ElmCodeBlockProps | ElmParagraphProps | ElmTableProps | ElmTableHeaderProps | ElmTableBodyProps | ElmTableRowProps | ElmTableCellProps | ElmKatexProps | ElmImageProps | ElmBookmarkProps | ElmToggleProps | ElmCheckboxProps | ElmFileProps | ElmColumnProps | ElmColumnListProps;
+type ComponentType = 'ElmInlineText' | 'ElmInlineLink' | 'ElmInlineIcon' | 'ElmCallout' | 'ElmBulletedList' | 'ElmNumberedList' | 'ElmListItem' | 'ElmBlockQuote' | 'ElmDivider' | 'ElmHeading1' | 'ElmHeading2' | 'ElmHeading3' | 'ElmHeading4' | 'ElmHeading5' | 'ElmHeading6' | 'ElmCodeBlock' | 'ElmParagraph' | 'ElmTable' | 'ElmTableHeader' | 'ElmTableBody' | 'ElmTableRow' | 'ElmTableCell' | 'ElmKatex' | 'ElmImage' | 'ElmBlockImage' | 'ElmBookmark' | 'ElmToggle' | 'ElmCheckbox' | 'ElmFile' | 'ElmColumn' | 'ElmColumnList';
+type ComponentProps = ElmInlineTextProps | ElmInlineLinkProps | ElmInlineIconProps | ElmCalloutProps | ElmBulletedListProps | ElmNumberedListProps | ElmListItemProps | ElmBlockQuoteProps | ElmDividerProps | ElmHeading1Props | ElmHeading2Props | ElmHeading3Props | ElmHeading4Props | ElmHeading5Props | ElmHeading6Props | ElmCodeBlockProps | ElmParagraphProps | ElmTableProps | ElmTableHeaderProps | ElmTableBodyProps | ElmTableRowProps | ElmTableCellProps | ElmKatexProps | ElmImageProps | ElmBlockImageProps | ElmBookmarkProps | ElmToggleProps | ElmCheckboxProps | ElmFileProps | ElmColumnProps | ElmColumnListProps;
 interface JsonComponentBase {
     type: ComponentType;
+    id?: string;
     props?: ComponentProps;
     children?: JsonComponent[];
 }
 interface ElmInlineTextJsonComponent extends JsonComponentBase {
     type: 'ElmInlineText';
+    id?: string;
     props?: ElmInlineTextProps;
 }
-interface ElmInlineCodeJsonComponent extends JsonComponentBase {
-    type: 'ElmInlineCode';
-    props?: ElmInlineCodeProps;
-}
 interface ElmInlineLinkJsonComponent extends JsonComponentBase {
     type: 'ElmInlineLink';
+    id?: string;
     props?: ElmInlineLinkProps;
 }
+interface ElmInlineIconJsonComponent extends JsonComponentBase {
+    type: 'ElmInlineIcon';
+    id?: string;
+    props?: ElmInlineIconProps;
+}
 interface ElmCalloutJsonComponent extends JsonComponentBase {
     type: 'ElmCallout';
+    id?: string;
     props?: ElmCalloutProps;
 }
 interface ElmBulletedListJsonComponent extends JsonComponentBase {
     type: 'ElmBulletedList';
+    id?: string;
     props?: ElmBulletedListProps;
 }
 interface ElmNumberedListJsonComponent extends JsonComponentBase {
     type: 'ElmNumberedList';
+    id?: string;
     props?: ElmNumberedListProps;
 }
 interface ElmListItemJsonComponent extends JsonComponentBase {
     type: 'ElmListItem';
+    id?: string;
     props?: ElmListItemProps;
 }
 interface ElmBlockQuoteJsonComponent extends JsonComponentBase {
     type: 'ElmBlockQuote';
+    id?: string;
     props?: ElmBlockQuoteProps;
 }
 interface ElmDividerJsonComponent extends JsonComponentBase {
     type: 'ElmDivider';
+    id?: string;
     props?: ElmDividerProps;
 }
 interface ElmHeading1JsonComponent extends JsonComponentBase {
     type: 'ElmHeading1';
+    id?: string;
     props?: ElmHeading1Props;
 }
 interface ElmHeading2JsonComponent extends JsonComponentBase {
     type: 'ElmHeading2';
+    id?: string;
     props?: ElmHeading2Props;
 }
 interface ElmHeading3JsonComponent extends JsonComponentBase {
     type: 'ElmHeading3';
+    id?: string;
     props?: ElmHeading3Props;
 }
 interface ElmHeading4JsonComponent extends JsonComponentBase {
     type: 'ElmHeading4';
+    id?: string;
     props?: ElmHeading4Props;
 }
 interface ElmHeading5JsonComponent extends JsonComponentBase {
     type: 'ElmHeading5';
+    id?: string;
     props?: ElmHeading5Props;
 }
 interface ElmHeading6JsonComponent extends JsonComponentBase {
     type: 'ElmHeading6';
+    id?: string;
     props?: ElmHeading6Props;
 }
 interface ElmCodeBlockJsonComponent extends JsonComponentBase {
     type: 'ElmCodeBlock';
+    id?: string;
     props?: ElmCodeBlockProps;
 }
 interface ElmParagraphJsonComponent extends JsonComponentBase {
     type: 'ElmParagraph';
+    id?: string;
     props?: ElmParagraphProps;
 }
 interface ElmTableJsonComponent extends JsonComponentBase {
     type: 'ElmTable';
+    id?: string;
     props?: ElmTableProps;
 }
 interface ElmTableHeaderJsonComponent extends JsonComponentBase {
     type: 'ElmTableHeader';
+    id?: string;
     props?: ElmTableHeaderProps;
 }
 interface ElmTableBodyJsonComponent extends JsonComponentBase {
     type: 'ElmTableBody';
+    id?: string;
     props?: ElmTableBodyProps;
 }
 interface ElmTableRowJsonComponent extends JsonComponentBase {
     type: 'ElmTableRow';
+    id?: string;
     props?: ElmTableRowProps;
 }
 interface ElmTableCellJsonComponent extends JsonComponentBase {
     type: 'ElmTableCell';
+    id?: string;
     props?: ElmTableCellProps;
 }
 interface ElmKatexJsonComponent extends JsonComponentBase {
     type: 'ElmKatex';
+    id?: string;
     props?: ElmKatexProps;
 }
 interface ElmImageJsonComponent extends JsonComponentBase {
     type: 'ElmImage';
+    id?: string;
     props?: ElmImageProps;
 }
+interface ElmBlockImageJsonComponent extends JsonComponentBase {
+    type: 'ElmBlockImage';
+    id?: string;
+    props?: ElmBlockImageProps;
+}
 interface ElmBookmarkJsonComponent extends JsonComponentBase {
     type: 'ElmBookmark';
+    id?: string;
     props?: ElmBookmarkProps;
 }
 interface ElmToggleJsonComponent extends JsonComponentBase {
     type: 'ElmToggle';
+    id?: string;
     props?: ElmToggleProps;
 }
 interface ElmCheckboxJsonComponent extends JsonComponentBase {
     type: 'ElmCheckbox';
+    id?: string;
     props?: ElmCheckboxProps;
 }
 interface ElmFileJsonComponent extends JsonComponentBase {
     type: 'ElmFile';
+    id?: string;
     props?: ElmFileProps;
 }
 interface ElmColumnJsonComponent extends JsonComponentBase {
     type: 'ElmColumn';
+    id?: string;
     props?: ElmColumnProps;
 }
 interface ElmColumnListJsonComponent extends JsonComponentBase {
     type: 'ElmColumnList';
+    id?: string;
     props?: ElmColumnListProps;
 }
-type JsonComponent = ElmInlineTextJsonComponent | ElmInlineCodeJsonComponent | ElmInlineLinkJsonComponent | ElmCalloutJsonComponent | ElmBulletedListJsonComponent | ElmNumberedListJsonComponent | ElmListItemJsonComponent | ElmBlockQuoteJsonComponent | ElmDividerJsonComponent | ElmHeading1JsonComponent | ElmHeading2JsonComponent | ElmHeading3JsonComponent | ElmHeading4JsonComponent | ElmHeading5JsonComponent | ElmHeading6JsonComponent | ElmCodeBlockJsonComponent | ElmParagraphJsonComponent | ElmTableJsonComponent | ElmTableHeaderJsonComponent | ElmTableBodyJsonComponent | ElmTableRowJsonComponent | ElmTableCellJsonComponent | ElmKatexJsonComponent | ElmImageJsonComponent | ElmBookmarkJsonComponent | ElmToggleJsonComponent | ElmCheckboxJsonComponent | ElmFileJsonComponent | ElmColumnJsonComponent | ElmColumnListJsonComponent;
+type JsonComponent = ElmInlineTextJsonComponent | ElmInlineLinkJsonComponent | ElmInlineIconJsonComponent | ElmCalloutJsonComponent | ElmBulletedListJsonComponent | ElmNumberedListJsonComponent | ElmListItemJsonComponent | ElmBlockQuoteJsonComponent | ElmDividerJsonComponent | ElmHeading1JsonComponent | ElmHeading2JsonComponent | ElmHeading3JsonComponent | ElmHeading4JsonComponent | ElmHeading5JsonComponent | ElmHeading6JsonComponent | ElmCodeBlockJsonComponent | ElmParagraphJsonComponent | ElmTableJsonComponent | ElmTableHeaderJsonComponent | ElmTableBodyJsonComponent | ElmTableRowJsonComponent | ElmTableCellJsonComponent | ElmKatexJsonComponent | ElmImageJsonComponent | ElmBlockImageJsonComponent | ElmBookmarkJsonComponent | ElmToggleJsonComponent | ElmCheckboxJsonComponent | ElmFileJsonComponent | ElmColumnJsonComponent | ElmColumnListJsonComponent;
 export interface ElmJsonRendererProps {
     json: JsonComponent[];
 }

package/dist/components/renderer/ElmJsonRenderer.vue.mjs

@@ -0,0 +1,150 @@
+import { defineComponent, defineAsyncComponent, markRaw, createBlock, openBlock, resolveDynamicComponent, h } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmJsonRenderer",
+  props: {
+    json: {}
+  },
+  setup(__props) {
+    const ElmInlineText = defineAsyncComponent(
+      () => import("../inline/ElmInlineText.vue.mjs")
+    );
+    const ElmInlineLink = defineAsyncComponent(
+      () => import("../inline/ElmInlineLink.vue.mjs")
+    );
+    const ElmInlineIcon = defineAsyncComponent(
+      () => import("../inline/ElmInlineIcon.vue.mjs")
+    );
+    const ElmCallout = defineAsyncComponent(
+      () => import("../typography/ElmCallout.vue.mjs")
+    );
+    const ElmBulletedList = defineAsyncComponent(
+      () => import("../typography/ElmBulletedList.vue3.mjs")
+    );
+    const ElmNumberedList = defineAsyncComponent(
+      () => import("../typography/ElmNumberedList.vue3.mjs")
+    );
+    const ElmListItem = defineAsyncComponent(
+      () => import("../typography/ElmListItem.vue.mjs")
+    );
+    const ElmBlockQuote = defineAsyncComponent(
+      () => import("../typography/ElmBlockQuote.vue.mjs")
+    );
+    const ElmDivider = defineAsyncComponent(
+      () => import("../typography/ElmDivider.vue.mjs")
+    );
+    const ElmHeading1 = defineAsyncComponent(
+      () => import("../headings/ElmHeading1.vue.mjs")
+    );
+    const ElmHeading2 = defineAsyncComponent(
+      () => import("../headings/ElmHeading2.vue.mjs")
+    );
+    const ElmHeading3 = defineAsyncComponent(
+      () => import("../headings/ElmHeading3.vue.mjs")
+    );
+    const ElmHeading4 = defineAsyncComponent(
+      () => import("../headings/ElmHeading4.vue.mjs")
+    );
+    const ElmHeading5 = defineAsyncComponent(
+      () => import("../headings/ElmHeading5.vue.mjs")
+    );
+    const ElmHeading6 = defineAsyncComponent(
+      () => import("../headings/ElmHeading6.vue.mjs")
+    );
+    const ElmCodeBlock = defineAsyncComponent(
+      () => import("../code/ElmCodeBlock.vue.mjs")
+    );
+    const ElmParagraph = defineAsyncComponent(
+      () => import("../typography/ElmParagraph.vue.mjs")
+    );
+    const ElmTable = defineAsyncComponent(() => import("../table/ElmTable.vue.mjs"));
+    const ElmTableHeader = defineAsyncComponent(
+      () => import("../table/ElmTableHeader.vue3.mjs")
+    );
+    const ElmTableBody = defineAsyncComponent(
+      () => import("../table/ElmTableBody.vue3.mjs")
+    );
+    const ElmTableRow = defineAsyncComponent(
+      () => import("../table/ElmTableRow.vue2.mjs")
+    );
+    const ElmTableCell = defineAsyncComponent(
+      () => import("../table/ElmTableCell.vue.mjs")
+    );
+    const ElmKatex = defineAsyncComponent(() => import("../code/ElmKatex.vue.mjs"));
+    const ElmImage = defineAsyncComponent(() => import("../media/ElmImage.vue.mjs"));
+    const ElmBlockImage = defineAsyncComponent(
+      () => import("../media/ElmBlockImage.vue.mjs")
+    );
+    const ElmBookmark = defineAsyncComponent(
+      () => import("../navigation/ElmBookmark.vue.mjs")
+    );
+    const ElmToggle = defineAsyncComponent(
+      () => import("../containments/ElmToggle.vue.mjs")
+    );
+    const ElmCheckbox = defineAsyncComponent(
+      () => import("../form/ElmCheckbox.vue.mjs")
+    );
+    const ElmFile = defineAsyncComponent(() => import("../media/ElmFile.vue.mjs"));
+    const ElmColumn = defineAsyncComponent(
+      () => import("../containments/ElmColumn.vue.mjs")
+    );
+    const ElmColumnList = defineAsyncComponent(
+      () => import("../containments/ElmColumnList.vue.mjs")
+    );
+    const componentMap = {
+      ElmInlineText: markRaw(ElmInlineText),
+      ElmInlineLink: markRaw(ElmInlineLink),
+      ElmInlineIcon: markRaw(ElmInlineIcon),
+      ElmCallout: markRaw(ElmCallout),
+      ElmBulletedList: markRaw(ElmBulletedList),
+      ElmNumberedList: markRaw(ElmNumberedList),
+      ElmListItem: markRaw(ElmListItem),
+      ElmBlockQuote: markRaw(ElmBlockQuote),
+      ElmDivider: markRaw(ElmDivider),
+      ElmHeading1: markRaw(ElmHeading1),
+      ElmHeading2: markRaw(ElmHeading2),
+      ElmHeading3: markRaw(ElmHeading3),
+      ElmHeading4: markRaw(ElmHeading4),
+      ElmHeading5: markRaw(ElmHeading5),
+      ElmHeading6: markRaw(ElmHeading6),
+      ElmCodeBlock: markRaw(ElmCodeBlock),
+      ElmParagraph: markRaw(ElmParagraph),
+      ElmTable: markRaw(ElmTable),
+      ElmTableHeader: markRaw(ElmTableHeader),
+      ElmTableBody: markRaw(ElmTableBody),
+      ElmTableRow: markRaw(ElmTableRow),
+      ElmTableCell: markRaw(ElmTableCell),
+      ElmKatex: markRaw(ElmKatex),
+      ElmImage: markRaw(ElmImage),
+      ElmBlockImage: markRaw(ElmBlockImage),
+      ElmBookmark: markRaw(ElmBookmark),
+      ElmToggle: markRaw(ElmToggle),
+      ElmCheckbox: markRaw(ElmCheckbox),
+      ElmFile: markRaw(ElmFile),
+      ElmColumn: markRaw(ElmColumn),
+      ElmColumnList: markRaw(ElmColumnList)
+    };
+    const render = (json) => {
+      const vnodes = [];
+      for (const component of json) {
+        vnodes.push(
+          h(
+            componentMap[component.type],
+            { ...component.props, key: component.id },
+            () => {
+              if (component.children != null) {
+                return render(component.children);
+              }
+            }
+          )
+        );
+      }
+      return vnodes;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(() => render(_ctx.json)));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/renderer/ElmJsonRenderer.vue2.mjs

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

package/dist/components/table/ElmTable.vue.d.ts

@@ -1,14 +1,20 @@
+import { Property } from 'csstype';
 export interface ElmTableProps {
+    /**
+     * The margin of the table.
+     */
+    margin?: Property.MarginBlock;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLTableElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmTableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmTableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/table/ElmTable.vue.mjs

@@ -0,0 +1,18 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".table[data-v-6ed1a868]{margin-block:var(--margin-block);border-collapse:collapse;border-spacing:0;box-shadow:0 0 .125rem #0000001a}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmTable.vue2.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const ElmTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ed1a868"]]);
+export {
+  ElmTable as default
+};

package/dist/components/table/ElmTable.vue2.mjs

@@ -0,0 +1,22 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTable",
+  props: {
+    margin: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("table", {
+        class: "table",
+        style: normalizeStyle({
+          "--margin-block": _ctx.margin
+        })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/table/ElmTableBody.vue.d.ts

@@ -1,14 +1,15 @@
 export interface ElmTableBodyProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLTableSectionElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmTableBodyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTableBodyProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmTableBodyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTableBodyProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableSectionElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {