@whydrf/nava-icon-web-components 1.0.0 → 1.0.2

package/dist/chunk-TLWAY36V.js

@@ -0,0 +1,44 @@
+// src/icons/calendar-week.ts
+var NavaIconCalendarWeek = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M19 4H17V2H15V4H9V2H7V4H5C3.897 4 3 4.897 3 6V20C3 21.103 3.897 22 5 22H19C20.103 22 21 21.103 21 20V6C21 4.897 20.103 4 19 4ZM17 12V14H7V11H17V12ZM19 9H5V7H19V9Z" />` : `<path d="M19 4H16V2H14V4H10V2H8V4H5C3.897 4 3 4.897 3 6V20C3 21.103 3.897 22 5 22H19C20.103 22 21 21.103 21 20V6C21 4.897 20.103 4 19 4ZM5 20V7H19V6L19.002 20H5Z" />
+<path d="M7 10V12H17V9H7V10Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-calendar-week")) {
+  customElements.define("icon-calendar-week", NavaIconCalendarWeek);
+}

package/dist/chunk-TP2NRRWZ.js

@@ -0,0 +1,43 @@
+// src/icons/phone.ts
+var NavaIconPhone = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M20.487 17.14L16.422 13.444C16.2299 13.2693 15.9774 13.1762 15.7178 13.1842C15.4583 13.1922 15.212 13.3008 15.031 13.487L12.638 15.948C12.062 15.838 10.904 15.477 9.71204 14.288C8.52004 13.095 8.15904 11.934 8.05204 11.362L10.511 8.968C10.6975 8.78712 10.8062 8.54082 10.8142 8.2812C10.8222 8.02159 10.7289 7.76904 10.554 7.57699L6.85904 3.51299C6.68408 3.32035 6.44092 3.2035 6.18119 3.18725C5.92146 3.17101 5.66564 3.25665 5.46804 3.42599L3.29804 5.28699C3.12515 5.46051 3.02196 5.69145 3.00804 5.93599C2.99304 6.18599 2.70704 12.108 7.29904 16.702C11.305 20.707 16.323 21 17.705 21C17.907 21 18.031 20.994 18.064 20.992C18.3086 20.9783 18.5394 20.8747 18.712 20.701L20.572 18.53C20.7421 18.333 20.8283 18.0774 20.8124 17.8177C20.7966 17.558 20.6798 17.3148 20.487 17.14Z" />` : `<path d="M17.707 12.293C17.6142 12.2 17.504 12.1263 17.3827 12.076C17.2614 12.0257 17.1314 11.9998 17 11.9998C16.8687 11.9998 16.7387 12.0257 16.6173 12.076C16.496 12.1263 16.3858 12.2 16.293 12.293L14.699 13.887C13.96 13.667 12.581 13.167 11.707 12.293C10.833 11.419 10.333 10.04 10.113 9.30099L11.707 7.70699C11.8 7.6142 11.8737 7.504 11.924 7.38268C11.9743 7.26137 12.0002 7.13132 12.0002 6.99999C12.0002 6.86865 11.9743 6.73861 11.924 6.61729C11.8737 6.49598 11.8 6.38578 11.707 6.29299L7.70703 2.29299C7.61424 2.20004 7.50404 2.1263 7.38272 2.07599C7.26141 2.02568 7.13136 1.99979 7.00003 1.99979C6.8687 1.99979 6.73865 2.02568 6.61734 2.07599C6.49602 2.1263 6.38582 2.20004 6.29303 2.29299L3.58103 5.00499C3.20103 5.38499 2.98703 5.90699 2.99503 6.43999C3.01803 7.86399 3.39503 12.81 7.29303 16.708C11.191 20.606 16.137 20.982 17.562 21.006H17.59C18.118 21.006 18.617 20.798 18.995 20.42L21.707 17.708C21.8 17.6152 21.8737 17.505 21.924 17.3837C21.9743 17.2624 22.0002 17.1323 22.0002 17.001C22.0002 16.8697 21.9743 16.7396 21.924 16.6183C21.8737 16.497 21.8 16.3868 21.707 16.294L17.707 12.293ZM17.58 19.005C16.332 18.984 12.062 18.649 8.70703 15.293C5.34103 11.927 5.01503 7.64199 4.99503 6.41899L7.00003 4.41399L9.58603 6.99999L8.29303 8.29299C8.17549 8.41044 8.08907 8.55533 8.04158 8.71456C7.99409 8.87379 7.98703 9.04234 8.02103 9.20499C8.04503 9.31999 8.63203 12.047 10.292 13.707C11.952 15.367 14.679 15.954 14.794 15.978C14.9566 16.0129 15.1253 16.0064 15.2847 15.9591C15.4441 15.9117 15.589 15.825 15.706 15.707L17 14.414L19.586 17L17.58 19.005Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-phone")) {
+  customElements.define("icon-phone", NavaIconPhone);
+}

package/dist/chunk-TPRYSG73.js

@@ -0,0 +1,43 @@
+// src/icons/quote-alt-right.ts
+var NavaIconQuoteAltRight = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M21.9501 8.721L21.9251 8.553L21.8991 8.559C21.7214 7.72804 21.312 6.96437 20.7184 6.35635C20.1248 5.74833 19.3711 5.32082 18.5446 5.12328C17.7182 4.92574 16.8527 4.96625 16.0483 5.24011C15.2438 5.51397 14.5334 6.00999 13.9992 6.67079C13.4649 7.33159 13.1287 8.13015 13.0294 8.97408C12.9301 9.818 13.0717 10.6728 13.438 11.4396C13.8042 12.2063 14.3801 12.8537 15.099 13.3068C15.8178 13.76 16.6503 14.0003 17.5001 14C17.7231 14 17.9371 13.966 18.1501 13.935C18.0811 14.167 18.0101 14.403 17.8961 14.615C17.7821 14.923 17.6041 15.19 17.4271 15.459C17.2791 15.75 17.0181 15.947 16.8261 16.196C16.6251 16.438 16.3511 16.599 16.1341 16.8C15.9211 17.01 15.6421 17.115 15.4201 17.263C15.1881 17.396 14.9861 17.543 14.7701 17.613L14.2311 17.835L13.7571 18.032L14.2411 19.971L14.8381 19.827C15.0291 19.779 15.2621 19.723 15.5271 19.656C15.7981 19.606 16.0871 19.469 16.4091 19.344C16.7261 19.201 17.0951 19.106 17.4371 18.877C17.7811 18.659 18.1781 18.477 18.5281 18.185C18.8671 17.884 19.2761 17.623 19.5781 17.241C19.9081 16.883 20.2341 16.507 20.4871 16.079C20.7801 15.671 20.9791 15.223 21.1891 14.78C21.3791 14.337 21.5321 13.884 21.6571 13.444C21.8941 12.562 22.0001 11.724 22.0411 11.007C22.0751 10.289 22.0551 9.692 22.0131 9.26C21.999 9.07959 21.978 8.89979 21.9501 8.721ZM10.9501 8.721L10.9251 8.553L10.8991 8.559C10.7214 7.72804 10.312 6.96437 9.71839 6.35635C9.12477 5.74833 8.37112 5.32082 7.54465 5.12328C6.71818 4.92574 5.85267 4.96625 5.04826 5.24011C4.24385 5.51397 3.53342 6.00999 2.99917 6.67079C2.46492 7.33159 2.12869 8.13015 2.02938 8.97408C1.93006 9.818 2.07173 10.6728 2.43799 11.4396C2.80424 12.2063 3.38012 12.8537 4.09898 13.3068C4.81784 13.76 5.6503 14.0003 6.50005 14C6.72305 14 6.93705 13.966 7.15005 13.935C7.08105 14.167 7.01005 14.403 6.89605 14.615C6.78205 14.923 6.60405 15.19 6.42705 15.459C6.27905 15.75 6.01805 15.947 5.82605 16.196C5.62505 16.438 5.35105 16.599 5.13405 16.8C4.92105 17.01 4.64205 17.115 4.42005 17.263C4.18805 17.396 3.98605 17.543 3.77005 17.613L3.23105 17.835C2.93005 17.958 2.75805 18.03 2.75805 18.03L3.24205 19.969L3.83905 19.825C4.03005 19.777 4.26305 19.721 4.52805 19.654C4.79905 19.604 5.08805 19.467 5.41005 19.342C5.72705 19.199 6.09605 19.104 6.43805 18.875C6.78205 18.657 7.17905 18.475 7.52905 18.183C7.86805 17.882 8.27705 17.621 8.57905 17.239C8.90905 16.881 9.23505 16.505 9.48805 16.077C9.78105 15.669 9.98005 15.221 10.1901 14.778C10.3801 14.335 10.5331 13.882 10.6581 13.442C10.8951 12.56 11.0011 11.722 11.0421 11.005C11.0761 10.287 11.0561 9.69 11.0141 9.258C10.9991 9.0783 10.9778 8.89918 10.9501 8.721Z" />` : `<path d="M21.9501 8.721L21.9251 8.553L21.8991 8.559C21.7214 7.72804 21.312 6.96437 20.7184 6.35635C20.1248 5.74833 19.3711 5.32082 18.5446 5.12328C17.7182 4.92574 16.8527 4.96625 16.0483 5.24011C15.2438 5.51397 14.5334 6.00999 13.9992 6.67079C13.4649 7.33159 13.1287 8.13015 13.0294 8.97408C12.9301 9.818 13.0717 10.6728 13.438 11.4396C13.8042 12.2063 14.3801 12.8537 15.099 13.3068C15.8178 13.76 16.6503 14.0003 17.5001 14C17.7231 14 17.9371 13.966 18.1501 13.935C18.0811 14.167 18.0101 14.403 17.8961 14.615C17.7821 14.923 17.6041 15.19 17.4271 15.459C17.2791 15.75 17.0181 15.947 16.8261 16.196C16.6251 16.438 16.3511 16.599 16.1341 16.8C15.9211 17.01 15.6421 17.115 15.4201 17.263C15.1881 17.396 14.9861 17.543 14.7701 17.613L14.2311 17.835L13.7571 18.032L14.2411 19.971L14.8381 19.827C15.0291 19.779 15.2621 19.723 15.5271 19.656C15.7981 19.606 16.0871 19.469 16.4091 19.344C16.7261 19.201 17.0951 19.106 17.4371 18.877C17.7811 18.659 18.1781 18.477 18.5281 18.185C18.8671 17.884 19.2761 17.623 19.5781 17.241C19.9081 16.883 20.2341 16.507 20.4871 16.079C20.7801 15.671 20.9791 15.223 21.1891 14.78C21.3791 14.337 21.5321 13.884 21.6571 13.444C21.8941 12.562 22.0001 11.724 22.0411 11.007C22.0751 10.289 22.0551 9.692 22.0131 9.26C21.999 9.07959 21.978 8.89979 21.9501 8.721ZM10.9501 8.721L10.9251 8.553L10.8991 8.559C10.7214 7.72804 10.312 6.96437 9.71839 6.35635C9.12477 5.74833 8.37112 5.32082 7.54465 5.12328C6.71818 4.92574 5.85267 4.96625 5.04826 5.24011C4.24385 5.51397 3.53342 6.00999 2.99917 6.67079C2.46492 7.33159 2.12869 8.13015 2.02938 8.97408C1.93006 9.818 2.07173 10.6728 2.43799 11.4396C2.80424 12.2063 3.38012 12.8537 4.09898 13.3068C4.81784 13.76 5.6503 14.0003 6.50005 14C6.72305 14 6.93705 13.966 7.15005 13.935C7.08105 14.167 7.01005 14.403 6.89605 14.615C6.78205 14.923 6.60405 15.19 6.42705 15.459C6.27905 15.75 6.01805 15.947 5.82605 16.196C5.62505 16.438 5.35105 16.599 5.13405 16.8C4.92105 17.01 4.64205 17.115 4.42005 17.263C4.18805 17.396 3.98605 17.543 3.77005 17.613L3.23105 17.835C2.93005 17.958 2.75805 18.03 2.75805 18.03L3.24205 19.969L3.83905 19.825C4.03005 19.777 4.26305 19.721 4.52805 19.654C4.79905 19.604 5.08805 19.467 5.41005 19.342C5.72705 19.199 6.09605 19.104 6.43805 18.875C6.78205 18.657 7.17905 18.475 7.52905 18.183C7.86805 17.882 8.27705 17.621 8.57905 17.239C8.90905 16.881 9.23505 16.505 9.48805 16.077C9.78105 15.669 9.98005 15.221 10.1901 14.778C10.3801 14.335 10.5331 13.882 10.6581 13.442C10.8951 12.56 11.0011 11.722 11.0421 11.005C11.0761 10.287 11.0561 9.69 11.0141 9.258C10.9991 9.0783 10.9778 8.89918 10.9501 8.721Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-quote-alt-right")) {
+  customElements.define("icon-quote-alt-right", NavaIconQuoteAltRight);
+}

package/dist/chunk-TSH5N34L.js

@@ -0,0 +1,43 @@
+// src/icons/donate-blood.ts
+var NavaIconDonateBlood = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M17.726 13.02L14 16H9V15H13.065C13.1554 15 13.2442 14.9754 13.3218 14.9289C13.3993 14.8824 13.4629 14.8157 13.5055 14.736C13.5482 14.6563 13.5685 14.5664 13.5642 14.4761C13.5598 14.3858 13.5311 14.2983 13.481 14.223L12.593 12.891C12.4108 12.6168 12.1636 12.392 11.8735 12.2365C11.5833 12.081 11.2592 11.9998 10.93 12H3C2.73478 12 2.48043 12.1054 2.29289 12.2929C2.10536 12.4804 2 12.7348 2 13V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H13.639C14.0666 21.0001 14.4893 20.9088 14.8787 20.7322C15.2682 20.5556 15.6153 20.2977 15.897 19.976L22 13L20.548 12.516C20.073 12.3576 19.5658 12.3208 19.0729 12.4089C18.5799 12.4969 18.1169 12.707 17.726 13.02ZM15.403 12C16.1986 12 16.9617 11.6839 17.5243 11.1213C18.0869 10.5587 18.403 9.79565 18.403 9C18.403 6.292 15.403 3 15.403 3C15.403 3 12.403 6.271 12.403 9C12.403 9.79565 12.7191 10.5587 13.2817 11.1213C13.8443 11.6839 14.6074 12 15.403 12Z" />` : `<path d="M4 21H13.62C14.1971 21.0003 14.7674 20.8756 15.2916 20.6344C15.8159 20.3933 16.2817 20.0414 16.657 19.603L21.759 13.651C21.8658 13.5266 21.9404 13.3778 21.9762 13.2178C22.012 13.0577 22.0079 12.8913 21.9642 12.7333C21.9206 12.5752 21.8387 12.4303 21.7258 12.3113C21.6129 12.1923 21.4726 12.1029 21.317 12.051L19.349 11.395C18.8734 11.2404 18.3669 11.2054 17.8745 11.2931C17.3821 11.3809 16.919 11.5886 16.526 11.898L13.341 14.445L12.724 13.21C12.3935 12.5443 11.8831 11.9844 11.2507 11.5938C10.6184 11.2032 9.88926 10.9975 9.146 11H4C2.897 11 2 11.897 2 13V19C2 20.103 2.897 21 4 21ZM4 13H9.146C9.909 13 10.594 13.423 10.935 14.105L11.382 15H7V17H13.014C13.1679 16.998 13.3191 16.9603 13.456 16.89L13.459 16.889L13.463 16.887H13.466L13.468 16.886H13.472L13.473 16.885C13.484 16.888 13.476 16.884 13.476 16.884C13.488 16.884 13.478 16.883 13.478 16.883H13.479L13.481 16.882L13.484 16.881L13.486 16.88L13.488 16.879L13.491 16.878L13.493 16.877L13.495 16.876L13.498 16.874L13.5 16.873L13.502 16.872L13.505 16.871L13.507 16.87H13.508L13.51 16.869L13.513 16.868L13.515 16.867C13.526 16.866 13.518 16.866 13.518 16.866L13.52 16.865C13.5585 16.8417 13.5953 16.8157 13.63 16.787L17.776 13.47C18.037 13.262 18.399 13.197 18.716 13.303L19.273 13.489L15.14 18.312C14.9499 18.5279 14.716 18.7009 14.454 18.8195C14.1919 18.9381 13.9077 18.9996 13.62 19H4V13ZM13.761 2.32601C13.3 2.83201 11 5.45701 11 7.50001C11 9.43001 12.57 11 14.5 11C16.43 11 18 9.43001 18 7.50001C18 5.45701 15.7 2.83201 15.239 2.32601C14.86 1.91001 14.14 1.91001 13.761 2.32601ZM16 7.50001C16 8.32701 15.327 9.00001 14.5 9.00001C13.673 9.00001 13 8.32701 13 7.50001C13 6.79201 13.738 5.56601 14.5 4.56601C15.262 5.56601 16 6.79201 16 7.50001Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-donate-blood")) {
+  customElements.define("icon-donate-blood", NavaIconDonateBlood);
+}

package/dist/chunk-TUEHSIQJ.js

@@ -0,0 +1,43 @@
+// src/icons/music.ts
+var NavaIconMusic = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M6 18.573C8.206 18.573 10 16.779 10 14.573V4.428L19 7.7V15.13C18.3949 14.7695 17.7044 14.5772 17 14.573C14.794 14.573 13 16.367 13 18.573C13 20.779 14.794 22.573 17 22.573C19.206 22.573 21 20.779 21 18.573V7C21.0001 6.79483 20.937 6.5946 20.8193 6.42658C20.7016 6.25855 20.5349 6.1309 20.342 6.061L9.342 2.061C9.19099 2.0058 9.02889 1.98786 8.86947 2.00871C8.71005 2.02955 8.55801 2.08857 8.42627 2.18075C8.29454 2.27292 8.187 2.39553 8.11279 2.53816C8.03857 2.68079 7.99988 2.83922 8 3V11.13C7.39487 10.7695 6.70439 10.5772 6 10.573C3.794 10.573 2 12.367 2 14.573C2 16.779 3.794 18.573 6 18.573Z" />` : `<path d="M19.684 5.821L10.684 2.549C10.3819 2.43856 10.0576 2.40269 9.73869 2.44443C9.41977 2.48618 9.11563 2.6043 8.85214 2.78877C8.58864 2.97323 8.37358 3.21859 8.22522 3.50397C8.07687 3.78936 7.9996 4.10635 8 4.428V10.557C7.39487 10.1965 6.70439 10.0042 6 10C3.794 10 2 11.794 2 14C2 16.206 3.794 18 6 18C8.206 18 10 16.206 10 14V4.428L19 7.7V14.556C18.3946 14.1962 17.7042 14.0043 17 14C14.794 14 13 15.794 13 18C13 20.206 14.794 22 17 22C19.206 22 21 20.206 21 18V7.7C21 6.862 20.471 6.106 19.684 5.821ZM6 16C4.897 16 4 15.103 4 14C4 12.897 4.897 12 6 12C7.103 12 8 12.897 8 14C8 15.103 7.103 16 6 16ZM17 20C15.897 20 15 19.103 15 18C15 16.897 15.897 16 17 16C18.103 16 19 16.897 19 18C19 19.103 18.103 20 17 20Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-music")) {
+  customElements.define("icon-music", NavaIconMusic);
+}

package/dist/chunk-TUOZNJLX.js

@@ -0,0 +1,43 @@
+// src/icons/bracket.ts
+var NavaIconBracket = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M10 4V2H4V22H10V20H6V4H10ZM14 20V22H20V2H14V4H18V20H14Z" />` : `<path d="M10 4V2H4V22H10V20H6V4H10ZM14 20V22H20V2H14V4H18V20H14Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-bracket")) {
+  customElements.define("icon-bracket", NavaIconBracket);
+}

package/dist/chunk-TVCIUXBR.js

@@ -0,0 +1,43 @@
+// src/icons/collapse-horizontal.ts
+var NavaIconCollapseHorizontal = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M19.95 5.64001L13.59 12L19.95 18.36L21.36 16.95L16.41 12L21.36 7.05001L19.95 5.64001ZM2.64001 7.05001L7.59001 12L2.64001 16.95L4.05001 18.36L10.41 12L4.05001 5.64001L2.64001 7.05001Z" />` : `<path d="M19.95 5.64001L13.59 12L19.95 18.36L21.36 16.95L16.41 12L21.36 7.05001L19.95 5.64001ZM2.64001 7.05001L7.59001 12L2.64001 16.95L4.05001 18.36L10.41 12L4.05001 5.64001L2.64001 7.05001Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-collapse-horizontal")) {
+  customElements.define("icon-collapse-horizontal", NavaIconCollapseHorizontal);
+}

package/dist/chunk-TWQ2HET3.js

@@ -0,0 +1,43 @@
+// src/icons/ambulance.ts
+var NavaIconAmbulance = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M21.86 12.48L19.15 8C18.9755 7.69772 18.7249 7.44638 18.4232 7.27095C18.1214 7.09552 17.779 7.00211 17.43 7H15V5C15 4.73478 14.8946 4.48043 14.7071 4.29289C14.5196 4.10536 14.2652 4 14 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V16C2.00036 16.3507 2.09294 16.6952 2.26846 16.9988C2.44398 17.3025 2.69626 17.5546 3 17.73C2.9642 18.6583 3.29861 19.5627 3.92967 20.2444C4.56073 20.9261 5.43674 21.3292 6.365 21.365C7.29326 21.4008 8.19772 21.0664 8.87941 20.4353C9.56111 19.8043 9.9642 18.9283 10 18H13.1C13.2106 18.8367 13.6215 19.6047 14.2561 20.161C14.8908 20.7173 15.706 21.024 16.55 21.024C17.394 21.024 18.2092 20.7173 18.8439 20.161C19.4785 19.6047 19.8894 18.8367 20 18C20.5304 18 21.0391 17.7893 21.4142 17.4142C21.7893 17.0391 22 16.5304 22 16V13C21.9984 12.8176 21.9502 12.6386 21.86 12.48ZM6.5 19C6.20333 19 5.91332 18.912 5.66664 18.7472C5.41997 18.5824 5.22771 18.3481 5.11418 18.074C5.00065 17.7999 4.97094 17.4983 5.02882 17.2074C5.0867 16.9164 5.22956 16.6491 5.43934 16.4393C5.64912 16.2296 5.91639 16.0867 6.20736 16.0288C6.49834 15.9709 6.79994 16.0007 7.07403 16.1142C7.34811 16.2277 7.58238 16.42 7.7472 16.6666C7.91203 16.9133 8 17.2033 8 17.5C8 17.8978 7.84196 18.2794 7.56066 18.5607C7.27936 18.842 6.89782 19 6.5 19ZM12 11H10V13H8V11H6V9H8V7H10V9H12V11ZM16.5 19C16.2033 19 15.9133 18.912 15.6666 18.7472C15.42 18.5824 15.2277 18.3481 15.1142 18.074C15.0006 17.7999 14.9709 17.4983 15.0288 17.2074C15.0867 16.9164 15.2296 16.6491 15.4393 16.4393C15.6491 16.2296 15.9164 16.0867 16.2074 16.0288C16.4983 15.9709 16.7999 16.0007 17.074 16.1142C17.3481 16.2277 17.5824 16.42 17.7472 16.6666C17.912 16.9133 18 17.2033 18 17.5C18 17.8978 17.842 18.2794 17.5607 18.5607C17.2794 18.842 16.8978 19 16.5 19ZM15 12V9H17.43L19.23 12H15Z" />` : `<path d="M21.86 12.48L19.15 8C18.9755 7.69772 18.7249 7.44638 18.4232 7.27095C18.1214 7.09552 17.779 7.00211 17.43 7H15V5C15 4.73478 14.8946 4.48043 14.7071 4.29289C14.5196 4.10536 14.2652 4 14 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V16C2.00036 16.3507 2.09294 16.6952 2.26846 16.9988C2.44398 17.3025 2.69626 17.5546 3 17.73C2.9642 18.6583 3.29861 19.5627 3.92967 20.2444C4.56073 20.9261 5.43674 21.3292 6.365 21.365C7.29326 21.4008 8.19772 21.0664 8.87941 20.4353C9.56111 19.8043 9.9642 18.9283 10 18H13.1C13.2106 18.8367 13.6215 19.6047 14.2561 20.161C14.8908 20.7173 15.706 21.024 16.55 21.024C17.394 21.024 18.2092 20.7173 18.8439 20.161C19.4785 19.6047 19.8894 18.8367 20 18C20.5304 18 21.0391 17.7893 21.4142 17.4142C21.7893 17.0391 22 16.5304 22 16V13C21.9984 12.8176 21.9502 12.6386 21.86 12.48ZM6.5 19C6.20333 19 5.91332 18.912 5.66664 18.7472C5.41997 18.5824 5.22771 18.3481 5.11418 18.074C5.00065 17.7999 4.97094 17.4983 5.02882 17.2074C5.0867 16.9164 5.22956 16.6491 5.43934 16.4393C5.64912 16.2296 5.91639 16.0867 6.20736 16.0288C6.49834 15.9709 6.79994 16.0007 7.07403 16.1142C7.34811 16.2277 7.58238 16.42 7.7472 16.6666C7.91203 16.9133 8 17.2033 8 17.5C8 17.8978 7.84196 18.2794 7.56066 18.5607C7.27936 18.842 6.89782 19 6.5 19ZM12 11H10V13H8V11H6V9H8V7H10V9H12V11ZM16.5 19C16.2033 19 15.9133 18.912 15.6666 18.7472C15.42 18.5824 15.2277 18.3481 15.1142 18.074C15.0006 17.7999 14.9709 17.4983 15.0288 17.2074C15.0867 16.9164 15.2296 16.6491 15.4393 16.4393C15.6491 16.2296 15.9164 16.0867 16.2074 16.0288C16.4983 15.9709 16.7999 16.0007 17.074 16.1142C17.3481 16.2277 17.5824 16.42 17.7472 16.6666C17.912 16.9133 18 17.2033 18 17.5C18 17.8978 17.842 18.2794 17.5607 18.5607C17.2794 18.842 16.8978 19 16.5 19ZM15 12V9H17.43L19.23 12H15Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-ambulance")) {
+  customElements.define("icon-ambulance", NavaIconAmbulance);
+}

package/dist/chunk-TXJHT6MA.js

@@ -0,0 +1,43 @@
+// src/icons/parking.ts
+var NavaIconParking = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M13.5 3H5V21H9V16H13.5C17.084 16 20 13.084 20 9.5C20 5.916 17.084 3 13.5 3ZM13.5 12H9V7H13.5C14.879 7 16 8.121 16 9.5C16 10.879 14.879 12 13.5 12Z" />` : `<path d="M13.5 3H5V21H9V16H13.5C17.084 16 20 13.084 20 9.5C20 5.916 17.084 3 13.5 3ZM13.5 12H9V7H13.5C14.879 7 16 8.121 16 9.5C16 10.879 14.879 12 13.5 12Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-parking")) {
+  customElements.define("icon-parking", NavaIconParking);
+}

package/dist/chunk-U3UKGYFI.js

@@ -0,0 +1,45 @@
+// src/icons/money.ts
+var NavaIconMoney = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M21 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5V19C2 19.2652 2.10536 19.5196 2.29289 19.7071C2.48043 19.8946 2.73478 20 3 20H21C21.2652 20 21.5196 19.8946 21.7071 19.7071C21.8946 19.5196 22 19.2652 22 19V5C22 4.73478 21.8946 4.48043 21.7071 4.29289C21.5196 4.10536 21.2652 4 21 4ZM20 15C19.2044 15 18.4413 15.3161 17.8787 15.8787C17.3161 16.4413 17 17.2044 17 18H7C7 17.2044 6.68393 16.4413 6.12132 15.8787C5.55871 15.3161 4.79565 15 4 15V9C4.79565 9 5.55871 8.68393 6.12132 8.12132C6.68393 7.55871 7 6.79565 7 6H17C17 6.79565 17.3161 7.55871 17.8787 8.12132C18.4413 8.68393 19.2044 9 20 9V15Z" />
+<path d="M12 8C9.794 8 8 9.794 8 12C8 14.206 9.794 16 12 16C14.206 16 16 14.206 16 12C16 9.794 14.206 8 12 8ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14Z" />` : `<path d="M21 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5V19C2 19.2652 2.10536 19.5196 2.29289 19.7071C2.48043 19.8946 2.73478 20 3 20H21C21.2652 20 21.5196 19.8946 21.7071 19.7071C21.8946 19.5196 22 19.2652 22 19V5C22 4.73478 21.8946 4.48043 21.7071 4.29289C21.5196 4.10536 21.2652 4 21 4ZM20 15C19.2044 15 18.4413 15.3161 17.8787 15.8787C17.3161 16.4413 17 17.2044 17 18H7C7 17.2044 6.68393 16.4413 6.12132 15.8787C5.55871 15.3161 4.79565 15 4 15V9C4.79565 9 5.55871 8.68393 6.12132 8.12132C6.68393 7.55871 7 6.79565 7 6H17C17 6.79565 17.3161 7.55871 17.8787 8.12132C18.4413 8.68393 19.2044 9 20 9V15Z" />
+<path d="M12 8C9.794 8 8 9.794 8 12C8 14.206 9.794 16 12 16C14.206 16 16 14.206 16 12C16 9.794 14.206 8 12 8ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-money")) {
+  customElements.define("icon-money", NavaIconMoney);
+}

package/dist/chunk-U5JH76GK.js

@@ -0,0 +1,43 @@
+// src/icons/right-arrow-square.ts
+var NavaIconRightArrowSquare = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5ZM7 11H12V7L17 12L12 17V13H7V11Z" />` : `<path d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5ZM7 11H12V7L17 12L12 17V13H7V11Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-right-arrow-square")) {
+  customElements.define("icon-right-arrow-square", NavaIconRightArrowSquare);
+}

package/dist/chunk-U63UOBXJ.js

@@ -0,0 +1,43 @@
+// src/icons/invader.ts
+var NavaIconInvader = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M6 3H8V5H6V3ZM8 19H11V21H8V19ZM16 3H18V5H16V3ZM13 19H16V21H13V19ZM20 11V9H18V7H16V5H14V7H10V5H8V7H6V9H4V11H2V19H4V15H6V19H8V16H16V19H18V15H20V19H22V11H20ZM10 12H8V9H10V12ZM16 12H14V9H16V12Z" />` : `<path d="M6 3H8V5H6V3ZM8 19H11V21H8V19ZM16 3H18V5H16V3ZM13 19H16V21H13V19ZM20 11V9H18V7H16V5H14V7H10V5H8V7H6V9H4V11H2V19H4V15H6V19H8V16H16V19H18V15H20V19H22V11H20ZM10 12H8V9H10V12ZM16 12H14V9H16V12Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-invader")) {
+  customElements.define("icon-invader", NavaIconInvader);
+}

package/dist/chunk-UAGRSKHH.js

@@ -0,0 +1,44 @@
+// src/icons/comment-add.ts
+var NavaIconCommentAdd = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M20 2H4C2.897 2 2 2.897 2 4V22L6 18H20C21.103 18 22 17.103 22 16V4C22 2.897 21.103 2 20 2ZM17 11H13V15H11V11H7V9H11V5H13V9H17V11Z" />` : `<path d="M11 14H13V11H16V9H13V6H11V9H8V11H11V14Z" />
+<path d="M20 2H4C2.897 2 2 2.897 2 4V22L7.333 18H20C21.103 18 22 17.103 22 16V4C22 2.897 21.103 2 20 2ZM20 16H6.667L4 18V4H20V16Z" />`;
+    const strokeBased = isFilled ? false : false;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-comment-add")) {
+  customElements.define("icon-comment-add", NavaIconCommentAdd);
+}