@jotyping/jo-designsystem 0.1.1-alpha

package/dist/components/icon-button/jd-icon-button.js

@@ -0,0 +1,52 @@
+import { unsafeCSS as l, LitElement as u, html as y } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as n, customElement as a } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import f from "./jd-icon-button.scss.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.js";
+import "../header/jd-header.js";
+import "../heading/jd-heading.js";
+import "../icon/jd-icon.js";
+import "../image-link/jd-image-link.js";
+import "../link/jd-link.js";
+import "../modal/jd-modal.js";
+import "../navigation/jd-navigation.js";
+import "../tag/jd-tag.js";
+var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, p = (c, r, i, e) => {
+  for (var t = e > 1 ? void 0 : e ? b(r, i) : r, s = c.length - 1, m; s >= 0; s--)
+    (m = c[s]) && (t = (e ? m(r, i, t) : m(t)) || t);
+  return e && t && h(r, i, t), t;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.type = "borderless", this.iconName = "puzzle", this.color = "black";
+  }
+  render() {
+    return y`
+      <button class=${this.type}>
+        <jd-icon
+          iconName=${this.iconName}
+          color=${this.color}
+          size=${this.type === "borderless" ? "48px" : "32px"}
+        ></jd-icon>
+      </button>
+    `;
+  }
+};
+o.styles = l(f);
+p([
+  n({ type: String })
+], o.prototype, "type", 2);
+p([
+  n({ type: String })
+], o.prototype, "iconName", 2);
+p([
+  n({ type: String })
+], o.prototype, "color", 2);
+o = p([
+  a("jd-icon-button")
+], o);
+export {
+  o as JdIconButton
+};
+//# sourceMappingURL=jd-icon-button.js.map

package/dist/components/icon-button/jd-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-icon-button.js","sources":["../../../src/components/icon-button/jd-icon-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jd-icon-button.scss?inline\";\nimport { IconName } from \"../icon/jd-icon.ts\";\nimport \"../../components\";\n\n@customElement(\"jd-icon-button\")\nexport class JdIconButton extends LitElement {\n  static styles = unsafeCSS(style);\n\n  /**\n   * Button type, can be \"primary\" or \"secondary\".\n   */\n  @property({ type: String }) type: \"borderless\" | \"border\" = \"borderless\";\n\n  /**\n   * Icon name.\n   */\n  @property({ type: String }) iconName: IconName = \"puzzle\";\n\n  /**\n   * Icon color.\n   */\n  @property({ type: String }) color:\n    | \"red\"\n    | \"purple\"\n    | \"blue\"\n    | \"black\"\n    | \"white\"\n    | \"neutral-200\"\n    | \"neutral-400\"\n    | \"neutral-600\" = \"black\";\n\n  render() {\n    return html`\n      <button class=${this.type}>\n        <jd-icon\n          iconName=${this.iconName}\n          color=${this.color}\n          size=${this.type === \"borderless\" ? \"48px\" : \"32px\"}\n        ></jd-icon>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-icon-button\": JdIconButton;\n  }\n}\n"],"names":["JdIconButton","LitElement","html","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAOa,IAAAA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMuD,KAAA,OAAA,cAKX,KAAA,WAAA,UAa7B,KAAA,QAAA;AAAA,EAAA;AAAA,EAEpB,SAAS;AACA,WAAAC;AAAA,sBACW,KAAK,IAAI;AAAA;AAAA,qBAEV,KAAK,QAAQ;AAAA,kBAChB,KAAK,KAAK;AAAA,iBACX,KAAK,SAAS,eAAe,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA,EAAA;AAK7D;AArCaF,EACJ,SAASG,EAAUC,CAAK;AAKHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GANfN,EAMiB,WAAA,QAAA,CAAA;AAKAK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAXfN,EAWiB,WAAA,YAAA,CAAA;AAKAK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBfN,EAgBiB,WAAA,SAAA,CAAA;AAhBjBA,IAANK,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBP,CAAA;"}

package/dist/components/icon-button/jd-icon-button.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi_Bold;src:local("Satoshi_Bold"),url(/fonts/satoshi-bold.ttf) format("truetype")}@font-face{font-family:Satoshi_Black;src:local("Satoshi_Black"),url(/fonts/satoshi-black.ttf) format("truetype")}@font-face{font-family:Satoshi_Medium;src:local("Satoshi_Medium"),url(/fonts/satoshi-medium.ttf) format("truetype")}@font-face{font-family:Satoshi_Regular;src:local("Satoshi_Regular"),url(/fonts/satoshi-regular.ttf) format("truetype")}@font-face{font-family:Satoshi_Italic;src:local("Satoshi_Italic"),url(/fonts/satoshi-italic.ttf) format("truetype")}:host{display:inline-block;height:48px;width:48px}:host([active]) button.borderless{color:#3a3a3a}button{cursor:pointer;border:none;padding:0;width:48px;height:48px}button.borderless{color:#3a3a3a;background-color:#fff}button.borderless:hover{color:#ff4d2a}button.border{color:#3a3a3a;background-color:#fff;outline:2px solid #3a3a3a;outline-offset:-2px;border-radius:24px}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-icon-button.scss.js.map

package/dist/components/icon-button/jd-icon-button.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-icon-button.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/image-link/jd-image-link.js

@@ -0,0 +1,63 @@
+import { LitElement as n, html as d, unsafeCSS as c } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as l, customElement as v } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import f from "./jd-image-link.scss.js";
+import { SignalWatcher as h } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as g } from "../../stores/breakpoint-store.js";
+import { classMap as u } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.js";
+import "../header/jd-header.js";
+import "../heading/jd-heading.js";
+import "../icon/jd-icon.js";
+import "../icon-button/jd-icon-button.js";
+import "../link/jd-link.js";
+import "../modal/jd-modal.js";
+import "../navigation/jd-navigation.js";
+import "../tag/jd-tag.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (i, e, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(e, s) : e, m = i.length - 1, a; m >= 0; m--)
+    (a = i[m]) && (t = (o ? a(e, s, t) : a(t)) || t);
+  return o && t && y(e, s, t), t;
+};
+let r = class extends h(n) {
+  constructor() {
+    super(...arguments), this.href = "", this.target = "_blank", this.description = "";
+  }
+  render() {
+    const i = {
+      title: !0,
+      [g.get()]: !0
+    };
+    return d`
+      <div>
+        <a href="${this.href}" target="${this.target}">
+          <div class="link-wrapper">
+            <div class=${u(i)}>
+              <slot></slot>
+            </div>
+            <div class="divider"></div>
+            <div class="description">${this.description}</div>
+          </div>
+        </a>
+      </div>
+    `;
+  }
+};
+r.styles = c(f);
+p([
+  l({ type: String })
+], r.prototype, "href", 2);
+p([
+  l({ type: String })
+], r.prototype, "target", 2);
+p([
+  l({ type: String })
+], r.prototype, "description", 2);
+r = p([
+  v("jd-image-link")
+], r);
+export {
+  r as JdImageLink
+};
+//# sourceMappingURL=jd-image-link.js.map

package/dist/components/image-link/jd-image-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-image-link.js","sources":["../../../src/components/image-link/jd-image-link.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jd-image-link.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"../../components\";\n\n@customElement(\"jd-image-link\")\nexport class JdImageLink extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n  @property({ type: String }) href = \"\";\n  @property({ type: String }) target: \"_blank\" | \"_bla\" = \"_blank\";\n  @property({ type: String }) description = \"\";\n\n  render() {\n    const titleClass = {\n      title: true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`\n      <div>\n        <a href=\"${this.href}\" target=\"${this.target}\">\n          <div class=\"link-wrapper\">\n            <div class=${classMap(titleClass)}>\n              <slot></slot>\n            </div>\n            <div class=\"divider\"></div>\n            <div class=\"description\">${this.description}</div>\n          </div>\n        </a>\n      </div>\n    `;\n  }\n}\n"],"names":["JdImageLink","SignalWatcher","LitElement","titleClass","breakpoint","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAA0BC,EAAcC,CAAU,EAAE;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA,GAE8B,KAAA,OAAA,IACqB,KAAA,SAAA,UACd,KAAA,cAAA;AAAA,EAAA;AAAA,EAE1C,SAAS;AACP,UAAMC,IAAa;AAAA,MACjB,OAAO;AAAA,MACP,CAACC,EAAW,KAAK,GAAG;AAAA,IACtB;AAEO,WAAAC;AAAA;AAAA,mBAEQ,KAAK,IAAI,aAAa,KAAK,MAAM;AAAA;AAAA,yBAE3BC,EAASH,CAAU,CAAC;AAAA;AAAA;AAAA;AAAA,uCAIN,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvD;AA1BaH,EACJ,SAASO,EAAUC,CAAK;AACHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAFfV,EAEiB,WAAA,QAAA,CAAA;AACAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAHfV,EAGiB,WAAA,UAAA,CAAA;AACAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAJfV,EAIiB,WAAA,eAAA,CAAA;AAJjBA,IAANS,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBX,CAAA;"}

package/dist/components/image-link/jd-image-link.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi_Bold;src:local("Satoshi_Bold"),url(/fonts/satoshi-bold.ttf) format("truetype")}@font-face{font-family:Satoshi_Black;src:local("Satoshi_Black"),url(/fonts/satoshi-black.ttf) format("truetype")}@font-face{font-family:Satoshi_Medium;src:local("Satoshi_Medium"),url(/fonts/satoshi-medium.ttf) format("truetype")}@font-face{font-family:Satoshi_Regular;src:local("Satoshi_Regular"),url(/fonts/satoshi-regular.ttf) format("truetype")}@font-face{font-family:Satoshi_Italic;src:local("Satoshi_Italic"),url(/fonts/satoshi-italic.ttf) format("truetype")}:host{display:inline-block}.link-wrapper{display:flex;flex-direction:column;gap:4px;width:auto}a{color:#3a3a3a;text-decoration:none;background-color:transparent}a:hover{color:#3a3a3a}.title.l{font-family:Satoshi_Italic,sans-serif;font-size:34px;line-height:52px}.title.m,.title.s{font-family:Satoshi_Italic,sans-serif;font-size:28px;line-height:42px}.divider{border-bottom:solid 2px #3a3a3a;height:1px}.description{font-family:Satoshi_Regular,sans-serif;font-size:22px;line-height:32px}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-image-link.scss.js.map

package/dist/components/image-link/jd-image-link.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-image-link.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/link/jd-link.js

@@ -0,0 +1,43 @@
+import { unsafeCSS as f, LitElement as v, html as h } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as l, customElement as m } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import c from "./jd-link.scss.js";
+var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (a, e, p, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(e, p) : e, o = a.length - 1, n; o >= 0; o--)
+    (n = a[o]) && (t = (s ? n(e, p, t) : n(t)) || t);
+  return s && t && d(e, p, t), t;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.href = "", this.target = "_blank", this.description = "";
+  }
+  render() {
+    return h`
+      <div>
+        <a href="${this.href}" target="${this.target}">
+          <div class="link-wrapper">
+            <div class="title">
+              <slot></slot>
+            </div>
+          </div>
+        </a>
+      </div>
+    `;
+  }
+};
+r.styles = f(c);
+i([
+  l({ type: String })
+], r.prototype, "href", 2);
+i([
+  l({ type: String })
+], r.prototype, "target", 2);
+i([
+  l({ type: String })
+], r.prototype, "description", 2);
+r = i([
+  m("jd-link")
+], r);
+export {
+  r as JdLink
+};
+//# sourceMappingURL=jd-link.js.map

package/dist/components/link/jd-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-link.js","sources":["../../../src/components/link/jd-link.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jd-link.scss?inline\";\n\n@customElement(\"jd-link\")\nexport class JdLink extends LitElement {\n  static styles = unsafeCSS(style);\n  @property({ type: String }) href = \"\";\n  @property({ type: String }) target: \"_blank\" | \"_bla\" = \"_blank\";\n  @property({ type: String }) description = \"\";\n\n  render() {\n    return html`\n      <div>\n        <a href=\"${this.href}\" target=\"${this.target}\">\n          <div class=\"link-wrapper\">\n            <div class=\"title\">\n              <slot></slot>\n            </div>\n          </div>\n        </a>\n      </div>\n    `;\n  }\n}\n"],"names":["JdLink","LitElement","html","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAKa,IAAAA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAE8B,KAAA,OAAA,IACqB,KAAA,SAAA,UACd,KAAA,cAAA;AAAA,EAAA;AAAA,EAE1C,SAAS;AACA,WAAAC;AAAA;AAAA,mBAEQ,KAAK,IAAI,aAAa,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUpD;AAnBaF,EACJ,SAASG,EAAUC,CAAK;AACHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAFfN,EAEiB,WAAA,QAAA,CAAA;AACAK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAHfN,EAGiB,WAAA,UAAA,CAAA;AACAK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAJfN,EAIiB,WAAA,eAAA,CAAA;AAJjBA,IAANK,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXP,CAAA;"}

package/dist/components/link/jd-link.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi_Bold;src:local("Satoshi_Bold"),url(/fonts/satoshi-bold.ttf) format("truetype")}@font-face{font-family:Satoshi_Black;src:local("Satoshi_Black"),url(/fonts/satoshi-black.ttf) format("truetype")}@font-face{font-family:Satoshi_Medium;src:local("Satoshi_Medium"),url(/fonts/satoshi-medium.ttf) format("truetype")}@font-face{font-family:Satoshi_Regular;src:local("Satoshi_Regular"),url(/fonts/satoshi-regular.ttf) format("truetype")}@font-face{font-family:Satoshi_Italic;src:local("Satoshi_Italic"),url(/fonts/satoshi-italic.ttf) format("truetype")}:host{display:inline-block}.link-wrapper{display:flex;flex-direction:column;gap:4px;width:auto}a{color:#3a3a3a;text-decoration:none;background-color:transparent}a:hover{color:#3a3a3a;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}.title{font-family:Satoshi_Regular,sans-serif;font-size:22px;line-height:32px}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-link.scss.js.map

package/dist/components/link/jd-link.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-link.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/modal/jd-modal.js

@@ -0,0 +1,86 @@
+import { LitElement as d, html as h, unsafeCSS as u } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as m, customElement as v } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import f from "./jd-modal.scss.js";
+import { SignalWatcher as b } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { classMap as l } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.js";
+import "../header/jd-header.js";
+import "../heading/jd-heading.js";
+import "../icon/jd-icon.js";
+import "../icon-button/jd-icon-button.js";
+import "../image-link/jd-image-link.js";
+import "../link/jd-link.js";
+import "../navigation/jd-navigation.js";
+import "../tag/jd-tag.js";
+import { breakpoint as n } from "../../stores/breakpoint-store.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (i, e, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? w(e, s) : e, p = i.length - 1, c; p >= 0; p--)
+    (c = i[p]) && (t = (o ? c(e, s, t) : c(t)) || t);
+  return o && t && y(e, s, t), t;
+};
+let r = class extends b(d) {
+  constructor() {
+    super(...arguments), this.show = !1, this.type = "default";
+  }
+  render() {
+    const i = {
+      backdrop: !0,
+      hidden: !this.show || n.get() === "s"
+    }, e = {
+      content: !0,
+      [n.get()]: !0,
+      hidden: !this.show
+    }, s = {
+      "btn-close-wrapper": !0,
+      [this.type]: !0,
+      [n.get()]: !0
+    }, o = {
+      "content-body": !0,
+      [n.get()]: !0
+    };
+    return h`<slot name="button" @click=${() => this.show = !0}></slot>
+      <div
+        class=${l(i)}
+        @click=${() => {
+      this.show = !1;
+    }}
+      ></div>
+      <div class=${l(e)}>
+        <div class=${l(s)}>
+          <jd-icon-button
+            iconName="x"
+            color="black"
+            type="borderless"
+            @click=${() => {
+      this.show = !1;
+    }}
+          ></jd-icon-button>
+        </div>
+        <div class="content-wrapper">
+          <slot></slot>
+          <div class="content-header">
+            <slot name="header"></slot>
+          </div>
+          <div class=${l(o)}>
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>`;
+  }
+};
+r.styles = u(f);
+a([
+  m({ type: Boolean })
+], r.prototype, "show", 2);
+a([
+  m({ type: String, reflect: !0 })
+], r.prototype, "type", 2);
+r = a([
+  v("jd-modal")
+], r);
+export {
+  r as JdModal
+};
+//# sourceMappingURL=jd-modal.js.map

package/dist/components/modal/jd-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-modal.js","sources":["../../../src/components/modal/jd-modal.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jd-modal.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"../../components\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\n\n@customElement(\"jd-modal\")\nexport class JdModal extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @property({ type: Boolean }) show = false;\n  @property({ type: String, reflect: true })\n  type: \"default\" | \"header\" = \"default\";\n\n  render() {\n    const backdropClasses = {\n      backdrop: true,\n      hidden: !this.show || breakpoint.get() === \"s\",\n    };\n\n    const contentClasses = {\n      content: true,\n      [breakpoint.get()]: true,\n      hidden: !this.show,\n    };\n\n    const btnCloseClasses = {\n      \"btn-close-wrapper\": true,\n      [this.type]: true,\n      [breakpoint.get()]: true,\n    };\n\n    const contentBodyClasses = {\n      \"content-body\": true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`<slot name=\"button\" @click=${() => (this.show = true)}></slot>\n      <div\n        class=${classMap(backdropClasses)}\n        @click=${() => {\n          this.show = false;\n        }}\n      ></div>\n      <div class=${classMap(contentClasses)}>\n        <div class=${classMap(btnCloseClasses)}>\n          <jd-icon-button\n            iconName=\"x\"\n            color=\"black\"\n            type=\"borderless\"\n            @click=${() => {\n              this.show = false;\n            }}\n          ></jd-icon-button>\n        </div>\n        <div class=\"content-wrapper\">\n          <slot></slot>\n          <div class=\"content-header\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=${classMap(contentBodyClasses)}>\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-modal\": JdModal;\n  }\n}\n"],"names":["JdModal","SignalWatcher","LitElement","backdropClasses","breakpoint","contentClasses","btnCloseClasses","contentBodyClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAsBC,EAAcC,CAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA,GAG+B,KAAA,OAAA,IAEP,KAAA,OAAA;AAAA,EAAA;AAAA,EAE7B,SAAS;AACP,UAAMC,IAAkB;AAAA,MACtB,UAAU;AAAA,MACV,QAAQ,CAAC,KAAK,QAAQC,EAAW,UAAU;AAAA,IAC7C,GAEMC,IAAiB;AAAA,MACrB,SAAS;AAAA,MACT,CAACD,EAAW,IAAI,CAAC,GAAG;AAAA,MACpB,QAAQ,CAAC,KAAK;AAAA,IAChB,GAEME,IAAkB;AAAA,MACtB,qBAAqB;AAAA,MACrB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,CAACF,EAAW,KAAK,GAAG;AAAA,IACtB,GAEMG,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAACH,EAAW,KAAK,GAAG;AAAA,IACtB;AAEA,WAAOI,+BAAkC,MAAO,KAAK,OAAO,EAAK;AAAA;AAAA,gBAErDC,EAASN,CAAe,CAAC;AAAA,iBACxB,MAAM;AACb,WAAK,OAAO;AAAA,IACb,CAAA;AAAA;AAAA,mBAEUM,EAASJ,CAAc,CAAC;AAAA,qBACtBI,EAASH,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKzB,MAAM;AACb,WAAK,OAAO;AAAA,IACb,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQUG,EAASF,CAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMnD;AA3DaP,EACJ,SAASU,EAAUC,CAAK;AAEFC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAHhBb,EAGkB,WAAA,QAAA,CAAA;AAE7BY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJ9Bb,EAKX,WAAA,QAAA,CAAA;AALWA,IAANY,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZd,CAAA;"}

package/dist/components/modal/jd-modal.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi_Bold;src:local("Satoshi_Bold"),url(/fonts/satoshi-bold.ttf) format("truetype")}@font-face{font-family:Satoshi_Black;src:local("Satoshi_Black"),url(/fonts/satoshi-black.ttf) format("truetype")}@font-face{font-family:Satoshi_Medium;src:local("Satoshi_Medium"),url(/fonts/satoshi-medium.ttf) format("truetype")}@font-face{font-family:Satoshi_Regular;src:local("Satoshi_Regular"),url(/fonts/satoshi-regular.ttf) format("truetype")}@font-face{font-family:Satoshi_Italic;src:local("Satoshi_Italic"),url(/fonts/satoshi-italic.ttf) format("truetype")}.content{display:flex;background-color:#fff;position:fixed;z-index:1001}.content.s{top:0;left:0;height:100vh;width:100vw}.content.m{top:70px;left:70px;height:calc(100vh - 140px);width:calc(100vw - 140px)}.content.l{top:150px;left:150px;height:calc(100vh - 300px);width:calc(100vw - 300px)}.content.hidden{display:none}.content-wrapper{width:100%;height:inherit;overflow:hidden}.content-header{font-family:Satoshi_Bold,sans-serif;font-size:24px;line-height:42px;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;height:90px}.content-body{font-family:Satoshi_Regular,sans-serif;font-size:22px;line-height:32px;display:flex;padding:40px;overflow-y:auto}.content-body.s{height:calc(100vh - 170px);width:calc(100vw - 80px)}.content-body.m{height:calc(100vh - 230px);width:calc(100vw - 220px)}.content-body.l{height:calc(100vh - 390px);width:calc(100vw - 380px)}.backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999;display:block}.backdrop.hidden{display:none}.btn-close-wrapper{position:absolute;z-index:1000;top:20px;right:20px}.btn-close-wrapper.header.s{top:60px;right:32px}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-modal.scss.js.map

package/dist/components/modal/jd-modal.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/navigation/jd-navigation.js

@@ -0,0 +1,44 @@
+import { LitElement as a, html as l, unsafeCSS as n } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { customElement as v } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import c from "./jd-navigation.scss.js";
+import { SignalWatcher as d } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as f } from "../../stores/breakpoint-store.js";
+import { classMap as u } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.js";
+import "../header/jd-header.js";
+import "../heading/jd-heading.js";
+import "../icon/jd-icon.js";
+import "../icon-button/jd-icon-button.js";
+import "../image-link/jd-image-link.js";
+import "../link/jd-link.js";
+import "../modal/jd-modal.js";
+import "../tag/jd-tag.js";
+var g = Object.getOwnPropertyDescriptor, _ = (r, i, s, m) => {
+  for (var t = m > 1 ? void 0 : m ? g(i, s) : i, o = r.length - 1, p; o >= 0; o--)
+    (p = r[o]) && (t = p(t) || t);
+  return t;
+};
+let e = class extends d(a) {
+  render() {
+    const r = {
+      "navi-wrapper": !0,
+      [f.get()]: !0
+    };
+    return l`
+      <div class=${u(r)}>
+        <slot></slot>
+        <div class="border-slider"></div>
+      </div>
+    `;
+  }
+};
+e.styles = n(c);
+e = _([
+  v("jd-navigation")
+], e);
+export {
+  e as JdNavigation
+};
+//# sourceMappingURL=jd-navigation.js.map

package/dist/components/navigation/jd-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-navigation.js","sources":["../../../src/components/navigation/jd-navigation.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jd-navigation.scss?inline\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"../../components\";\n\n@customElement(\"jd-navigation\")\nexport class JdNavigation extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  render() {\n    const naviWrapperClass = {\n      \"navi-wrapper\": true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`\n      <div class=${classMap(naviWrapperClass)}>\n        <slot></slot>\n        <div class=\"border-slider\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-navigation\": JdNavigation;\n  }\n}\n"],"names":["JdNavigation","SignalWatcher","LitElement","naviWrapperClass","breakpoint","html","classMap","unsafeCSS","style","__decorateClass","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAA2BC,EAAcC,CAAU,EAAE;AAAA,EAG1D,SAAS;AACP,UAAMC,IAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,CAACC,EAAW,KAAK,GAAG;AAAA,IACtB;AAEO,WAAAC;AAAA,mBACQC,EAASH,CAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAM7C;AAhBaH,EACJ,SAASO,EAAUC,CAAK;AADpBR,IAANS,EAAA;AAAA,EADNC,EAAc,eAAe;AAAA,GACjBV,CAAA;"}

package/dist/components/navigation/jd-navigation.scss.js

@@ -0,0 +1,5 @@
+const e = ":host{display:inline-block}.navi-wrapper{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap}.navi-wrapper.s{flex-direction:column;gap:16px;width:100%;align-items:center;margin-top:100px}";
+export {
+  e as default
+};
+//# sourceMappingURL=jd-navigation.scss.js.map

package/dist/components/navigation/jd-navigation.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-navigation.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/tag/jd-tag.js

@@ -0,0 +1,36 @@
+import { unsafeCSS as l, LitElement as a, html as n } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { customElement as v } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import f from "./jd-tag.scss.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.js";
+import "../header/jd-header.js";
+import "../heading/jd-heading.js";
+import "../icon/jd-icon.js";
+import "../icon-button/jd-icon-button.js";
+import "../image-link/jd-image-link.js";
+import "../link/jd-link.js";
+import "../modal/jd-modal.js";
+import "../navigation/jd-navigation.js";
+var c = Object.getOwnPropertyDescriptor, d = (o, m, s, p) => {
+  for (var t = p > 1 ? void 0 : p ? c(m, s) : m, r = o.length - 1, i; r >= 0; r--)
+    (i = o[r]) && (t = i(t) || t);
+  return t;
+};
+let e = class extends a {
+  render() {
+    return n`
+      <div class="tag-wrapper">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+e.styles = l(f);
+e = d([
+  v("jd-tag")
+], e);
+export {
+  e as JdTag
+};
+//# sourceMappingURL=jd-tag.js.map

package/dist/components/tag/jd-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-tag.js","sources":["../../../src/components/tag/jd-tag.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jd-tag.scss?inline\";\nimport \"../../components\";\n\n@customElement(\"jd-tag\")\nexport class JdTag extends LitElement {\n  static styles = unsafeCSS(style);\n\n  render() {\n    return html`\n      <div class=\"tag-wrapper\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-tag\": JdTag;\n  }\n}\n"],"names":["JdTag","LitElement","html","unsafeCSS","style","__decorateClass","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAMa,IAAAA,IAAN,cAAoBC,EAAW;AAAA,EAGpC,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMX;AAVaF,EACJ,SAASG,EAAUC,CAAK;AADpBJ,IAANK,EAAA;AAAA,EADNC,EAAc,QAAQ;AAAA,GACVN,CAAA;"}

package/dist/components/tag/jd-tag.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi_Bold;src:local("Satoshi_Bold"),url(/fonts/satoshi-bold.ttf) format("truetype")}@font-face{font-family:Satoshi_Black;src:local("Satoshi_Black"),url(/fonts/satoshi-black.ttf) format("truetype")}@font-face{font-family:Satoshi_Medium;src:local("Satoshi_Medium"),url(/fonts/satoshi-medium.ttf) format("truetype")}@font-face{font-family:Satoshi_Regular;src:local("Satoshi_Regular"),url(/fonts/satoshi-regular.ttf) format("truetype")}@font-face{font-family:Satoshi_Italic;src:local("Satoshi_Italic"),url(/fonts/satoshi-italic.ttf) format("truetype")}:host{display:inline-block}.tag-wrapper{font-family:Satoshi_Bold,sans-serif;font-size:24px;line-height:42px;display:flex;align-items:center;justify-content:center;padding:0 20px;border-radius:32px;height:64px;border:none;color:#3a3a3a;background-color:#f3f3f3}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-tag.scss.js.map

package/dist/components/tag/jd-tag.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jd-tag.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index.js

@@ -0,0 +1,27 @@
+import { JdButton as t } from "./components/button/jd-button.js";
+import { JdFlash as d } from "./components/flash/jd-flash.js";
+import { JdFooter as f } from "./components/footer/jd-footer.js";
+import { JdHeader as x } from "./components/header/jd-header.js";
+import { JdHeading as a } from "./components/heading/jd-heading.js";
+import { JdIcon as i } from "./components/icon/jd-icon.js";
+import { JdIconButton as I } from "./components/icon-button/jd-icon-button.js";
+import { JdImageLink as k } from "./components/image-link/jd-image-link.js";
+import { JdLink as u } from "./components/link/jd-link.js";
+import { JdModal as F } from "./components/modal/jd-modal.js";
+import { JdNavigation as L } from "./components/navigation/jd-navigation.js";
+import { JdTag as s } from "./components/tag/jd-tag.js";
+export {
+  t as JdButton,
+  d as JdFlash,
+  f as JdFooter,
+  x as JdHeader,
+  a as JdHeading,
+  i as JdIcon,
+  I as JdIconButton,
+  k as JdImageLink,
+  u as JdLink,
+  F as JdModal,
+  L as JdNavigation,
+  s as JdTag
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/stores/breakpoint-store.js

@@ -0,0 +1,13 @@
+import { signal as t } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+const e = t(i(window.innerWidth));
+function i(n) {
+  return n < 600 ? "s" : n < 1024 ? "m" : "l";
+}
+window.addEventListener("resize", () => {
+  const n = i(window.innerWidth);
+  n !== e.get() && e.set(n);
+});
+export {
+  e as breakpoint
+};
+//# sourceMappingURL=breakpoint-store.js.map

package/dist/stores/breakpoint-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint-store.js","sources":["../../src/stores/breakpoint-store.ts"],"sourcesContent":["import { signal } from \"@lit-labs/signals\";\n\nexport const breakpoint = signal<string>(getBreakpoint(window.innerWidth));\n\nfunction getBreakpoint(width: number): string {\n  if (width < 600) return \"s\";\n  if (width < 1024) return \"m\";\n  return \"l\";\n}\n\nwindow.addEventListener(\"resize\", () => {\n  const newBp = getBreakpoint(window.innerWidth);\n  if (newBp !== breakpoint.get()) {\n    breakpoint.set(newBp);\n  }\n});\n"],"names":["breakpoint","signal","getBreakpoint","width","newBp"],"mappings":";AAEO,MAAMA,IAAaC,EAAeC,EAAc,OAAO,UAAU,CAAC;AAEzE,SAASA,EAAcC,GAAuB;AACxC,SAAAA,IAAQ,MAAY,MACpBA,IAAQ,OAAa,MAClB;AACT;AAEA,OAAO,iBAAiB,UAAU,MAAM;AAChC,QAAAC,IAAQF,EAAc,OAAO,UAAU;AACzC,EAAAE,MAAUJ,EAAW,SACvBA,EAAW,IAAII,CAAK;AAExB,CAAC;"}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/eslint.config.js

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+];

package/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="/src/styles/variables.scss" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jo's Designsystem</title>
+  </head>
+  <body>
+    <div
+      style="padding: 20px; display: flex; gap: 10px; flex-direction: column"
+    >
+      Welcome to Jo's Designsystem! Start storybook by "npm run storybook"
+    </div>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@jotyping/jo-designsystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Jo Design System",
+  "version": "0.1.1-alpha",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "Johannes Pfleghar",
+  "homepage": "https://www.joflow.de",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@lit-labs/signals": "^0.1.3",
+    "lit": "^3.2.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/js": "^9.20.0",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/web-components-vite": "^10.1.10",
+    "@types/node": "^24.1.0",
+    "eslint": "^9.20.1",
+    "eslint-plugin-storybook": "^10.1.10",
+    "globals": "^15.15.0",
+    "prettier": "3.5.1",
+    "sass-embedded": "^1.85.0",
+    "storybook": "^10.1.10",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/assets/lit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>