@muibook/components 1.0.0

package/dist/esm/mui-icons/check/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M17.993 33C9.75 33 3 26.25 3 18.007S9.75 3 17.993 3 33 9.764 33 18.007 26.236 33 17.993 33m-1.52-7.908c.67 0 1.283-.349 1.673-.934l6.444-9.666c.279-.39.404-.809.404-1.185 0-.976-.864-1.688-1.827-1.688-.641 0-1.13.349-1.562 1.018l-5.16 8.145-2.218-2.636c-.39-.46-.822-.683-1.38-.683-.963 0-1.772.767-1.772 1.757 0 .46.126.823.516 1.27l3.152 3.71c.475.571 1.032.892 1.73.892"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-check", r);

package/dist/esm/mui-icons/close/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", s = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, i = s[e] ?? s.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${i};
+          height: ${i};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M8.436 28.063c-.934-.933-.894-2.55-.027-3.405l6.169-6.168-6.169-6.154c-.867-.855-.894-2.459.027-3.392.933-.934 2.55-.894 3.405-.04l6.168 6.155 6.142-6.142c.908-.907 2.459-.894 3.393.04.933.92.946 2.484.039 3.392L21.44 18.49l6.142 6.155c.907.907.894 2.472-.04 3.405-.92.933-2.484.933-3.392.026l-6.142-6.154-6.168 6.167c-.855.855-2.472.894-3.405-.026"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-close", r);

package/dist/esm/mui-icons/down-chevron/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M18 25.5c-.79 0-1.428-.269-2.091-.917L6.7 15.572C6.23 15.095 6 14.569 6 13.92c0-1.32 1.122-2.421 2.487-2.421.688 0 1.326.281 1.849.795l7.69 7.617 7.65-7.617c.524-.526 1.161-.795 1.837-.795 1.365 0 2.487 1.1 2.487 2.421 0 .648-.217 1.186-.701 1.638l-9.195 9.024c-.663.636-1.288.917-2.104.917"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-down-chevron", r);

package/dist/esm/mui-icons/globe/index.js

@@ -0,0 +1,55 @@
+class a extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, c) {
+    (e === "size" || e === "color") && t !== c && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, i = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${i};
+          height: ${i};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+          <path
+            d="M17.993 33.5C9.75 33.5 3 26.75 3 18.507S9.75 3.5 17.993 3.5 33 10.264 33 18.507 26.236 33.5 17.993 33.5M9.471 10.571c.6.405 1.381.753 2.288 1.046.641-1.743 1.534-3.166 2.566-4.184a11.8 11.8 0 0 0-4.854 3.138m12.19-3.138c1.046 1.018 1.925 2.455 2.58 4.184.907-.279 1.688-.628 2.288-1.032a11.73 11.73 0 0 0-4.868-3.152m-2.496.934v4.06c.948-.043 1.855-.14 2.705-.266-.697-1.8-1.66-3.18-2.705-3.793m-5.05 3.794c.865.126 1.772.223 2.707.265V8.367c-1.033.614-1.995 1.995-2.706 3.794m-7.726 5.16h4.24c.056-1.227.223-2.398.474-3.486-1.213-.39-2.245-.865-3.026-1.437a11.6 11.6 0 0 0-1.688 4.924m18.982 0h4.226a11.56 11.56 0 0 0-1.674-4.923c-.78.572-1.813 1.046-3.026 1.437.237 1.088.404 2.26.474 3.486m-12.371 0h3.822V14.77a26 26 0 0 1-3.39-.376c-.209.934-.362 1.924-.432 2.928m6.165 0h3.821a18 18 0 0 0-.432-2.928c-1.06.195-2.204.32-3.39.376zM6.389 19.666c.181 1.799.781 3.5 1.702 4.979.78-.558 1.813-1.046 3.012-1.423a22 22 0 0 1-.488-3.556zm6.611 0c.07 1.032.223 2.036.446 2.984a28 28 0 0 1 3.376-.362v-2.622zm6.165 2.622c1.185.055 2.329.18 3.389.362.223-.948.376-1.952.432-2.984h-3.821zm5.718.934c1.213.377 2.231.865 3.012 1.423a11.66 11.66 0 0 0 1.716-4.98h-4.24a19 19 0 0 1-.488 3.557m-5.718 1.409v4.016c1.032-.613 1.994-1.98 2.691-3.751-.85-.14-1.757-.223-2.691-.265m-5.035.265c.697 1.785 1.66 3.152 2.691 3.751V24.63a23 23 0 0 0-2.691.265m10.097.544c-.641 1.701-1.52 3.124-2.552 4.128a11.7 11.7 0 0 0 4.826-3.11c-.6-.405-1.367-.74-2.274-1.018M9.485 26.457a11.8 11.8 0 0 0 4.84 3.11c-1.046-1.004-1.91-2.427-2.566-4.128-.893.279-1.674.613-2.274 1.018"
+          ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-globe", a);

package/dist/esm/mui-icons/grid/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(c, t, e) {
+    (c === "size" || c === "color") && t !== e && this.render();
+  }
+  render() {
+    const c = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = i[c] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M7.372 13.212C5.905 13.212 5 12.278 5 10.735V7.977C5 6.435 5.905 5.5 7.372 5.5h2.819c1.467 0 2.372.935 2.372 2.477v2.758c0 1.543-.905 2.477-2.372 2.477zm9.213 0c-1.467 0-2.372-.934-2.372-2.477V7.977c0-1.542.905-2.477 2.372-2.477h2.819c1.466 0 2.372.935 2.372 2.477v2.758c0 1.543-.906 2.477-2.372 2.477zm9.224 0c-1.467 0-2.372-.934-2.372-2.477V7.977c0-1.542.905-2.477 2.372-2.477h2.819C30.095 5.5 31 6.435 31 7.977v2.758c0 1.543-.905 2.477-2.372 2.477zm-18.437 9.15C5.905 22.362 5 21.416 5 19.885v-2.77c0-1.53.905-2.477 2.372-2.477h2.819c1.467 0 2.372.947 2.372 2.477v2.77c0 1.53-.905 2.477-2.372 2.477zm9.213 0c-1.467 0-2.372-.946-2.372-2.477v-2.77c0-1.53.905-2.477 2.372-2.477h2.819c1.466 0 2.372.947 2.372 2.477v2.77c0 1.53-.906 2.477-2.372 2.477zm9.224 0c-1.467 0-2.372-.946-2.372-2.477v-2.77c0-1.53.905-2.477 2.372-2.477h2.819c1.467 0 2.372.947 2.372 2.477v2.77c0 1.53-.905 2.477-2.372 2.477zM7.372 31.5C5.905 31.5 5 30.553 5 29.023v-2.758c0-1.543.905-2.489 2.372-2.489h2.819c1.467 0 2.372.947 2.372 2.489v2.758c0 1.53-.905 2.477-2.372 2.477zm9.213 0c-1.467 0-2.372-.947-2.372-2.477v-2.758c0-1.543.905-2.489 2.372-2.489h2.819c1.466 0 2.372.947 2.372 2.489v2.758c0 1.53-.906 2.477-2.372 2.477zm9.224 0c-1.467 0-2.372-.947-2.372-2.477v-2.758c0-1.543.905-2.489 2.372-2.489h2.819c1.467 0 2.372.947 2.372 2.489v2.758c0 1.53-.905 2.477-2.372 2.477z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-grid", r);

package/dist/esm/mui-icons/index.js

@@ -0,0 +1,23 @@
+import "./accessibility/index.js";
+import "./add/index.js";
+import "./attention/index.js";
+import "./check/index.js";
+import "./close/index.js";
+import "./down-chevron/index.js";
+import "./globe/index.js";
+import "./grid/index.js";
+import "./info/index.js";
+import "./left-arrow/index.js";
+import "./left-chevron/index.js";
+import "./menu/index.js";
+import "./message/index.js";
+import "./moon/index.js";
+import "./notification/index.js";
+import "./right-chevron/index.js";
+import "./stop/index.js";
+import "./subtract/index.js";
+import "./sun/index.js";
+import "./toggle/index.js";
+import "./up-arrow/index.js";
+import "./up-chevron/index.js";
+import "./warning/index.js";

package/dist/esm/mui-icons/info/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+          <path
+            d="M17.993 33C9.75 33 3 26.25 3 18.007S9.75 3 17.993 3 33 9.764 33 18.007 26.236 33 17.993 33m.042-19.177c1.269 0 2.315-1.074 2.315-2.33 0-1.324-1.046-2.356-2.315-2.356a2.35 2.35 0 0 0-2.343 2.357c0 1.255 1.074 2.329 2.343 2.329m-2.748 12.064h5.97c.85 0 1.52-.6 1.52-1.492 0-.823-.67-1.479-1.52-1.479h-1.074v-5.37c0-1.185-.558-1.924-1.674-1.924H15.58c-.864 0-1.52.642-1.52 1.465 0 .892.656 1.492 1.52 1.492h1.255v4.337h-1.548c-.85 0-1.52.656-1.52 1.479 0 .892.67 1.492 1.52 1.492"
+          ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-info", r);

package/dist/esm/mui-icons/left-arrow/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M5 18.5c0-.683.288-1.41.748-1.86l9.266-9.355c.518-.524 1.137-.785 1.741-.785 1.482 0 2.475 1.031 2.475 2.383 0 .784-.346 1.365-.82 1.816l-3.223 3.254-2.331 2.179 2.978-.16h12.533C29.95 15.972 31 16.99 31 18.5c0 1.525-1.05 2.542-2.633 2.542H15.834l-2.978-.16 2.33 2.18 3.224 3.24c.474.45.82 1.03.82 1.815 0 1.351-.993 2.383-2.475 2.383-.604 0-1.223-.276-1.74-.785l-9.267-9.34C5.288 19.923 5 19.182 5 18.5"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-left-arrow", r);

package/dist/esm/mui-icons/left-chevron/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M10.5 18.5c.013-.803.289-1.441.983-2.091L21.147 7.2c.485-.471 1.062-.701 1.757-.701 1.429 0 2.596 1.135 2.596 2.487 0 .676-.288 1.326-.852 1.849l-8.169 7.651 8.169 7.677c.55.523.852 1.16.852 1.85 0 1.364-1.167 2.486-2.596 2.486-.682 0-1.272-.217-1.757-.701l-9.664-9.208c-.694-.65-.983-1.3-.983-2.091"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-left-chevron", r);

package/dist/esm/mui-icons/menu/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, i = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${i};
+          height: ${i};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M6.114 21C4.53 21 3 19.63 3 18s1.531-3 3.114-3h23.773C31.537 15 33 16.37 33 18s-1.462 3-3.113 3zM6.114 12C4.53 12 3 10.63 3 9s1.531-3 3.114-3h23.773C31.537 6 33 7.37 33 9s-1.462 3-3.113 3zM6.114 30C4.53 30 3 28.63 3 27s1.531-3 3.114-3h23.773C31.537 24 33 25.37 33 27s-1.462 3-3.113 3z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-menu", r);

package/dist/esm/mui-icons/message/index.js

@@ -0,0 +1,55 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, c) {
+    (t === "size" || t === "color") && e !== c && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), i = e && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[e] || e || "var(--icon-color-default)", s = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = s[t] ?? s.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${i};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M12.38 32c-1.45 0-2.341-.956-2.341-2.54v-2.542h-.93c-3.372 0-6.109-2.49-6.109-6.39V10.39C3 6.49 5.507 4 9.453 4h17.094C30.493 4 33 6.503 33 10.39v10.138c0 3.887-2.507 6.39-6.453 6.39h-6.873l-4.251 3.648C14.2 31.61 13.373 32 12.38 32m.942-4.29 3.92-3.798c.726-.692 1.133-.893 2.1-.893h6.9c1.87 0 2.825-.918 2.825-2.78v-9.56c0-1.861-.955-2.78-2.826-2.78H9.76c-1.871 0-2.826.919-2.826 2.78v9.56c0 1.862.955 2.78 2.826 2.78h2.252c.815 0 1.311.352 1.311 1.283zm-1.756-12.528c-1.107 0-1.616-.515-1.616-1.597v-1.887c0-1.082.509-1.585 1.616-1.585h4.582c1.095 0 1.617.503 1.617 1.585v1.887c0 1.082-.522 1.597-1.617 1.597zm9.61 4.768c-1.095 0-1.617-.503-1.617-1.585v-5.85c0-1.081.522-1.584 1.617-1.584h3.284c1.094 0 1.616.503 1.616 1.585v5.849c0 1.082-.522 1.585-1.617 1.585zm-8.515.817c-1.095 0-1.617-.503-1.617-1.597v-1.195c0-1.094.522-1.598 1.617-1.598h4.073c1.107 0 1.616.504 1.616 1.598v1.195c0 1.094-.51 1.597-1.616 1.597z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-message", l);

package/dist/esm/mui-icons/moon/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M26.68 23.013c1.698 0 3.457-.32 4.466-.776.55-.274 1.024-.411 1.468-.411.642 0 1.085.456 1.085 1.157 0 .365-.107.867-.352 1.43C31.04 29.801 25.488 33.5 19.22 33.5 10.32 33.5 3.7 27.031 3.7 18.157c0-6.27 3.808-12.054 9.572-14.368.49-.198.933-.289 1.284-.289.765 0 1.224.518 1.224 1.187 0 .396-.138.853-.398 1.37-.596 1.142-.963 3.227-.963 5.069 0 7.351 4.725 11.887 12.263 11.887"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-moon", r);