@jotyping/jo-designsystem 0.1.1-alpha

package/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

package/.prettierrc

@@ -0,0 +1 @@
+{}

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import { mergeConfig } from "vite";
+import type { StorybookConfig } from "@storybook/web-components-vite";
+
+const config: StorybookConfig = {
+  framework: {
+    name: "@storybook/web-components-vite",
+    options: {},
+  },
+  stories: ["../src/**/*.stories.@(ts|js)"],
+  addons: ["@storybook/addon-docs"],
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      base: "",
+    });
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/web-components-vite";
+import "../src/styles/variables.scss";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,20 @@
+# Jo's Designsystem
+
+## Single Build
+
+```bash
+npm install
+npm run build
+```
+
+## Run Dev Server
+
+```bash
+npm run dev
+```
+
+## Build+Open Storybook
+
+```bash
+npm run storybook
+```

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

@@ -0,0 +1,42 @@
+import { unsafeCSS as l, LitElement as u, html as f } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as y, customElement as c } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.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";
+import "../tag/jd-tag.js";
+import a from "./jd-button.scss.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (i, r, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(r, p) : r, m = i.length - 1, s; m >= 0; m--)
+    (s = i[m]) && (t = (o ? s(r, p, t) : s(t)) || t);
+  return o && t && v(r, p, t), t;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.type = "primary";
+  }
+  render() {
+    return f`
+      <button class=${this.type}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+e.styles = l(a);
+n([
+  y({ type: String })
+], e.prototype, "type", 2);
+e = n([
+  c("jd-button")
+], e);
+export {
+  e as JdButton
+};
+//# sourceMappingURL=jd-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jd-button.js","sources":["../../../src/components/button/jd-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"../../components\";\nimport style from \"./jd-button.scss?inline\";\n\n@customElement(\"jd-button\")\nexport class JdButton extends LitElement {\n  static styles = unsafeCSS(style);\n\n  /**\n   * Button type, can be \"primary\" or \"secondary\".\n   */\n  @property({ type: String }) type: \"primary\" | \"secondary\" = \"primary\";\n\n  render() {\n    return html`\n      <button class=${this.type}>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-button\": JdButton;\n  }\n}\n"],"names":["JdButton","LitElement","html","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAMa,IAAAA,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMuD,KAAA,OAAA;AAAA,EAAA;AAAA,EAE5D,SAAS;AACA,WAAAC;AAAA,sBACW,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,EAAA;AAK/B;AAfaF,EACJ,SAASG,EAAUC,CAAK;AAKHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GANfN,EAMiB,WAAA,QAAA,CAAA;AANjBA,IAANK,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbP,CAAA;"}

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

@@ -0,0 +1,5 @@
+const o = '@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}:host([active]) button.primary{color:#3a3a3a;background-color:#fff}:host([active]) button.secondary{color:#3a3a3a;background-color:#fff;outline:3px solid #3a3a3a;outline-offset:-3px}:host([active]) button.secondary:hover{outline:4px solid #3a3a3a;outline-offset:-4px}button{font-family:Satoshi_Bold,sans-serif;font-size:24px;line-height:42px;padding:0 20px;border-radius:28px;cursor:pointer;transition:background-color .3s;height:56px;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button.primary{color:#3a3a3a;background-color:#fff;outline:3px solid #3a3a3a;outline-offset:-3px}button.primary:hover{outline:4px solid #3a3a3a;outline-offset:-4px}button.secondary{color:#3a3a3a;background-color:#fff;outline:1px solid #f3f3f3;outline-offset:-1px}button.secondary:hover{outline:3px solid #f3f3f3;outline-offset:-3px}';
+export {
+  o as default
+};
+//# sourceMappingURL=jd-button.scss.js.map

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

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

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

@@ -0,0 +1,74 @@
+import { LitElement as h, html as u, unsafeCSS as f } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as n, customElement as d } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import v from "./jd-flash.scss.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 "../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";
+import "../tag/jd-tag.js";
+import { SignalWatcher as y } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as c } from "../../stores/breakpoint-store.js";
+var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (s, r, i, p) => {
+  for (var t = p > 1 ? void 0 : p ? z(r, i) : r, m = s.length - 1, a; m >= 0; m--)
+    (a = s[m]) && (t = (p ? a(r, i, t) : a(t)) || t);
+  return p && t && g(r, i, t), t;
+};
+let o = class extends y(h) {
+  constructor() {
+    super(...arguments), this.size = "auto", this.color = "red", this.iconPosition = "bottom", this.iconName = "fire";
+  }
+  render() {
+    const s = {
+      "flash-wrapper": !0,
+      "upside-down": this.iconPosition === "top"
+    }, r = {
+      "title-wrapper": !0,
+      [this.size === "auto" ? c.get() : this.size]: !0,
+      [this.color]: !0
+    }, i = {
+      "icon-wrapper": !0,
+      [this.size === "auto" ? c.get() : this.size]: !0
+    };
+    return u`
+      <div class=${l(s)}>
+        <div class=${l(r)}>
+          <slot name="title"></slot>
+        </div>
+        <div class=${l(i)}>
+          <jd-icon
+            iconName=${this.iconName}
+            color=${this.color}
+            size=${this.size === "s" || c.get() === "s" ? "48px" : "72px"}
+          ></jd-icon>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = f(v);
+e([
+  n({ type: String })
+], o.prototype, "size", 2);
+e([
+  n({ type: String })
+], o.prototype, "color", 2);
+e([
+  n({ type: String })
+], o.prototype, "iconPosition", 2);
+e([
+  n({ type: String })
+], o.prototype, "iconName", 2);
+o = e([
+  d("jd-flash")
+], o);
+export {
+  o as JdFlash
+};
+//# sourceMappingURL=jd-flash.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jd-flash.js","sources":["../../../src/components/flash/jd-flash.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jd-flash.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"../../components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\n\n@customElement(\"jd-flash\")\nexport class JdFlash extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @property({ type: String }) size: \"s\" | \"m\" | \"l\" | \"auto\" = \"auto\";\n  @property({ type: String }) color: \"red\" | \"purple\" | \"blue\" = \"red\";\n  @property({ type: String }) iconPosition: \"top\" | \"bottom\" = \"bottom\";\n  @property({ type: String }) iconName:\n    | \"fire\"\n    | \"puzzle\"\n    | \"lightning\"\n    | \"arrow-right\"\n    | \"arrow-circle-left\"\n    | \"burger-menu\"\n    | \"chat\" = \"fire\";\n\n  render() {\n    const flashWrapperClasses = {\n      \"flash-wrapper\": true,\n      \"upside-down\": this.iconPosition === \"top\",\n    };\n\n    const titleWrapperClasses = {\n      \"title-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n      [this.color]: true,\n    };\n\n    const iconWrapperClasses = {\n      \"icon-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n    };\n\n    return html`\n      <div class=${classMap(flashWrapperClasses)}>\n        <div class=${classMap(titleWrapperClasses)}>\n          <slot name=\"title\"></slot>\n        </div>\n        <div class=${classMap(iconWrapperClasses)}>\n          <jd-icon\n            iconName=${this.iconName}\n            color=${this.color}\n            size=${this.size === \"s\" || breakpoint.get() === \"s\"\n              ? \"48px\"\n              : \"72px\"}\n          ></jd-icon>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-flash\": JdFlash;\n  }\n}\n"],"names":["JdFlash","SignalWatcher","LitElement","flashWrapperClasses","titleWrapperClasses","breakpoint","iconWrapperClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAsBC,EAAcC,CAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGwD,KAAA,OAAA,QACE,KAAA,QAAA,OACF,KAAA,eAAA,UAQhD,KAAA,WAAA;AAAA,EAAA;AAAA,EAEb,SAAS;AACP,UAAMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,eAAe,KAAK,iBAAiB;AAAA,IACvC,GAEMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,CAAC,KAAK,SAAS,SAASC,EAAW,QAAQ,KAAK,IAAI,GAAG;AAAA,MACvD,CAAC,KAAK,KAAK,GAAG;AAAA,IAChB,GAEMC,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAAC,KAAK,SAAS,SAASD,EAAW,IAAI,IAAI,KAAK,IAAI,GAAG;AAAA,IACzD;AAEO,WAAAE;AAAA,mBACQC,EAASL,CAAmB,CAAC;AAAA,qBAC3BK,EAASJ,CAAmB,CAAC;AAAA;AAAA;AAAA,qBAG7BI,EAASF,CAAkB,CAAC;AAAA;AAAA,uBAE1B,KAAK,QAAQ;AAAA,oBAChB,KAAK,KAAK;AAAA,mBACX,KAAK,SAAS,OAAOD,EAAW,UAAU,MAC7C,SACA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMtB;AAjDaL,EACJ,SAASS,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAHfZ,EAGiB,WAAA,QAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAJfZ,EAIiB,WAAA,SAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GALfZ,EAKiB,WAAA,gBAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GANfZ,EAMiB,WAAA,YAAA,CAAA;AANjBA,IAANW,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZb,CAAA;"}

package/dist/components/flash/jd-flash.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}.flash-wrapper{display:flex;flex-direction:column;gap:15px}.flash-wrapper.upside-down{flex-direction:column-reverse}.title-wrapper.m,.title-wrapper.l{font-family:Satoshi_Italic,sans-serif;font-size:46px;line-height:50px}.title-wrapper.s{font-family:Satoshi_Italic,sans-serif;font-size:34px;line-height:36px}.title-wrapper.red{color:#ff4d2a}.title-wrapper.purple{color:#bf2aff}.title-wrapper.blue{color:#2a91ff}.icon-wrapper{color:#3a3a3a}.icon-wrapper.m,.icon-wrapper.l{width:72px;height:72px}.icon-wrapper.s{width:52px;height:52px}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-flash.scss.js.map

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

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

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

@@ -0,0 +1,50 @@
+import { LitElement as d, nothing as s, html as e, unsafeCSS as c } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { customElement as f } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import j from "./jd-footer.scss.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.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";
+import "../tag/jd-tag.js";
+import { SignalWatcher as u } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as i } from "../../stores/breakpoint-store.js";
+import { classMap as g } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+var v = Object.getOwnPropertyDescriptor, k = (t, n, a, p) => {
+  for (var r = p > 1 ? void 0 : p ? v(n, a) : n, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (r = l(r) || r);
+  return r;
+};
+let m = class extends u(d) {
+  render() {
+    const t = {
+      "footer-wrapper": !0,
+      [i.get()]: !0
+    };
+    return e`
+      <div class=${g(t)}>
+        <jd-modal>
+          <jd-link slot="button">Impressum</jd-link>
+          <div>Impressum content</div>
+        </jd-modal>
+        ${i.get() !== "s" ? e`<jd-icon iconName="circle"></jd-icon>` : s}
+        <jd-link href="#" target="_blank">Github</jd-link>
+        ${i.get() !== "s" ? e`<jd-icon iconName="circle"></jd-icon>` : s}
+        <jd-link href="#" target="_blank">Contact</jd-link>
+      </div>
+    `;
+  }
+};
+m.styles = c(j);
+m = k([
+  f("jd-footer")
+], m);
+export {
+  m as JdFooter
+};
+//# sourceMappingURL=jd-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jd-footer.js","sources":["../../../src/components/footer/jd-footer.ts"],"sourcesContent":["import { LitElement, html, nothing, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jd-footer.scss?inline\";\nimport \"../../components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n@customElement(\"jd-footer\")\nexport class JdFooter extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  render() {\n    const footerWrapperClass = {\n      \"footer-wrapper\": true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`\n      <div class=${classMap(footerWrapperClass)}>\n        <jd-modal>\n          <jd-link slot=\"button\">Impressum</jd-link>\n          <div>Impressum content</div>\n        </jd-modal>\n        ${breakpoint.get() !== \"s\"\n          ? html`<jd-icon iconName=\"circle\"></jd-icon>`\n          : nothing}\n        <jd-link href=\"#\" target=\"_blank\">Github</jd-link>\n        ${breakpoint.get() !== \"s\"\n          ? html`<jd-icon iconName=\"circle\"></jd-icon>`\n          : nothing}\n        <jd-link href=\"#\" target=\"_blank\">Contact</jd-link>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-footer\": JdFooter;\n  }\n}\n"],"names":["JdFooter","SignalWatcher","LitElement","footerWrapperClass","breakpoint","html","classMap","nothing","unsafeCSS","style","__decorateClass","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAuBC,EAAcC,CAAU,EAAE;AAAA,EAGtD,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,kBAAkB;AAAA,MAClB,CAACC,EAAW,KAAK,GAAG;AAAA,IACtB;AAEO,WAAAC;AAAA,mBACQC,EAASH,CAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAKrCC,EAAW,IAAU,MAAA,MACnBC,2CACAE,CAAO;AAAA;AAAA,UAETH,EAAW,IAAU,MAAA,MACnBC,2CACAE,CAAO;AAAA;AAAA;AAAA;AAAA,EAAA;AAKnB;AA1BaP,EACJ,SAASQ,EAAUC,CAAK;AADpBT,IAANU,EAAA;AAAA,EADNC,EAAc,WAAW;AAAA,GACbX,CAAA;"}

package/dist/components/footer/jd-footer.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:block}.footer-wrapper{display:flex;justify-content:start;border-top:2px solid #3a3a3a;font-family:Satoshi_Regular,sans-serif;font-size:22px;line-height:32px}.footer-wrapper.s{flex-direction:column;justify-content:center;width:calc(100% - 64px);margin:0 32px;height:140px}.footer-wrapper.m{flex-direction:row;align-items:center;width:calc(100% - 80px);margin:0 40px;height:78px}.footer-wrapper.l{flex-direction:row;align-items:center;width:calc(100% - 192px);margin:0 96px;height:94px}.dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:#3a3a3a}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-footer.scss.js.map

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

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

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

@@ -0,0 +1,69 @@
+import { LitElement as n, nothing as c, html as s, unsafeCSS as h } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { state as v, customElement as u } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import f from "./jd-header.scss.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.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";
+import "../tag/jd-tag.js";
+import { SignalWatcher as w } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as i } from "../../stores/breakpoint-store.js";
+import { classMap as g } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+var j = Object.defineProperty, M = Object.getOwnPropertyDescriptor, m = (t, r, l, e) => {
+  for (var o = e > 1 ? void 0 : e ? M(r, l) : r, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (o = (e ? d(r, l, o) : d(o)) || o);
+  return e && o && j(r, l, o), o;
+};
+let a = class extends w(n) {
+  constructor() {
+    super(...arguments), this.showModal = !1;
+  }
+  render() {
+    const t = {
+      "header-wrapper": !0,
+      [i.get()]: !0
+    };
+    return s`
+      <div class=${g(t)}>
+        <div class="logo">joflow</div>
+        ${i.get() !== "s" ? s`<div>
+              <slot></slot>
+            </div>` : s`<div class="burger-wrapper">
+              <jd-icon-button
+                iconName="burger-menu"
+                @click=${() => {
+      this.showModal = !this.showModal, console.log("Modal state:", this.showModal);
+    }}
+              ></jd-icon-button>
+            </div>`}
+        ${i.get() === "l" ? s`<div class="empty-div-desktop"></div>` : c}
+      </div>
+      <jd-modal
+        type="header"
+        .show=${this.showModal && i.get() === "s"}
+        id="modal"
+      >
+        <div class="nav-wrapper">
+          <slot></slot>
+        </div>
+      </jd-modal>
+    `;
+  }
+};
+a.styles = h(f);
+m([
+  v()
+], a.prototype, "showModal", 2);
+a = m([
+  u("jd-header")
+], a);
+export {
+  a as JdHeader
+};
+//# sourceMappingURL=jd-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jd-header.js","sources":["../../../src/components/header/jd-header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport style from \"./jd-header.scss?inline\";\nimport \"../../components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n@customElement(\"jd-header\")\nexport class JdHeader extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @state() private showModal = false;\n\n  render() {\n    const headerWrapperClass = {\n      \"header-wrapper\": true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`\n      <div class=${classMap(headerWrapperClass)}>\n        <div class=\"logo\">joflow</div>\n        ${breakpoint.get() !== \"s\"\n          ? html`<div>\n              <slot></slot>\n            </div>`\n          : html`<div class=\"burger-wrapper\">\n              <jd-icon-button\n                iconName=\"burger-menu\"\n                @click=${() => {\n                  this.showModal = !this.showModal;\n                  console.log(\"Modal state:\", this.showModal);\n                }}\n              ></jd-icon-button>\n            </div>`}\n        ${breakpoint.get() === \"l\"\n          ? html`<div class=\"empty-div-desktop\"></div>`\n          : nothing}\n      </div>\n      <jd-modal\n        type=\"header\"\n        .show=${this.showModal && breakpoint.get() === \"s\"}\n        id=\"modal\"\n      >\n        <div class=\"nav-wrapper\">\n          <slot></slot>\n        </div>\n      </jd-modal>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-header\": JdHeader;\n  }\n}\n"],"names":["JdHeader","SignalWatcher","LitElement","headerWrapperClass","breakpoint","html","classMap","nothing","unsafeCSS","style","__decorateClass","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAuBC,EAAcC,CAAU,EAAE;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGI,KAAQ,YAAY;AAAA,EAAA;AAAA,EAE7B,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,kBAAkB;AAAA,MAClB,CAACC,EAAW,KAAK,GAAG;AAAA,IACtB;AAEO,WAAAC;AAAA,mBACQC,EAASH,CAAkB,CAAC;AAAA;AAAA,UAErCC,EAAW,UAAU,MACnBC;AAAA;AAAA,sBAGAA;AAAA;AAAA;AAAA,yBAGa,MAAM;AACR,WAAA,YAAY,CAAC,KAAK,WACf,QAAA,IAAI,gBAAgB,KAAK,SAAS;AAAA,IAC3C,CAAA;AAAA;AAAA,mBAEE;AAAA,UACTD,EAAW,IAAU,MAAA,MACnBC,2CACAE,CAAO;AAAA;AAAA;AAAA;AAAA,gBAIH,KAAK,aAAaH,EAAW,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAS1D;AA1CaJ,EACJ,SAASQ,EAAUC,CAAK;AAEdC,EAAA;AAAA,EAAhBC,EAAM;AAAA,GAHIX,EAGM,WAAA,aAAA,CAAA;AAHNA,IAANU,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbZ,CAAA;"}

package/dist/components/header/jd-header.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:block}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.header-wrapper.s{width:calc(100% - 64px);margin:0 32px}.header-wrapper.m{width:calc(100% - 80px);margin:0 40px}.header-wrapper.l{width:calc(100% - 192px);margin:0 96px}.burger-wrapper{display:flex;align-items:center;justify-content:center}.nav-wrapper{width:100%;display:flex;justify-content:center;padding-bottom:100px}.empty-div-desktop{width:88px}.logo{font-family:Satoshi_Black,sans-serif;font-size:30px;line-height:168px;color:#3a3a3a;cursor:pointer}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-header.scss.js.map

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

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

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

@@ -0,0 +1,63 @@
+import { LitElement as u, html as v, unsafeCSS as c } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as d, customElement as f } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import h from "./jd-heading.scss.js";
+import { classMap as m } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+import { SignalWatcher as g } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as a } from "../../stores/breakpoint-store.js";
+import "../button/jd-button.js";
+import "../flash/jd-flash.js";
+import "../footer/jd-footer.js";
+import "../header/jd-header.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";
+import "../tag/jd-tag.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, t, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? w(t, o) : t, p = r.length - 1, l; p >= 0; p--)
+    (l = r[p]) && (e = (i ? l(t, o, e) : l(e)) || e);
+  return i && e && b(t, o, e), e;
+};
+let s = class extends g(u) {
+  constructor() {
+    super(...arguments), this.size = "auto";
+  }
+  render() {
+    const r = {
+      "title-wrapper": !0,
+      [this.size === "auto" ? a.get() : this.size]: !0
+    }, t = {
+      "subtitle-wrapper": !0,
+      [this.size === "auto" ? a.get() : this.size]: !0
+    };
+    return v`
+      <div class="heading-wrapper">
+        <div class=${m(r)}>
+          <slot name="title-line-one"></slot>
+          <div class="title-line-two-wrapper">
+            <slot name="title-line-two"></slot>
+            <div class=${m(t)}>
+              <slot name="subtitle-right"></slot>
+            </div>
+          </div>
+        </div>
+        <div class=${m(t)}>
+          <slot name="subtitle-bottom"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = c(h);
+n([
+  d({ type: String })
+], s.prototype, "size", 2);
+s = n([
+  f("jd-heading")
+], s);
+export {
+  s as JdHeading
+};
+//# sourceMappingURL=jd-heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jd-heading.js","sources":["../../../src/components/heading/jd-heading.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jd-heading.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport \"../../components\";\n\n@customElement(\"jd-heading\")\nexport class JdHeading extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @property({ type: String }) size: \"l\" | \"m\" | \"s\" | \"auto\" = \"auto\";\n\n  render() {\n    const titleWrapperClasses = {\n      \"title-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n    };\n\n    const subTitleWrapperClasses = {\n      \"subtitle-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n    };\n\n    return html`\n      <div class=\"heading-wrapper\">\n        <div class=${classMap(titleWrapperClasses)}>\n          <slot name=\"title-line-one\"></slot>\n          <div class=\"title-line-two-wrapper\">\n            <slot name=\"title-line-two\"></slot>\n            <div class=${classMap(subTitleWrapperClasses)}>\n              <slot name=\"subtitle-right\"></slot>\n            </div>\n          </div>\n        </div>\n        <div class=${classMap(subTitleWrapperClasses)}>\n          <slot name=\"subtitle-bottom\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-heading\": JdHeading;\n  }\n}\n"],"names":["JdHeading","SignalWatcher","LitElement","titleWrapperClasses","breakpoint","subTitleWrapperClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAwBC,EAAcC,CAAU,EAAE;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGwD,KAAA,OAAA;AAAA,EAAA;AAAA,EAE7D,SAAS;AACP,UAAMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,CAAC,KAAK,SAAS,SAASC,EAAW,IAAI,IAAI,KAAK,IAAI,GAAG;AAAA,IACzD,GAEMC,IAAyB;AAAA,MAC7B,oBAAoB;AAAA,MACpB,CAAC,KAAK,SAAS,SAASD,EAAW,IAAI,IAAI,KAAK,IAAI,GAAG;AAAA,IACzD;AAEO,WAAAE;AAAA;AAAA,qBAEUC,EAASJ,CAAmB,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIzBI,EAASF,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKpCE,EAASF,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMrD;AAjCaL,EACJ,SAASQ,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAHfX,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANU,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdZ,CAAA;"}

package/dist/components/heading/jd-heading.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}.heading-wrapper{display:flex;flex-direction:column;gap:32px}.title-wrapper{color:#3a3a3a;display:flex;flex-direction:column;gap:0px}.title-wrapper.l{font-family:Satoshi_Black,sans-serif;font-size:130px;line-height:112px}.title-wrapper.m{font-family:Satoshi_Black,sans-serif;font-size:100px;line-height:90px}.title-wrapper.s{font-family:Satoshi_Black,sans-serif;font-size:80px;line-height:72px}.subtitle-wrapper{color:#3a3a3a}.subtitle-wrapper.l{font-family:Satoshi_Italic,sans-serif;font-size:60px;line-height:64px}.subtitle-wrapper.m{font-family:Satoshi_Italic,sans-serif;font-size:46px;line-height:50px}.subtitle-wrapper.s{font-family:Satoshi_Italic,sans-serif;font-size:34px;line-height:36px}.title-line-two-wrapper{display:flex;flex-direction:row;gap:30px;align-items:baseline}';
+export {
+  t as default
+};
+//# sourceMappingURL=jd-heading.scss.js.map

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

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

package/dist/components/icon/icon-data.js

@@ -0,0 +1,47 @@
+const o = {
+  fire: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
+    </svg>`,
+  lightning: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+</svg>
+`,
+  chat: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
+</svg>
+`,
+  puzzle: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
+</svg>
+`,
+  "arrow-circle-left": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+`,
+  "arrow-right": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>
+`,
+  "burger-menu": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 8h12M6 16h12" />
+</svg>
+`,
+  x: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>
+`,
+  circle: `<svg
+        width="8"
+        height="8"
+        viewBox="0 0 8 8"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="4" cy="4" r="4" fill="currentColor" />
+      </svg>
+`
+};
+export {
+  o as icons
+};
+//# sourceMappingURL=icon-data.js.map

package/dist/components/icon/icon-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-data.js","sources":["../../../src/components/icon/icon-data.ts"],"sourcesContent":["const icons = {\n  fire: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z\" />\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z\" />\n    </svg>`,\n  lightning: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\" />\n</svg>\n`,\n  chat: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z\" />\n</svg>\n`,\n  puzzle: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z\" />\n</svg>\n`,\n  \"arrow-circle-left\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n</svg>\n`,\n  \"arrow-right\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\" />\n</svg>\n`,\n  \"burger-menu\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.6\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 8h12M6 16h12\" />\n</svg>\n`,\n  x: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n</svg>\n`,\n  circle: `<svg\n        width=\"8\"\n        height=\"8\"\n        viewBox=\"0 0 8 8\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n`,\n};\n\nexport { icons };\n"],"names":["icons"],"mappings":"AAAA,MAAMA,IAAQ;AAAA,EACZ,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,WAAW;AAAA;AAAA;AAAA;AAAA,EAIX,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIR,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAIrB,eAAe;AAAA;AAAA;AAAA;AAAA,EAIf,eAAe;AAAA;AAAA;AAAA;AAAA,EAIf,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV;"}

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

@@ -0,0 +1,58 @@
+import { unsafeCSS as l, LitElement as a, html as f } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/index.js";
+import { property as c, customElement as h } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/decorators.js";
+import { icons as u } from "./icon-data.js";
+import y from "./jd-icon.scss.js";
+import { classMap as v } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/class-map.js";
+import { unsafeHTML as _ } from "/Users/jo/Documents/dev/Web/027 jo-ds/jd/node_modules/lit/directives/unsafe-html.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-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";
+import "../tag/jd-tag.js";
+var d = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (o, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? g(e, s) : e, m = o.length - 1, n; m >= 0; m--)
+    (n = o[m]) && (r = (i ? n(e, s, r) : n(r)) || r);
+  return i && r && d(e, s, r), r;
+};
+let t = class extends a {
+  constructor() {
+    super(...arguments), this.iconName = "fire", this.size = "48px", this.color = "black";
+  }
+  render() {
+    const o = {
+      "icon-wrapper": !0,
+      [this.color]: !0
+    };
+    return f`
+      <div
+        class=${v(o)}
+        style="height: ${this.size}; width: ${this.size};"
+      >
+        ${_(u[this.iconName])}
+      </div>
+    `;
+  }
+};
+t.styles = l(y);
+p([
+  c({ type: String })
+], t.prototype, "iconName", 2);
+p([
+  c({ type: String })
+], t.prototype, "size", 2);
+p([
+  c({ type: String })
+], t.prototype, "color", 2);
+t = p([
+  h("jd-icon")
+], t);
+export {
+  t as JdIcon
+};
+//# sourceMappingURL=jd-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jd-icon.js","sources":["../../../src/components/icon/jd-icon.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { icons } from \"./icon-data.ts\";\nimport style from \"./jd-icon.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport \"../../components\";\n\nexport type IconName =\n  | \"circle\"\n  | \"x\"\n  | \"fire\"\n  | \"puzzle\"\n  | \"lightning\"\n  | \"arrow-right\"\n  | \"arrow-circle-left\"\n  | \"burger-menu\"\n  | \"chat\";\n\n@customElement(\"jd-icon\")\nexport class JdIcon extends LitElement {\n  static styles = unsafeCSS(style);\n\n  @property({ type: String }) iconName: IconName = \"fire\";\n\n  @property({ type: String }) size:\n    | \"72px\"\n    | \"56px\"\n    | \"48px\"\n    | \"40px\"\n    | \"32px\"\n    | \"24px\"\n    | \"16px\" = \"48px\";\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    const iconWrapperClasses = {\n      \"icon-wrapper\": true,\n      [this.color]: true,\n    };\n\n    return html`\n      <div\n        class=${classMap(iconWrapperClasses)}\n        style=\"height: ${this.size}; width: ${this.size};\"\n      >\n        ${unsafeHTML(icons[this.iconName])}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jd-icon\": JdIcon;\n  }\n}\n"],"names":["JdIcon","LitElement","iconWrapperClasses","html","classMap","unsafeHTML","icons","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBa,IAAAA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAG4C,KAAA,WAAA,QASpC,KAAA,OAAA,QAUO,KAAA,QAAA;AAAA,EAAA;AAAA,EAEpB,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAAC,KAAK,KAAK,GAAG;AAAA,IAChB;AAEO,WAAAC;AAAA;AAAA,gBAEKC,EAASF,CAAkB,CAAC;AAAA,yBACnB,KAAK,IAAI,YAAY,KAAK,IAAI;AAAA;AAAA,UAE7CG,EAAWC,EAAM,KAAK,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA,EAAA;AAI1C;AAvCaN,EACJ,SAASO,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAHfV,EAGiB,WAAA,YAAA,CAAA;AAEAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GALfV,EAKiB,WAAA,QAAA,CAAA;AASAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAdfV,EAciB,WAAA,SAAA,CAAA;AAdjBA,IAANS,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXX,CAAA;"}

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

@@ -0,0 +1,5 @@
+const r = ":host{display:inline-block}.icon-wrapper{display:flex;align-items:center;justify-content:center}.icon-wrapper.blue{color:#2a91ff}.icon-wrapper.red{color:#ff4d2a}.icon-wrapper.purple{color:#bf2aff}.icon-wrapper.black{color:#3a3a3a}.icon-wrapper.white{color:#fff}.icon-wrapper.neutral-200{color:#f3f3f3}.icon-wrapper.neutral-400{color:#d5d5d5}.icon-wrapper.neutral-600{color:#898989}";
+export {
+  r as default
+};
+//# sourceMappingURL=jd-icon.scss.js.map

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

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