@muibook/components 1.0.0

package/dist/muibook/assets/index-BrZBJGo2.js

@@ -0,0 +1,4276 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-CwAai54c.js","assets/mui-logo-mobile-DuEMz_jq.js","assets/index-DwnvCJk0.js","assets/index-CCegrD2J.js","assets/mui-D6S1tQ24.js","assets/index-Ch40uilB.js","assets/image-1080-Bg-8LoSs.js","assets/index-BnpaoEYs.js","assets/index-DBkw7VLa.js"])))=>i.map(i=>d[i]);
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))i(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const a of o.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).observe(document,{childList:!0,subtree:!0});function e(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function i(s){if(s.ep)return;s.ep=!0;const o=e(s);fetch(s.href,o)}})();document.addEventListener("DOMContentLoaded",()=>{document.body.addEventListener("keydown",r=>{r.key==="Tab"&&(document.body.dataset.userIsTabbing="true")}),document.body.addEventListener("mousedown",()=>{delete document.body.dataset.userIsTabbing})});const x=()=>{const r=document.getElementById("loader"),t=()=>{document.startViewTransition?document.startViewTransition(()=>{r&&(r.style.opacity="0")}):r&&(r.style.opacity="0"),setTimeout(()=>{r&&(r.style.display="none")},1e3)};document.readyState==="complete"?t():window.addEventListener("load",t)};x();const A=()=>{const r=document.querySelector("app-navbar-skip");if(r&&r.shadowRoot){const e=r.shadowRoot.querySelector(".skip-to-main");e&&(e.addEventListener("click",i=>{i.preventDefault();const s=document.querySelector("app-container");console.log("skipLink clicked, appContainer:",s),s&&(s.focus(),s.classList.add("focused"))}),e.addEventListener("keydown",i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),e.click())}))}const t=document.querySelector("app-container");t&&t.addEventListener("blur",e=>{e.target&&e.target.classList&&e.target.classList.remove("focused")})};window.addEventListener("load",()=>{A()});class E extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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.992 35C8.65 35 1 27.35 1 18.008S8.65 1 17.992 1 35 8.666 35 18.008 27.334 35 17.992 35m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m0-18.02a1.92 1.92 0 0 1-1.913-1.912c0-1.043.854-1.897 1.913-1.897s1.913.854 1.913 1.897a1.92 1.92 0 0 1-1.913 1.913m0 .98c2.102 0 5.058-.347 6.48-.584a3 3 0 0 1 .396-.032c.348 0 .743.285.743.822 0 .396-.221.727-.617.838-.458.142-3.825.522-4.236.6-.41.096-.664.443-.664.95 0 .758 0 3.192.174 4.314.158 1.091 1.454 6.418 1.518 6.655.142.569-.19 1.059-.775 1.059-.41 0-.711-.221-.838-.775-.252-1.074-1.17-4.757-1.454-5.642-.205-.633-.38-.87-.727-.87-.364 0-.506.237-.711.87-.285.9-1.201 4.568-1.47 5.642-.158.554-.427.775-.838.775-.585 0-.917-.49-.775-1.06.064-.236 1.344-5.563 1.518-6.654.19-1.122.221-3.556.19-4.315-.016-.506-.27-.853-.68-.948-.427-.08-3.778-.475-4.236-.6-.395-.096-.617-.444-.617-.839 0-.537.364-.822.743-.822.127 0 .269.016.395.032 1.423.237 4.395.585 6.481.585"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-accessibility",E);class z extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="M6 18.507a2.536 2.536 0 0 1 2.522-2.536h6.95V9.036A2.54 2.54 0 0 1 18.006 6.5a2.536 2.536 0 0 1 2.522 2.536v6.935h6.949A2.536 2.536 0 0 1 30 18.507a2.524 2.524 0 0 1-2.522 2.522h-6.95v6.949a2.524 2.524 0 0 1-2.521 2.522 2.527 2.527 0 0 1-2.536-2.522v-6.95H8.522A2.524 2.524 0 0 1 6 18.508"
+      ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-add",z);class L extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="M13.75 32.5c-1.856 0-3.196-.697-4.279-1.954l-5.104-5.959C3.271 23.317 3 22.51 3 20.815v-5.63c0-1.695.27-2.501 1.367-3.772l5.104-5.945C10.554 4.197 11.894 3.5 13.75 3.5h8.502c1.855 0 3.235.67 4.278 1.968l4.86 5.945C32.553 12.834 33 13.49 33 15.185v5.63c0 1.695-.27 2.501-1.367 3.772l-5.104 5.959c-1.083 1.257-2.423 1.954-4.278 1.954zm4.277-12.723c1.07 0 1.692-.588 1.76-1.709l.244-5.084c.054-1.188-.772-1.981-2.031-1.981-1.245 0-2.071.793-2.004 1.981l.23 5.098c.068 1.093.704 1.695 1.801 1.695m0 5.138c1.205 0 2.112-.71 2.112-1.886 0-1.134-.893-1.858-2.112-1.858-1.218 0-2.139.71-2.139 1.858 0 1.175.92 1.886 2.14 1.886"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-attention",L);class T extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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 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",T);class M extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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",M);class C extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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",C);class $ extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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",$);class _ extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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",_);class S extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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 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",S);class R extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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);class H extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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",H);class I extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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",I);class P extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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",P);class O extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="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",O);class q extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="M4 25.241c0-1.665 1.126-2.921 2.478-4.005 1.126-.899 1.312-2.55 1.696-5.34.437-4.362 2.226-7.653 5.486-8.816C14.35 5.216 15.966 4 18.007 4c2.027 0 3.644 1.216 4.333 3.08 3.26 1.163 5.049 4.454 5.486 8.816.384 2.79.57 4.441 1.696 5.34C30.874 22.32 32 23.576 32 25.241c0 1.626-1.14 2.71-2.902 2.71h-5.009C23.983 30.449 21.677 33 18.007 33c-3.684 0-5.99-2.551-6.096-5.05H6.902C5.14 27.95 4 26.868 4 25.242m5.075-1.084h17.73v-.132a5.1 5.1 0 0 1-1.762-1.507c-.768-.978-1.153-3.529-1.352-5.816-.291-4.044-1.709-5.67-3.418-6.12-.305-.079-.49-.211-.544-.647-.132-1.23-.755-1.943-1.722-1.943-.981 0-1.604.714-1.736 1.943-.053.436-.239.568-.544.647-1.709.45-3.127 2.076-3.418 6.12-.2 2.287-.57 4.838-1.352 5.816-.517.674-1.206 1.163-1.882 1.507zm6.732 3.794c.093 1.242.994 2.101 2.2 2.101 1.192 0 2.093-.859 2.186-2.101z"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-notification",q);class D extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="M25.5 18.5c0 .79-.288 1.441-.983 2.091L14.853 29.8c-.498.484-1.075.701-1.77.701-1.416 0-2.583-1.122-2.583-2.487 0-.688.302-1.326.84-1.849l8.168-7.677-8.169-7.651c-.55-.523-.839-1.173-.839-1.85 0-1.351 1.167-2.486 2.583-2.486.708 0 1.272.23 1.77.701l9.664 9.208c.681.65.97 1.288.983 2.091"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-right-chevron",D);class N extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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.992 35.5C8.65 35.5 1 27.85 1 18.508S8.65 1.5 17.992 1.5 35 9.166 35 18.508 27.334 35.5 17.992 35.5m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m-3.92-6.37c-1.09 0-1.802-.648-1.802-1.675v-8.077c0-1.012.711-1.66 1.802-1.66h7.824c1.091 0 1.802.648 1.802 1.66v8.077c0 1.027-.711 1.675-1.802 1.675z"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-stop",N);class F extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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.698 21C6.327 21 5 19.859 5 18.5S6.327 16 7.698 16h20.604C29.732 16 31 17.141 31 18.5S29.733 21 28.302 21z"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-subtract",F);class B extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="M18.692 8.106c-1.081 0-1.994-.914-1.994-1.996V3.524c0-1.096.913-2.024 1.994-2.024 1.096 0 2.009.928 2.009 2.024V6.11c0 1.082-.913 1.996-2.009 1.996m7.373 3.12c-.772-.773-.786-2.094-.042-2.839l1.84-1.841c.758-.76 2.064-.787 2.809-.042.772.773.786 2.08.042 2.839l-1.826 1.841c-.772.773-2.079.787-2.823.042m-14.746 0c-.744.745-2.05.731-2.809-.042L6.685 9.33c-.745-.745-.73-2.052.042-2.825.744-.745 2.05-.717 2.809.042l1.825 1.841c.745.745.73 2.066-.042 2.84m7.373 15.377c-4.424 0-8.075-3.655-8.075-8.096s3.651-8.096 8.075-8.096c4.438 0 8.09 3.655 8.09 8.096s-3.652 8.096-8.09 8.096m10.42-8.096c0-1.082.914-1.996 1.995-1.996h2.584c1.095 0 2.008.914 2.008 1.996s-.913 1.996-2.008 1.996h-2.584c-1.081 0-1.994-.914-1.994-1.996m-20.812 0c0 1.082-.927 1.996-2.023 1.996H3.693c-1.08 0-1.994-.914-1.994-1.996s.913-1.996 1.994-1.996h2.584c1.096 0 2.023.914 2.023 1.996m17.723 7.337c.773-.773 2.079-.787 2.837-.042l1.84 1.841c.772.759.786 2.066.042 2.811-.773.773-2.079.787-2.837.042l-1.84-1.827c-.772-.773-.786-2.08-.042-2.825m-14.662 0c.745.745.73 2.052-.042 2.825l-1.84 1.827c-.744.745-2.05.731-2.836-.042-.73-.745-.73-2.066.042-2.825l1.854-1.827c.744-.745 2.05-.731 2.822.042m7.331 3.05c1.096 0 2.009.914 2.009 2.01v2.586c0 1.082-.913 2.01-2.009 2.01-1.081 0-1.994-.928-1.994-2.01v-2.586c0-1.096.913-2.01 1.994-2.01"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-sun",B);class V extends HTMLElement{static get observedAttributes(){return["variant"]}constructor(){super(),this.attachShadow({mode:"open"}),this.addEventListener("click",()=>{if(this.toggleAttribute("toggle"),!this.shadowRoot)return;const t=this.shadowRoot.querySelector("mui-button");t&&(t.blur(),requestAnimationFrame(()=>{t.focus({preventScroll:!0})}))}),this.addEventListener("keydown",t=>{t.code==="Space"&&(t.preventDefault(),this.click())})}connectedCallback(){this.hasAttribute("variant")||this.setAttribute("variant","primary"),this.render()}attributeChangedCallback(t,e,i){t==="variant"&&e!==i&&this.render()}render(){const t=this.getAttribute("variant")||"primary";this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          display: inline-flex;
+        }
+
+        ::slotted(*) {
+          position: absolute;
+          top: auto;
+          left: auto;
+          transform-origin: 50% 50%;
+          transition: var(--speed-200) ease-in-out;
+        }
+
+        ::slotted([slot="start"]) {
+          transform: scale(1);
+        }
+
+        ::slotted([slot="end"]) {
+          transform: scale(0);
+        }
+
+        :host([toggle]) ::slotted([slot="start"]) {
+          transform: scale(0);
+        }
+
+        :host([toggle]) ::slotted([slot="end"]) {
+          transform: scale(1);
+        }
+
+        :host([rotate]) ::slotted([slot="end"]) {
+          transform: scale(0) rotate(0deg);
+        }
+
+        :host([toggle][rotate]) ::slotted([slot="end"]) {
+          transform: scale(1) rotate(-360deg);
+        }
+
+      </style>
+
+     <mui-button icon-only ${`variant="${t}"`}>
+        <slot name="start"></slot>
+        <slot name="end"></slot>
+      </mui-button>
+    `)}}customElements.define("mui-icon-toggle",V);class j extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="M18 5.5c.683 0 1.41.288 1.86.748l9.356 9.266c.522.518.784 1.137.784 1.741 0 1.482-1.032 2.475-2.383 2.475-.784 0-1.365-.346-1.815-.82l-3.255-3.223-2.179-2.331.16 2.978v12.533c0 1.583-1.017 2.633-2.528 2.633-1.525 0-2.542-1.05-2.542-2.633V16.334l.16-2.978-2.18 2.33-3.24 3.224c-.45.474-1.03.82-1.815.82C7.03 19.73 6 18.737 6 17.255c0-.604.276-1.223.785-1.74l9.34-9.267c.451-.46 1.192-.748 1.875-.748"
+      ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-up-arrow",j);class U extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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="m6.701 21.44 9.208-9.01c.663-.649 1.3-.93 2.091-.93.816.012 1.441.293 2.104.93l9.195 9.01c.484.465.701.991.701 1.651 0 1.32-1.122 2.409-2.487 2.409a2.52 2.52 0 0 1-1.836-.782L18.026 17.1l-7.69 7.618c-.523.513-1.16.782-1.85.782C7.123 25.5 6 24.412 6 23.091c0-.648.23-1.186.701-1.65"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-up-chevron",U);class X extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),s=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",o={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},a=o[t]??o.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          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.422 31.5C4.796 31.5 3 29.456 3 27.139c0-.736.193-1.472.58-2.168l10.6-18.29c.842-1.445 2.335-2.181 3.827-2.181s2.943.709 3.8 2.18L32.42 24.959c.4.695.58 1.445.58 2.18 0 2.318-1.796 4.362-4.408 4.362zM18.02 21.4c1.091 0 1.74-.585 1.796-1.703l.249-5.057c.069-1.185-.788-1.99-2.06-1.99-1.27 0-2.127.79-2.058 1.977l.249 5.097c.069 1.09.718 1.677 1.824 1.677m0 5.125c1.243 0 2.155-.708 2.155-1.867 0-1.145-.912-1.867-2.155-1.867-1.244 0-2.17.709-2.17 1.867 0 1.159.94 1.867 2.17 1.867"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-warning",X);const w={text:["color","font-family","font-size","font-weight","letter-spacing","line-height","text-transform","text-decoration","text-align"],spacing:["padding","margin","gap","width","height","box-sizing"],layout:["display","flex","flex-direction","flex-wrap","justify-content","align-items","align-content","align-self","grid-template-columns","grid-template-rows","grid-column","grid-row","place-items","place-content","vertical-align"],visual:["background","border","border-radius","box-shadow","opacity","transition","outline","color"]};Object.values(w).flat();function b(...r){return r.map(t=>w[t]||[]).flat().join(" ")}class Y extends HTMLElement{static get observedAttributes(){return["target","href","variant","weight","size"]}constructor(){super(),this.attachShadow({mode:"open"});const t=this.getAttribute("size")||"medium",e=this.getAttribute("weight")||"regular";this.setAttribute("size",t),this.setAttribute("weight",e)}async connectedCallback(){if(!this.shadowRoot)return;await this.waitForPartMap();let e=`
+    <style>
+
+      :host { display: inline-flex; }
+
+      a {
+        color: var(--link-text-color-default);
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-sizing: border-box;
+      }
+
+      /* Turned back on for focus-visible */
+      a:focus, a:active, a:hover { outline: var(--space-000); }
+      a:hover { color: var(--link-text-color-default-hover); }
+      a:focus { color: var(--link-text-color-default-focus); }
+      a:disabled { color: var(--link-text-color-default-disabled); cursor: not-allowed; }
+      a, a:before, a:after {box-sizing: border-box;}
+      a:focus-visible { outline: var(--outline-thick); }
+
+      :host([size="x-small"]) a {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) a {
+        font-size: var(--text-font-size-s); 
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) a {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+      :host([size="large"]) a {
+        font-size: var(--text-font-size-l); 
+        line-height: var(--text-line-height-l);
+      }
+
+      :host([weight="regular"]) a { font-weight: var(--font-weight-regular); }
+      :host([weight="medium"]) a { font-weight: var(--font-weight-medium); }
+      :host([weight="bold"]) a { font-weight: var(--font-weight-bold); }
+
+
+
+      /* Button  
+      ========================================= */
+
+      :host([variant="primary"]) a,
+      :host([variant="secondary"]) a,
+      :host([variant="tertiary"]) a,
+      :host([variant="attention"]) a {
+        display: inline-block;
+        text-decoration: none;
+        padding: var(--space-200) var(--space-500);
+        border-radius: var(--action-radius);
+        font-size: var(--action-font-size);
+        font-weight: var(--action-font-weight);
+        line-height: var(--action-line-height);
+      }
+
+      :host([variant="primary"]),
+      :host([variant="secondary"])
+      :host([variant="tertiary"]),
+      :host([variant="attention"]) { display: inline-block; }
+
+      /* Button Primary 
+      ========================================= */
+
+      :host([variant="primary"]) a {
+        background: var(--action-primary-background);
+        color: var(--action-primary-text-color);
+        border: var(--action-primary-stroke);
+      }
+
+      :host([variant="primary"]) a:hover {
+        background: var(--action-primary-background-hover);
+        color: var(--action-primary-text-color-hover);
+        border: var(--action-primary-stroke-hover);
+      }
+
+      :host([variant="primary"]) a:focus,
+      :host([variant="tertiary"]) a:focus-visible {
+        background: var(--action-primary-background-focus); 
+        color: var(--action-primary-text-color-focus);
+        border: var(--action-primary-stroke-focus);
+      }
+
+      :host([variant="primary"]) a:disabled {
+        background: var(--action-primary-background-disabled); 
+        color: var(--action-primary-text-color-disabled);
+        border: var(--action-primary-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="primary"]) a ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+      :host([variant="primary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+      :host([variant="primary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+      :host([variant="primary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+
+      /* Button Secondary 
+      ========================================= */
+      :host([variant="secondary"]) a {
+        background: var(--action-secondary-background);
+        color: var(--action-secondary-text-color);
+        border: var(--action-secondary-stroke); 
+      }
+
+      :host([variant="secondary"]) a:hover {
+        background: var(--action-secondary-background-hover);
+        color: var(--action-secondary-text-color-hover);
+        border: var(--action-secondary-stroke-hover); 
+      }
+
+      :host([variant="secondary"]) a:focus,
+      :host([variant="secondary"]) a:focus-visible {
+        background: var(--action-secondary-background-focus);
+        color: var(--action-secondary-text-color-focus);
+        border: var(--action-secondary-stroke-focus); 
+      }
+
+      :host([variant="secondary"]) a:disabled {
+        background: var(--action-secondary-background-disabled);
+        color: var(--action-secondary-text-color-disabled);
+        border: var(--action-secondary-stroke-disabled); 
+        cursor: not-allowed;
+      }
+
+      :host([variant="secondary"]) a ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
+      :host([variant="secondary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
+      :host([variant="secondary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
+      :host([variant="secondary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+
+      /* Button Tertiary
+      ========================================= */
+      :host([variant="tertiary"]) a {
+        background: var(--action-tertiary-background);
+        color: var(--action-tertiary-text-color);
+        border: var(--action-tertiary-stroke);
+      }
+
+      :host([variant="tertiary"]) a:hover {
+        color: var(--action-tertiary-text-color-hover);
+        background: var(--action-tertiary-background-hover);
+        border: var(--action-tertiary-stroke-hover);
+      }
+
+      :host([variant="tertiary"]) a:focus,
+      :host([variant="tertiary"]) a:focus-visible {
+        color: var(--action-tertiary-text-color-focus);
+        background: var(--action-tertiary-background-focus); 
+        border: var(--action-tertiary-stroke-focus);
+      }
+
+      :host([variant="tertiary"]) a:disabled {
+        background: var(--action-tertiary-background-disabled);
+        color: var(--action-tertiary-text-color-disabled);
+        border: var(--action-tertiary-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="tertiary"]) a ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
+      :host([variant="tertiary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
+      :host([variant="tertiary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
+      :host([variant="tertiary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+
+      /* Button Attention
+      ========================================= */
+      :host([variant="attention"]) a {
+        background: var(--action-attention-background);
+        color: var(--action-attention-text-color);
+        border: var(--action-attention-stroke);
+      }
+
+      :host([variant="attention"]) a:hover {
+        background: var(--action-attention-background-hover);
+        color: var(--action-attention-text-color-hover);
+        border: var(--action-attention-stroke-hover);
+      }
+
+      :host([variant="attention"]) a:focus,
+      :host([variant="attention"]) a:focus-visible  {
+        background: var(--action-attention-background-focus);
+        color: var(--action-attention-text-color-focus);
+        border: var(--action-attention-stroke-focus);
+      }
+
+      :host([variant="attention"]) a:disabled {
+        background: var(--action-attention-background-disabled);
+        color: var(--action-attention-text-color-disabled);
+        border: var(--action-attention-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="attention"]) a ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
+      :host([variant="attention"]) a:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
+      :host([variant="attention"]) a:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
+      :host([variant="attention"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
+
+      /* Icon only
+      ========================================= */
+      :host([icon-only]) a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 44px;
+        width: 44px;
+        padding: var(--action-icon-only-padding);
+      }
+      /* ===================================== */
+
+
+    </style>
+
+    <a
+      part="${b("text","spacing","layout","visual")}" 
+      target="${this.getAttribute("target")||"_self"}" 
+      href="${this.getAttribute("href")||"#"}"
+      >
+      <slot></slot>
+    </a>
+    `;this.shadowRoot.innerHTML=e}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-link",Y);class W extends HTMLElement{static get observedAttributes(){return["onclick","type","aria-label","disabled","variant"]}constructor(){super(),this.attachShadow({mode:"open"})}async connectedCallback(){if(await this.waitForPartMap(),!this.shadowRoot)return;let e=`
+    <style>
+
+
+    :host {
+      display: inline-block;
+    }
+    button {
+      vertical-align: baseline;
+      border: none;
+      cursor: pointer;
+      width: auto;
+      border-radius: var(--action-radius);
+      padding: var(--action-padding);
+      text-decoration: none;
+      line-height: var(--action-line-height);
+      display: inline-block;
+      text-transform: none;
+      overflow: visible;
+      -webkit-appearance: button;
+      font-family: var(--font-family);
+      font-size: var(--action-font-size);
+      font-weight: var(--action-font-weight);
+      background: var(--action-primary-background);
+      color: var(--action-primary-text-color);
+      border: var(--action-primary-stroke); 
+    }
+
+    // Turned back on for focus-visible
+    button:focus, button:active, button:hover { outline: var(--space-000); }
+
+    button:hover {
+      background: var(--action-primary-background-hover);
+      color: var(--action-primary-text-color-hover);
+    }
+
+    button:focus {
+      background: var(--action-primary-background-focus);
+      color: var(--action-primary-text-color-focus);
+    }
+
+    button:disabled {
+      background: var(--action-primary-background-disabled);
+      color: var(--action-primary-text-color-disabled);
+    }
+
+    button, button:before, button:after {box-sizing: border-box;}
+
+    button:focus-visible {
+      outline: var(--outline-thick);
+    }
+
+    /* Primary 
+    ========================================= */
+    :host([variant="primary"]) button {
+      background: var(--action-primary-background);
+      color: var(--action-primary-text-color);
+      border: var(--action-primary-stroke);
+    }
+
+    :host([variant="primary"]) button:hover {
+      background: var(--action-primary-background-hover);
+      color: var(--action-primary-text-color-hover);
+      border: var(--action-primary-stroke-hover);
+    }
+
+    :host([variant="primary"]) button:focus {
+      background: var(--action-primary-background-focus);
+      color: var(--action-primary-text-color-focus);
+      border: var(--action-primary-stroke-focus);
+    }
+
+    :host([variant="primary"]) button:disabled {
+      background: var(--action-primary-background-disabled);
+      color: var(--action-primary-text-color-disabled);
+      border: var(--action-primary-stroke-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([variant="primary"]) button ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+    :host([variant="primary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+    :host([variant="primary"]) button:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+    :host([variant="primary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+
+    /* Secondary
+    ========================================= */
+
+    :host([variant="secondary"]) button {
+      background: var(--action-secondary-background);
+      color: var(--action-secondary-text-color);
+      border: var(--action-secondary-stroke); 
+    }
+
+    :host([variant="secondary"]) button:hover {
+      background: var(--action-secondary-background-hover);
+      color: var(--action-secondary-text-color-hover);
+      border: var(--action-secondary-stroke-hover); 
+    }
+
+    :host([variant="secondary"]) button:focus {
+      background: var(--action-secondary-background-focus);
+      color: var(--action-secondary-text-color-focus);
+      border: var(--action-secondary-stroke-focus); 
+    }
+
+    :host([variant="secondary"]) button:disabled {
+      background: var(--action-secondary-background-disabled);
+      color: var(--action-secondary-text-color-disabled);
+      border: var(--action-secondary-stroke-disabled); 
+      cursor: not-allowed;
+    }
+
+    :host([variant="secondary"]) button ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
+    :host([variant="secondary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
+    :host([variant="secondary"]) button:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
+    :host([variant="secondary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+
+    /* Tertiary
+    ========================================= */
+
+    :host([variant="tertiary"]) button {
+      background: var(--action-tertiary-background);
+      color: var(--action-tertiary-text-color);
+      border: var(--action-tertiary-stroke);
+    }
+
+    :host([variant="tertiary"]) button:hover {
+      background: var(--action-tertiary-background-hover);
+      color: var(--action-tertiary-text-color-hover);
+      border: var(--action-tertiary-stroke-hover);
+    }
+
+    :host([variant="tertiary"]) button:focus {
+      background: var(--action-tertiary-background-focus);
+      color: var(--action-tertiary-text-color-focus);
+      border: var(--action-tertiary-stroke-focus);
+    }
+
+    :host([variant="tertiary"]) button:disabled {
+      background: var(--action-tertiary-background-disabled);
+      color: var(--action-tertiary-text-color-disabled);
+      border: var(--action-tertiary-stroke-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([variant="tertiary"]) button ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
+    :host([variant="tertiary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
+    :host([variant="tertiary"]) button:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
+    :host([variant="tertiary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+
+    /* Attention
+    ========================================= */
+    :host([variant="attention"]) button {
+      background: var(--action-attention-background);
+      color: var(--action-attention-text-color);
+      border: var(--action-attention-stroke);
+    }
+
+    :host([variant="attention"]) button:hover {
+      background: var(--action-attention-background-hover);
+      color: var(--action-attention-text-color-hover);
+      border: var(--action-attention-stroke-hover);
+    }
+
+    :host([variant="attention"]) button:focus {
+      background: var(--action-attention-background-focus);
+      color: var(--action-attention-text-color-focus);
+      border: var(--action-attention-stroke-focus);
+    }
+
+    :host([variant="attention"]) button:disabled {
+      background: var(--action-attention-background-disabled);
+      color: var(--action-attention-text-color-disabled);
+      border: var(--action-attention-stroke-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([variant="attention"]) button ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
+    :host([variant="attention"]) button:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
+    :host([variant="attention"]) button:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
+    :host([variant="attention"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
+
+    /* Icon only
+    ========================================= */
+    :host([icon-only]) button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 44px;
+      width: 44px;
+      padding: var(--action-icon-only-padding);
+    }
+    /* ===================================== */
+
+
+    /* ========================================================================== */
+    /* STYLE ADJUSTMENTS WHEN BUTTON IS SLOTTED WITHIN INPUT                      */
+    /* Related styles unique to this usage is found in the mui-input/index.js     */
+    /* ========================================================================== */
+
+    /* ========================================================================== */
+    /* BEFORE: When a BUTTON has slot="before" applied to host for INPUT usage    */
+    /* ========================================================================== */
+
+        :host([slot="before"]) button {
+          border: var(--border-thin);
+          min-height: 4.4rem;
+          background: var(--action-secondary-background);
+          color: var(--action-secondary-text-color);
+          border-color: var(--form-default-border-color);
+          border-right: none;
+          border-top-right-radius: var(--radius-000);
+          border-bottom-right-radius: var(--radius-000);
+        }
+
+        :host([slot="before"]) button:hover {
+          background: var(--action-secondary-background-hover);
+          color: var(--action-secondary-text-color-hover);
+          border-color: var(--form-default-border-color-hover);
+        }
+
+    /* ========================================================================== */
+    /* AFTER: When a BUTTON has slot="after" applied to host for INPUT usage      */
+    /* ========================================================================== */
+
+        :host([slot="after"]) button {
+          border: var(--border-thin);
+          min-height: 4.4rem;
+          background: var(--action-secondary-background);
+          color: var(--action-secondary-text-color);
+          border-color: var(--form-default-border-color);
+          border-left: none;
+          border-top-left-radius: var(--radius-000);
+          border-bottom-left-radius: var(--radius-000);
+        }
+
+        :host([slot="after"]) button:hover,
+        :host([slot="after"]) button:focus {
+          background: var(--action-secondary-background-hover);
+          color: var(--action-secondary-text-color-hover);
+          border-color: var(--form-default-border-color-hover);
+        }
+
+    /* ========================================================================== */
+
+
+    </style>
+
+    <button 
+      part="${b("text","spacing","layout","visual")}"
+      onclick="${this.getAttribute("onclick")}" 
+      type="${this.getAttribute("type")||"button"}" 
+      aria-label="${this.getAttribute("aria-label")||""}"
+      ${this.hasAttribute("disabled")?"disabled":""}
+    >
+      <slot></slot>
+    </button>
+
+    `;this.shadowRoot.innerHTML=e}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-button",W);class G extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>      
+      :host {
+        display: flex;
+        gap: var(--space-200);
+      }
+      :host([right]) {
+        justify-content: flex-end;
+      }
+    </style>
+    <slot></slot>`;this.shadowRoot&&(this.shadowRoot.innerHTML=t)}}customElements.define("mui-button-group",G);class J extends HTMLElement{static get observedAttributes(){return["size"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=this.getAttribute("size")||"x-small";this.setAttribute("size",e);const i=`
+      :host {
+        display: block;
+      }
+      :host([size="x-small"]) code {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+      :host([size="small"]) code {
+        font-size: var(--text-font-size-s);
+        line-height: var(--text-line-height-s);
+      }
+      :host([size="medium"]) code {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+      :host([size="large"]) code {
+        font-size: var(--text-font-size-l);
+        line-height: var(--text-line-height-l);
+      }
+      code {
+        display: block;
+        border-radius: inherit;
+        font-family: monospace;
+        color: var(--text-color);
+        background: var(--surface-elevated-200);
+        padding: var(--space-400) var(--space-500);
+        box-sizing: border-box;
+      }
+
+      @media (min-width: 600px) {
+        code {
+          padding: var(--space-500) var(--space-600);
+        } 
+      }
+
+    `;t.innerHTML=`
+      <style>${i}</style>
+      <code><slot></slot></code>
+  `}}customElements.define("mui-code",J);class Z extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;let t=`
+
+    <style>
+
+
+      :host {
+        display: flex;
+      }
+      figure {
+        background: var(--surface-elevated-200);
+        display: block;
+        width: 100%;
+        margin: var(--space-000);
+        border-radius: var(--radius-300);
+        overflow: hidden;
+      }
+      ::slotted(img) {
+        width: 100%;
+        height: auto;
+        display: block;
+        border-style: none;
+        -ms-interpolation-mode: bicubic;
+        vertical-align: middle;
+      }
+      ::slotted(figcaption) {
+        padding: var(--space-500);
+        color: var( --text-color);
+        text-align: center;
+        display: block;
+      }
+    </style>
+
+    <figure>
+      <slot name="image"></slot>
+      <slot name="caption"></slot>
+    </figure>`;this.shadowRoot.innerHTML=t}}customElements.define("mui-image",Z);class K extends HTMLElement{constructor(){super(),this.partMap="",this.attachShadow({mode:"open"})}static get observedAttributes(){return["name","value","id","label","options","disabled","hide-label","variant"]}async connectedCallback(){await this.waitForPartMap(),this.partMap=b("text","visual"),this.render(),this.setupListener()}attributeChangedCallback(t,e){if(!this.shadowRoot)return;const i=this.shadowRoot.querySelector("select");t==="value"&&i&&(i.value=e||""),t==="disabled"&&i&&(e===null||e==="false"?i.removeAttribute("disabled"):i.setAttribute("disabled","")),["options","label","hide-label"].includes(t)&&(this.render(),this.setupListener())}setupListener(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector("select");if(t){const e=t.cloneNode(!0);t.parentNode&&t.parentNode.replaceChild(e,t),e.addEventListener("change",i=>{const s=i.target;s&&this.dispatchEvent(new CustomEvent("change",{detail:{value:s.value},bubbles:!0,composed:!0}))})}}render(){if(!this.shadowRoot)return;const t=this.getAttribute("name")||"",e=this.getAttribute("id")||`mui-select-${Math.random().toString(36).substr(2,9)}`,i=this.getAttribute("label")||"",s=this.getAttribute("value")||"",o=this.hasAttribute("hide-label"),a=this.hasAttribute("disabled"),n=this.getAttribute("options")||"[]",l=this.getAttribute("aria-label")||"",c=this.getAttribute("variant")||"",h=c||"";o&&!i&&console.warn("mui-select Accessibility warning: When using 'hide-label', please provide a 'label' attribute so an 'aria-label' can be generated for screen reader support."),!i&&!l&&console.warn("mui-select Accessibility warning: A 'label' or 'aria-label' attribute is required for screen reader accessibility.");const d=o&&i?`aria-label="${i}"`:"";let u=[];try{u=JSON.parse(n)}catch(g){console.error("Invalid JSON in options attribute",g)}const p=u.map(g=>`<option value="${g.value}" ${g.value===s?"selected":""}>${g.label}</option>`).join(""),v=`
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+          position: relative;
+        }
+        label {
+          font-size: var(--text-font-size);
+          font-weight: var(--font-weight-medium);
+          margin-bottom: var(--space-100);
+          color: var(--text-color);
+          display: block;
+        }
+        select {
+          min-height: 4.4rem;
+          line-height: var(--text-line-height);
+          padding: var(--space-200) var(--space-300);
+          font-size: var(--text-font-size);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-100);
+          color: var(--text-color);
+          background: var(--input-background);
+          width: 100%;
+          box-sizing: border-box;
+          appearance: none;
+        }
+        select:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+        select:focus {
+          outline: var(--outline-thick);
+        }
+        select:disabled {
+          opacity: 0.4;
+          background-color: var(--input-background-disabled);
+          cursor: not-allowed;
+        }
+        select.success {
+          color: var(--form-success-text-color);
+          border-color: var(--form-success-border-color);
+          box-shadow: 0 0 0 2px var(--form-success-border-color);
+        }
+        select.warning {
+          color: var(--form-warning-text-color);
+          border-color: var(--form-warning-border-color);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color);
+        }
+        select.error {
+          color: var(--form-error-text-color);
+          border-color: var(--form-error-border-color);
+          box-shadow: 0 0 0 2px var(--form-error-border-color);
+        }
+        select.success:hover {
+          color: var(--form-success-text-color-hover);
+          border-color: var(--form-success-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-success-border-color-hover);
+        }
+        select.warning:hover {
+          color: var(--form-warning-text-color-hover);
+          border-color: var(--form-warning-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color-hover);
+        }
+        select.error:hover {
+          color: var(--form-error-text-color-hover);
+          border-color: var(--form-error-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-error-border-color-hover);
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        .chevron {
+          position: absolute; 
+          right: var(--space-300);
+          top: 50%;
+          transform: translateY(-50%);
+          padding: var(--space-300);
+          padding-left: var(--space-000);
+          padding-right: var(--space-000);
+          background: var(--input-background);
+          box-shadow: -4px 0 4px 0 var(--input-background);
+          pointer-events: none;
+        }
+
+        /* ========================================================================== */
+        /* STYLE ADJUSTMENTS WHEN SELECT IS SLOTTED WITHIN INPUT                      */
+        /* Related styles unique to this usage is found in the mui-input/index.js     */
+        /* ========================================================================== */
+
+        /* ========================================================================== */
+        /* BEFORE: When a SELECT has slot="before" applied to host for INPUT usage    */
+        /* ========================================================================== */
+
+            :host([slot="before"]) select {
+              border-right: none;
+              border-top-right-radius: var(--radius-000);
+              border-bottom-right-radius: var(--radius-000);
+            }
+
+        /* ========================================================================== */
+        /* AFTER: When a SELECT has slot="after" applied to host for INPUT usage      */
+        /* ========================================================================== */
+
+            :host([slot="after"]) select {
+              border-left: none;
+              border-top-left-radius: var(--radius-000);
+              border-bottom-left-radius: var(--radius-000);
+            }
+
+            /* Ensure feedback styles appear above INPUT */
+            select.success,
+            select.warning,
+            select.error {
+              z-index: 1;
+            }
+
+        /* ========================================================================== */
+
+      </style>
+      ${i?`<label for="${e}" class="${o?"vh":""}">${i}</label>`:""}
+    <select class="${h}" part="${this.partMap||""}" name="${t}" id="${e}" ${d} ${a?"disabled":""} >
+        ${p}
+      </select>
+      <mui-icon-down-chevron class="chevron" size="x-small"></mui-icon-down-chevron>
+    `;this.shadowRoot.innerHTML=v}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-select",K);class Q extends HTMLElement{static get observedAttributes(){return["footer"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;let t=`
+    <style>
+      :host {
+        display: block;
+        border-radius: var(--card-radius);
+        background: var(--surface-elevated-100);
+      }
+      ::slotted(*:last-child) {
+        margin-bottom: 0;
+      }
+      ::slotted(.inner-space-top) {
+      padding-top: 0;
+      }
+    </style>
+    <slot></slot>
+    `;this.shadowRoot.innerHTML=t;const e=this.shadowRoot.querySelector("slot");e&&e.addEventListener("slotchange",()=>{const i=e.assignedElements(),s=i.some(a=>{var n;return((n=a.tagName)==null?void 0:n.toLowerCase())==="mui-card-header"}),o=i.find(a=>{var n;return((n=a.tagName)==null?void 0:n.toLowerCase())==="mui-card-body"});o&&(s?o.classList.add("inner-space-top"):o.classList.remove("inner-space-top"))})}}customElements.define("mui-card",Q);class tt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;let t=`
+    <style>
+      :host {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        padding: var(--space-400) var(--space-500);
+      }
+      @media (min-width: 768px) {
+        :host {
+          padding: var(--space-500) var(--space-600);
+        } 
+      }
+    </style>
+    <slot></slot>
+    `;this.shadowRoot.innerHTML=t}}customElements.define("mui-card-header",tt);class et extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;const t=`
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+        }
+        :host(.inner-space) {
+          padding: var(--space-500);
+        }
+        @media (min-width: 768px) {
+          :host(.inner-space) {
+            padding: var(--space-600);
+          }
+        }
+      </style>
+      <slot></slot>
+    `;this.shadowRoot.innerHTML=t,requestAnimationFrame(()=>{if(!this.shadowRoot)return;const e=this.shadowRoot.querySelector("slot");if(!e)return;const i=e.assignedNodes({flatten:!0});let s=!1;i.forEach(o=>{if(o.nodeType===Node.ELEMENT_NODE){const a=o,l=a.tagName.toLowerCase()==="mui-accordion-group"?a:a.querySelector("mui-accordion-group");l instanceof HTMLElement&&(l.querySelectorAll("mui-accordion-block").forEach(u=>{u.classList.add("card-slot")}),s=!0);const h=a.tagName.toLowerCase()==="mui-table"?a:a.querySelector("mui-table");h instanceof HTMLElement&&(h.querySelectorAll("mui-cell").forEach(u=>{u.classList.add("card-slot")}),s=!0)}}),s||this.classList.add("inner-space")})}}customElements.define("mui-card-body",et);class it extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;const t=`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        :host(.inner-space) {
+          padding: var(--space-400) var(--space-500);
+        }
+
+        @media (min-width: 768px) {
+          :host(.inner-space) {
+            padding: var(--space-500) var(--space-600);
+          }
+        }
+
+        :host(.hidden) {
+          display: none;
+        }
+
+        ::slotted(mui-code) {
+          border-bottom-right-radius: calc(var(--card-radius) - 1px);
+          border-bottom-left-radius: calc(var(--card-radius) - 1px);
+        }
+      </style>
+      <slot></slot>
+    `;this.shadowRoot.innerHTML=t,requestAnimationFrame(()=>{if(!this.shadowRoot)return;const e=this.shadowRoot.querySelector("slot");if(!e)return;const s=e.assignedNodes({flatten:!0}).filter(a=>{var n;return a.nodeType===Node.ELEMENT_NODE||a.nodeType===Node.TEXT_NODE&&((n=a.textContent)==null?void 0:n.trim())!==""});if(s.length===0){this.classList.add("hidden");return}let o=!1;s.forEach(a=>{var n;if(a.nodeType===Node.ELEMENT_NODE){const l=a;(l.tagName.toLowerCase()==="mui-code"||(n=l.querySelector)!=null&&n.call(l,"mui-code"))&&(o=!0)}}),o||this.classList.add("inner-space")})}}customElements.define("mui-card-footer",it);class ot extends HTMLElement{constructor(){super(),this.slotEl=null,this.mql=null;const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${e}</style>
+      <slot></slot>
+    `,this.slotEl=t.querySelector("slot")}static get observedAttributes(){return["breakpoint"]}connectedCallback(){const t=this.getAttribute("breakpoint");if(!t||!this.slotEl)return;this.mql=window.matchMedia(`(max-width: ${t}px)`);const e=i=>{this.slotEl.setAttribute("name",i?"showBelow":"showAbove")};e(this.mql.matches),this.mql.addEventListener("change",i=>{e(i.matches)})}}customElements.define("mui-responsive",ot);class at extends HTMLElement{static get observedAttributes(){return["space","alignY","alignX"]}constructor(){super(),this.attachShadow({mode:"open"}),this.space="var(--space-500)",this.alignY="flex-start",this.alignX="flex-start",this.styles=`
+      :host {
+        display: block;
+      }
+      slot {
+        display: flex;
+        gap: var(--space);
+        align-items: var(--alignY);
+        justify-content: var(--alignX);
+      }
+    `}async connectedCallback(){if(!this.shadowRoot)return;await this.waitForPartMap();const t=b("spacing","layout","visual");this.shadowRoot.innerHTML=`
+      <style>${this.styles}</style>
+      <slot 
+        part="${t}" 
+        style="
+          --space: ${this.getAttribute("space")||this.space};
+          --alignY: ${this.getAttribute("alignY")||this.alignY};
+          --alignX: ${this.getAttribute("alignX")||this.alignX};
+        ">
+      </slot>
+    `}attributeChangedCallback(t,e){if(!this.shadowRoot)return;const i=this.shadowRoot.querySelector("slot");i&&(t==="space"&&i.style.setProperty("--space",e||this.space),t==="alignY"&&i.style.setProperty("--alignY",e||this.alignY),t==="alignX"&&i.style.setProperty("--alignX",e||this.alignX))}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-h-stack",at);class st extends HTMLElement{static get observedAttributes(){return["space","alignX","alignY"]}constructor(){super(),this.attachShadow({mode:"open"}),this.space="var(--space-500)",this.alignX="normal",this.alignY="normal",this.styles=`
+      :host {
+        display: block;
+      }
+      slot {
+        display: grid;
+        gap: var(--space);
+        justify-items: var(--alignX);
+        align-items: var(--alignY);
+      }
+    `}async connectedCallback(){if(!this.shadowRoot)return;await this.waitForPartMap();const t=b("spacing","layout","visual");this.shadowRoot.innerHTML=`
+      <style>${this.styles}</style>
+      <slot 
+        part="${t}" 
+        style="
+          --space: ${this.getAttribute("space")||this.space};
+          --alignX: ${this.getAttribute("alignX")||this.alignX};
+          --alignY: ${this.getAttribute("alignY")||this.alignY};
+        ">
+      </slot>
+    `}attributeChangedCallback(t,e){if(!this.shadowRoot)return;const i=this.shadowRoot.querySelector("slot");i&&(t==="space"&&i.style.setProperty("--space",e||this.space),t==="alignX"&&i.style.setProperty("--alignX",e||this.alignX),t==="alignY"&&i.style.setProperty("--alignY",e||this.alignY))}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-v-stack",st);class rt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.accordions=[]}connectedCallback(){this.shadowRoot&&(this.shadowRoot.innerHTML="<slot></slot>",requestAnimationFrame(()=>{if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements({flatten:!0});this.accordions=e.filter(i=>i.tagName==="MUI-ACCORDION-BLOCK"&&typeof i.closeAccordion=="function"),this.accordions.forEach(i=>{i.removeAttribute("first-child"),i.removeAttribute("last-child")}),this.accordions.length>0&&(this.accordions[0].setAttribute("first-child",""),this.accordions[this.accordions.length-1].setAttribute("last-child","")),this.accordions.forEach(i=>{i.addEventListener("accordion-opened",()=>{this.hasAttribute("exclusive")&&this.accordions.forEach(s=>{s!==i&&s.closeAccordion()})})})}))}}customElements.define("mui-accordion-group",rt);class nt extends HTMLElement{static get observedAttributes(){return["size","level"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;const t=this.getAttribute("size")||"1",i=`h${this.getAttribute("level")||t}`;this.shadowRoot.innerHTML=`
+      <style>
+        @import url("./css/mui-reset.css");
+        :host { display: block; }
+
+        h1, h2, h3, h4, h5, h6 {
+          margin: var(--space-000);
+          font-weight: var(--heading-font-weight);
+          color: var(--heading-text-color);
+        }
+
+        .size-1 { font-size: var(--heading-font-size-100); line-height: var(--heading-line-height-100); }
+        .size-2 { font-size: var(--heading-font-size-200); line-height: var(--heading-line-height-200); }
+        .size-3 { font-size: var(--heading-font-size-300); line-height: var(--heading-line-height-300); }
+        .size-4 { font-size: var(--heading-font-size-400); line-height: var(--heading-line-height-400); }
+        .size-5 { font-size: var(--heading-font-size-500); line-height: var(--heading-line-height-500); }
+        .size-6 { font-size: var(--heading-font-size-600); line-height: var(--heading-line-height-600); }
+      </style>
+      <${i} class="size-${t}">
+        <slot></slot>
+      </${i}>
+    `}}customElements.define("mui-heading",nt);class lt extends HTMLElement{constructor(){super(),this.summaryEl=null,this.detailEl=null,this.chevronEl=null,this.attachShadow({mode:"open"}),this.accordionId=`accordion-detail-${Math.random().toString(36).substring(2,9)}`}connectedCallback(){var o,a;if(customElements.get("mui-icon-right-chevron")||console.warn("mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."),customElements.get("mui-heading")||console.warn("[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."),!this.shadowRoot)return;const t=this.getAttribute("heading")||"Heading...",e=this.getAttribute("size")||"medium",i=this.getAttribute("level")||"3";let s=`
+    <style>
+
+      :host { display: block; }
+
+      .accordion-summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: var(--border-thin);
+        cursor: pointer;
+      }
+
+      .accordion-summary:focus-visible {
+        outline: var(--outline-thick);
+      }
+
+      .accordion-summary:hover .icon {
+        background: var(--surface-elevated-200);
+      }
+
+      .icon {
+        padding: var(--space-200);
+        box-sizing: border-box;
+        display: flex;
+        border-radius: var(--radius-200);
+      }
+
+      mui-icon-down-chevron {
+        transition: transform var(--speed-200) ease-in-out;
+        transform: rotate(0deg);
+      }
+
+      mui-heading {
+        width: 100%;
+      }
+
+      mui-icon-down-chevron[open] {
+        transform: rotate(-180deg);
+      }
+
+      .accordion-detail {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height var(--speed-300) ease;
+        box-shadow: inset 0 1px 0 0 var(--border-color);
+      }
+
+      .accordion-detail[open] {
+        max-height: 200vh;
+      }
+
+      .accordion-detail-inner {
+        padding: var(--space-500);
+      }
+
+      .accordion-detail-inner > *:last-child {
+        margin-bottom: 0;
+      }
+
+      .size-small-summary {
+        padding: var(--space-300) var(--space-500);
+      }
+      .size-medium-summary {
+        padding: var(--space-400) var(--space-500);
+      }
+      .size-large-summary {
+        padding: var(--space-500) var(--space-600);
+      }
+        
+      .size-small-detail {
+        padding: var(--space-500);
+      }
+      .size-medium-detail {
+        padding: var(--space-500);
+      }
+      .size-large-detail {
+        padding: var(--space-600);
+      }
+
+      :host([first-child]) .accordion-summary {
+        border-top: none;
+      }
+
+      /* Card Slot (Supports: Table Cell, Accordion Block) */
+      :host(.card-slot) .accordion-summary {
+        padding-left: var(--space-500);
+        padding-right: var(--space-500);
+      }
+      @media (min-width: 768px) {
+        :host(.card-slot) .accordion-summary {
+          padding-left: var(--space-600);
+          padding-right: var(--space-600);
+        }
+      }
+      :host(.card-slot) .accordion-detail-inner {
+        padding-left: var(--space-500);
+        padding-right: var(--space-500);
+      }
+      @media (min-width: 768px) {
+        :host(.card-slot) .accordion-detail-inner {
+          padding-left: var(--space-600);
+          padding-right: var(--space-600);
+        }
+      }
+
+    </style>
+
+    <div
+      class="accordion-summary size-${e}-summary"
+      role="button"
+      tabindex="0"
+      aria-expanded="false"
+      aria-controls="${this.accordionId}"
+    >
+      <mui-heading size="6" level="${i}">${t}</mui-heading>
+      <div class="icon">
+        <mui-icon-down-chevron size="x-small"></mui-icon-down-chevron>
+      </div>
+    </div>
+
+    <div id="${this.accordionId}" class="accordion-detail">
+      <div class="accordion-detail-inner size-${e}-detail" inert>
+        <slot name="detail">Insert Content</slot>
+      </div>
+    </div>
+    
+    `;if(this.shadowRoot.innerHTML=s,this.summaryEl=this.shadowRoot.querySelector(".accordion-summary"),this.detailEl=this.shadowRoot.querySelector(".accordion-detail"),this.chevronEl=this.shadowRoot.querySelector("mui-icon-down-chevron"),!this.summaryEl||!this.detailEl||!this.chevronEl){console.error("Accordion elements not found");return}(o=this.summaryEl)==null||o.addEventListener("click",()=>this.toggleAccordion()),(a=this.summaryEl)==null||a.addEventListener("keydown",n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.toggleAccordion())})}toggleAccordion(){if(!this.detailEl||!this.chevronEl||!this.summaryEl)return;const t=this.detailEl.hasAttribute("open");this.setOpen(!t)}setOpen(t){if(!this.detailEl||!this.chevronEl||!this.summaryEl)return;const e=this.detailEl.querySelector(".accordion-detail-inner");t?(this.detailEl.setAttribute("open",""),this.chevronEl.setAttribute("open",""),this.summaryEl.setAttribute("aria-expanded","true"),e&&e.removeAttribute("inert"),this.dispatchEvent(new CustomEvent("accordion-opened",{bubbles:!0,composed:!0}))):(this.detailEl.removeAttribute("open"),this.chevronEl.removeAttribute("open"),this.summaryEl.setAttribute("aria-expanded","false"),e&&e.setAttribute("inert",""))}closeAccordion(){this.setOpen(!1)}}customElements.define("mui-accordion-block",lt);class ct extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){var s,o;if(customElements.get("mui-icon-right-chevron")||console.warn("mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."),customElements.get("mui-heading")||console.warn("[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."),!this.shadowRoot)return;const t=this.getAttribute("heading")||"Heading...";let i=`
+    <style>
+      :host { 
+        display: inline-flex;
+        flex-direction: column;
+      }
+
+      .accordion-summary {
+        display: flex;
+        align-items: center;
+        margin-bottom: var(--space-000);
+        cursor: pointer;
+      }
+
+
+      .accordion-summary:focus-visible {
+        outline: var(--outline-thick);
+      }
+
+      mui-heading:hover {
+        cursor: pointer;
+      }
+
+      mui-icon-right-chevron {
+        margin-right: var(--space-100);
+        transition: var(--speed-200) ease-in-out;
+      }
+
+      mui-icon-right-chevron[open] {
+        transform: rotate(90deg);
+      }
+
+      .accordion-detail {
+        display: block;
+        margin-bottom: var(--space-000);
+        max-height: 0;
+        transition: max-height var(--speed-100) ease-in-out;
+        overflow-y: hidden;
+      }
+
+      .accordion-detail[open] {
+        max-height: 200vh;
+        transition: max-height var(--speed-400) ease-in-out;
+      }
+
+      .accordion-detail-inner {
+        display: block;
+        margin-top: 1.2rem;
+      }
+
+      .accordion-detail-inner > *:last-child {
+        margin-bottom: var(--space-000);
+      }
+    </style>
+
+    <div class="accordion-summary" tabindex="0" role="button" aria-expanded="false">
+      <mui-icon-right-chevron size="x-small"></mui-icon-right-chevron>
+      <mui-heading size="6" level="${this.getAttribute("level")||"3"}">${t}</mui-heading>
+    </div>
+
+    <div class="accordion-detail">
+      <div class="accordion-detail-inner" inert>
+        <slot name="detail">Insert Content</slot>
+      </div>
+    </div>
+    `;this.shadowRoot.innerHTML=i,this.summaryEl=this.shadowRoot.querySelector(".accordion-summary"),this.detailEl=this.shadowRoot.querySelector(".accordion-detail"),this.chevronEl=this.shadowRoot.querySelector("mui-icon-right-chevron"),(s=this.summaryEl)==null||s.addEventListener("click",this.toggleAccordion.bind(this)),(o=this.summaryEl)==null||o.addEventListener("keydown",a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),this.toggleAccordion())})}toggleAccordion(){if(!this.detailEl||!this.chevronEl||!this.summaryEl)return;const t=this.detailEl.hasAttribute("open");this.detailEl.toggleAttribute("open"),this.chevronEl.toggleAttribute("open"),this.summaryEl.setAttribute("aria-expanded",String(!t));const e=this.detailEl.querySelector(".accordion-detail-inner");e&&(t?e.setAttribute("inert",""):e.removeAttribute("inert"))}}customElements.define("mui-accordion-inline",ct);class dt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+
+      :host {
+        display: block;
+        width: 95%;
+        width: calc( 100% - 4.8rem );
+        max-width: 118.0rem;
+        padding-top: 2.4rem;
+        padding-bottom: 2.4rem;
+        min-width: 27.2rem;
+        margin: 0 2.4rem; }
+
+      /* Center
+      ========================================= */
+      :host([center]) {
+        margin: 0 auto; }
+      /* ===================================== */
+
+      /* Fluid
+      ========================================= */
+      :host([fluid]) {
+        max-width: 100%; }
+      /* ===================================== */
+
+      /* Small
+      ========================================= */
+      :host([small]) {
+        max-width: 54.0rem; }
+      /* ===================================== */
+
+      /* Medium
+      ========================================= */
+      :host([medium]) {
+        max-width: 70.0rem; }
+      /* ===================================== */
+
+      /* Large
+      ========================================= */
+      :host([large]) {
+        max-width: 118.0rem; }
+      /* ===================================== */
+    </style>
+    <slot></slot>
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=t)}}customElements.define("mui-container",dt);class ht extends HTMLElement{static get observedAttributes(){return["slot"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){t==="slot"&&e!==i&&this.render()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          padding: var(--space-200) var(--space-400);
+          background: var(--addon-background);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          height: 4.4rem;
+          min-width: 4.4rem;
+          white-space: nowrap;
+        }
+        :host([slot="before"]) {
+          border-right: none;
+          border-top-left-radius: var(--radius-100);
+          border-bottom-left-radius: var(--radius-100);
+        }
+        :host([slot="after"]) {
+          border-left: none;
+          border-top-right-radius: var(--radius-100);
+          border-bottom-right-radius: var(--radius-100);
+        }
+      </style>
+      <slot></slot>
+    `)}}customElements.define("mui-addon",ht);class ut extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.render()}static get observedAttributes(){return["variant"]}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("variant")||"neutral",i={neutral:"var(--badge-background-neutral)",positive:"var(--badge-background-positive)",warning:"var(--badge-background-warning)",attention:"var(--badge-background-attention)"},s={neutral:"off",positive:"polite",warning:"assertive",attention:"assertive"},o=i[e],a=s[e],n=`
+      :host {
+        display: inline-block;
+        border-radius: var(--badge-radius);
+        background: ${o};
+        font-size: var(--text-font-size-xs);
+        font-weight: var(--badge-font-weight);
+        color: var(--badge-text-color);
+        padding: var(--space-050) var(--space-200);
+      }
+    `;this.setAttribute("role","status"),this.setAttribute("aria-live",a),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+        <style>${n}</style>
+        <slot></slot>
+      `)}}customElements.define("mui-badge",ut);class mt extends HTMLElement{static get observedAttributes(){return["col","space"]}constructor(){super(),this.attachShadow({mode:"open"})}async connectedCallback(){await this.waitForPartMap();const t=this.getAttribute("col")||"1fr 1fr",e=this.getAttribute("space")||"var(--space-000)",i=b("layout","spacing"),s=`
+      :host {
+        display: block;
+      }
+      div {
+        display: grid;
+        grid-template-columns: var(--col);
+        gap: var(--gap);
+      }
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>${s}</style>
+      <div part="${i}" style="--col: ${t}; --gap: ${e};">
+        <slot></slot>
+      </div>
+    `)}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-grid",mt);class pt extends HTMLElement{constructor(){super(),this._checked=!1,this._checkbox=null,this.attachShadow({mode:"open"}),this._checked=!1}connectedCallback(){var t;this.render(),this._checkbox=this.shadowRoot.querySelector('input[type="checkbox"]'),this._checked=this.hasAttribute("checked"),this._checkbox&&(this._checkbox.checked=this._checked),this._updateIcons(),this._updateDisabledState(),(t=this._checkbox)==null||t.addEventListener("change",()=>{this._checkbox&&(this.checked=this._checkbox.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))})}static get observedAttributes(){return["label","disabled","checked"]}attributeChangedCallback(t,e,i){if(t==="checked"&&e!==i&&(this._checked=i!==null,this._checkbox&&(this._checkbox.checked=this._checked,this._updateIcons())),t==="disabled"&&e!==i){const s=i!==null;this._checkbox&&(this._checkbox.disabled=s,this._checkbox.setAttribute("aria-disabled",s.toString())),this._updateDisabledState()}}get checked(){return this._checked}set checked(t){const e=!!t;this._checked!==e&&(this._checked=e,e?this.setAttribute("checked",""):this.removeAttribute("checked"),this._checkbox&&(this._checkbox.checked=this._checked,this._checkbox.setAttribute("aria-checked",this._checked.toString()),this._updateIcons()))}_updateDisabledState(){var e,i,s,o;this.hasAttribute("disabled")?(this.shadowRoot.host.classList.add("disabled"),(e=this._checkbox)==null||e.setAttribute("aria-disabled","true"),(i=this._checkbox)==null||i.setAttribute("tabindex","-1")):(this.shadowRoot.host.classList.remove("disabled"),(s=this._checkbox)==null||s.removeAttribute("aria-disabled"),(o=this._checkbox)==null||o.removeAttribute("tabindex"))}_updateIcons(){const t=this.shadowRoot.querySelector('slot[name="on-icon"]'),e=this.shadowRoot.querySelector('slot[name="off-icon"]');t&&t.assignedElements().forEach(i=>{i.style.display=this._checked?"inline":"none"}),e&&e.assignedElements().forEach(i=>{i.style.display=this._checked?"none":"inline"})}render(){const t=this.getAttribute("label");t||console.warn("mui-switch Accessibility warning: Provide a 'label' to ensure the switch is described for assistive technologies."),this.shadowRoot.innerHTML=`
+      <style>
+        :host { display: inline-block; }
+
+        .switch {
+          position: relative;
+          display: inline-block;
+          width: var(--switch-width);
+          height: var(--switch-height);
+        }
+
+        .switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .switch input:focus-visible + .track {
+          outline: var(--outline-thick);
+        }
+
+        .track {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--switch-track-background);
+          transition: background-color var(--speed-200);
+          border-radius: var(--switch-height);
+        }
+
+        .thumb {
+          position: absolute;
+          top: var(--switch-offset);
+          left: var(--switch-offset);
+          width: var(--switch-thumb-size);
+          height: var(--switch-thumb-size);
+          background-color: var(--switch-thumb-bg);
+          transition: transform var(--speed-200);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        input:checked + .track {
+          background-color: var(--switch-track-background-checked);
+        }
+
+        input:checked + .track .thumb {
+          transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - (var(--switch-offset) * 2)));
+        }
+
+        ::slotted([slot="on-icon"]),
+        ::slotted([slot="off-icon"]) {
+          width: 16px;
+          height: 16px;
+          fill: var(--switch-icon);
+        }
+
+        :host(.disabled) {
+          cursor: not-allowed;
+        }
+
+        :host(.disabled) .switch {
+          opacity: 0.4;
+          pointer-events: none;
+        }
+
+      </style>
+      <label class="switch">
+        <input 
+          type="checkbox"
+          role="switch"
+          aria-checked="${this._checked}"
+          ${t?`aria-label="${t}"`:""}
+        >
+        <span class="track">
+          <span class="thumb">
+            <slot name="on-icon"></slot>
+            <slot name="off-icon"></slot>
+          </span>
+        </span>
+      </label>
+    `}}customElements.define("mui-switch",pt);class bt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.setAttribute("role","table"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+    <style>
+      :host {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-500);
+        box-sizing: border-box;
+      }
+    </style>
+    <slot name="start"></slot>
+    <slot name="end"></slot>
+    `)}}customElements.define("mui-slat",bt);class vt extends HTMLElement{static get observedAttributes(){return["size","weight","variant"]}constructor(){super(),this.attachShadow({mode:"open"});const t=this.getAttribute("size")||"medium",e=this.getAttribute("weight")||"regular",i=this.getAttribute("variant")||"default";this.setAttribute("size",t),this.setAttribute("variant",i),this.setAttribute("weight",e)}async connectedCallback(){await this.waitForPartMap();let e=`
+    <style>
+      :host { display: block; }
+
+      :host p {
+        color: var(--text-color);
+        margin: var(--space-000);
+        display: block;
+        width: 100%;
+      }
+
+      :host([size="x-small"]) p {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) p {
+        font-size: var(--text-font-size-s); 
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) p {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+
+      :host([size="large"]) p {
+        font-size: var(--text-font-size-l); 
+        line-height: var(--text-line-height-l);
+      }
+
+      :host([weight="regular"]) p { font-weight: var(--font-weight-regular); }
+      :host([weight="medium"]) p { font-weight: var(--font-weight-medium); }
+      :host([weight="bold"]) p { font-weight: var(--font-weight-bold); }
+
+      /* Variant */
+      :host([variant="default"]) p {
+        color: var(--text-color);
+      }
+      :host([variant="success"]) p {
+        color: var(--text-color-success);
+      }
+      :host([variant="warning"]) p {
+        color: var(--text-color-warning);
+      }
+      :host([variant="error"]) p {
+        color: var(--text-color-error);
+      }
+
+    </style>
+    
+    <p part="${b("spacing","layout","visual")}"><slot></slot></p>
+
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=e)}waitForPartMap(){return new Promise(t=>{if(typeof b=="function")return t();const e=()=>{typeof b=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-body",vt);class gt extends HTMLElement{static get observedAttributes(){return["length","weight","direction"]}constructor(){super();const t=this.attachShadow({mode:"open"});let e="horizontal",i="100%",s="1px";this.setAttribute("role","presentation"),this.setAttribute("direction",this.getAttribute("direction")||e),this.setAttribute("length",this.getAttribute("length")||i),this.setAttribute("weight",this.getAttribute("weight")||s);const o=`
+      :host {
+        display: block;
+        background: var(--border-color);
+      }
+      :host([direction="horizontal"]) {
+        width: ${this.getAttribute("length")||i};
+        height: ${this.getAttribute("weight")||s};
+      }
+      :host([direction="vertical"]) {
+        height: ${this.getAttribute("length")||i};
+        width: ${this.getAttribute("weight")||s};
+      }
+    `;t.innerHTML=`
+    <style>${o}</style>
+  `}}customElements.define("mui-rule",gt);class ft extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+      @import url("./css/mui-reset.css");
+      :host { display: block; }
+      blockquote {
+        border-left: var(--border-thick);
+        padding-left: var(--space-500);
+        font-size: var(--space-500);
+        line-height: 1.5;
+        margin: var(--space-500) var(--space-000);
+        font-style: italic;
+      }
+    </style>
+    <blockquote><slot></slot></blockquote>
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=t)}}customElements.define("mui-quote",ft);class yt extends HTMLElement{static get observedAttributes(){return["state","number","variant","partner","type","logo","logo-width","logo-height","bg-color","bg-image","inverted"]}constructor(){super(),this.attachShadow({mode:"open"})}attributeChangedCallback(){this.render()}connectedCallback(){this.render()}render(){const t=this.getAttribute("state")||"default",e=this.getAttribute("number")||"0000",i=this.getAttribute("bg-color"),s=this.getAttribute("bg-image"),o=this.getAttribute("variant")||"plain",a=this.hasAttribute("inverted"),n=this.getAttribute("type")||"",l=t==="frozen",c=this.getAttribute("logo")||"",h=this.getAttribute("partner")||"",d=this.getAttribute("logo-height"),u=d&&!isNaN(parseInt(d,10))?parseInt(d,10):void 0;u&&u>126&&console.warn(`[mui-smart-card] The logo height (${u}px) exceeds the recommended maximum of 126px. This may affect vertical alignment or visual consistency.`);let p="card",v="";o==="animated"?p+=" animated":p+=" plain",s?v=`
+        background-image: url(${s});
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      `:i?v=`background: ${i};`:v=`
+        background: ${a?"linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%)":"linear-gradient(180deg, var(--grey-200) 0%, var(--white) 100%)"};
+      `,this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        @keyframes cardAnimationMobile {
+          0% {
+            background-size: 101.265823% auto;
+            background-position: center;
+          }
+          60% {
+            background-size: 106.329114% auto;
+            background-position: center;
+          }
+          100% {
+            background-size: 101.265823% auto;
+            background-position: center;
+          }
+        }
+
+        @keyframes cardAnimationDesktop {
+          0% {
+            background-size: 400px auto;
+            background-position: center;
+          }
+          60% {
+            background-size: 420px auto;
+            background-position: center;
+          }
+          100% {
+            background-size: 400px auto;
+            background-position: center;
+          }
+        }
+
+        @keyframes cardGradient {
+          0% { background-position: 0% 10%; }
+          50% { background-position: 100% 91%; }
+          100% { background-position: 0% 10%; }
+        }
+
+        :host {
+          width: 100%;
+          max-width: 395px;
+          min-width: 247px;
+          border-radius: var(--radius-300);
+          overflow: hidden;
+          box-shadow: 0 0px 8px rgb(0 0 0 / 12%), 0 2px 16px rgb(0 0 0 / 12%),
+            0 4px 20px rgb(0 0 0 / 12%), 0 12px 28px rgb(0 0 0 / 12%);
+        }
+
+        .card-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          padding: calc(var(--space-300) + var(--space-025));
+          padding-bottom: 0;
+        }
+
+        /* Company */
+        /* =========================================== */
+        .logo {
+          display: flex;
+          justify-content: flex-end;
+          align-items: start;
+          max-width: 60%;
+          max-height: 60%;
+          overflow: hidden;
+        }
+
+        .logo img {
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+          display: block;
+          width: auto;
+          height: ${u?`calc(${u}px / 1.5)`:"auto"};
+        }
+
+        @media (min-width: 500px) {
+          .logo img {
+            width: auto;
+            height: ${u?`${u}px`:"auto"};
+          }   
+        }
+
+        /* Invert Logic */
+        /* =========================================== */
+        .type,
+        .card-number::part(display) {
+          color: ${a?"var(--white)":"var(--black)"};
+          text-shadow: ${a?"0 0px 8px rgb(0 0 0 / 12%);":"0 0px 8px rgb(255 255 255 / 12%);"};
+        }
+
+        img { 
+          filter: ${a?"drop-shadow(0px 1px 0px var(--black-opacity-60))":"drop-shadow(0px 1px 0px var(--white-opacity-60))"};
+        }
+
+
+        .inner {
+          box-shadow: ${a?"inset 0 1px 0 0 rgb(255 255 255 / 20%), 0 1px 0 0 rgb(0 0 0 / 10%)":"inset 0 1px 0 0 rgb(255 255 255 / 60%), 0 1px 0 0 rgb(0 0 0 / 40%)"};
+        }
+
+        .card.animated .inner::after {
+          background: linear-gradient(${a?"120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 8%) 40%, rgb(255 255 255 / 4%) 40%":"120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 25%) 40%, rgb(255 255 255 / 8%) 40%"});
+        }
+
+        /* Type */
+        /* =========================================== */
+        .type {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          text-transform: uppercase;
+          letter-spacing: var(--space-025);
+          font-weight: var(--font-weight-medium);
+        }
+        @media (min-width: 500px) {
+          .type {
+            font-size: var(--text-font-size-s);
+            line-height: var(--text-line-height-s);
+         }    
+        }
+
+        /* Card Number */
+        /* =========================================== */
+        .card-number {
+          bottom: calc(var(--space-300) + var(--space-025));
+          left: calc(var(--space-300) + var(--space-025));
+          position: absolute;
+          z-index: 1;
+        }
+
+        .card-number::part(display) {
+          display: flex;
+          gap: var(--space-100);
+          box-sizing: border-box;
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          font-weight: var(--font-weight-medium);
+        }
+
+        @media (min-width: 500px) {
+          .card-number::part(display) {
+            font-size: var(--text-font-size-s);
+            line-height: var(--text-line-height-s);
+         }    
+        }
+
+        /* Provider */
+        /* =========================================== */
+        .card-partner {
+          height: auto;
+          width: auto;
+          display: flex;
+          justify-content: end;
+          align-items: end;
+          bottom: calc(var(--space-300) + var(--space-025));
+          right: calc(var(--space-300) + var(--space-025));
+          position: absolute;
+          z-index: 1;
+        }
+
+        .card-partner img {
+          width: calc(100% / 1.5);
+          height: auto;
+        }
+
+        @media (min-width: 500px) {
+          .card-partner img {
+            width: 100%;
+          } 
+        }
+
+        /* Variant - Base */
+        /* =========================================== */
+        .card {
+          position: relative;
+          box-sizing: border-box;
+          display: grid;
+          grid-template-rows: 1fr auto;
+          -webkit-font-smoothing: antialiased;
+          font-size: 14px;
+          width: 100%;
+          max-width: 395px;
+          max-height: 248px;
+          min-width: 247px;
+          aspect-ratio: 1014 / 638;
+        }
+
+        .inner {
+          display: grid;
+          grid-template-rows: 1fr auto;
+          border-radius: var(--radius-300);
+        }
+
+        /* Variant - Virtual */
+        /* =========================================== */
+        .card.animated .inner {
+          animation-name: cardAnimationMobile;
+          animation-duration: 10s;
+          transform: translateZ(0);
+          position: relative;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+          animation-timing-function: ease-in-out;
+        }
+
+        @media (min-width: 500px) {
+          .card.animated .inner {
+            animation-name: cardAnimationDesktop;
+          }
+        }
+
+        .card.animated .inner::before {
+          content: "";
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          z-index: 1;
+          border-radius: 16px;
+        }
+
+        .card.animated .inner::after {
+          content: "";
+          width: 100%;
+          height: 100%;
+          border-radius: 16px;
+          background-size: 150% 150%;
+          animation: cardGradient 45s ease-in-out infinite;
+          transform: translateZ(0);
+          position: absolute;
+        }
+
+        /* Frozen State */
+        /* =========================================== */
+        .frozen {
+          filter: grayscale(100%);
+          transition: filter 0.2s ease-in-out;
+          position: relative;
+        }
+        .frozen .inner {
+          filter: blur(16px);
+          transition: filter 0.2s ease-in-out;
+        }
+        .frozen:hover {
+          filter: grayscale(0%);
+        }
+        .frozen:hover .inner {
+          filter: blur(0);
+        }
+        mui-badge {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-50%);
+          opacity: 1;
+          transition: opacity 0.2s ease-in-out;
+        }
+
+        .frozen:hover mui-badge { opacity: 0; }
+
+      </style>
+
+      <div
+
+        class="${p} 
+        ${l?"frozen":""}" 
+        >
+        ${l?"<mui-badge>Frozen</mui-badge>":""}
+
+        <div class="inner" style="${v}">
+          <div class="card-top">
+            <span class="type">${n?`${n}`:""}</span>
+            ${c?`
+                  <div class="logo">
+                    <img src="${c}" class="logo-img" />
+                  </div>`:""}
+          </div>
+
+          <mui-body class="card-number"><span>••••</span><span>${e}</span></mui-body>
+
+          <div class="card-partner">
+
+            ${h?`
+       
+                    <img src="${h}" class="logo-img" alt="partner logo"/>
+                 `:""}
+
+
+
+          </div>
+        </div>
+
+      </div>
+    `)}}customElements.define("mui-smart-card",yt);class wt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.setAttribute("role","table"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+    <style>
+      :host {
+        display: block;
+        box-sizing: border-box;
+        text-indent: initial;
+        width: 100%;
+        margin: var(--space-000);
+      }
+    </style>
+    <slot></slot>
+    `)}}customElements.define("mui-table",wt);class kt extends HTMLElement{static get observedAttributes(){return["columns"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.setAttribute("role","row"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+    <style>
+      :host {
+        display: grid;
+        grid-template-columns: ${this.getAttribute("columns")};
+        grid-gap: var(--space-500);
+        margin-bottom: var(--space-000);
+        padding: var(--space-300) var(--space-000);
+        border-top: var(--border-thin);
+        align-items: center;
+      }
+    </style>
+    <slot></slot>
+    `)}}customElements.define("mui-row",kt);class xt extends HTMLElement{static get observedAttributes(){return["align-y"]}constructor(){super();const t=this.attachShadow({mode:"open"});this.setAttribute("role","cell");const e=`
+    :host {
+      display: flex;
+      justify-content: space-between;
+      align-self: ${this.getAttribute("align-y")||"initial"};
+      text-align: left;
+    }
+    :host(*:first-of-type) {
+      padding-left: var(--space-600);
+    }
+    :host(*:last-of-type) {
+      padding-right: var(--space-600);
+    }
+
+    /* Card Slot (Supports: Table Cell, Accordion Block) */
+    :host(.card-slot:first-of-type) {
+      padding-left: var(--space-500);
+    }
+    :host(.card-slot:last-of-type) {
+      padding-right: var(--space-500);
+    }
+    @media (min-width: 768px) {
+      :host(.card-slot:first-of-type) {
+        padding-left: var(--space-600);
+      }
+      :host(.card-slot:last-of-type) {
+        padding-right: var(--space-600);
+      }
+    }
+
+    :host([checkbox]) {
+      width: auto;
+      padding: 0;
+      text-align: center;
+    }
+    :host([action]) {
+      width: 4.4rem;
+      height: 4.4rem;
+      padding: 0;
+      padding-right: var(--space-300);
+    }
+    :host([heading]) {
+      font-weight: bold;
+    }
+  `;t.innerHTML=`
+    <style>${e}</style>
+    <slot></slot>
+  `}}customElements.define("mui-cell",xt);class At extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.setAttribute("role","rowgroup"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+    <style>
+      :host {
+        display: block;
+      }
+      :host([heading]) {
+        display: block;
+      }
+
+      :host([heading]) ::slotted(mui-row) {
+        border: none;
+      }
+    </style>
+    <slot></slot>
+    `)}}customElements.define("mui-row-group",At);class Et extends HTMLElement{static get observedAttributes(){return["variant","message"]}constructor(){super(),this.attachShadow({mode:"open"});const t=this.getAttribute("variant")||"default";this.setAttribute("variant",t)}connectedCallback(){this.render(),this.passAttributesToChild()}attributeChangedCallback(t,e,i){(t==="variant"||t==="message")&&(this.render(),this.passAttributesToChild())}passAttributesToChild(){var s;if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector("slot"),e=(s=t==null?void 0:t.assignedElements)==null?void 0:s.call(t)[0];if(!e)return;["variant","label","hide-label"].forEach(o=>{this.hasAttribute(o)?e.setAttribute(o,this.getAttribute(o)||""):e.removeAttribute(o)})}render(){const t=this.getAttribute("message"),e=this.getAttribute("variant");this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          display: block;
+        }
+
+        mui-body {
+          margin-top: var(--space-100);
+        }
+      </style>
+
+      <slot></slot>
+      ${t?`<mui-body size="small" variant="${e}">${t}</mui-body>`:""}
+    `)}}customElements.define("mui-field",Et);function zt(r){return["positive","info","warning","attention"].includes(r)}class Lt extends HTMLElement{static get observedAttributes(){return["variant"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const t=this.getAttribute("variant")||"positive",e={success:"positive",error:"attention"},i=zt(t)?t:e[t]||"positive";this.setAttribute("variant",i);const s={positive:"polite",info:"polite",warning:"assertive",attention:"assertive"};this.setAttribute("role","alert"),this.setAttribute("aria-live",s[i]||"polite");const o={positive:"mui-icon-check",info:"mui-icon-info",warning:"mui-icon-warning",attention:"mui-icon-attention"},a={positive:"--feedback-positive-icon",info:"--feedback-info-icon",warning:"--feedback-warning-icon",attention:"--feedback-attention-icon"},n={positive:"--feedback-positive-text",info:"--feedback-info-text",warning:"--feedback-warning-text",attention:"--feedback-attention-text"},l={positive:"Success!",info:"Info:",warning:"Warning!",attention:"Error!"};this.setAttribute("aria-live",s[i]);const c=o[i],h=a[i],d=n[i],u=l[i],p=`
+      :host {
+        border-radius: var(--alert-radius);
+        padding: var(--alert-padding);
+        background: var(--white);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: start;
+        gap: var(--alert-gap-horizontal-mobile);
+        box-sizing: border-box;
+      }
+
+     @media (min-width: 600px) {
+        :host {
+          gap: var(--alert-gap-horizontal-desktop);
+        }
+      }
+
+      @media (min-width: 600px) {
+        .icon {
+          margin-top: var(--space-000);
+        }
+      }
+
+      .label {
+        color: var(${d}); font-weight: var(--font-weight-bold);
+      }
+
+      mui-body::part(display) {
+        display: inline;
+      }
+
+      mui-body::part(gap) {
+        gap: var(--space-000);
+      }
+
+      ${["positive","info","warning","attention"].map(v=>`
+        :host([variant="${v}"]) {
+          border: var(--feedback-${v}-border);
+          background: var(--feedback-${v}-background);
+        }
+      `).join("")}
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>${p}</style>
+      <${c} size="small" color="var(${h})" class="icon"></${c}>
+      <mui-body>
+        <span class="label">${u}</span>
+        <slot></slot>
+      </mui-body>
+    `)}}customElements.define("mui-alert",Lt);const Tt=["neutral","positive","info","warning","attention"],Mt={neutral:"background-color: var(--feedback-neutral-background); border: var(--feedback-neutral-border);",positive:"background-color: var(--feedback-positive-background); border: var(--feedback-positive-border);",info:"background-color: var(--feedback-info-background); border: var(--feedback-info-border);",warning:"background-color: var(--feedback-warning-background); border: var(--feedback-warning-border);",attention:"background-color: var(--feedback-attention-background); border: var(--feedback-attention-border);"},Ct={neutral:"polite",positive:"polite",info:"polite",warning:"assertive",attention:"assertive"},$t={neutral:"status",positive:"status",info:"status",warning:"alert",attention:"alert"},_t={neutral:"--feedback-neutral-icon",positive:"--feedback-positive-icon",info:"--feedback-info-icon",warning:"--feedback-warning-icon",attention:"--feedback-attention-icon"},St={neutral:"color: var(--feedback-neutral-text);",positive:"color: var(--feedback-positive-text);",info:"color: var(--feedback-info-text);",warning:"color: var(--feedback-warning-text);",attention:"color: var(--feedback-attention-text);"},Rt={neutral:"mui-icon-message",positive:"mui-icon-check",info:"mui-icon-info",warning:"mui-icon-warning",attention:"mui-icon-attention"};class Ht extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const t=this.getAttribute("variant")||"neutral",e=Tt.includes(t)?t:"neutral",i=this.getAttribute("heading")||"Heading...",o=this.getAttribute("icon")||Rt[e],a=_t[e],n=St[e],l=Mt[e],c=Ct[e],h=$t[e],d=`
+      :host {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      section {
+        padding: var(--message-padding);
+        border-radius: var(--message-radius);
+        ${l}
+      }
+
+      .icon {
+        margin-top: var(--space-025);
+        display: flex;
+      }
+
+      .heading {
+        font-weight: var(--font-weight-bold);
+        font-size: var(--font-size-200);
+        ${n}
+      }
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=`
+        <style>${d}</style>
+    
+      <section aria-labelledby="message-heading" aria-live="${c}" role="${h}">
+        <mui-h-stack space="var(--message-gap-horizontal)">
+          <div class="icon">
+            <${o} color="var(${a})"></${o}>
+          </div>
+          <mui-v-stack space="var(--message-gap-vertical)">
+            <div class="heading" id="message-heading">${i}</div>
+            <slot>
+              <mui-body>Body content...</mui-body>
+            </slot>
+          </mui-v-stack>
+        </mui-h-stack>
+      </section>
+      `)}}customElements.define("mui-message",Ht);class It extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.acceptedFileTypes=this.getAttribute("acceptedFileTypes")||"",this.currentFileName=this.getAttribute("currentFileName")||"",this.selectedFileName=null,this.render(),this.cacheElements(),this.attachEvents()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        .wrapper {
+          transition: background-color var(--speed-300) ease;
+          cursor: pointer;
+          align-items: center;
+          justify-content: space-between;
+          padding-left: 16px;
+          display: flex;
+          width: 100%;
+          line-height: var(--text-line-height-s);
+          box-sizing: border-box;
+          font-size: var(--text-font-size-s);
+          border-radius: var(--radius-100);
+          border: var(--border-thin);
+          border-style: dashed;
+          border-color: var(--form-default-border-color);
+          color: var(--text-color);
+          background: var(--input-background);
+          min-height: 4.2rem;
+        }
+        .wrapper:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+        .label {
+          width: 90px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        @media (min-width: 340px) {
+          .label {
+            width: 115px;
+          }
+        }
+        @media (min-width: 440px) {
+          .label {
+            width: 175px;
+          }
+        }
+        @media (min-width: 600px) {
+          .label {
+            width: 220px;
+          }
+        }
+
+        mui-button::part(height) {
+          margin-right: 0.1rem;
+        }
+
+        mui-button::part(height) {
+          height: calc(4.2rem - 0.4rem);
+          padding: var(--space-400);
+          padding-top: var(--space-000);
+          padding-bottom: var(--space-000);
+
+        }
+
+        mui-button::part(border-radius) {
+          border-radius: calc(var(--radius-100) - 2px);
+        }
+
+        input[type="file"] {
+          display: none;
+        }
+      </style>
+      <div class="wrapper">
+        <span class="label">${this.currentFileName}</span>
+        <mui-button variant="tertiary">Browse</mui-button>
+        <input type="file" accept="${this.acceptedFileTypes}" />
+      </div>
+    `)}cacheElements(){this.shadowRoot&&(this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.label=this.shadowRoot.querySelector(".label"),this.button=this.shadowRoot.querySelector(".button"),this.input=this.shadowRoot.querySelector('input[type="file"]'))}attachEvents(){this.wrapper.addEventListener("click",()=>{this.input.click()}),this.input.addEventListener("change",this.handleFileChange.bind(this))}handleFileChange(t){var s;const i=(s=t.target.files)==null?void 0:s[0];i&&(this.selectedFileName=i.name,this.label.textContent=i.name,this.dispatchEvent(new CustomEvent("file-upload",{detail:{file:i},bubbles:!0,composed:!0})))}}customElements.define("mui-file-upload",It);class Pt extends HTMLElement{constructor(){super(),this.hasAttribute("direction")||this.setAttribute("direction","horizontal"),this.handleTabChange=this.handleTabChange.bind(this),this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML=`
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+        position: relative;
+        background: var(--carousel-background);
+        border-radius: var(--carousel-radius);
+      }
+  
+      .panel-slot {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+  
+      .carousel-track {
+        display: grid;
+        transition: transform var(--speed-400) ease-in-out;
+        width: 100%;
+        height: 100%;
+        grid-auto-flow: column;
+        grid-auto-columns: 100%;
+      }
+  
+      ::slotted([slot="item"]) { width: 100%; height: 100%; }
+      .controls { display: flex; }
+
+
+      /* Base positioning for all control slots */
+      ::slotted([slot="controls"]) {
+        position: absolute;
+        z-index: 10;
+      }
+
+      ::slotted([slot="controls"][controlsPosition="top"]) {
+        top: var(--carousel-tab-position);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="right"]) {
+        top: 50%;
+        right: var(--carousel-tab-position);
+        transform: translateY(-50%);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="bottom"]) {
+        bottom: var(--carousel-tab-position);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+        
+      ::slotted([slot="controls"][controlsPosition="left"]) {
+        top: 50%;
+        left: var(--carousel-tab-position);
+        transform: translateY(-50%);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="top-left"]) {
+        top: var(--carousel-tab-position);
+        left: var(--carousel-tab-position);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="top-right"]) {
+        top: var(--carousel-tab-position);
+        right: var(--carousel-tab-position);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="bottom-right"]) {
+        bottom: var(--carousel-tab-position);
+        right: var(--carousel-tab-position);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="bottom-left"]) {
+        bottom: var(--carousel-tab-position);
+        left: var(--carousel-tab-position);
+      }
+
+      /* Fallback (bottom-center) if no controlsPosition specified */
+      ::slotted([slot="controls"]:not([controlsPosition])) {
+        bottom: var(--carousel-tab-position);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+    </style>
+  
+    <slot name="controls"></slot>
+    <div class="panel-slot">
+      <div class="carousel-track">
+        <slot name="item"></slot>
+      </div>
+    </div>
+  `}connectedCallback(){this.addEventListener("tab-change",this.handleTabChange);const t=this.querySelector("tab-bar");if(t){const e=t.querySelector("tab-item[active]");e&&this.updatePanels(e.id)}}handleTabChange(t){const e=t;this.updatePanels(e.detail.activeId)}updatePanels(t){const e=this.querySelectorAll("mui-carousel-panel"),i=this.shadow.querySelector(".carousel-track"),s=Array.from(e).findIndex(o=>o.getAttribute("item")===t);s!==-1&&(i.style.transform=`translateX(-${s*100}%)`)}}customElements.define("mui-carousel-controller",Pt);class Ot extends HTMLElement{static get observedAttributes(){return["item"]}constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
+      </style>
+      <slot></slot>
+    `}get item(){return this.getAttribute("item")}set item(t){t!==null&&this.setAttribute("item",t)}attributeChangedCallback(t,e,i){}}customElements.define("mui-carousel-panel",Ot);class qt extends HTMLElement{constructor(){super(),this._animationSpeed=200,this.attachShadow({mode:"open"}),this._handleResize=this._handleResize.bind(this),this._hasInitialized=!1,this._resizeTimeout=null,this._observedTab=null,this._activeTab=null,this._resizeObserver=new ResizeObserver(()=>{this._activeTab&&this._updateHighlight(this._activeTab)})}connectedCallback(){const t=this.getAttribute("speed")||"200";this._animationSpeed=parseInt(t,10);const e=Array.from(this.children);this.hasAttribute("full-width")&&this.classList.add("full-width"),this.setAttribute("role","tablist");const s=this.getAttribute("orientation")||"horizontal";this.setAttribute("aria-orientation",s),this.addEventListener("keydown",o=>{const a=Array.from(this.children),n=a.findIndex(d=>d.hasAttribute("active")),l=this.getAttribute("aria-orientation")||"horizontal";let c=n;switch(o.key){case"ArrowRight":l==="horizontal"&&(c=(n+1)%a.length,o.preventDefault());break;case"ArrowLeft":l==="horizontal"&&(c=(n-1+a.length)%a.length,o.preventDefault());break;case"ArrowDown":l==="vertical"&&(c=(n+1)%a.length,o.preventDefault());break;case"ArrowUp":l==="vertical"&&(c=(n-1+a.length)%a.length,o.preventDefault());break;case"Home":c=0,o.preventDefault();break;case"End":c=a.length-1,o.preventDefault();break;default:return}const h=a[c];h&&(this.setActiveTab(h),h.focus())}),e.forEach((o,a)=>{o.classList.remove("first","middle","last","only"),e.length===1?o.classList.add("only"):a===0?o.classList.add("first"):a===e.length-1?o.classList.add("last"):o.classList.add("middle")}),e.forEach(o=>{const a=o;a.addEventListener("click",()=>{this.setActiveTab(a)})}),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          --tab-animation-speed: ${this._animationSpeed}ms;
+          position: relative;
+          display: inline-flex;
+          border-width: var(--stroke-size-100);
+          border-style: var(--stroke-solid);
+          border-color: var(--tab-border-color);
+          border-radius: var(--tab-radius);
+          background: var(--tab-background);
+          will-change: transform;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
+
+        :host(.full-width) {
+          display: flex;
+          width: 100%;
+        }
+
+        .highlight {
+          border-radius: calc(var(--tab-radius) - 0.2rem);
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          background: var(--tab-background-active);
+          transition: transform var(--tab-animation-speed) cubic-bezier(0.25, 1, 0.5, 1), width var(--tab-animation-speed) cubic-bezier(0.25, 1, 0.5, 1);
+          z-index: 0;
+          padding: var(--space-200) var(--space-400);
+          box-sizing: border-box;
+          box-shadow: 0 0 4px 4px var(--tab-shadow-active);
+          will-change: transform, width;
+          transform: translateX(0);
+          width: 0;
+        }
+
+        ::slotted(mui-tab-item) {
+          position: relative;
+          z-index: 1;
+          flex: 1;
+          contain: content; /* Performance optimization */
+        }
+      </style>
+      <div class="highlight"></div>
+      <slot></slot>
+    `,window.addEventListener("resize",this._handleResize),this._resizeObserver.observe(this),requestAnimationFrame(()=>{const o=this.shadowRoot.querySelector(".highlight");o.style.transition="none";const a=e.find(n=>n.hasAttribute("active"))||e[0];a&&(this._activeTab=a,a.setAttribute("active",""),this._updateHighlight(a),this._observedTab=a,this._resizeObserver.observe(a)),o.offsetWidth,requestAnimationFrame(()=>{o.style.transition="",this._hasInitialized=!0})}))}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),this._observedTab&&this._resizeObserver.unobserve(this._observedTab),this._resizeObserver.unobserve(this),this._resizeTimeout&&clearTimeout(this._resizeTimeout),this._resizeObserver.disconnect()}_handleResize(){if(!this._activeTab)return;this._resizeTimeout&&clearTimeout(this._resizeTimeout),this._activeTab&&Array.from(this.children).forEach(e=>{e===this._activeTab?e.setAttribute("active",""):e.removeAttribute("active")});const t=this.shadowRoot.querySelector(".highlight");t&&(t.style.transition="none",this._updateHighlight(this._activeTab),t.offsetWidth,this._resizeTimeout=window.setTimeout(()=>{t.style.transition="",this._updateHighlight(this._activeTab)},100))}_updateHighlight(t){const e=this.shadowRoot.querySelector(".highlight"),i=t.getBoundingClientRect(),s=this.getBoundingClientRect(),o=parseFloat(getComputedStyle(this).borderWidth)||0,a=i.left-s.left-o;e.style.transform=`translateX(${a}px)`,e.style.width=`${i.width}px`}setActiveTab(t){if(Array.from(this.children).forEach(i=>i.removeAttribute("active")),t.setAttribute("active",""),this._activeTab=t,this._observedTab&&this._observedTab!==t&&this._resizeObserver.unobserve(this._observedTab),this._observedTab=t,this._resizeObserver.observe(t),this._hasInitialized)this._updateHighlight(t);else{const i=this.shadowRoot.querySelector(".highlight");i.style.transition="none",this._updateHighlight(t),i.offsetWidth,i.style.transition="",this._hasInitialized=!0}this.dispatchEvent(new CustomEvent("tab-change",{bubbles:!0,composed:!0,detail:{activeId:t.id}}))}}customElements.define("mui-tab-bar",qt);class Dt extends HTMLElement{constructor(){super(),this.handleTabChange=this.handleTabChange.bind(this)}connectedCallback(){this.addEventListener("tab-change",this.handleTabChange);const t=this.querySelector("mui-tab-bar");if(t){const e=t.querySelector("mui-tab-item[active]");e&&this.updatePanels(e.id)}}handleTabChange(t){const e=t;this.updatePanels(e.detail.activeId)}updatePanels(t){this.querySelectorAll("mui-tab-panel").forEach(i=>{i.getAttribute("item")===t?i.style.display="":i.style.display="none"})}}customElements.define("mui-tab-controller",Dt);class Nt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["active"]}attributeChangedCallback(t,e,i){t==="active"&&this.updateActiveState()}connectedCallback(){if(!this.shadowRoot)return;const t=this.getAttribute("icon");this.setAttribute("tabindex",this.hasAttribute("active")?"0":"-1"),this.shadowRoot.innerHTML="";const e=document.createElement("style");if(e.textContent=`
+      :host {
+        user-select: none;
+        display: flex;
+        justify-content: center;
+        gap: var(--space-100);
+        align-items: center;
+        padding: var(--space-200) var(--space-400);
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+        font-weight: var(--font-weight-bold);
+        color: var(--tab-text-color);
+        background: transparent;
+        white-space: nowrap;
+        cursor: pointer;
+        min-height: 4.2rem;
+        box-sizing: border-box;
+        border-radius: calc(var(--tab-radius) - 0.2rem);
+      }
+
+      :host(.active) {
+        color: var(--tab-text-color-active);
+      }
+
+      :host(.active:focus-visible) {
+        outline: var(--outline-thick);
+        outline-offset: -5px;
+      }
+
+      ::slotted(*) {
+        margin-left: var(--space-100);
+      }
+    `,this.shadowRoot.appendChild(e),t&&t.trim()!==""&&customElements.get(t)){const s=document.createElement(t);s.setAttribute("color","var(--tab-icon)"),s.setAttribute("size","small"),this.shadowRoot.appendChild(s),this.iconEl=s}const i=document.createElement("slot");this.shadowRoot.appendChild(i),this.updateActiveState()}updateActiveState(){const t=this.hasAttribute("active");this.classList.toggle("active",t),this.setAttribute("role","tab"),this.setAttribute("aria-selected",t?"true":"false"),this.setAttribute("tabindex",t?"0":"-1"),this.iconEl&&this.iconEl.setAttribute("color",t?"var(--tab-icon-active)":"var(--tab-icon)")}}customElements.define("mui-tab-item",Nt);class Ft extends HTMLElement{static get observedAttributes(){return["item"]}constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`
+      <style>
+        :host {
+          display: block;
+        }
+        .inner {
+          padding: var(--tab-panel-padding, 0);
+        }
+      </style>
+      <div class="inner">
+        <slot></slot>
+      </div>
+    `}get item(){return this.getAttribute("item")}set item(t){t!==null?this.setAttribute("item",t):this.removeAttribute("item")}attributeChangedCallback(t,e,i){}}customElements.define("mui-tab-panel",Ft);class Bt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.setAttribute("role","list"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+
+        :host { 
+          display: block;
+          width: 100%;
+          list-style-position: outside;
+          padding: var(--space-000);
+          margin: var(--space-000);
+          padding-left: var(--space-400);
+          box-sizing: border-box;
+        }
+        
+        :host([as="ol"]) {
+          list-style-type: decimal;
+        }
+        :host([as="ul"]) {
+          list-style-type: disc;
+        }
+      </style>
+      <slot></slot>
+    `)}}customElements.define("mui-list",Bt);class Vt extends HTMLElement{static get observedAttributes(){return["variant","size","weight"]}constructor(){super(),this.attachShadow({mode:"open"}),this.setAttribute("role","listitem"),this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("weight")||this.setAttribute("weight","regular"),this.render()}attributeChangedCallback(){this.render()}render(){const t=`
+      :host {
+        display: list-item;
+        margin: var(--space-000);
+        color: var(--text-color);
+      }
+
+      /* Size styles */
+
+      :host([size="x-small"]) {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) {
+        font-size: var(--text-font-size-s);
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+
+      :host([size="large"]) {
+        font-size: var(--text-font-size-l);
+        line-height: var(--text-line-height-l);
+      }
+
+
+      /* Weight styles */
+      :host([weight="regular"]) {
+        font-weight: var(--font-weight-regular);
+      }
+
+      :host([weight="medium"]) {
+        font-weight: var(--font-weight-medium);
+      }
+
+      :host([weight="bold"]) {
+        font-weight: var(--font-weight-bold);
+      }
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>${t}</style>
+      <slot></slot>
+    `)}}customElements.define("mui-list-item",Vt);class jt extends HTMLElement{static get observedAttributes(){return["type","name","value","placeholder","id","label","disabled","hide-label","variant"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupListener()}attributeChangedCallback(t,e,i){var o;const s=(o=this.shadowRoot)==null?void 0:o.querySelector("input");s&&(t==="value"&&(s.value=i??""),t==="disabled"&&(i===null||i==="false"?s.removeAttribute("disabled"):s.setAttribute("disabled","")),(t==="type"||t==="placeholder"||t==="label"||t==="hide-label")&&(this.render(),this.setupListener()))}setupListener(){var i,s;const t=(i=this.shadowRoot)==null?void 0:i.querySelector("input");if(!t)return;const e=t.cloneNode(!0);(s=t.parentNode)==null||s.replaceChild(e,t),e.addEventListener("input",o=>{const a=o.target;this.dispatchEvent(new CustomEvent("input",{detail:{value:a.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",o=>{const a=o.target;this.dispatchEvent(new CustomEvent("change",{detail:{value:a.value},bubbles:!0,composed:!0}))})}render(){const t=["text","password","email","number","search","tel","url","date","time"],e=this.getAttribute("type")||"text",i=t.includes(e)?e:"text",s=this.getAttribute("name")||"",o=this.getAttribute("value")||"",a=this.getAttribute("placeholder")||"",n=this.getAttribute("id")||`mui-input-${Math.random().toString(36).substr(2,9)}`,l=this.getAttribute("label")||"",c=this.hasAttribute("hide-label"),h=this.hasAttribute("disabled"),d=c&&l?`aria-label="${l}"`:"",u=this.getAttribute("variant")||"",p=u||"",v=this.querySelector('[slot="before"]')!==null,g=this.querySelector('[slot="after"]')!==null,f=[p,v?"before":"",g?"after":""].filter(Boolean).join(" ");c&&!l&&console.warn("mui-input Accessibility warning: When using 'hide-label', please provide a 'label' attribute so an 'aria-label' can be generated for screen reader support."),!l&&!d&&console.warn("mui-input Accessibility warning: A 'label' or 'aria-label' attribute is required for screen reader accessibility.");const k=`
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+        }
+        label {
+          display: block;
+          font-size: var(--text-font-size);
+          font-weight: var(--font-weight-medium);
+          margin-bottom: var(--space-100);
+          color: var(--text-color);
+        }
+        .input-wrapper {
+          display: flex;
+          width: 100%;
+        }
+        input {
+          min-height: 4.4rem;
+          width: 100%;
+          line-height: var(--text-line-height);
+          padding: var(--space-200) var(--space-300);
+          box-sizing: border-box;
+          font-size: var(--text-font-size);
+          border-radius: var(--radius-100);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          color: var(--text-color);
+          background: var(--input-background);
+        }
+        input:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+        input:focus {
+          outline: var(--outline-thick);
+        }
+        input:disabled {
+          opacity: 0.4;
+          cursor: not-allowed;
+          background-color: var(--input-background-disabled);
+        }
+        input.success {
+          color: var(--form-success-text-color);
+          border-color: var(--form-success-border-color);
+          box-shadow: 0 0 0 2px var(--form-success-border-color);
+        }
+        input.warning {
+          color: var(--form-warning-text-color);
+          border-color: var(--form-warning-border-color);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color);
+        }
+        input.error {
+          color: var(--form-error-text-color);
+          border-color: var(--form-error-border-color);
+          box-shadow: 0 0 0 2px var(--form-error-border-color);
+        }
+        input.success:hover {
+          color: var(--form-success-text-color-hover);
+          border-color: var(--form-success-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-success-border-color-hover);
+        }
+        input.warning:hover {
+          color: var(--form-warning-text-color-hover);
+          border-color: var(--form-warning-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color-hover);
+        }
+        input.error:hover {
+          color: var(--form-error-text-color-hover);
+          border-color: var(--form-error-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-error-border-color-hover);
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+
+        /* ========================================================================== */
+        /* STYLES FOR BEFORE & AFTER (ADDON & SELECT)                                 */
+        /* ========================================================================== */
+
+           input.before { border-top-left-radius: 0; border-bottom-left-radius: 0;}
+           input.after { border-top-right-radius: 0; border-bottom-right-radius: 0;}
+
+        /* ========================================================================== */
+        /* LOGIC FOR FOCUS ORDER of BEFORE, AFTER & INPUT                             */
+        /* The goal is to not exceed 1 order to avoid potential UI bugs               */
+        /* when input and the before/after feature is used in compositions.           */
+        /* ========================================================================== */
+
+        /* ========================================================================== */
+        /* 1. BEFORE: Slotted items are Z-INDEX AUTO by default                       */
+        /* ========================================================================== */
+
+        /* If slotted item is BEFORE & FOCUSED then sit ABOVE INPUT                   */
+
+        /* ========================================================================== */
+        /* 2. INPUT: Slotted items are Z-INDEX AUTO by default                        */
+        /* ========================================================================== */
+
+        /* If INPUT is FOCUSED then sit ABOVE BEFORE & AFTER ITEMS                    */
+
+        /* ========================================================================== */
+        /* 3. AFTER: Slotted items are Z-INDEX AUTO by default                        */
+        /* ========================================================================== */
+
+        /* If slotted item is AFTER & FOCUSED then sit ABOVE INPUT                    */
+
+        /* ========================================================================== */
+        /* 4. FINAL CONCLUSION ON APPROACH                                            */
+        /* ========================================================================== */
+        /* Currently only mui-select is slotted, this might be the only               */
+        /* use-case, but for now we will use '*' to ensure any element that           */
+        /* is focusable will be addressed.                                            */
+        /* ========================================================================== */
+
+           slot[name="before"]::slotted(*:focus),
+           input:focus,
+           slot[name="after"]::slotted(*:focus) { z-index: 1; }
+
+          /* Ensure feedback styles appear above SELECT and focusable Items */
+           input.success,
+           input.warning,
+           input.error {
+             z-index: 1;
+           }
+
+        /* ========================================================================== */
+        
+
+      </style>
+      ${l?`<label for="${n}" class="${c?"vh":""}">${l}</label>`:""}
+    <div class="input-wrapper">
+      <slot name="before"></slot>
+      <input
+        class="${f}"
+        type="${i}"
+        name="${s}"
+        id="${n}"
+        value="${o}"
+        placeholder="${a}"
+        ${h?'disabled aria-disabled="true"':""}
+        ${d}
+      />
+      <slot name="after"></slot>
+    </div>
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=k)}}customElements.define("mui-input",jt);const Ut="modulepreload",Xt=function(r){return"/"+r},y={},m=function(t,e,i){let s=Promise.resolve();if(e&&e.length>0){let a=function(c){return Promise.all(c.map(h=>Promise.resolve(h).then(d=>({status:"fulfilled",value:d}),d=>({status:"rejected",reason:d}))))};document.getElementsByTagName("link");const n=document.querySelector("meta[property=csp-nonce]"),l=(n==null?void 0:n.nonce)||(n==null?void 0:n.getAttribute("nonce"));s=a(e.map(c=>{if(c=Xt(c),c in y)return;y[c]=!0;const h=c.endsWith(".css"),d=h?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${d}`))return;const u=document.createElement("link");if(u.rel=h?"stylesheet":Ut,h||(u.as="script"),u.crossOrigin="",u.href=c,l&&u.setAttribute("nonce",l),document.head.appendChild(u),h)return new Promise((p,v)=>{u.addEventListener("load",p),u.addEventListener("error",()=>v(new Error(`Unable to preload CSS for ${c}`)))})}))}function o(a){const n=new Event("vite:preloadError",{cancelable:!0});if(n.payload=a,window.dispatchEvent(n),!n.defaultPrevented)throw a}return s.then(a=>{for(const n of a||[])n.status==="rejected"&&o(n.reason);return t().catch(o)})};class Yt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.setAttribute("tabindex","0"),this.setAttribute("role","main");const t=document.createElement("style");t.textContent=`
+      :host {
+        display: grid;
+      }
+
+      :host(.focused) {
+        outline-offset: calc(var(--stroke-size-500) * -1);
+      }
+
+      @media (min-width: 960px) {
+        :host {
+          padding: var(--space-500);         
+          padding-left: var(--space-500);
+          padding-right: var(--space-500);
+          padding-bottom: var(--space-500);
+        } 
+      }
+
+    `,this.shadowRoot.appendChild(t)}async loadComponent(){var a;const t=window.location.hash.slice(1)||"/home",e={"/home":"home-page","/design-guidelines":"design-guidelines","/theme-setup":"theme-setup","/create-mui-app":"create-mui-app","/base-design-tokens":"tokens-base","/semantic-design-tokens":"tokens-semantic","/contextual-design-tokens":"tokens-contextual","/surface-design-tokens":"tokens-surface","/components-design-tokens":"tokens-components","/text-part-selectors":"parts-text","/spacing-part-selectors":"parts-spacing","/layout-part-selectors":"parts-layout","/visual-part-selectors":"parts-visual","/smart-card":"story-smart-card","/field":"story-field","/tab-bar":"story-tab-bar","/carousel":"story-carousel","/addon":"story-addon","/input":"story-input","/select":"story-select","/switch":"story-switch","/file-upload":"story-file-upload","/alerts":"story-alert","/messages":"story-message","/badge":"story-badge","/buttons":"story-button","/responsive":"story-responsive","/stacks":"story-stack","/grid":"story-grid","/cards":"story-cards","/container":"story-container","/headings":"story-heading","/body":"story-body","/image":"story-image","/links":"story-link","/list":"story-list","/quote":"story-quote","/rule":"story-rule","/icons":"story-icon","/code":"story-code","/accordion":"story-accordion","/table":"story-table","/slat":"story-slat","/agent":"comp-agent-ui","/wallet":"comp-wallet"};if(!t.startsWith("/"))return;const i=e[t]||e["/home"],s={"home-page":()=>m(()=>import("./index-CwAai54c.js"),__vite__mapDeps([0,1])),"create-mui-app":()=>m(()=>import("./index-Bx-SU7T2.js"),[]),"theme-setup":()=>m(()=>import("./index-DZQ8pS6y.js"),[]),"design-guidelines":()=>m(()=>import("./index-icuV1guL.js"),[]),"tokens-base":()=>m(()=>import("./base-B4dO4n0A.js"),[]),"tokens-semantic":()=>m(()=>import("./semantic-cbNjeY5p.js"),[]),"tokens-contextual":()=>m(()=>import("./contextual-D648xs_u.js"),[]),"tokens-surface":()=>m(()=>import("./surface-CMaW9FgJ.js"),[]),"tokens-components":()=>m(()=>import("./components-YZ3tjmIt.js"),[]),"parts-text":()=>m(()=>import("./text-TVCTYde0.js"),[]),"parts-spacing":()=>m(()=>import("./spacing-DY3cAXq0.js"),[]),"parts-layout":()=>m(()=>import("./layout-BT0xIYa9.js"),[]),"parts-visual":()=>m(()=>import("./visual-B_21dq90.js"),[]),"comp-agent-ui":()=>m(()=>import("./index-DwnvCJk0.js"),__vite__mapDeps([2,1])),"comp-wallet":()=>m(()=>import("./index-CCegrD2J.js"),__vite__mapDeps([3,4])),"story-button":()=>m(()=>import("./index-DlZ1b9ZK.js"),[]),"story-link":()=>m(()=>import("./index-CyWt9f96.js"),[]),"story-icon":()=>m(()=>import("./index-C4ZnvuXX.js"),[]),"story-image":()=>m(()=>import("./index-Ch40uilB.js"),__vite__mapDeps([5,6])),"story-heading":()=>m(()=>import("./index-qOE8f0sK.js"),[]),"story-body":()=>m(()=>import("./index-CHZJlumm.js"),[]),"story-cards":()=>m(()=>import("./index-BnpaoEYs.js"),__vite__mapDeps([7,6])),"story-responsive":()=>m(()=>import("./index-Bc68V_xw.js"),[]),"story-stack":()=>m(()=>import("./index-CT3BsW8R.js"),[]),"story-accordion":()=>m(()=>import("./index-CPZ8jubJ.js"),[]),"story-container":()=>m(()=>import("./index-C10sNeH-.js"),[]),"story-addon":()=>m(()=>import("./index-DNImaJPY.js"),[]),"story-badge":()=>m(()=>import("./index-B4Lbi-ZX.js"),[]),"story-grid":()=>m(()=>import("./index-DI0vNTNv.js"),[]),"story-switch":()=>m(()=>import("./index-0bBJZTXh.js"),[]),"story-slat":()=>m(()=>import("./index-CdghbWW3.js"),[]),"story-rule":()=>m(()=>import("./index-CfD1WQYQ.js"),[]),"story-select":()=>m(()=>import("./index-DP6CCnt0.js"),[]),"story-code":()=>m(()=>import("./index-CSLqxg9p.js"),[]),"story-quote":()=>m(()=>import("./index-ehE10GAP.js"),[]),"story-smart-card":()=>m(()=>import("./index-DBkw7VLa.js"),__vite__mapDeps([8,4])),"story-table":()=>m(()=>import("./index-dkW0Vbeg.js"),[]),"story-field":()=>m(()=>import("./index-_4AZFkzS.js"),[]),"story-alert":()=>m(()=>import("./index-D8hXO6aa.js"),[]),"story-message":()=>m(()=>import("./index-CYYG9dAN.js"),[]),"story-file-upload":()=>m(()=>import("./index-DR5X8zCc.js"),[]),"story-carousel":()=>m(()=>import("./index-CAkZAmud.js"),[]),"story-tab-bar":()=>m(()=>import("./index-C7Tqc5BR.js"),[]),"story-list":()=>m(()=>import("./index-BJJtzLti.js"),[]),"story-input":()=>m(()=>import("./index-BN6UEWFf.js"),[])};await(((a=s[i])==null?void 0:a.call(s))??Promise.resolve()),this.shadowRoot.querySelectorAll("*").forEach(n=>{n.tagName.toLowerCase()!=="style"&&n.remove()});const o=this.shadowRoot.querySelector(i);if(o&&o.classList.contains("server-loaded"))console.log("Server-loaded page, no need to reload.");else{const n=document.createElement(i);n.classList.add("server-loaded"),this.shadowRoot.appendChild(n)}window.scrollTo(0,0)}connectedCallback(){window.addEventListener("hashchange",()=>this.loadComponent()),this.addEventListener("blur",()=>{this.setAttribute("tabindex","-1")}),this.loadComponent()}disconnectedCallback(){window.removeEventListener("hashchange",this.loadComponent)}}customElements.define("app-container",Yt);class Wt extends HTMLElement{static get observedAttributes(){return["link","title"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+
+      :host { 
+        display: block;
+        position: sticky; 
+        box-shadow: 0 1px 0 0 var(--border-color);
+        z-index: 2;
+        top: 92px;
+        margin-bottom: -1px;
+        background: var(--app-navbar-surface);
+      }
+
+      mui-link {
+        display: block;
+      }
+
+      /* Text Parts */
+      mui-link::part(color) {
+        color: var(--app-nav-accent);
+      }
+      mui-link::part(text-decoration) {
+        text-decoration: none;
+      }
+      mui-link::part(font-weight) {
+        font-weight: var(--font-weight-700);
+      }
+
+      /* Spacing Parts */
+      mui-link::part(padding) {
+        padding: 1.5rem var(--space-500);
+      }
+      mui-link::part(margin) {
+        margin: var(--space-000);
+      }
+      mui-link::part(width) {
+        width: 100%;
+      }
+
+      /* Layout Parts */
+      mui-link::part(display) {
+        display: block;
+      } 
+
+      /* Visual Parts */
+      mui-link:hover::part(background) {
+        background: var(--app-navbar-surface-100);
+      }
+
+
+    </style>
+
+    <mui-link href="${this.getAttribute("link")}">${this.getAttribute("title")}</mui-link>
+
+    `;this.shadowRoot.innerHTML=t}}customElements.define("app-navbar-home",Wt);class Gt extends HTMLElement{static get observedAttributes(){return["groupname"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+      :host { display: block; }
+      :host(:last-of-type) { padding-bottom: 6rem; }
+    </style>
+
+    <mui-accordion-block size="small" heading="${this.getAttribute("groupname")}">
+      <slot slot="detail"></slot>
+    </mui-accordion-block>
+    
+    `;this.shadowRoot.innerHTML=t}}customElements.define("app-navbar-group",Gt);class Jt extends HTMLElement{static get observedAttributes(){return["link","title"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+
+      :host {
+        display: block;
+      }
+
+      mui-link {
+        transition: opacity 400ms ease-in, transform 100ms ease-in;
+        opacity: 1;
+        display: block;
+      }
+
+      mui-link:hover { 
+        opacity: 1; 
+      }
+
+      mui-link:focus { 
+        opacity: 1; 
+      }
+
+      @media (min-width: 960px) {
+        mui-link:hover { 
+          transform: scale(1.1); 
+        } 
+      } 
+
+      /* Text Parts */
+      mui-link::part(text-decoration) {
+        text-decoration: none;
+      }
+
+      /* Spacing Parts */
+      mui-link::part(padding) {
+        padding: var(--space-200) var(--space-000);
+      }
+      mui-link::part(margin) {
+        margin: var(--space-000);
+      }
+      mui-link::part(width) {
+        width: 100%;
+      }
+
+      /* Layout Parts */
+      mui-link::part(display) {
+        display: block;
+      } 
+
+    </style>
+
+    <mui-link  href="${this.getAttribute("link")}">${this.getAttribute("title")}</mui-link> 
+
+    `;this.shadowRoot.innerHTML=t}}customElements.define("app-navbar-link",Jt);class Zt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+
+      :host {
+        width: 100%;
+        margin-bottom: 0;
+        background: var(--app-navbar-surface);
+        box-shadow: inset 0 1px 0 0 var(--border-color);
+        padding: var(--space-400) var(--space-500);
+        display: flex;
+        justify-content: space-between;
+        z-index: 2;
+        box-sizing: border-box;
+        align-items: center;
+
+        @media (min-width: 961px) {
+          display: none;
+        }
+      }
+
+    </style>
+
+    <!-- Navigation Bar Toggle -->
+    <slot></slot>
+    <slot name="home-link"></slot>
+
+
+    `;this.shadowRoot.innerHTML=t}}customElements.define("app-navbar-toggle",Zt);class Kt extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+
+      :host {
+        display: flex;
+        width: 240px;
+      }
+
+      /* Target Parent */
+      mui-button {
+        position: absolute;
+        left: 0;
+        top: -54px;
+        z-index: 1000;
+        transition: top var(--speed-200);
+        width: 100%;
+      }
+      mui-button:focus {
+        top: 0;
+      }
+
+      /* Spacing Parts */
+      mui-button::part(padding) {
+        padding: 1.3rem var(--space-500);
+      }
+
+      mui-button::part(width) {
+        width: 100%;
+      }
+
+      /* Layout Parts */
+
+      mui-button::part(display) {
+        display: block;
+      }
+
+      mui-button::part(text-align) {
+        text-align: center;
+      }
+
+      /* Visual Parts */
+      mui-button::part(border-radius) {
+        border-radius: var(--radius-000);
+      }
+
+      mui-button::part(background) {
+        background: var(--app-navbar-surface);
+      }
+      mui-button::part(border) {
+        border: none;
+      }
+
+    `;t.innerHTML=`
+      <style>${e}</style>
+      <mui-button variant="tertiary" class="skip-to-main" role="button">Skip Nav</mui-button>
+    `;const i=t.querySelector(".skip-to-main");if(i){i.addEventListener("click",()=>{const o=document.querySelector("app-container");o&&(o.setAttribute("tabindex","0"),o.focus())});const s=new CustomEvent("skip-link-ready",{detail:{skipButton:i}});window.dispatchEvent(s)}}}customElements.define("app-navbar-skip",Kt);class Qt extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+
+      :host {
+        display: block;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        background: var(--app-navbar-surface);
+        position: fixed;
+        bottom: 0;
+        top: 0;
+      }
+      :host([mobile]) {
+        height: calc(100vh - 7.6rem);
+        z-index: 1;
+        width: 100%;
+      }
+      :host([desktop]) {
+        align-items: center;
+        text-align: left;
+        opacity: 1;
+        z-index: 100;
+        width: 26rem;
+        height: 100%;
+      }
+      :host([desktop])::-webkit-scrollbar {
+        display: none; 
+      } 
+    `;t.innerHTML=`
+      <style>${e}</style>
+      <slot></slot>
+    `}}customElements.define("app-navbar-menu",Qt);class te extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+
+      :host {
+        display: block;
+        padding: var(--space-500);
+        box-shadow: 0 1px 0 0 var(--border-color);
+        margin-bottom: -1px;
+        background: var(--app-navbar-surface);
+        z-index: 3;
+        position: sticky;
+        top: 0;
+      }
+
+      mui-grid::part(align-items) {
+        align-items: center;
+      }
+
+    `;t.innerHTML=`
+      <style>${e}</style>
+      <mui-grid col="1fr auto" space="var(--space-400)">
+        <theme-switcher></theme-switcher>
+        <dark-mode-toggle></dark-mode-toggle>
+      </mui-grid>
+    `}}customElements.define("app-navbar-theme",te);class ee extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: grid;
+        position: fixed;
+        z-index: 100;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+      }
+
+      #desktop {
+        display: none;
+      }
+      #mobile {
+        display: block;
+      }
+
+      .color-icon {
+        fill: var(--app-nav-accent);
+      }
+
+      @media (min-width: 960px) {
+
+      :host { 
+        position: static;
+        bottom: 0;
+        left: 0;
+        min-height: 100vh;
+      }
+
+        #desktop {
+          display: block;
+          box-shadow: var(--stroke-size-100) 0 0 0 var(--border-color);
+        }
+        #mobile {
+          display: none;
+        }
+      }
+    
+      #mobile {
+        opacity: 0;
+        transform: translate(0, 100%);
+        transition: transform 100ms linear, width 100ms linear, opacity 100ms linear;
+      }
+      #mobile[open] {
+        opacity: 1;
+        transform: translate(0, 0);
+        transition: transform 200ms ease-in, width 200ms ease-in, opacity 200ms ease-in; 
+      }
+
+      mui-link::part(color),
+      mui-link::part(color):hover {
+        color: var(--app-nav-accent);
+      }
+
+      mui-link::part(text-decoration) {
+        text-decoration: none;
+      }
+
+      mui-link::part(text-decoration):hover {
+        text-decoration: underline;
+      }
+
+    `,i=`
+      <app-navbar-home  link="#/home" title="muibook.com"></app-navbar-home>
+    `,s=`
+      <app-navbar-theme></app-navbar-theme>
+    `,o=`
+      <app-navbar-group id="resources" groupname="Resources">
+        <app-navbar-link link="#/create-mui-app" title="Create Mui App"></app-navbar-link>
+        <app-navbar-link link="#/theme-setup" title="Theme Setup"></app-navbar-link>
+        <app-navbar-link link="#/design-guidelines" title="Design Guidelines"></app-navbar-link>
+        <app-navbar-link link="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=0-1&t=5A8fWmORS1XTiPBQ-1" title="MUI Kit"></app-navbar-link>
+      </app-navbar-group>
+    `,a=`
+      <app-navbar-group id="design-tokens" groupname="Design Tokens">
+        <app-navbar-link link="#/base-design-tokens" title="Base"></app-navbar-link>
+        <app-navbar-link link="#/semantic-design-tokens" title="Semantic"></app-navbar-link>
+        <app-navbar-link link="#/contextual-design-tokens" title="Contextual"></app-navbar-link>
+        <app-navbar-link link="#/surface-design-tokens" title="Surface"></app-navbar-link>
+        <app-navbar-link link="#/components-design-tokens" title="Components"></app-navbar-link>
+      </app-navbar-group>
+    `,n=`
+      <app-navbar-group id="part-types" groupname="Part Selectors">
+        <app-navbar-link link="#/text-part-selectors" title="Text"></app-navbar-link>
+        <app-navbar-link link="#/spacing-part-selectors" title="Spacing"></app-navbar-link>
+        <app-navbar-link link="#/layout-part-selectors" title="Layout"></app-navbar-link>
+        <app-navbar-link link="#/visual-part-selectors" title="Visual"></app-navbar-link>
+      </app-navbar-group>
+    `,l=`
+      <app-navbar-group id="web-components" groupname="Components">
+        <app-navbar-link link="#/smart-card" title="Smart Card"></app-navbar-link>   
+        <app-navbar-link link="#/tab-bar" title="Tab Bar"></app-navbar-link>  
+        <app-navbar-link link="#/carousel" title="Carousel"></app-navbar-link>  
+        <app-navbar-link link="#/field" title="Field"></app-navbar-link> 
+        <app-navbar-link link="#/file-upload" title="File Upload"></app-navbar-link> 
+        <app-navbar-link link="#/addon" title="Add On"></app-navbar-link>   
+        <app-navbar-link link="#/input" title="Input"></app-navbar-link>  
+        <app-navbar-link link="#/select" title="Select"></app-navbar-link>  
+        <app-navbar-link link="#/switch" title="Switch"></app-navbar-link>  
+        <app-navbar-link link="#/alerts" title="Alerts"></app-navbar-link>
+        <app-navbar-link link="#/messages" title="Messages"></app-navbar-link>
+        <app-navbar-link link="#/badge" title="Badge"></app-navbar-link>
+        <app-navbar-link link="#/buttons" title="Buttons"></app-navbar-link>
+        <app-navbar-link link="#/links" title="Links"></app-navbar-link>
+        <app-navbar-link link="#/responsive" title="Responsive"></app-navbar-link>
+        <app-navbar-link link="#/stacks" title="Stacks"></app-navbar-link>
+        <app-navbar-link link="#/grid" title="Grid"></app-navbar-link>
+        <app-navbar-link link="#/cards" title="Cards"></app-navbar-link>
+        <app-navbar-link link="#/container" title="Container"></app-navbar-link>
+        <app-navbar-link link="#/headings" title="Headings"></app-navbar-link>
+        <app-navbar-link link="#/body" title="Body"></app-navbar-link>
+        <app-navbar-link link="#/image" title="Image"></app-navbar-link>
+        <app-navbar-link link="#/list" title="List"></app-navbar-link>
+        <app-navbar-link link="#/quote" title="Quote"></app-navbar-link>
+        <app-navbar-link link="#/rule" title="Rule"></app-navbar-link>
+        <app-navbar-link link="#/icons" title="Icons"></app-navbar-link>
+        <app-navbar-link link="#/code" title="Code"></app-navbar-link>
+        <app-navbar-link link="#/accordion" title="Accordion"></app-navbar-link>
+        <app-navbar-link link="#/table" title="Table"></app-navbar-link>
+        <app-navbar-link link="#/slat" title="Slat"></app-navbar-link>
+      </app-navbar-group>
+    `,c=`
+      <app-navbar-group id="compositions" groupname="Compositions">
+        <app-navbar-link link="#/agent" title="Agent UI"></app-navbar-link> 
+        <app-navbar-link link="#/wallet" title="Wallet"></app-navbar-link>  
+      </app-navbar-group>
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <app-navbar-menu desktop id="desktop">
+        <slot name="skip"></slot>
+        ${s}
+        ${i}
+        ${o}
+        ${a}
+        ${n}
+        ${c}
+        ${l}
+      </app-navbar-menu>
+      
+      <app-navbar-menu mobile id="mobile">
+        <slot name="skip"></slot>
+        ${s}
+        ${o}
+        ${a}
+        ${n}
+        ${c}
+        ${l}
+      </app-navbar-menu>
+
+      <app-navbar-toggle>
+        <mui-icon-toggle variant="tertiary" rotate>
+          <mui-icon-menu class="color-icon" slot="start"></mui-icon-menu>
+          <mui-icon-close class="color-icon" slot="end"></mui-icon-close>
+        </mui-icon-toggle>
+        <mui-link slot="home-link" data-close-menu link="#/home-page">muibook.com</mui-link>
+      </app-navbar-toggle>
+    `,this.menuIconEl=this.shadowRoot.querySelector("mui-icon-toggle"),this.navbarEl=this.shadowRoot.getElementById("mobile"),this.updateTabIndexForMenuLinks=(u,p)=>{u.querySelectorAll("app-navbar-link").forEach(g=>{p?g.removeAttribute("tabindex"):g.setAttribute("tabindex","-1")})},this.navbarEl.querySelectorAll("app-navbar-link").forEach(u=>{u.addEventListener("click",()=>{this.navbarEl.hasAttribute("open")&&(this.navbarEl.removeAttribute("open"),this.updateTabIndexForMenuLinks(this.navbarEl,!1),this.menuIconEl.toggle=!1,this.menuIconEl.removeAttribute("toggle"))})}),this.shadowRoot.querySelectorAll("mui-link[data-close-menu]").forEach(u=>{u.addEventListener("click",()=>{this.navbarEl.hasAttribute("open")&&(this.navbarEl.removeAttribute("open"),this.updateTabIndexForMenuLinks(this.navbarEl,!1),this.menuIconEl.toggle=!1,this.menuIconEl.removeAttribute("toggle"))})}),this.handleResponsiveTabIndex=()=>{if(window.innerWidth>=961)this.updateTabIndexForMenuLinks(this.navbarEl,!0);else{const p=this.navbarEl.hasAttribute("open");this.updateTabIndexForMenuLinks(this.navbarEl,p)}},this.handleResponsiveTabIndex(),window.addEventListener("resize",this.handleResponsiveTabIndex),this.menuIconEl.addEventListener("click",()=>{this.navbarEl.toggleAttribute("open");const u=this.navbarEl.hasAttribute("open");this.updateTabIndexForMenuLinks(this.navbarEl,u),u&&requestAnimationFrame(()=>{const p=this.shadowRoot.querySelector("app-navbar-home");p&&p.focus()})})}}customElements.define("app-navbar",ee);class ie extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render();const t=localStorage.getItem("theme")||"light";document.documentElement.setAttribute("data-theme",t),this.render(t),customElements.whenDefined("mui-switch").then(()=>{const e=this.shadowRoot.querySelector("mui-switch");e.checked=t==="dark",e.addEventListener("change",i=>{const o=i.detail.checked?"dark":"light";localStorage.setItem("theme",o),document.documentElement.setAttribute("data-theme",o)}),window.addEventListener("brand-theme-capability",i=>{e.disabled=!i.detail.themeEnabled})})}render(t){const e=t==="dark";this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+        display: block;
+        }
+
+        mui-switch {
+        --switch-track-background: var(--app-theme-toggle-bg);
+        --switch-track-background-checked: var(--app-theme-toggle-bg);
+        }
+
+      </style>
+
+      <mui-switch label="Dark mode toggle" ${e?"checked":""}>
+        <mui-icon-sun slot="off-icon"></mui-icon-sun>
+        <mui-icon-moon slot="on-icon"></mui-icon-moon>
+      </mui-switch>
+    `}set disabled(t){const e=this.shadowRoot.querySelector("mui-switch");e&&(e.disabled=t)}get disabled(){const t=this.shadowRoot.querySelector("mui-switch");return t?t.disabled:!1}}customElements.define("dark-mode-toggle",ie);class oe extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.brandCapabilities={mui:{theme:!0},jal:{theme:!0},ana:{theme:!0},mono:{theme:!0},modern:{theme:!0}},this.brandFontLinks={jal:[{rel:"preconnect",href:"https://fonts.googleapis.com"},{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"},{rel:"stylesheet",href:"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"}],modern:[{rel:"preconnect",href:"https://fonts.googleapis.com"},{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"},{rel:"stylesheet",href:"https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap"}]}}connectedCallback(){this.render(),this.setupListeners(),this.applySettings()}render(){this.shadowRoot.innerHTML=`
+      <style>
+        :host {display: block;}
+        .grid {gap: var(--space-000);}
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        mui-select {
+          --input-background: var(--app-navbar-surface-100);
+        }
+        
+      </style>
+      <mui-grid class="grid" col="1fr" space="var(--space-100)">
+        <mui-select
+          id="brand-switcher" 
+          label="Brand"
+          hide-label
+          options='[
+            {"value": "mui", "label": "Mui"},
+            {"value": "jal", "label": "JAL"},
+            {"value": "ana", "label": "ANA"},
+            {"value": "mono", "label": "Mono"},
+            {"value": "modern", "label": "Modern"}
+          ]'>
+        </mui-select>
+      </mui-grid>
+    `}setupListeners(){this.shadowRoot.getElementById("brand-switcher").addEventListener("change",e=>{const i=e.detail.value;localStorage.setItem("brand",i),document.documentElement.setAttribute("data-brand",i),this.updateSwitchers(i)})}applySettings(){const t=localStorage.getItem("brand")||"default";document.documentElement.setAttribute("data-brand",t);const e=this.shadowRoot.getElementById("brand-switcher");e&&e.setAttribute("value",t),this.updateSwitchers(t)}updateSwitchers(t){const e=this.brandCapabilities[t]||{theme:!0};this.removeFontLinks(),this.injectFontLinksForBrand(t),this.dispatchEvent(new CustomEvent("brand-theme-capability",{detail:{themeEnabled:e.theme},bubbles:!0,composed:!0}))}injectFontLinksForBrand(t){const e=this.brandFontLinks[t];!e||e.some(s=>document.head.querySelector(`link[href="${s.href}"]`))||e.forEach(({rel:s,href:o,crossOrigin:a})=>{const n=document.createElement("link");n.rel=s,n.href=o,a&&(n.crossOrigin=a),document.head.appendChild(n)})}removeFontLinks(){Object.values(this.brandFontLinks).flat().forEach(({href:t})=>{const e=document.head.querySelector(`link[href="${t}"]`);e&&document.head.removeChild(e)})}}customElements.define("theme-switcher",oe);const ae="/hero-guides.png";class se extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color");let s={default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)";const o={small:"2.8rem",medium:"3.8rem"},a=o[t]||o.small;this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${a};
+          height: ${a};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+        .opac {
+          opacity: 0.5;
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 38 38"
+      >
+        <path
+          d="M25.227 9.266c0 3.628-6.57 9.234-6.57 9.234s-6.57-5.606-6.57-9.234a6.57 6.57 0 1 1 13.14 0"
+        ></path>
+        <path class="opac"
+          d="M9.454 15.486a4.262 4.262 0 1 0-6.027 6.027l12.556 12.556a4.262 4.262 0 0 0 6.027-6.027z"
+        ></path>
+        <path class="opac"
+          d="M28.536 15.486a4.262 4.262 0 0 1 6.026 6.027L22.007 34.069a4.262 4.262 0 1 1-6.027-6.027z"
+        ></path>
+        <path
+          d="m19 25.028 3.012 3.013a4.261 4.261 0 1 1-6.026 0z"
+        ></path>
+      </svg>
+
+    `}}customElements.define("guides-logo",se);class re extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+
+      @media (min-width: 1288px) {
+        :host { margin: var(--space-400) 0; } 
+      }
+
+      .banner {
+        display: flex;
+        justify-content: center;
+        padding: var(--space-500) var(--space-600) var(--space-600);
+        border-radius: var(--radius-300);
+        background: var(--app-story-banner-gradient-start);
+        background: linear-gradient(0deg, var(--app-story-banner-gradient-start) 0%, var(--app-story-banner-gradient-end) 100%);
+        border: var(--feedback-neutral-border);
+        border-bottom: var(--border-thick);
+        border-color: var(--app-story-banner-border-color);
+        box-shadow:
+          6px 6px 16px var(--black-opacity-10),
+          -6px -6px 14px var(--black-opacity-10);
+      }
+
+      @media (min-width: 1288px) {
+        .banner {
+          padding: var(--space-700) var(--space-700) var(--space-000) var(--space-700);
+        } 
+      }
+
+      mui-grid {
+        width: 100%;
+      }
+
+      mui-grid::part(align-items) {
+        align-items: center;
+      }
+
+      @media (min-width: 1288px) {
+
+        mui-grid::part(gap) {
+          gap: var(--space-000);
+        }
+      }
+
+      @media (min-width: 1350px) {
+
+        mui-grid::part(gap) {
+          gap: var(--space-600);
+        }
+
+        mui-grid::part(align-items) {
+          align-items: start;
+        }
+      }
+
+      mui-grid::part(width) {
+        max-width: 118.0rem;
+      }
+
+      .hero {
+        margin-top: -8rem;
+        width: 100%;
+        height: auto;
+      }
+
+    `;t.innerHTML=`
+      <style>${e}</style>
+        <mui-responsive breakpoint="1287" class="banner">
+          <mui-grid slot="showBelow" space="var(--space-600)" col="1fr">
+            <mui-v-stack space="var(--space-500)" alignY="start">
+              <mui-v-stack  space="var(--space-100)">
+                <mui-h-stack space="var(--space-100)" alignY="center">
+                  <mui-h-stack style="width: 28px;">
+                    <guides-logo size="small"></guides-logo>
+                  </mui-h-stack>
+                  <mui-heading size="3" level="2">Guides</mui-heading>
+                </mui-h-stack>
+                <mui-v-stack space="var(--space-400)" style="max-width: 50ch;">
+                  <mui-body size="small">MUI integrates with Guru Guides to provide in-context design guidelines direct in Figma, making component guidance easy to access where designers need it most.</mui-body>
+                  <mui-body size="x-small">Log in with your <strong>MUI credentials</strong> to view the guidelines.</mui-body>
+                </mui-v-stack>
+              </mui-v-stack>
+              <mui-button-group>
+                <mui-link variant="primary" href="https://www.figma.com/community/plugin/1471341082690554711/guru-guides" target="_blank">Install</mui-link>
+                <mui-link class="mui-button-secondary" variant="secondary" href="https://gurusuite.xyz/guides" target="_blank">Learn more</mui-link>
+              <mui-button-group>
+            </mui-v-stack>
+          </mui-grid>
+          <mui-grid slot="showAbove" col="1fr 440px">
+            <mui-v-stack  space="var(--space-600)"  alignY="start" style="max-width: 41ch; padding-bottom: var(--space-700);">
+              <mui-v-stack  space="var(--space-400)">
+                <mui-h-stack space="var(--space-200)" alignY="center">
+                  <mui-h-stack style="width: 38px;">
+                    <guides-logo size="medium"></guides-logo>
+                  </mui-h-stack>
+                  <mui-heading size="2" level="2">Guides</mui-heading>
+                </mui-h-stack>
+                <mui-v-stack space="var(--space-400)" style="max-width: 50ch;">
+                  <mui-body size="medium">MUI integrates with Guru Guides to provide in-context design guidelines direct in Figma, making component guidance easy to access where designers need it most.</mui-body>
+                  <mui-body size="small">Log in with your <strong>MUI credentials</strong> to view the guidelines.</mui-body>
+                </mui-v-stack>
+              </mui-v-stack>
+              <mui-button-group>
+                <mui-link variant="primary" href="https://www.figma.com/community/plugin/1471341082690554711/guru-guides" target="_blank">Install</mui-link>
+                <mui-link class="mui-button-secondary" variant="secondary" href="https://gurusuite.xyz/guides" target="_blank">Learn more</mui-link>
+              <mui-button-group>
+            </mui-v-stack>
+            <img class="hero" src="${ae}" alt="Hero" />
+          </mui-grid>
+        </mui-responsive>
+    `}}customElements.define("page-banner",re);class ne extends HTMLElement{static get observedAttributes(){return["title","description","orderedList","unorderedList"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+
+      mui-card {
+        border: var(--border-thick);
+      }
+
+    `,i=this.getAttribute("title")||"",s=this.hasAttribute("description")?`<mui-body style="max-width: 86ch;">${this.getAttribute("description")}</mui-body>`:"",o=this.getAttribute("orderedList");let a=[];if(o)try{a=JSON.parse(o)}catch{a=o.split(",").map(d=>d.trim())}const n=a.length?`
+        <mui-list as="ol" style="max-width: 65ch; margin-top: var(--space-300);">
+          ${a.map(d=>`<mui-list-item size="small" weight="medium" style="margin-bottom: var(--space-050)">${d}</mui-list-item>`).join("")}
+        </mui-list>
+      `:"",l=this.getAttribute("unorderedList");let c=[];if(l)try{c=JSON.parse(l)}catch{c=l.split(",").map(d=>d.trim())}const h=c.length?`
+        <mui-list as="ol" style="max-width: 65ch; margin-top: var(--space-300);">
+          ${c.map(d=>`<mui-list-item size="small" weight="medium" style="margin-bottom: var(--space-050)">${d}</mui-list-item>`).join("")}
+        </mui-list>
+      `:"";t.innerHTML=`
+      <style>${e}</style>
+      <mui-card>
+        ${this.hasAttribute("noheader")?"":`
+          <mui-card-header>
+            <mui-heading size="3" level="2">${i}</mui-heading>
+            <mui-v-stack space="var(--space-100)">
+              ${s}
+              ${n}
+              ${h}
+            </mui-v-stack>
+
+          </mui-card-header>
+        `}
+        <mui-card-body>
+          <slot name="body"></slot>
+        </mui-card-body>
+        <mui-card-footer><slot name="footer"></slot></mui-card-footer>
+      </mui-card>
+    `}}customElements.define("page-card",ne);class le extends HTMLElement{static get observedAttributes(){return["color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){t==="color"&&e!==i&&this.render()}render(){const t=this.getAttribute("color");let i={default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[t]||t||"var(--icon-color-default)";this.classList.add("mui-icon"),this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: 21px;
+          height: 21px;
+          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 21 21"
+      >
+        <path d="M10.509 0C4.698 0 0 4.812 0 10.766c0 4.76 3.01 8.788 7.186 10.214.522.107.713-.232.713-.517 0-.25-.017-1.105-.017-1.997-2.924.642-3.532-1.283-3.532-1.283-.47-1.248-1.166-1.569-1.166-1.569-.957-.659.07-.659.07-.659 1.06.071 1.618 1.105 1.618 1.105.939 1.64 2.453 1.177 3.062.891.087-.695.365-1.176.66-1.443-2.33-.25-4.784-1.177-4.784-5.312 0-1.177.418-2.14 1.079-2.888-.104-.267-.47-1.372.104-2.852 0 0 .888-.285 2.888 1.105a10 10 0 0 1 2.628-.356c.887 0 1.791.125 2.627.356 2-1.39 2.888-1.105 2.888-1.105.574 1.48.209 2.585.104 2.852.679.749 1.079 1.711 1.079 2.888 0 4.135-2.453 5.044-4.802 5.312.383.338.713.98.713 1.996 0 1.444-.017 2.602-.017 2.959 0 .285.192.624.713.517C17.99 19.553 21 15.525 21 10.766 21.017 4.812 16.302 0 10.509 0"
+        ></path>
+      </svg>
+
+
+
+    `}}customElements.define("github-mark",le);class ce extends HTMLElement{static get observedAttributes(){return["title","description","usage","accessibility","github"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+
+      mui-card {
+        border: var(--border-thick);
+      }
+
+      mui-card-body {
+        padding: 0;
+      }
+
+      .github::part(display) {
+        display: flex;
+        gap: var(--space-200);
+        padding: var(--space-200) var(--space-300);
+      }
+
+    `,i=this.getAttribute("title")||"",s=this.hasAttribute("description")?`<mui-body style="max-width: 86ch;">${this.getAttribute("description")}</mui-body>`:"",o=this.getAttribute("github"),a=o?`<mui-link class="github" href="${o}" target="_blank" rel="noopener" variant="tertiary">View Usage<github-mark></github-mark></mui-link>`:"",n=this.getAttribute("usage");let l=[];try{const p=n?n.replace(/(['"])(?=\w)(.*?)(?=\w)\1/g,"$2"):"";l=p?JSON.parse(p):[]}catch{l=n?n.split(";"):[]}const c=l.length?`
+        <mui-heading size="6" level="3" style="margin-top: var(--space-300); margin-bottom: var(--space-050);">Usage details</mui-heading>
+        <mui-list as="ul" style="max-width: 65ch;">
+          ${l.map(p=>`<mui-list-item size="small" weight="medium" style="margin-bottom: var(--space-050)">${p.trim()}</mui-list-item>`).join("")}
+        </mui-list>
+      `:"",h=this.getAttribute("accessibility");let d=[];try{const p=h?h.replace(/(['"])(?=\w)(.*?)(?=\w)\1/g,"$2"):"";d=p?JSON.parse(p):[]}catch{d=h?h.split(";"):[]}const u=d.length?`
+    <mui-heading size="6" level="3" style="margin-top: var(--space-300); margin-bottom: var(--space-050);">Accessibility details</mui-heading>
+    <mui-list as="ul" style="max-width: 65ch;">
+      ${d.map(p=>`<mui-list-item size="small" weight="medium" style="margin-bottom: var(--space-050)">${p.trim()}</mui-list-item>`).join("")}
+    </mui-list>
+  `:"";t.innerHTML=`
+      <style>${e}</style>
+      <mui-card>
+        ${this.hasAttribute("noheader")?"":`
+          <mui-card-header>
+            <mui-h-stack alignX="space-between" alignY="center">
+              <mui-heading size="3" level="2">${i}</mui-heading>
+              ${a}
+            </mui-h-stack>
+            <mui-v-stack space="var(--space-100)">
+              ${s}
+              ${c}
+              ${u}
+            </mui-v-stack>
+
+          </mui-card-header>
+        `}
+        <mui-rule></mui-rule>
+        <mui-card-body>
+          <slot name="body"></slot>
+        </mui-card-body>
+        <mui-card-footer><slot name="footer"></slot></mui-card-footer>
+      </mui-card>
+    `}}customElements.define("spec-card",ce);class de extends HTMLElement{static get observedAttributes(){return["title","description","usage","accessibility","github"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+
+      mui-card {
+        border: var(--border-thick);
+      }
+
+      .story-body {
+        padding: var(--space-400);
+      }
+
+      section {
+        background: var(--surface-recessed-alpha);
+        position: relative;
+      }
+
+      section:before,
+      section:after,
+      div:before,
+      div:after {
+        content: "";
+        position: absolute;
+        background: #12caff;
+      }
+
+      section:before,
+      section:after { height: 1px; }
+      div:before,
+      div:after { width: 1px; }
+
+      section:before {
+        top: 0;
+        left: -12px;
+        right: 2px;
+        width: calc(12px + 100% + 2px);
+      }
+
+      section:after {
+        bottom: 0;
+        left: -4px;
+        right: 8px;
+        width: calc(4px + 100% + 8px);
+      }
+
+      div:before {
+        top: -4px;
+        height: calc(4px + 100% + 4px);
+        left: 0;
+      }
+
+      div:after {
+        top: -4px;
+        height: calc(4px + 100% + 6px);
+        right: 0;
+      }
+
+      .github::part(display) {
+        display: flex;
+        gap: var(--space-200);
+        padding: var(--space-200) var(--space-300);
+      }
+    `,i=this.getAttribute("title")||"",s=this.hasAttribute("description")?`<mui-body style="max-width: 86ch;">${this.getAttribute("description")}</mui-body>`:"",o=this.getAttribute("github"),a=o?`<mui-link class="github" href="${o}" target="_blank" rel="noopener" variant="tertiary">View Usage<github-mark></github-mark></mui-link>`:"",n=this.getAttribute("usage");let l=[];try{const p=n?n.replace(/(['"])(?=\w)(.*?)(?=\w)\1/g,"$2"):"";l=p?JSON.parse(p):[]}catch{l=n?n.split(";"):[]}const c=l.length?`
+        <mui-heading size="6" level="3" style="margin-top: var(--space-300); margin-bottom: var(--space-050);">Usage details</mui-heading>
+        <mui-list as="ul" style="max-width: 65ch;">
+          ${l.map(p=>`<mui-list-item size="small" weight="medium" style="margin-bottom: var(--space-050)">${p.trim()}</mui-list-item>`).join("")}
+        </mui-list>
+      `:"",h=this.getAttribute("accessibility");let d=[];try{const p=h?h.replace(/(['"])(?=\w)(.*?)(?=\w)\1/g,"$2"):"";d=p?JSON.parse(p):[]}catch{d=h?h.split(";"):[]}const u=d.length?`
+    <mui-heading size="6" level="3" style="margin-top: var(--space-300); margin-bottom: var(--space-050);">Accessibility details</mui-heading>
+    <mui-list as="ul" style="max-width: 65ch;">
+      ${d.map(p=>`<mui-list-item size="small" weight="medium" style="margin-bottom: var(--space-050)">${p.trim()}</mui-list-item>`).join("")}
+    </mui-list>
+  `:"";t.innerHTML=`
+      <style>${e}</style>
+      <mui-card>
+        ${this.hasAttribute("noheader")?"":`
+          <mui-card-header>
+            <mui-h-stack alignX="space-between" alignY="center">
+              <mui-heading size="3" level="2">${i}</mui-heading>
+              ${a}
+            </mui-h-stack>
+            <mui-v-stack space="var(--space-100)">
+              ${s}
+              ${c}
+              ${u}
+            </mui-v-stack>
+
+          </mui-card-header>
+        `}
+        <mui-card-body>
+          <section>
+            <div class="story-body">
+              <slot name="body"></slot>
+            </div>
+          </section>
+        </mui-card-body>
+        <mui-card-footer><slot name="footer"></slot></mui-card-footer>
+      </mui-card>
+    `}}customElements.define("story-card",de);class he extends HTMLElement{static get observedAttributes(){return["token","output","usage"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: inline-flex;
+        margin:  var(--space-025) var(--space-000);
+      }
+
+      code {
+        background: var(--app-story-snippet-code-bg);
+        border-radius: var(--radius-100);
+        color: var(--app-story-snippet-code-text);
+        padding: var(--space-025) var(--space-100);
+        font-size: var(--font-size-15);
+      }
+
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <code><slot></slot></code>
+       
+    `}}customElements.define("story-code-snippet",he);class ue extends HTMLElement{static get observedAttributes(){return["width","height","description"]}constructor(){super();const t=this.attachShadow({mode:"open"});let e="24px",i="24px";const s=`
+      :host { display: block; }
+      slot {
+        display: flex;
+        padding: var(--space-050) var(--space-400);
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+        background: var(--grey-200);
+        border-radius: var(--radius-200);
+        width: var(--width); 
+        height: var(--height);
+      }
+    `,o=`<mui-body size="small">${this.getAttribute("description")}</mui-body>`;t.innerHTML=`
+      <style>${s}</style>
+      <slot style="--width: ${this.getAttribute("width")||e}; --height: ${this.getAttribute("height")||i};">
+        ${o}
+      </slot>
+    `}}customElements.define("story-demo",ue);class me extends HTMLElement{static get observedAttributes(){return["theme"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){t==="theme"&&e!==i&&this.render()}render(){const t=this.getAttribute("theme")||"default",e={default:"var(--app-story-icon-grid-background)",inverted:"var(--app-story-icon-grid-background-inverted)"},s=`
+      :host { display: block; }
+      mui-card {
+        background-color: ${e[t]||e.default};
+        display: block;
+      }
+
+      :host([center]) {
+        text-align: center;
+      }
+    `;this.shadowRoot.innerHTML=`
+      <style>${s}</style>
+      <mui-card>
+        <mui-card-body style="text-align: center;">
+          <slot name="body"></slot>
+        </mui-card-body>
+        <mui-card-footer>
+          <slot name="footer"></slot>
+        </mui-card-footer>
+      </mui-card>
+    `}}customElements.define("story-icon-grid",me);class pe extends HTMLElement{static get observedAttributes(){return["token","output","usage"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+        padding: var(--space-500) var(--space-500);
+        border-bottom: var(--border-thin);
+      }
+
+      @media (min-width: 768px) {
+        :host {
+          padding: var(--space-500) var(--space-600);
+        }
+      }
+
+      :host(:last-of-type) { 
+        border-bottom: none;
+      }
+
+      mui-slat {
+        align-items: start;
+      }
+
+      mui-h-stack::part(align-items) {
+        align-items: end;
+      }
+
+    `,o=(this.getAttribute("usage")||"").split(",").map(a=>a.trim()).filter(a=>a.length>0).map(a=>`<mui-link size="x-small" weight="bold" href="${`#/${a.toLowerCase().replace(/\s+/g,"")}`}">${a}</mui-link>`).join("");t.innerHTML=`
+      <style>${e}</style>
+
+      <mui-v-stack space="var(--space-100)">
+
+        <mui-body size="x-small">
+          <story-code-snippet>${this.getAttribute("token")}</story-code-snippet>
+        </mui-body>
+
+        <mui-body size="x-small">
+          ${this.getAttribute("output")}
+        </mui-body>
+
+        <mui-h-stack space="var(--space-100)">
+          <mui-body size="x-small">Usage:</mui-body>
+          ${o||'<mui-body size="x-small" weight="bold">None</mui-body>'}
+        </mui-h-stack>
+
+      </mui-v-stack>
+    `}}customElements.define("story-part-slat",pe);class be extends HTMLElement{static get observedAttributes(){return["color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){t==="color"&&e!==i&&this.render()}render(){const t=this.getAttribute("color");let i={default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[t]||t||"var(--icon-color-default)";this.classList.add("mui-icon"),this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: 21px;
+          height: 21px;
+          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 21 21"
+      >
+        <path
+        d="M10.5 0C16.299 0 21 4.701 21 10.5S16.299 21 10.5 21 0 16.299 0 10.5 4.701 0 10.5 0M8.397 3.063c-1.496 0-2.71 1.225-2.71 2.737 0 .961.491 1.807 1.233 2.296a2.74 2.74 0 0 0-1.232 2.295c0 .96.49 1.806 1.232 2.294a2.74 2.74 0 0 0-1.232 2.296 2.734 2.734 0 0 0 2.721 2.738 2.76 2.76 0 0 0 2.747-2.763v-2.55a2.7 2.7 0 0 0 1.835.722h.049c1.497 0 2.71-1.226 2.71-2.737 0-.962-.49-1.807-1.232-2.295A2.74 2.74 0 0 0 15.75 5.8c0-1.512-1.213-2.737-2.71-2.737zm1.884 10.065v1.828a1.88 1.88 0 0 1-1.872 1.878 1.854 1.854 0 0 1-1.846-1.853c0-1.02.818-1.85 1.829-1.853zm0-4.59v3.705h-1.89a1.844 1.844 0 0 1-1.828-1.852c0-1.024.821-1.853 1.834-1.853zm2.759 0c1.013 0 1.834.83 1.834 1.853a1.843 1.843 0 0 1-1.834 1.852h-.049a1.844 1.844 0 0 1-1.835-1.852c0-1.024.822-1.853 1.835-1.853zm-2.759-.885H8.397A1.844 1.844 0 0 1 6.563 5.8c0-1.023.822-1.853 1.834-1.853h1.884zm2.759-3.706c1.013 0 1.834.83 1.834 1.853a1.844 1.844 0 0 1-1.834 1.853h-1.884V3.947z"
+        ></path>
+      </svg>
+
+
+
+    `}}customElements.define("figma-mark",be);class ve extends HTMLElement{static get observedAttributes(){return["color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){t==="color"&&e!==i&&this.render()}render(){const t=this.getAttribute("color");let i={default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[t]||t||"var(--icon-color-default)";this.classList.add("mui-icon"),this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: 21px;
+          height: 21px;
+          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 21 21"
+      >
+        <path
+        d="M10.5 0C16.299 0 21 4.701 21 10.5S16.299 21 10.5 21 0 16.299 0 10.5 4.701 0 10.5 0m6.04 8.897a1.653 1.653 0 0 0-2.338 0l-3.7 3.7-3.7-3.7a1.653 1.653 0 0 0-2.336 2.337l4.85 4.85.017.02c.323.322.746.482 1.169.482s.847-.16 1.17-.482l.016-.02 4.851-4.85a1.653 1.653 0 0 0 0-2.337m-6.169-4.96a2.547 2.547 0 0 0-2.547 2.548c0 1.398 2.514 3.552 2.547 3.58.027-.022 2.548-2.18 2.548-3.58a2.55 2.55 0 0 0-2.548-2.548"
+        ></path>
+      </svg>
+
+
+
+    `}}customElements.define("guides-mark",ve);class ge extends HTMLElement{static get observedAttributes(){return["title","description","accessibility","demo","github","figma","guides"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const t=`
+      :host { display: block; width: 100%; }
+
+      .resources::part(display) {
+        display: flex;
+        gap: var(--space-200);
+        padding: var(--space-200) var(--space-300);
+      }
+    `,e=this.getAttribute("title")||"",i=this.getAttribute("description")||"",s=i?`<mui-body large style="letter-spacing: 0.75px; max-width: 75ch;">${i}</mui-body>`:"",o=this.getAttribute("accessibility");let a=[];const n=this.getAttribute("demo"),l=n?`<mui-link class="resources" href="${n}" target="_blank" rel="noopener" variant="secondary">Live Demo<mui-icon-globe></mui-icon-globe></mui-link>`:"",c=this.getAttribute("github"),h=c?`<mui-link class="resources" href="${c}" target="_blank" rel="noopener" variant="secondary">Github<github-mark></github-mark></mui-link>`:"",d=this.getAttribute("figma"),u=d?`<mui-link class="resources" href="${d}" target="_blank" rel="noopener" variant="secondary">Figma<figma-mark></figma-mark></mui-link>`:"",v=this.hasAttribute("guides")?'<mui-link class="resources" href="/#/design-guidelines" variant="secondary">Guides<guides-mark></guides-mark></mui-link>':"";try{const f=o?o.replace(/(['"])(?=\w)(.*?)(?=\w)\1/g,"$2"):"";a=f?JSON.parse(f):[]}catch{a=o?o.split(";"):[]}const g=a.length?`
+        <mui-message heading="Accessibility Notes" icon="mui-icon-accessibility">
+            <mui-list as="ul">
+              ${a.map(f=>`<mui-list-item size="small" weight="medium">${f.trim()}</mui-list-item>`).join("")}
+            </mui-list>
+        </mui-message> 
+      `:"";this.shadowRoot.innerHTML=`
+      <style>${t}</style>
+      <mui-container center>
+        <mui-v-stack space="var(--space-700)">
+          <mui-v-stack space="var(--space-600)">
+            <mui-v-stack space="var(--space-400)">
+              <mui-responsive breakpoint="768">
+                <mui-v-stack slot="showBelow" space="var(--space-300)">
+                  <mui-heading size="1" weight="800">${e}</mui-heading>
+                  <mui-h-stack space="var(--space-100)">
+                    ${l}
+                    ${v}
+                    ${u}
+                    ${h}
+                  </mui-h-stack>
+                </mui-v-stack>
+                <mui-h-stack slot="showAbove" alignX="space-between" alignY="center">
+                  <mui-heading size="1" weight="800">${e}</mui-heading>
+                  <mui-h-stack space="var(--space-100)">
+                    ${l}
+                    ${v}
+                    ${u}
+                    ${h}
+                  </mui-h-stack>
+                </mui-h-stack>
+              </mui-responsive>
+              ${s}
+            </mui-v-stack>
+            ${g}
+          </mui-v-stack>
+          <div>
+            <slot></slot>
+          </div>
+        </mui-v-stack>
+      </mui-container>
+    `}}customElements.define("story-template",ge);class fe extends HTMLElement{static get observedAttributes(){return["token","output","variant","font-size","line-height","font-weight"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const t=this.getAttribute("token"),e=this.getAttribute("output"),i=this.getAttribute("variant"),s=this.getAttribute("font-size"),o=this.getAttribute("line-height"),a=this.getAttribute("font-weight"),n=`
+      :host {
+        display: block;
+        padding: var(--space-400) var(--space-500);
+        border-top: var(--border-thin);
+      }
+
+      @media (min-width: 768px) {
+        :host {
+          padding: var(--space-400) var(--space-600);
+        }
+      }
+
+      :host(:first-of-type) {
+        border-top: none;
+      }
+
+      :host(:last-of-type) {
+        border-bottom: none;
+      }
+
+      mui-slat {
+        align-items: start;
+      }
+
+      .swatch {
+        width: var(--space-700);
+        height: var(--space-700);
+        border-radius: var(--radius-100);
+      }
+
+      .text-preview {
+        font-size: var(--font-size-300);
+        color: var(--text-color);
+      }
+
+      .spacer {
+        height: 16px;
+        width: 100%;
+        background: var(--mui-brand-300);
+        border-radius: var(--radius-200);
+      }
+
+      .radius-preview {
+        width: var(--space-700);
+        height: var(--space-700);
+        background: var(--mui-brand-300);
+      }
+
+      .border-preview,
+      .outline-preview { width: var(--space-700); }
+
+      .line-height-preview { }
+
+      mui-grid::part(align-items) { align-items: center; }
+    `;let l="";switch(i){case"color":l=`<div class="swatch" style="background: ${e};"></div>`;break;case"text-color":l=`<div class="text-preview" style="color: ${e};">Aa</div>`;break;case"text-size":l=`
+            <div 
+              class="text-preview" 
+              style="font-size: ${e}; line-height: var(${o}); font-weight: var(${a});"
+            >
+              Aa
+            </div>`;break;case"line-height":l=`
+            <div 
+              class="line-height-preview" 
+              style="line-height: ${e}; font-size: var(${s}); font-weight: var(${a});"
+            >
+              Aa
+            </div>`;break;case"font-weight":l=`<div class="text-preview" style="font-weight: ${e};">Aa</div>`;break;case"font-family":l=`<div class="text-preview" style="font-family: ${e};">Aa</div>`;break;case"size":l=`<div class="spacer" style="height: ${e}; width: ${e};"></div>`;break;case"radius":l=`<div class="radius-preview" style="border-radius: ${e};"></div>`;break;case"border-width":l=`<div class="border-preview" style="border: var(--border-thin); border-width: ${e};"></div>`;break;case"border-color":l=`<div class="border-preview" style="border: var(--border-thin); border-color: ${e};"></div>`;break;case"border":l=`<div class="border-preview" style="border: ${e};"></div>`;break;case"outline-width":l=`<div class="outline-preview" style="outline: var(--outline-thin); outline-width: ${e};"></div>`;break;case"outline-color":l=`<div class="outline-preview" style="outline: var(--outline-thin); outline-color: ${e};"></div>`;break;case"outline":l=`<div class="outline-preview" style="outline: ${e};"></div>`;break}this.shadowRoot.innerHTML=`
+      <style>${n}</style>
+
+      <mui-responsive breakpoint="767">
+        <mui-slat slot="showAbove" style="grid-template-columns: 0.8fr 1.2fr; align-items: center;">
+          <mui-body slot="start" size="x-small">
+            <story-code-snippet>${t}</story-code-snippet>
+          </mui-body>
+          <div slot="end">
+            <mui-grid col="1fr 1fr">
+              ${l}
+              <mui-body size="x-small">${e}</mui-body>
+            </mui-grid>
+          </div>
+        </mui-slat>
+
+
+        <mui-h-stack slot="showBelow" space="var(--space-200)" alignX="space-between" alignY="center" >
+          <mui-v-stack space="var(--space-200)">
+            <mui-body size="x-small"><story-code-snippet>${t}</story-code-snippet></mui-body>
+            <mui-body size="x-small">${e}</mui-body>
+          </mui-v-stack>
+          <mui-h-stack>
+            ${l}
+          </mui-h-stack>
+        </mui-h-stack>
+
+      </mui-responsive>
+
+    `}}customElements.define("story-token-slat",fe);let ye=class extends HTMLElement{static get observedAttributes(){return["type","name","options","required","description","default"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+      }
+    `;this.getAttribute("name"),this.getAttribute("options"),this.hasAttribute("required"),this.getAttribute("type"),this.getAttribute("default"),this.getAttribute("description"),t.innerHTML=`
+      <style>${e}</style>
+
+      <mui-table>  
+        <mui-row-group heading>
+          <mui-row columns="1fr 1fr 1fr">
+            <mui-cell heading>Token</mui-cell>
+            <mui-cell heading>Usage</mui-cell>
+            <mui-cell heading>Description</mui-cell>
+          </mui-row>
+        </mui-row-group>
+        <slot></slot>
+      </mui-table>
+
+    `}};customElements.define("story-token-type-table",ye);let we=class extends HTMLElement{static get observedAttributes(){return["token","description","usage"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+      }
+
+      .visually-hidden {
+        position: absolute;
+        inset: 0;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border: 0;
+        }
+
+    `,i=this.getAttribute("token")||"—",s=this.getAttribute("description")||"",o=this.getAttribute("usage")||"undefined";t.innerHTML=`
+      <style>${e}</style>
+
+      <mui-row-group>
+        <mui-row columns="1fr 1fr 1fr">
+          <mui-cell>
+            <mui-body size="x-small">
+              <mui-h-stack space="var(--space-050)">
+              ${i}
+            </mui-h-stack></mui-body>
+          </mui-cell>
+          <mui-cell><mui-body size="x-small">${s}</mui-body></mui-cell>
+          <mui-cell><mui-body size="x-small">${o}</mui-body></mui-cell>
+        </mui-row>
+      </mui-row-group>
+    `}};customElements.define("story-token-type-row",we);let ke=class extends HTMLElement{static get observedAttributes(){return["token","description","usage"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+      }
+
+      .title {
+        font-weight: var(--font-weight-bold);
+      }
+
+      .visually-hidden {
+        position: absolute;
+        inset: 0;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border: 0;
+        }
+
+    `,i=this.getAttribute("token")||"—",s=this.getAttribute("description")||"",o=this.getAttribute("usage")||"undefined";t.innerHTML=`
+      <style>${e}</style>
+
+
+      <mui-responsive breakpoint="600">
+
+        <mui-v-stack space="var(--space-000)" slot="showAbove">
+          <mui-slat style="gap: var(--space-600)">
+            <div slot="start">
+              <mui-v-stack space="var(--space-200)">
+                <mui-body size="medium"><mui-h-stack space="var(--space-050)"><span class="title">Name:</span> ${i} 
+                </mui-h-stack></mui-body>
+              </mui-v-stack>
+            </div>
+
+            <mui-v-stack space="var(--space-100)" slot="end">
+              <mui-body size="x-small"><span class="title">Usage:</span> ${o}</mui-body>
+              <mui-body size="x-small"><span class="title">Description:</span> ${s}</mui-body>
+            </mui-v-stack>
+          </mui-slat>
+        </mui-v-stack>
+
+        <mui-v-stack space="var(--space-100)" slot="showBelow">
+          <mui-v-stack space="var(--space-200)">
+             <mui-body size="medium"><mui-h-stack space="var(--space-050)"><span class="title">Name:</span> ${i}</mui-h-stack></mui-body>
+          </mui-v-stack>
+
+          <mui-v-stack space="var(--space-050)">
+            <mui-body size="x-small"><span class="title">Usage:</span> ${o}</mui-body>
+            <mui-body size="x-small"><span class="title">Description:</span> ${s}</mui-body>
+          </mui-v-stack>
+
+      </mui-responsive>
+    `}};customElements.define("story-token-type-slat",ke);class xe extends HTMLElement{static get observedAttributes(){return["type","name","options","required","description","default"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+      }
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <mui-table>  
+        <mui-row-group heading>
+          <mui-row columns="minmax(12rem, 0.5fr) minmax(10rem, 1fr) minmax(10rem, 2fr) minmax(5rem, 0.5fr) 2fr">
+            <mui-cell class="card-slot" heading>Name</mui-cell>
+            <mui-cell class="card-slot" heading>Default</mui-cell>
+            <mui-cell class="card-slot" heading>Options</mui-cell>
+            <mui-cell class="card-slot" heading>Type</mui-cell>
+            <mui-cell class="card-slot" heading>Description</mui-cell>
+          </mui-row>
+        </mui-row-group>
+        <slot></slot>
+      </mui-table>
+
+    `}}customElements.define("story-type-table",xe);class Ae extends HTMLElement{static get observedAttributes(){return["type","name","options","required","description","default"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+      }
+
+      .visually-hidden {
+        position: absolute;
+        inset: 0;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border: 0;
+        }
+
+    `,i=this.getAttribute("name")||"—",s=this.hasAttribute("required"),o=this.getAttribute("type")||"undefined",a=this.getAttribute("description")||"",n=this.getAttribute("options")||"-",l=n!=="-"?n.split(",").map(d=>`<story-code-snippet>${d.trim()}</story-code-snippet>`).join(" "):"-",c=this.getAttribute("default")||"-",h=c!=="-"?`<story-code-snippet>${c}</story-code-snippet>`:"-";t.innerHTML=`
+      <style>${e}</style>
+
+      <mui-row-group>
+        <mui-row columns="minmax(12rem, 0.5fr) minmax(10rem, 1fr) minmax(10rem, 2fr) minmax(5rem, 0.5fr)  2fr">
+          <mui-cell class="card-slot">
+            <mui-body size="x-small">
+              <mui-h-stack space="var(--space-050)">
+              ${i} ${s?'<span aria-hidden="true" style="color: var(--red-500)">*</span><span class="visually-hidden">(required)</span>':""}
+            </mui-h-stack></mui-body>
+          </mui-cell>
+          <mui-cell class="card-slot"><mui-body size="x-small">${h}<mui-body></mui-cell>
+          <mui-cell class="card-slot"><mui-body size="x-small">${l}</mui-body></mui-cell>
+          <mui-cell class="card-slot"><mui-body size="x-small">${o}</mui-body></mui-cell>
+          <mui-cell class="card-slot"><mui-body size="x-small">${a}</mui-body></mui-cell>
+        </mui-row>
+      </mui-row-group>
+    `}}customElements.define("story-type-row",Ae);class Ee extends HTMLElement{static get observedAttributes(){return["type","name","options","required","description","default"]}constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { 
+        display: block;
+      }
+
+      .title {
+        font-weight: var(--font-weight-bold);
+      }
+
+      .visually-hidden {
+        position: absolute;
+        inset: 0;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border: 0;
+        }
+
+    `,i=this.getAttribute("name")||"—",s=this.hasAttribute("required"),o=this.getAttribute("type")||"undefined",a=this.getAttribute("description")||"",n=this.getAttribute("options")||"-",l=n!=="-"?n.split(",").map(d=>`<story-code-snippet>${d.trim()}</story-code-snippet>`).join(" "):"-",c=this.getAttribute("default")||"-",h=c!=="-"?`<story-code-snippet>${c}</story-code-snippet>`:"-";t.innerHTML=`
+      <style>${e}</style>
+
+
+      <mui-responsive breakpoint="600">
+
+        <mui-v-stack space="var(--space-000)" slot="showAbove">
+          <mui-slat style="gap: var(--space-600)">
+            <div slot="start">
+              <mui-v-stack space="var(--space-200)">
+                <mui-body size="medium"><mui-h-stack space="var(--space-050)"><span class="title">Name:</span> ${i} 
+                ${s?'<span aria-hidden="true" style="color: var(--red-500)">*</span><span class="visually-hidden">(required)</span>':""}
+                </mui-h-stack></mui-body>
+                <mui-body size="x-small"><span class="title">Description:</span><br /> ${a}</mui-body>
+              </mui-v-stack>
+            </div>
+
+            <mui-v-stack space="var(--space-100)" slot="end">
+              <mui-body size="x-small"><span class="title">Default:</span> ${h}</mui-body>
+              <mui-body size="x-small"><span class="title">Type:</span> ${o}</mui-body>
+              <mui-body size="x-small"><span class="title">Options:</span> ${l}</mui-body>
+              </mui-v-stack>
+          </mui-slat>
+        </mui-v-stack>
+
+        <mui-v-stack space="var(--space-100)" slot="showBelow">
+          <mui-v-stack space="var(--space-200)">
+             <mui-body size="medium"><mui-h-stack space="var(--space-050)"><span class="title">Name:</span> ${i} 
+                ${s?'<span aria-hidden="true" style="color: var(--red-500)">*</span><span class="visually-hidden">(required)</span>':""}
+                </mui-h-stack></mui-body>
+            <mui-body size="x-small">${a}</mui-body>
+          </mui-v-stack>
+
+          <mui-v-stack space="var(--space-050)">
+            <mui-body size="x-small"><span class="title">Default:</span> ${h}</mui-body>
+            <mui-body size="x-small"><span class="title">Type:</span> ${o}</mui-body>
+            <mui-body size="x-small"><span class="title">Options:</span> ${l}</mui-body>
+          </mui-v-stack>
+
+      </mui-responsive>
+    `}}customElements.define("story-type-slat",Ee);document.querySelector("#app").innerHTML=`
+  <app-navbar>
+    <app-navbar-skip slot="skip"></app-navbar-skip>
+  </app-navbar>
+  <app-container />
+`;export{ae as H};