@limetech/kompendium 1.1.1

package/dist/collection/components/component/templates/methods.js

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+export function MethodList({ methods, id, }) {
+    if (!methods.length) {
+        return;
+    }
+    return [
+        h("h3", { class: "docs-layout-section-heading", id: id }, "Methods"),
+        ...methods.map(renderMethod),
+    ];
+}
+function renderMethod(method) {
+    const items = [
+        {
+            key: 'Signature',
+            value: method.signature,
+        },
+    ].filter((item) => item.value !== undefined);
+    return (h("div", { class: "methods-layout" }, h("h4", { class: "methods-title" }, method.name), h("div", { class: "methods-content" }, h("div", null, h("kompendium-markdown", { text: method.docs })), h("div", null, h("kompendium-taglist", { tags: method.docsTags }), h("kompendium-proplist", { items: items }), h(ParamList, { params: method.parameters }))), h("div", { class: "methods-returns" }, h(Returns, { value: method.returns }))));
+}
+function ParamList({ params }) {
+    if (!params.length) {
+        return;
+    }
+    return [h("h5", null, "Parameters"), ...params.map(renderParam)];
+}
+function renderParam(param) {
+    const items = [
+        {
+            key: 'Type',
+            value: param.type,
+        },
+        {
+            key: 'Optional',
+            value: String(param.optional),
+        },
+        {
+            key: 'Default',
+            value: param.default,
+        },
+    ].filter((item) => item.value !== undefined);
+    return (h("div", null, h("h6", null, param.name), h("kompendium-markdown", { text: param.docs }), h("kompendium-proplist", { items: items })));
+}
+function Returns({ value }) {
+    if (!value) {
+        return;
+    }
+    const type = '`' + value.type + '`';
+    return [
+        h("h5", null, "Returns"),
+        h("kompendium-markdown", { text: value.docs }),
+        h("kompendium-markdown", { text: type }),
+    ];
+}
+//# sourceMappingURL=methods.js.map

package/dist/collection/components/component/templates/methods.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"methods.js","sourceRoot":"","sources":["../../../../src/components/component/templates/methods.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,UAAU,UAAU,CAAC,EACvB,OAAO,EACP,EAAE,GAIL;IACG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;QAClB,OAAO;IACX,CAAC;IAED,OAAO;QACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAE,EAAE,cAEzC;QACL,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;KAC/B,CAAC;AACN,CAAC;AAED,SAAS,YAAY,CAAC,MAAsB;IACxC,MAAM,KAAK,GAAmB;QAC1B;YACI,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,MAAM,CAAC,SAAS;SAC1B;KACJ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH,WAAK,KAAK,EAAC,gBAAgB;QACvB,UAAI,KAAK,EAAC,eAAe,IAAE,MAAM,CAAC,IAAI,CAAM;QAC5C,WAAK,KAAK,EAAC,iBAAiB;YACxB;gBACI,2BAAqB,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CACxC;YACN;gBACI,0BAAoB,IAAI,EAAE,MAAM,CAAC,QAAQ,GAAI;gBAC7C,2BAAqB,KAAK,EAAE,KAAK,GAAI;gBACrC,EAAC,SAAS,IAAC,MAAM,EAAE,MAAM,CAAC,UAAU,GAAI,CACtC,CACJ;QACN,WAAK,KAAK,EAAC,iBAAiB;YACxB,EAAC,OAAO,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,GAAI,CAChC,CACJ,CACT,CAAC;AACN,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,MAAM,EAAwC;IAC/D,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO;IACX,CAAC;IAED,OAAO,CAAC,2BAAmB,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,SAAS,WAAW,CAAC,KAA2B;IAC5C,MAAM,KAAK,GAAmB;QAC1B;YACI,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,KAAK,CAAC,IAAI;SACpB;QACD;YACI,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;SAChC;QACD;YACI,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,KAAK,CAAC,OAAO;SACvB;KACJ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH;QACI,cAAK,KAAK,CAAC,IAAI,CAAM;QACrB,2BAAqB,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;QACzC,2BAAqB,KAAK,EAAE,KAAK,GAAI,CACnC,CACT,CAAC;AACN,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,KAAK,EAAmC;IACvD,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO;IACX,CAAC;IAED,MAAM,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;IAEpC,OAAO;QACH,wBAAgB;QAChB,2BAAqB,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;QACzC,2BAAqB,IAAI,EAAE,IAAI,GAAI;KACtC,CAAC;AACN,CAAC","sourcesContent":["import {\n    JsonDocsMethod,\n    JsonDocMethodParameter,\n    JsonDocsMethodReturn,\n} from '@stencil/core/internal';\nimport { h } from '@stencil/core';\nimport { ProplistItem } from '../../proplist/proplist';\nimport { ParameterDescription } from '../../../types';\n\nexport function MethodList({\n    methods,\n    id,\n}: {\n    id?: string;\n    methods: Array<Partial<JsonDocsMethod>>;\n}): HTMLElement[] {\n    if (!methods.length) {\n        return;\n    }\n\n    return [\n        <h3 class=\"docs-layout-section-heading\" id={id}>\n            Methods\n        </h3>,\n        ...methods.map(renderMethod),\n    ];\n}\n\nfunction renderMethod(method: JsonDocsMethod) {\n    const items: ProplistItem[] = [\n        {\n            key: 'Signature',\n            value: method.signature,\n        },\n    ].filter((item) => item.value !== undefined);\n\n    return (\n        <div class=\"methods-layout\">\n            <h4 class=\"methods-title\">{method.name}</h4>\n            <div class=\"methods-content\">\n                <div>\n                    <kompendium-markdown text={method.docs} />\n                </div>\n                <div>\n                    <kompendium-taglist tags={method.docsTags} />\n                    <kompendium-proplist items={items} />\n                    <ParamList params={method.parameters} />\n                </div>\n            </div>\n            <div class=\"methods-returns\">\n                <Returns value={method.returns} />\n            </div>\n        </div>\n    );\n}\n\nfunction ParamList({ params }: { params: JsonDocMethodParameter[] }) {\n    if (!params.length) {\n        return;\n    }\n\n    return [<h5>Parameters</h5>, ...params.map(renderParam)];\n}\n\nfunction renderParam(param: ParameterDescription) {\n    const items: ProplistItem[] = [\n        {\n            key: 'Type',\n            value: param.type,\n        },\n        {\n            key: 'Optional',\n            value: String(param.optional),\n        },\n        {\n            key: 'Default',\n            value: param.default,\n        },\n    ].filter((item) => item.value !== undefined);\n\n    return (\n        <div>\n            <h6>{param.name}</h6>\n            <kompendium-markdown text={param.docs} />\n            <kompendium-proplist items={items} />\n        </div>\n    );\n}\n\nfunction Returns({ value }: { value: JsonDocsMethodReturn }) {\n    if (!value) {\n        return;\n    }\n\n    const type = '`' + value.type + '`';\n\n    return [\n        <h5>Returns</h5>,\n        <kompendium-markdown text={value.docs} />,\n        <kompendium-markdown text={type} />,\n    ];\n}\n"]}

package/dist/collection/components/component/templates/props.js

@@ -0,0 +1,36 @@
+import { h } from "@stencil/core";
+export function PropertyList({ props, id, }) {
+    if (!props.length) {
+        return;
+    }
+    return [
+        h("h3", { class: "docs-layout-section-heading", id: id }, "Properties"),
+        ...props.map(renderProperty),
+    ];
+}
+function renderProperty(property) {
+    const items = [
+        {
+            key: 'Type',
+            value: property.type,
+        },
+        {
+            key: 'Attribute name',
+            value: property.attr,
+        },
+        {
+            key: 'Default value',
+            value: property.default,
+        },
+        {
+            key: 'Optional',
+            value: String(property.optional),
+        },
+        {
+            key: 'Required',
+            value: String(property.required),
+        },
+    ].filter((item) => item.value !== undefined && item.value !== 'undefined');
+    return (h("div", { class: "props-events-layout" }, h("h4", null, property.name), h("kompendium-taglist", { tags: property.docsTags }), h("div", { class: "markdown-props" }, h("kompendium-markdown", { text: property.docs }), h("kompendium-proplist", { items: items }))));
+}
+//# sourceMappingURL=props.js.map

package/dist/collection/components/component/templates/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sourceRoot":"","sources":["../../../../src/components/component/templates/props.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,MAAM,UAAU,YAAY,CAAC,EACzB,KAAK,EACL,EAAE,GAIL;IACG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAChB,OAAO;IACX,CAAC;IAED,OAAO;QACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAE,EAAE,iBAEzC;QACL,GAAG,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC;KAC/B,CAAC;AACN,CAAC;AAED,SAAS,cAAc,CAAC,QAAsB;IAC1C,MAAM,KAAK,GAAmB;QAC1B;YACI,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,QAAQ,CAAC,IAAI;SACvB;QACD;YACI,GAAG,EAAE,gBAAgB;YACrB,KAAK,EAAE,QAAQ,CAAC,IAAI;SACvB;QACD;YACI,GAAG,EAAE,eAAe;YACpB,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B;QACD;YACI,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;SACnC;QACD;YACI,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;SACnC;KACJ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC;IAE3E,OAAO,CACH,WAAK,KAAK,EAAC,qBAAqB;QAC5B,cAAK,QAAQ,CAAC,IAAI,CAAM;QACxB,0BAAoB,IAAI,EAAE,QAAQ,CAAC,QAAQ,GAAI;QAC/C,WAAK,KAAK,EAAC,gBAAgB;YACvB,2BAAqB,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAI;YAC5C,2BAAqB,KAAK,EAAE,KAAK,GAAI,CACnC,CACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import { JsonDocsProp } from '@stencil/core/internal';\nimport { h } from '@stencil/core';\nimport { ProplistItem } from '../../proplist/proplist';\n\nexport function PropertyList({\n    props,\n    id,\n}: {\n    id?: string;\n    props: Array<Partial<JsonDocsProp>>;\n}): HTMLElement[] {\n    if (!props.length) {\n        return;\n    }\n\n    return [\n        <h3 class=\"docs-layout-section-heading\" id={id}>\n            Properties\n        </h3>,\n        ...props.map(renderProperty),\n    ];\n}\n\nfunction renderProperty(property: JsonDocsProp) {\n    const items: ProplistItem[] = [\n        {\n            key: 'Type',\n            value: property.type,\n        },\n        {\n            key: 'Attribute name',\n            value: property.attr,\n        },\n        {\n            key: 'Default value',\n            value: property.default,\n        },\n        {\n            key: 'Optional',\n            value: String(property.optional),\n        },\n        {\n            key: 'Required',\n            value: String(property.required),\n        },\n    ].filter((item) => item.value !== undefined && item.value !== 'undefined');\n\n    return (\n        <div class=\"props-events-layout\">\n            <h4>{property.name}</h4>\n            <kompendium-taglist tags={property.docsTags} />\n            <div class=\"markdown-props\">\n                <kompendium-markdown text={property.docs} />\n                <kompendium-proplist items={items} />\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/collection/components/component/templates/slots.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export function SlotList({ slots, id, }) {
+    if (!slots.length) {
+        return;
+    }
+    return [
+        h("h3", { class: "docs-layout-section-heading", id: id }, "Slots"),
+        ...slots.map(renderSlot),
+    ];
+}
+function renderSlot(slot) {
+    return (h("div", null, h("h4", null, slot.name), h("kompendium-markdown", { text: slot.docs })));
+}
+//# sourceMappingURL=slots.js.map

package/dist/collection/components/component/templates/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../src/components/component/templates/slots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,UAAU,QAAQ,CAAC,EACrB,KAAK,EACL,EAAE,GAIL;IACG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAChB,OAAO;IACX,CAAC;IAED,OAAO;QACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAE,EAAE,YAEzC;QACL,GAAG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC;KAC3B,CAAC;AACN,CAAC;AAED,SAAS,UAAU,CAAC,IAAkB;IAClC,OAAO,CACH;QACI,cAAK,IAAI,CAAC,IAAI,CAAM;QACpB,2BAAqB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACtC,CACT,CAAC;AACN,CAAC","sourcesContent":["import { JsonDocsSlot } from '@stencil/core/internal';\nimport { h } from '@stencil/core';\n\nexport function SlotList({\n    slots,\n    id,\n}: {\n    id: string;\n    slots: JsonDocsSlot[];\n}): HTMLElement[] {\n    if (!slots.length) {\n        return;\n    }\n\n    return [\n        <h3 class=\"docs-layout-section-heading\" id={id}>\n            Slots\n        </h3>,\n        ...slots.map(renderSlot),\n    ];\n}\n\nfunction renderSlot(slot: JsonDocsSlot) {\n    return (\n        <div>\n            <h4>{slot.name}</h4>\n            <kompendium-markdown text={slot.docs} />\n        </div>\n    );\n}\n"]}

package/dist/collection/components/component/templates/style.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export function StyleList({ styles, id, }) {
+    if (!styles.length) {
+        return;
+    }
+    return [
+        h("h3", { class: "docs-layout-section-heading", id: id }, "Styles"),
+        ...styles.map(renderStyle),
+    ];
+}
+function renderStyle(style) {
+    return (h("div", { class: "styles-layout" }, h("div", { class: "styles-title" }, h("code", null, style.name)), h("div", { class: "styles-content" }, h("kompendium-markdown", { text: style.docs }))));
+}
+//# sourceMappingURL=style.js.map

package/dist/collection/components/component/templates/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../src/components/component/templates/style.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,UAAU,SAAS,CAAC,EACtB,MAAM,EACN,EAAE,GAIL;IACG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO;IACX,CAAC;IAED,OAAO;QACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAE,EAAE,aAEzC;QACL,GAAG,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;KAC7B,CAAC;AACN,CAAC;AAED,SAAS,WAAW,CAAC,KAAoB;IACrC,OAAO,CACH,WAAK,KAAK,EAAC,eAAe;QACtB,WAAK,KAAK,EAAC,cAAc;YACrB,gBAAO,KAAK,CAAC,IAAI,CAAQ,CACvB;QACN,WAAK,KAAK,EAAC,gBAAgB;YACvB,2BAAqB,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,CACvC,CACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import { JsonDocsStyle } from '@stencil/core/internal';\nimport { h } from '@stencil/core';\n\nexport function StyleList({\n    styles,\n    id,\n}: {\n    id: string;\n    styles: JsonDocsStyle[];\n}): HTMLElement[] {\n    if (!styles.length) {\n        return;\n    }\n\n    return [\n        <h3 class=\"docs-layout-section-heading\" id={id}>\n            Styles\n        </h3>,\n        ...styles.map(renderStyle),\n    ];\n}\n\nfunction renderStyle(style: JsonDocsStyle) {\n    return (\n        <div class=\"styles-layout\">\n            <div class=\"styles-title\">\n                <code>{style.name}</code>\n            </div>\n            <div class=\"styles-content\">\n                <kompendium-markdown text={style.docs} />\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/collection/components/darkmode-switch/darkmode-switch.css

@@ -0,0 +1,141 @@
+:host {
+  --toggle-size: 1.25rem;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+.mode-toggle {
+  margin: 0.75rem;
+  position: relative;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+  transition: opacity 0.3s ease;
+  opacity: 0.7;
+}
+.mode-toggle:hover {
+  opacity: 1;
+}
+
+.mode-visualization {
+  pointer-events: none;
+  position: absolute;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+}
+
+.circle {
+  transition: background-color 0.6s ease;
+  border-radius: 50%;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate3d(0, 0, 0);
+}
+.circle:after {
+  transition: transform 0.7s ease, background-color 0.4s ease;
+  content: "";
+  display: block;
+  border-radius: 50%;
+  width: calc(var(--toggle-size) - 0.25rem);
+  height: calc(var(--toggle-size) - 0.25rem);
+}
+
+.ray {
+  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.37, -0.03, 0.4, 1.18);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+}
+.ray:before, .ray:after {
+  content: "";
+  display: block;
+  height: 0.375rem;
+  width: 0.125rem;
+  border-radius: var(--toggle-size);
+  background-color: rgba(var(--kompendium-color-orange-light), 1);
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.ray:before {
+  top: -0.5rem;
+}
+.ray:after {
+  bottom: -0.5rem;
+}
+.ray.three:before, .ray.three:after, .ray.four:before, .ray.four:after {
+  height: 0.25rem;
+}
+
+input[type=checkbox] {
+  -webkit-appearance: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  border-radius: 0.125rem;
+}
+input[type=checkbox]:focus {
+  outline: none;
+}
+input[type=checkbox]:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .circle {
+  background-color: rgba(var(--kompendium-color-orange-default), 1);
+  box-shadow: 0 0 0.5rem 0.125rem rgba(var(--kompendium-color-orange-light), 0.8), 0 0 0.25rem 0.1875rem rgb(var(--kompendium-color-white));
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .circle:after {
+  background-color: rgba(var(--kompendium-color-orange-default), 1);
+  transform: translate3d(1rem, -1rem, 0);
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .ray {
+  opacity: 0.6;
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .ray.three, input[type=checkbox]:not(:checked) + .mode-visualization .ray.four {
+  opacity: 0.4;
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .ray.one {
+  transform: rotate(0deg) scale(1);
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .ray.two {
+  transform: rotate(90deg) scale(1);
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .ray.three {
+  transform: rotate(45deg) scale(1);
+}
+input[type=checkbox]:not(:checked) + .mode-visualization .ray.four {
+  transform: rotate(-45deg) scale(1);
+}
+input[type=checkbox]:checked + .mode-visualization .circle {
+  background-color: rgba(var(--kompendium-contrast-1700), 0.7);
+  box-shadow: 0 0 0.5rem 0.125rem rgba(var(--kompendium-color-white), 0.4), 0 0 0.25rem 0.125rem rgb(var(--kompendium-color-black));
+}
+input[type=checkbox]:checked + .mode-visualization .circle:after {
+  transform: translate3d(0.25rem, -0.25rem, 0);
+  background-color: rgb(var(--kompendium-contrast-400));
+}
+input[type=checkbox]:checked + .mode-visualization .ray {
+  opacity: 0;
+}
+input[type=checkbox]:checked + .mode-visualization .ray.one {
+  transform: rotate(60deg) scale(0.5);
+}
+input[type=checkbox]:checked + .mode-visualization .ray.two {
+  transform: rotate(150deg) scale(0.5);
+}
+input[type=checkbox]:checked + .mode-visualization .ray.three {
+  transform: rotate(105deg) scale(0.5);
+}
+input[type=checkbox]:checked + .mode-visualization .ray.four {
+  transform: rotate(15deg) scale(0.5);
+}

package/dist/collection/components/darkmode-switch/darkmode-switch.js

@@ -0,0 +1,90 @@
+import { h } from "@stencil/core";
+import { THEME_EVENT_NAME } from "./types";
+const DEFAULT = 'system-default';
+const LIGHT = 'force-light';
+const DARK = 'force-dark';
+const CHECKBOX_LIGHT = false;
+const CHECKBOX_DARK = true;
+const LOCALSTORAGE_KEY = 'kompendium-theme';
+/**
+ * @private
+ */
+export class DarkmodeSwitch {
+    constructor() {
+        this.theme = 'system-default';
+        this.getSelectRef = (element) => {
+            this.checkbox = element;
+        };
+        this.handleSystemThemeChange = (e) => {
+            this.systemSettingIsDark = !!e.matches;
+            if (this.theme === DEFAULT) {
+                this.checkbox.checked = !this.checkbox.checked;
+            }
+        };
+        this.handleThemeChange = () => {
+            const checkboxValue = !!this.checkbox.checked;
+            let newTheme = DEFAULT;
+            if (this.systemSettingIsDark) {
+                if (checkboxValue === CHECKBOX_LIGHT) {
+                    newTheme = LIGHT;
+                }
+            }
+            else {
+                if (checkboxValue === CHECKBOX_DARK) {
+                    newTheme = DARK;
+                }
+            }
+            this.setTheme(newTheme);
+            document.dispatchEvent(new CustomEvent(THEME_EVENT_NAME, { detail: newTheme }));
+        };
+        this.setTheme = (value) => {
+            this.theme = value;
+            document.querySelector('html').dataset.theme = value;
+            localStorage.setItem(LOCALSTORAGE_KEY, value);
+        };
+        const colorSchemeMediaQueryFallback = {
+            addEventListener: () => { },
+            matches: false,
+        };
+        this.colorSchemeMediaQuery =
+            (window.matchMedia &&
+                window.matchMedia('(prefers-color-scheme: dark)')) ||
+                colorSchemeMediaQueryFallback;
+    }
+    connectedCallback() {
+        this.colorSchemeMediaQuery.addEventListener('change', this.handleSystemThemeChange);
+    }
+    disconnectedCallback() {
+        this.colorSchemeMediaQuery.removeEventListener('change', this.handleSystemThemeChange);
+    }
+    componentWillLoad() {
+        this.systemSettingIsDark = this.colorSchemeMediaQuery.matches;
+        this.setTheme((localStorage.getItem(LOCALSTORAGE_KEY) || DEFAULT));
+    }
+    render() {
+        const props = {
+            checked: this.theme === DARK ||
+                (this.theme === DEFAULT && this.systemSettingIsDark),
+        };
+        return (h("div", { key: '72bb10f37127840f1e310943a35a6f653bd3859d', class: "mode-toggle" }, h("input", { key: '5869df8eadeb50a5e6c7fe41e0ec6f7dfe8be233', type: "checkbox", onChange: this.handleThemeChange, ref: this.getSelectRef, ...props }), h("div", { key: '4ca3d61f92b73c9239820eadf411fbb9f4eaab7f', class: "mode-visualization" }, h("div", { key: 'e4d99bd1a90298a2a6c634cd2d3cb859c3bbd1bc', class: "circle" }), h("div", { key: '4a7e9b0d7d5bfc4c85db8cd50e6200899d81a6fb', class: "ray one" }), h("div", { key: 'c489f612cabd963e3ebae26996dd7a71f242e0de', class: "ray two" }), h("div", { key: '83288239cf2c67c0ad314728c6c65ffee67f9c1e', class: "ray three" }), h("div", { key: '013b3c4c16e8f49d396a7a3e903108304ad17dfe', class: "ray four" }))));
+    }
+    static get is() { return "kompendium-darkmode-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["darkmode-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["darkmode-switch.css"]
+        };
+    }
+    static get states() {
+        return {
+            "theme": {},
+            "systemSettingIsDark": {}
+        };
+    }
+}
+//# sourceMappingURL=darkmode-switch.js.map

package/dist/collection/components/darkmode-switch/darkmode-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"darkmode-switch.js","sourceRoot":"","sources":["../../../src/components/darkmode-switch/darkmode-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State } from '@stencil/core';\nimport { Theme, THEME_EVENT_NAME } from './types';\n\nconst DEFAULT: Theme = 'system-default';\nconst LIGHT: Theme = 'force-light';\nconst DARK: Theme = 'force-dark';\nconst CHECKBOX_LIGHT = false;\nconst CHECKBOX_DARK = true;\nconst LOCALSTORAGE_KEY = 'kompendium-theme';\n\n/**\n * @private\n */\n@Component({\n    tag: 'kompendium-darkmode-switch',\n    styleUrl: 'darkmode-switch.scss',\n    shadow: true,\n})\nexport class DarkmodeSwitch {\n    @State()\n    private theme: Theme = 'system-default';\n\n    @State()\n    private systemSettingIsDark: boolean;\n\n    private checkbox: HTMLInputElement;\n    private colorSchemeMediaQuery: MediaQueryList;\n\n    constructor() {\n        const colorSchemeMediaQueryFallback = {\n            addEventListener: () => {},\n            matches: false,\n        } as unknown as MediaQueryList;\n\n        this.colorSchemeMediaQuery =\n            (window.matchMedia &&\n                window.matchMedia('(prefers-color-scheme: dark)')) ||\n            colorSchemeMediaQueryFallback;\n    }\n\n    public connectedCallback() {\n        this.colorSchemeMediaQuery.addEventListener(\n            'change',\n            this.handleSystemThemeChange,\n        );\n    }\n\n    public disconnectedCallback() {\n        this.colorSchemeMediaQuery.removeEventListener(\n            'change',\n            this.handleSystemThemeChange,\n        );\n    }\n\n    public componentWillLoad(): void {\n        this.systemSettingIsDark = this.colorSchemeMediaQuery.matches;\n\n        this.setTheme(\n            (localStorage.getItem(LOCALSTORAGE_KEY) || DEFAULT) as Theme,\n        );\n    }\n\n    public render(): HTMLElement {\n        const props = {\n            checked:\n                this.theme === DARK ||\n                (this.theme === DEFAULT && this.systemSettingIsDark),\n        };\n\n        return (\n            <div class=\"mode-toggle\">\n                <input\n                    type=\"checkbox\"\n                    onChange={this.handleThemeChange}\n                    ref={this.getSelectRef}\n                    {...props}\n                />\n                <div class=\"mode-visualization\">\n                    <div class=\"circle\"></div>\n                    <div class=\"ray one\"></div>\n                    <div class=\"ray two\"></div>\n                    <div class=\"ray three\"></div>\n                    <div class=\"ray four\"></div>\n                </div>\n            </div>\n        );\n    }\n\n    private getSelectRef = (element: HTMLInputElement) => {\n        this.checkbox = element;\n    };\n\n    private handleSystemThemeChange = (e: MediaQueryListEvent) => {\n        this.systemSettingIsDark = !!e.matches;\n        if (this.theme === DEFAULT) {\n            this.checkbox.checked = !this.checkbox.checked;\n        }\n    };\n\n    private handleThemeChange = () => {\n        const checkboxValue = !!this.checkbox.checked;\n\n        let newTheme: Theme = DEFAULT;\n\n        if (this.systemSettingIsDark) {\n            if (checkboxValue === CHECKBOX_LIGHT) {\n                newTheme = LIGHT;\n            }\n        } else {\n            if (checkboxValue === CHECKBOX_DARK) {\n                newTheme = DARK;\n            }\n        }\n\n        this.setTheme(newTheme);\n        document.dispatchEvent(\n            new CustomEvent<Theme>(THEME_EVENT_NAME, { detail: newTheme }),\n        );\n    };\n\n    private setTheme = (value: Theme) => {\n        this.theme = value;\n        document.querySelector('html').dataset.theme = value;\n        localStorage.setItem(LOCALSTORAGE_KEY, value);\n    };\n}\n"]}

package/dist/collection/components/darkmode-switch/types.js

@@ -0,0 +1,2 @@
+export const THEME_EVENT_NAME = 'kompendiumTheme';
+//# sourceMappingURL=types.js.map

package/dist/collection/components/darkmode-switch/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/darkmode-switch/types.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC","sourcesContent":["export type Theme = 'system-default' | 'force-light' | 'force-dark';\nexport const THEME_EVENT_NAME = 'kompendiumTheme';\n"]}

package/dist/collection/components/debug/debug.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+export class KompendiumDebug {
+    constructor() {
+        /**
+         * Factory for creating props for example components
+         * @returns {Record<string, unknown>} props
+         */
+        this.examplePropsFactory = () => ({});
+    }
+    render() {
+        const tag = this.match.params.name;
+        const component = findComponent(tag, this.docs);
+        return (h("article", { key: '29c045c23cd107d1d0006467db9abad681bb7e2e', class: "component" }, h("section", { key: 'ae3e9fe451f3663a720d2113d140f1efb42a5da8', class: "docs debug" }, this.renderComponent(component))));
+    }
+    renderComponent(component) {
+        const ExampleComponent = component.tag;
+        const ownerComponent = this.docs.components.find(isOwnerOf(component));
+        const schema = this.schemas.find((s) => s.$id === ownerComponent.tag);
+        const factory = this.examplePropsFactory;
+        const props = {
+            schema: schema,
+            ...factory(ExampleComponent),
+        };
+        return (h("div", { class: "show-case" }, h("div", { class: "show-case_component" }, h(ExampleComponent, { ...props }))));
+    }
+    static get is() { return "kompendium-debug"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "docs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "JsonDocs",
+                    "resolved": "JsonDocs",
+                    "references": {
+                        "JsonDocs": {
+                            "location": "import",
+                            "path": "@stencil/core/internal",
+                            "id": "node_modules::JsonDocs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The generated documentation data"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "schemas": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<Record<string, any>>",
+                    "resolved": "Record<string, any>[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component schemas"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "match": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MatchResults",
+                    "resolved": "MatchResults",
+                    "references": {
+                        "MatchResults": {
+                            "location": "import",
+                            "path": "@limetech/stencil-router",
+                            "id": "node_modules::MatchResults"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Matched route parameters"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "examplePropsFactory": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PropsFactory",
+                    "resolved": "(name: string) => Record<string, unknown>",
+                    "references": {
+                        "PropsFactory": {
+                            "location": "import",
+                            "path": "../playground/playground.types",
+                            "id": "src/components/playground/playground.types.ts::PropsFactory"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "returns",
+                            "text": "props"
+                        }],
+                    "text": "Factory for creating props for example components"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => ({})"
+            }
+        };
+    }
+}
+function findComponent(tag, docs) {
+    return docs.components.find((doc) => doc.tag === tag);
+}
+const isOwnerOf = (example) => (component) => {
+    return !!component.docsTags
+        .filter(isTag('exampleComponent'))
+        .find(hasText(example.tag));
+};
+const isTag = (name) => (tag) => {
+    return tag.name === name;
+};
+const hasText = (name) => (tag) => {
+    return tag.text === name;
+};
+//# sourceMappingURL=debug.js.map

package/dist/collection/components/debug/debug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.js","sourceRoot":"","sources":["../../../src/components/debug/debug.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAanD,MAAM,OAAO,eAAe;IAJ5B;QAuBI;;;WAGG;QAEI,wBAAmB,GAAkB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;KAiC1D;IA/BU,MAAM;QACT,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACnC,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAEhD,OAAO,CACH,gEAAS,KAAK,EAAC,WAAW;YACtB,gEAAS,KAAK,EAAC,YAAY,IACtB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAC1B,CACJ,CACb,CAAC;IACN,CAAC;IAEO,eAAe,CAAC,SAA4B;QAChD,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;QACvE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,cAAc,CAAC,GAAG,CAAC,CAAC;QACtE,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC;QACzC,MAAM,KAAK,GAAG;YACV,MAAM,EAAE,MAAM;YACd,GAAG,OAAO,CAAC,gBAAgB,CAAC;SAC/B,CAAC;QAEF,OAAO,CACH,WAAK,KAAK,EAAC,WAAW;YAClB,WAAK,KAAK,EAAC,qBAAqB;gBAC5B,EAAC,gBAAgB,OAAK,KAAK,GAAI,CAC7B,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,SAAS,aAAa,CAAC,GAAW,EAAE,IAAc;IAC9C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,SAAS,GACX,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC,SAA4B,EAAE,EAAE;IAC7D,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ;SACtB,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;SACjC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AACpC,CAAC,CAAC;AAEN,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,GAAgB,EAAE,EAAE;IACjD,OAAO,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,GAAgB,EAAE,EAAE;IACnD,OAAO,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport {\n    JsonDocs,\n    JsonDocsComponent,\n    JsonDocsTag,\n} from '@stencil/core/internal';\nimport { MatchResults } from '@limetech/stencil-router';\nimport { PropsFactory } from '../playground/playground.types';\n\n@Component({\n    tag: 'kompendium-debug',\n    shadow: true,\n})\nexport class KompendiumDebug {\n    /**\n     * The generated documentation data\n     */\n    @Prop()\n    public docs: JsonDocs;\n\n    /**\n     * Component schemas\n     */\n    @Prop()\n    public schemas: Array<Record<string, any>>;\n\n    /**\n     * Matched route parameters\n     */\n    @Prop()\n    public match: MatchResults;\n\n    /**\n     * Factory for creating props for example components\n     * @returns {Record<string, unknown>} props\n     */\n    @Prop()\n    public examplePropsFactory?: PropsFactory = () => ({});\n\n    public render(): HTMLElement {\n        const tag = this.match.params.name;\n        const component = findComponent(tag, this.docs);\n\n        return (\n            <article class=\"component\">\n                <section class=\"docs debug\">\n                    {this.renderComponent(component)}\n                </section>\n            </article>\n        );\n    }\n\n    private renderComponent(component: JsonDocsComponent) {\n        const ExampleComponent = component.tag;\n        const ownerComponent = this.docs.components.find(isOwnerOf(component));\n        const schema = this.schemas.find((s) => s.$id === ownerComponent.tag);\n        const factory = this.examplePropsFactory;\n        const props = {\n            schema: schema,\n            ...factory(ExampleComponent),\n        };\n\n        return (\n            <div class=\"show-case\">\n                <div class=\"show-case_component\">\n                    <ExampleComponent {...props} />\n                </div>\n            </div>\n        );\n    }\n}\n\nfunction findComponent(tag: string, docs: JsonDocs) {\n    return docs.components.find((doc) => doc.tag === tag);\n}\n\nconst isOwnerOf =\n    (example: JsonDocsComponent) => (component: JsonDocsComponent) => {\n        return !!component.docsTags\n            .filter(isTag('exampleComponent'))\n            .find(hasText(example.tag));\n    };\n\nconst isTag = (name: string) => (tag: JsonDocsTag) => {\n    return tag.name === name;\n};\n\nconst hasText = (name: string) => (tag: JsonDocsTag) => {\n    return tag.text === name;\n};\n"]}

package/dist/collection/components/guide/guide.js

@@ -0,0 +1,61 @@
+import { h } from "@stencil/core";
+export class Guide {
+    constructor() {
+        this.setRoute = this.setRoute.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('hashchange', this.setRoute);
+        this.setRoute();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('hashchange', this.setRoute);
+    }
+    setRoute() {
+        this.route = location.hash.replace('#', '');
+    }
+    render() {
+        this.findGuide();
+        return h("kompendium-markdown", { key: '8df12c70deaae9f377a9e0674b7f274bc62076df', text: this.text });
+    }
+    findGuide() {
+        const guide = this.data.guides.find((g) => g.data.path + '/' === this.route);
+        if (guide) {
+            this.text = guide.content;
+        }
+    }
+    static get is() { return "kompendium-guide"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KompendiumData",
+                    "resolved": "KompendiumData",
+                    "references": {
+                        "KompendiumData": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::KompendiumData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "route": {}
+        };
+    }
+}
+//# sourceMappingURL=guide.js.map

package/dist/collection/components/guide/guide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"guide.js","sourceRoot":"","sources":["../../../src/components/guide/guide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,KAAK;IAWd;QACI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5C;IAES,iBAAiB;QACvB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;IAES,oBAAoB;QAC1B,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5D,CAAC;IAEO,QAAQ;QACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,MAAM;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,OAAO,4EAAqB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IACpD,CAAC;IAEO,SAAS;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,KAAK,IAAI,CAAC,KAAK,CAC1C,CAAC;QAEF,IAAI,KAAK,EAAE,CAAC;YACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC;QAC9B,CAAC;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { KompendiumData } from '../../types';\n\n@Component({\n    tag: 'kompendium-guide',\n    shadow: true,\n})\nexport class Guide {\n    /**\n     */\n    @Prop()\n    public data: KompendiumData;\n\n    @State()\n    public route: string;\n\n    private text: string;\n\n    constructor() {\n        this.setRoute = this.setRoute.bind(this);\n    }\n\n    protected connectedCallback(): void {\n        window.addEventListener('hashchange', this.setRoute);\n        this.setRoute();\n    }\n\n    protected disconnectedCallback(): void {\n        window.removeEventListener('hashchange', this.setRoute);\n    }\n\n    private setRoute() {\n        this.route = location.hash.replace('#', '');\n    }\n\n    render(): HTMLElement {\n        this.findGuide();\n\n        return <kompendium-markdown text={this.text} />;\n    }\n\n    private findGuide() {\n        const guide = this.data.guides.find(\n            (g) => g.data.path + '/' === this.route,\n        );\n\n        if (guide) {\n            this.text = guide.content;\n        }\n    }\n}\n"]}