@muibook/components 1.0.2 → 1.0.4

package/dist/create-mui-app/assets/index-DfcB3F-s.js

@@ -1,597 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))i(o);new MutationObserver(o=>{for(const a of o)if(a.type==="childList")for(const n of a.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&i(n)}).observe(document,{childList:!0,subtree:!0});function e(o){const a={};return o.integrity&&(a.integrity=o.integrity),o.referrerPolicy&&(a.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?a.credentials="include":o.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function i(o){if(o.ep)return;o.ep=!0;const a=e(o);fetch(o.href,a)}})();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"),o=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",a={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},n=a[t]??a.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
-      <style>
-        :host {
-          width: ${n};
-          height: ${n};
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          fill: ${o};
-        }
-        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",l);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"),o=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",a={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},n=a[t]??a.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
-      <style>
-        :host {
-          width: ${n};
-          height: ${n};
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          fill: ${o};
-        }
-        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",h);class d 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 o=i!==null;this._checkbox&&(this._checkbox.disabled=o,this._checkbox.setAttribute("aria-disabled",o.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,o,a;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"),(o=this._checkbox)==null||o.removeAttribute("aria-disabled"),(a=this._checkbox)==null||a.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",d);class u 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",u);class g 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",g);const c={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(c).flat();function s(...r){return r.map(t=>c[t]||[]).flat().join(" ")}class m 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="${s("spacing","layout","visual")}"><slot></slot></p>
-
-    `;this.shadowRoot&&(this.shadowRoot.innerHTML=e)}waitForPartMap(){return new Promise(t=>{if(typeof s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-body",m);class v 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="${s("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 s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-link",v);class b 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=s("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 s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-h-stack",b);class f 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=s("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 s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-v-stack",f);class p 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(){let e=this.getAttribute("color");this.shadowRoot.innerHTML=`
-      <style>
-        :host {
-          width: 200px;
-          height: auto;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          fill: ${e};
-        }
-        svg {
-          width: 100%;
-          display: block;
-          fill: inherit; 
-        }
-      </style>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 98 93"
-      >
-        <path
-          d="M1.615 66.906V1.319h16.8v11.914h.357C21.572 5.31 28.72.366 37.477.366c9.412 0 16.084 4.825 18.288 13.403h.357C59.101 5.55 66.964.366 76.495.366 89.362.366 98 9.123 98 22.347v44.559H80.606v-40.21c0-7.684-3.873-11.914-10.961-11.914-6.851 0-11.438 5.004-11.438 12.45v39.674H41.408V26.041c0-7.03-4.05-11.259-10.782-11.259-6.85 0-11.616 5.242-11.616 12.689v39.435zM10.324 74.101c5.123 0 9.353 3.932 9.353 9.115s-4.23 9.054-9.353 9.054c-5.182 0-9.412-3.872-9.412-9.054s4.23-9.115 9.412-9.115"
-        ></path>
-      </svg>
-
-
-
-
-
-    `}}customElements.define("create-mui-app-logo",p);class y 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 a=i.detail.checked?"dark":"light";localStorage.setItem("theme",a),document.documentElement.setAttribute("data-theme",a)}),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-checked: #ffeb3b;
-        }
-
-      </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",y);document.querySelector("#app").innerHTML=`
-  <mui-container small>
-    <mui-v-stack space="var(--space-600)" alignX="center">
-      <create-mui-app-logo color="var(--logo-color)"></create-mui-app-logo>
-      <mui-body weight="medium" class="introduction">
-        Create fast, accessible, and themeable components with MUI styling,
-        without the need for React or other dependencies.
-      </mui-body>
-      <mui-h-stack space="var(--space-300)">
-        <mui-link
-          variant="primary"
-          href="https://muibook.com"
-          target="_blank"
-        >
-          Mui Docs
-        </mui-link>
-        <mui-link
-          variant="secondary"
-          href="https://github.com/michaeltrilford/create-mui-app"
-          target="_blank"
-        >
-          Get Started
-        </mui-link>
-      </mui-h-stack>
-      <mui-h-stack space="var(--space-300)" alignY="center">
-        <mui-body weight="bold">Toggle Theme</mui-body>
-        <dark-mode-toggle></dark-mode-toggle>
-      </mui-h-stack>
-    </mui-v-stack>
-  </mui-container>
-`;

package/dist/create-mui-app/create-mui-app.css

@@ -1 +0,0 @@
-html[data-theme=light]{--app-container-surface: var(--white);--logo-color: var(--grey-800)}html[data-theme=dark]{--app-container-surface: var(--grey-1000);--logo-color: #ffeb3b}body{display:grid;place-items:center;text-align:center;background-color:var(--app-container-surface)}.introduction{max-width:36ch}:where(html){--font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-size-15: 1.1rem;--font-size-25: 1.2rem;--font-size-50: 1.4rem;--font-size-100: 1.6rem;--font-size-200: 1.8rem;--font-size-300: 2.1rem;--font-size-400: 2.4rem;--font-size-500: 3.6rem;--font-size-600: 4.8rem;--font-size-700: 6rem;--font-size-800: 7.2rem;--font-size-900: 8.4rem;--font-size-1000: 9.6rem;--line-height-15: 1.63636364;--line-height-25: 1.5;--line-height-50: 1.5;--line-height-100: 1.5;--line-height-200: 1.33333333;--line-height-300: 1.14285714;--line-height-400: 1.5;--line-height-500: 1.33333333;--line-height-600: 1.25;--line-height-700: 1.2;--line-height-800: 1.16666667;--line-height-900: 1.14285714;--line-height-1000: 1.125;--font-weight-400: 400;--font-weight-500: 500;--font-weight-600: 600;--font-weight-700: 700;--black: black;--black-opacity-0: hsla(0, 0%, 0%, 0);--black-opacity-10: hsla(0, 0%, 0%, .1);--black-opacity-20: hsla(0, 0%, 0%, .2);--black-opacity-30: hsla(0, 0%, 0%, .3);--black-opacity-40: hsla(0, 0%, 0%, .4);--black-opacity-50: hsla(0, 0%, 0%, .5);--black-opacity-60: hsla(0, 0%, 0%, .6);--black-opacity-70: hsla(0, 0%, 0%, .7);--black-opacity-80: hsla(0, 0%, 0%, .8);--black-opacity-90: hsla(0, 0%, 0%, .9);--black-opacity-100: hsla(0, 0%, 0%, 1);--white: #ffffff;--white-opacity-0: hsla(0, 0%, 100%, 0);--white-opacity-10: hsla(0, 0%, 100%, .1);--white-opacity-20: hsla(0, 0%, 100%, .2);--white-opacity-30: hsla(0, 0%, 100%, .3);--white-opacity-40: hsla(0, 0%, 100%, .4);--white-opacity-50: hsla(0, 0%, 100%, .5);--white-opacity-60: hsla(0, 0%, 100%, .6);--white-opacity-70: hsla(0, 0%, 100%, .7);--white-opacity-80: hsla(0, 0%, 100%, .8);--white-opacity-90: hsla(0, 0%, 100%, .9);--white-opacity-100: hsla(0, 0%, 100%, 1);--grey-100: #f5f5f5;--grey-200: #e5e5e5;--grey-300: #ccc;--grey-400: #aaa;--grey-500: #888;--grey-600: #666;--grey-700: #555;--grey-800: #444;--grey-900: #333;--grey-1000: #222;--grey-1100: #111;--red-100: #ffe5e5;--red-200: #fbbcbc;--red-300: #f79494;--red-400: #f36b6b;--red-500: #f74e4e;--red-600: #e04343;--red-700: #c23c3c;--red-800: #a43535;--red-900: #862e2e;--red-1000: #6a2323;--orange-100: #fff2cc;--orange-200: #ffe0a3;--orange-300: #ffcc80;--orange-400: #ffb84d;--orange-500: #ffa500;--orange-600: #e59400;--orange-700: #cc8300;--orange-800: #b37300;--orange-900: #996200;--orange-1000: #805100;--green-100: #e5f9e5;--green-200: #c6f3c6;--green-300: #a6eda6;--green-400: #86e786;--green-500: #00bd00;--green-600: #00a800;--green-700: #009400;--green-800: #007f00;--green-900: #006b00;--green-1000: #005700;--blue-100: #e6f2ff;--blue-200: #cce4ff;--blue-300: #99caff;--blue-400: #85bffb;--blue-500: #62b7fb;--blue-600: #338fe0;--blue-700: #3396eb;--blue-800: #1a86e3;--blue-900: #0076db;--blue-1000: #005fb1;--radius-000: 0;--radius-100: 4px;--radius-150: 6px;--radius-200: 8px;--radius-300: 16px;--radius-400: 24px;--space-000: 0;--space-025: .2rem;--space-050: .4rem;--space-100: .6rem;--space-200: .8rem;--space-300: 1.2rem;--space-400: 1.6rem;--space-500: 2.4rem;--space-600: 3.6rem;--space-700: 4.8rem;--space-800: 6rem;--stroke-size-100: 1px;--stroke-size-200: 2px;--stroke-size-300: 3px;--stroke-size-400: 4px;--stroke-size-500: 5px;--stroke-solid: solid;--stroke-outset: outset;--speed-100: .1s;--speed-200: .2s;--speed-300: .3s;--speed-400: .4s}html[data-theme=light]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-700);--form-warning-text-color: var(--orange-700);--form-error-text-color: var(--red-700);--form-default-text-color-hover: var(--grey-600);--form-success-text-color-hover: var(--green-800);--form-warning-text-color-hover: var(--orange-800);--form-error-text-color-hover: var(--red-800);--form-default-border-color: var(--grey-300);--form-success-border-color: var(--green-600);--form-warning-border-color: var(--orange-600);--form-error-border-color: var(--red-600);--form-default-border-color-hover: var(--grey-400);--form-success-border-color-hover: var(--green-700);--form-warning-border-color-hover: var(--orange-700);--form-error-border-color-hover: var(--red-700);--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--green-600);--feedback-info-border-color: var(--blue-600);--feedback-warning-border-color: var(--orange-600);--feedback-attention-border-color: var(--red-600);--feedback-neutral-background: var(--white);--feedback-positive-background: var(--green-100);--feedback-info-background: var(--blue-100);--feedback-warning-background: var(--orange-100);--feedback-attention-background: var(--red-100);--feedback-neutral-icon: var(--grey-600);--feedback-positive-icon: var(--green-600);--feedback-info-icon: var(--blue-600);--feedback-warning-icon: var(--orange-600);--feedback-attention-icon: var(--red-600);--feedback-neutral-text: var(--grey-900);--feedback-positive-text: var(--green-900);--feedback-info-text: var(--blue-900);--feedback-warning-text: var(--orange-900);--feedback-attention-text: var(--red-900);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-900);--action-primary-background-hover: var(--grey-1000);--action-primary-background-focus: var(--grey-1000);--action-primary-background-disabled: var(--grey-200);--action-primary-text-color: var(--white);--action-primary-text-color-hover: var(--white);--action-primary-text-color-focus: var(--white);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--grey-100);--action-secondary-background-focus: var(--grey-100);--action-secondary-background-disabled: var(--grey-100);--action-secondary-text-color: var(--grey-900);--action-secondary-text-color-hover: var(--grey-1000);--action-secondary-text-color-focus: var(--grey-1000);--action-secondary-text-color-disabled: var(--grey-400);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--black-opacity-10);--action-tertiary-background-focus: var(--black-opacity-10);--action-tertiary-background-disabled: var(--grey-100);--action-tertiary-text-color: var(--grey-900);--action-tertiary-text-color-hover: var(--grey-1000);--action-tertiary-text-color-focus: var(--grey-1000);--action-tertiary-text-color-disabled: var(--grey-400);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-500);--action-attention-background-hover: var(--red-600);--action-attention-background-focus: var(--red-600);--action-attention-background-disabled: var(--red-100);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--grey-300);--surface-recessed-200: var(--grey-400);--outline-color: var(--blue-500);--border-color: var(--black-opacity-20);--optional-text-color: var(--grey-600);--text-color: var(--grey-900);--text-color-success: var(--green-600);--text-color-warning: var(--orange-600);--text-color-error: var(--red-600);--switch-track-background: var(--grey-300);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--white);--switch-icon: var(--icon-color-default);--icon-color-default: var(--black);--icon-color-inverted: var(--white);--badge-text-color: var(--grey-100);--badge-background-neutral: var(--grey-600);--badge-background-positive: var(--green-600);--badge-background-warning: var(--orange-600);--badge-background-attention: var(--red-600);--heading-text-color: var(--grey-1000);--link-text-color-default: var(--grey-900);--link-text-color-default-hover: var(--grey-1000);--link-text-color-default-focus: var(--grey-1000);--link-text-color-default-disabled: var(--grey-800);--input-background: var(--white);--input-background-disabled: var(--grey-100);--addon-background: var(--grey-100);--tab-border-color: var(--grey-300);--tab-background: var(--grey-200);--tab-icon: var(--grey-900);--tab-text-color: var(--grey-900);--tab-background-active: var(--white);--tab-icon-active: var(--black);--tab-text-color-active: var(--black);--tab-shadow-active: var(--black-opacity-10);--carousel-background: var(--white)}html[data-theme=dark]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-400);--form-warning-text-color: var(--orange-400);--form-error-text-color: var(--red-400);--form-default-text-color-hover: var(--grey-400);--form-success-text-color-hover: var(--green-300);--form-warning-text-color-hover: var(--orange-300);--form-error-text-color-hover: var(--red-300);--form-default-border-color: var(--grey-600);--form-success-border-color: var(--green-400);--form-warning-border-color: var(--orange-400);--form-error-border-color: var(--red-400);--form-default-border-color-hover: var(--grey-500);--form-success-border-color-hover: var(--green-300);--form-warning-border-color-hover: var(--orange-300);--form-error-border-color-hover: var(--red-300);--feedback-neutral-border-color: var(--white-opacity-20);--feedback-positive-border-color: var(--green-400);--feedback-info-border-color: var(--blue-400);--feedback-warning-border-color: var(--orange-400);--feedback-attention-border-color: var(--red-400);--feedback-neutral-background: var(--grey-800);--feedback-positive-background: var(--green-800);--feedback-info-background: var(--blue-800);--feedback-warning-background: var(--orange-800);--feedback-attention-background: var(--red-800);--feedback-neutral-icon: var(--grey-300);--feedback-positive-icon: var(--green-300);--feedback-info-icon: var(--blue-300);--feedback-warning-icon: var(--orange-300);--feedback-attention-icon: var(--red-300);--feedback-neutral-text: var(--grey-100);--feedback-positive-text: var(--green-100);--feedback-info-text: var(--blue-100);--feedback-warning-text: var(--orange-100);--feedback-attention-text: var(--red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-200);--action-primary-background-hover: var(--grey-100);--action-primary-background-focus: var(--grey-100);--action-primary-background-disabled: var(--grey-800);--action-primary-text-color: var(--grey-900);--action-primary-text-color-hover: var(--grey-900);--action-primary-text-color-focus: var(--grey-900);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-background: var(--black-opacity-0);--action-secondary-background-hover: var(--grey-800);--action-secondary-background-focus: var(--grey-800);--action-secondary-background-disabled: var(--grey-900);--action-secondary-text-color: var(--grey-100);--action-secondary-text-color-hover: var(--grey-100);--action-secondary-text-color-focus: var(--grey-100);--action-secondary-text-color-disabled: var(--grey-600);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-background: transparent;--action-tertiary-background-hover: var(--white-opacity-10);--action-tertiary-background-focus: var(--white-opacity-10);--action-tertiary-background-disabled: var(--grey-900);--action-tertiary-text-color: var(--grey-100);--action-tertiary-text-color-hover: var(--grey-100);--action-tertiary-text-color-focus: var(--grey-100);--action-tertiary-text-color-disabled: var(--grey-600);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-600);--action-attention-background-hover: var(--red-700);--action-attention-background-focus: var(--red-700);--action-attention-background-disabled: var(--red-900);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-1000);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--grey-800);--surface-elevated-200: var(--grey-900);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--grey-1000);--surface-recessed-200: var(--grey-1100);--outline-color: var(--blue-300);--border-color: var(--white-opacity-20);--optional-text-color: var(--grey-300);--text-color: var(--grey-200);--text-color-success: var(--green-400);--text-color-warning: var(--orange-400);--text-color-error: var(--red-400);--switch-track-background: var(--grey-600);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--black);--switch-icon: var(--icon-color-default);--icon-color-default: var(--white);--icon-color-inverted: var(--black);--badge-text-color: var(--grey-900);--badge-background-neutral: var(--grey-400);--badge-background-positive: var(--green-400);--badge-background-warning: var(--orange-400);--badge-background-attention: var(--red-400);--heading-text-color: var(--grey-100);--link-text-color-default: var(--grey-200);--link-text-color-default-hover: var(--grey-100);--link-text-color-default-focus: var(--grey-100);--link-text-color-default-disabled: var(--grey-600);--input-background: var(--grey-900);--input-background-disabled: var(--grey-800);--addon-background: var(--grey-1000);--tab-border-color: var(--grey-800);--tab-background: var(--grey-1100);--tab-icon: var(--grey-400);--tab-text-color: var(--grey-400);--tab-background-active: var(--grey-700);--tab-icon-active: var(--white);--tab-text-color-active: var(--white);--tab-shadow-active: var(--black-opacity-40);--carousel-background: var(--grey-700)}:where(html){--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-medium);--text-line-height-xs: var(--line-height-25);--text-line-height-s: var(--line-height-50);--text-line-height-m: var(--line-height-100);--text-line-height-l: var(--line-height-200);--text-font-size-xs: var(--font-size-25);--text-font-size-s: var(--font-size-50);--text-font-size-m: var(--font-size-100);--text-font-size-l: var(--font-size-200);--text-font-size: var(--text-font-size-m);--text-line-height: var(--text-line-height-m);--font-weight-regular: var(--font-weight-400);--font-weight-medium: var(--font-weight-500);--font-weight-semi-bold: var(--font-weight-600);--font-weight-bold: var(--font-weight-700);--border-thin: var(--stroke-size-100) var(--stroke-solid) var(--border-color);--border-thick: var(--stroke-size-200) var(--stroke-solid) var(--border-color);--outline-thin: var(--stroke-size-100) var(--stroke-outset) var(--outline-color);--outline-medium: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);--outline-thick: var(--stroke-size-500) var(--stroke-outset) var(--outline-color);--switch-offset: 1px;--switch-thumb-size: 3.6rem;--switch-width: calc(var(--switch-height) * 1.6);--switch-height: calc(var(--switch-thumb-size) + (var(--switch-offset) * 2));--card-radius: var(--radius-150);--badge-radius: var(--radius-300);--badge-font-weight: var(--font-weight-bold);--heading-font-weight: var(--font-weight-bold);--heading-font-size-100: var(--font-size-600);--heading-font-size-200: var(--font-size-500);--heading-font-size-300: var(--font-size-400);--heading-font-size-400: var(--font-size-300);--heading-font-size-500: var(--font-size-200);--heading-font-size-600: var(--font-size-100);--heading-line-height-100: var(--line-height-600);--heading-line-height-200: var(--line-height-500);--heading-line-height-300: var(--line-height-400);--heading-line-height-400: var(--line-height-300);--heading-line-height-500: var(--line-height-200);--heading-line-height-600: var(--line-height-100);--alert-radius: var(--radius-100);--alert-padding: var(--space-400);--alert-gap-horizontal-mobile: var(--space-300);--alert-gap-horizontal-desktop: var(--space-100);--message-radius: var(--radius-150);--message-padding: var(--space-400);--message-gap-horizontal: var(--space-300);--message-gap-vertical: var(--space-100);--tab-radius: var(--radius-200);--carousel-radius: var(--radius-300);--carousel-tab-position: var(--space-400);--carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position))}:where(html){--root-font-size: 62.5%;font-size:var(--root-font-size);font-family:var(--font-family);background:var(--white);color:var(--text-color);line-height:var(--text-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html{scroll-behavior:smooth}body{margin:var(--space-000);font-size:var(--text-font-size);min-height:100vh}button,input,optgroup,select,textarea{font-family:var(--font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);margin:var(--space-000)}:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--outline-thick)}progress{vertical-align:baseline}summary{display:list-item}template,[hidden]{display:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}article,aside,main,section,nav,header,footer{width:100%}audio,canvas,mark,video{display:inline-block}img,legend{border:0}body,figure,form{margin:var(--space-000)}audio,canvas,img,video{vertical-align:middle}dfn{font-style:italic}q{quotes:none}q:after,q:before{content:"";content:none}abbr[title]{border-bottom:none;text-decoration:underline dotted}dd{margin:0}*,:before,:after{box-sizing:border-box}::-moz-selection,::selection{background:var(--grey-900);color:var(--white);text-shadow:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}:focus:not(:focus-visible){outline:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;-moz-appearance:button;appearance:button;font:inherit}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}input::-moz-focus-inner{border:0;padding:0}button,input,optgroup,select,textarea{vertical-align:baseline}[type=checkbox],[type=radio],legend{padding:0}button,input{overflow:visible}button,select{text-transform:none}button[disabled],html input[disabled]{cursor:default}em{font-style:italic}b,strong{font-weight:700}input,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}input[type=checkbox]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}input[type=button],input[type=submit],input[type=reset],button{display:inline-block;cursor:pointer;width:auto}table{width:100%;border-collapse:collapse;border-spacing:0}label{display:block}textarea{resize:vertical;overflow:auto;vertical-align:top}legend{font-weight:700}input[type=checkbox],input[type=radio]{width:auto}sub,sup,small{font-size:var(--text-font-size-xs);line-height:var(--text-line-height-xs)}sub{bottom:-.25em}sup{top:-.5em}dt{font-weight:700}label{margin-bottom:var(--space-100)}input,textarea{border-radius:var(--radius-000)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],input[type=button],input[type=submit],input[type=reset],button,textarea,fieldset{border:none}input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=range]{height:4.2rem;padding:var(--space-000) var(--space-400)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],textarea,fieldset{box-shadow:inset 0 0 0 2px #e0e0e0}textarea{padding:var(--space-400);height:6.375em}legend{padding:var(--space-000) var(--space-200);margin-left:-.8rem}fieldset{border-radius:.3125em;padding:var(--space-300) var(--space-500);padding-bottom:var(--space-000)}fieldset ul{list-style:none;margin-bottom:var(--space-000)}fieldset ul label{margin-bottom:var(--space-000)}fieldset li{margin-bottom:var(--space-400)}select{height:1.875em}input[type=checkbox],input[type=radio]{margin:0 var(--space-200) 0 0}input[type=file]{font-size:var(--text-font-size-xs);padding:var(--space-400);margin-bottom:var(--space-500)}button:focus,input[type=submit]:focus{box-shadow:inset 0 0 0 1px #fff}