solid-ui 3.1.0 → 3.1.1

package/dist/components/header/index.esm.min.js

@@ -1,474 +1,950 @@
-import*as e from"solid-logic";var t={7423(e,t,o){function r(...e){console.log(...e)}o.d(t,{Rm:()=>r})},3378(e,t,o){o.d(t,{Pt:()=>i});var r=o(7423);const n="https://solidos.github.io/solid-ui/src",i=(e=o.hmd(e)).scriptURI?{iconBase:e.scriptURI.slice(0,e.scriptURI.lastIndexOf("/"))+"/icons/",originalIconBase:e.scriptURI.slice(0,e.scriptURI.lastIndexOf("/"))+"/originalIcons/"}:"undefined"!=typeof $SolidTestEnvironment&&$SolidTestEnvironment.iconBase?{iconBase:$SolidTestEnvironment.iconBase,originalIconBase:$SolidTestEnvironment.originalIconBase}:{iconBase:n+"/icons/",originalIconBase:n+"/originalIcons/"};(0,r.Rm)("   icons.iconBase is set to : "+i.iconBase);i.iconBase,i.originalIconBase},225(e,t,o){o.d(t,{Y:()=>l});var r=o(6161),n=o(3378),i=o(3138),s=(o(9140),o(1291),o(1413));const a=n.Pt.iconBase+"emptyProfileAvatar.png";class l extends r.WF{static properties={logo:{type:String,reflect:!0},helpIcon:{type:String,attribute:"help-icon",reflect:!0},layout:{type:String,reflect:!0},theme:{type:String,reflect:!0},brandLink:{type:String,attribute:"brand-link",reflect:!0},authState:{type:String,attribute:"auth-state",reflect:!0},loginAction:{type:Object,attribute:!1},signUpAction:{type:Object,attribute:!1},accountMenu:{type:Array,attribute:!1},logoutLabel:{type:String,attribute:"logout-label",reflect:!0},logoutIcon:{type:String,attribute:"logout-icon",reflect:!0},accountIcon:{type:String,attribute:"account-icon",reflect:!0},accountAvatar:{type:String,attribute:"account-avatar",reflect:!0},accountAvatarFallback:{type:String,attribute:"account-avatar-fallback",reflect:!0},loginIcon:{type:String,attribute:"login-icon",reflect:!0},signUpIcon:{type:String,attribute:"sign-up-icon",reflect:!0},helpMenuList:{type:Array},accountMenuOpen:{state:!0},helpMenuOpen:{state:!0},hasSlottedAccountMenu:{state:!0},hasSlottedHelpMenu:{state:!0}};static styles=r.AH`
-  :host { // default theme
-    display: block;
-    --header-bg: var(--color-header-row-bg, #332746);
-    --header-text: var(--color-header-text, #ffffff);
-    --header-border: var(--color-border, #efecf3);
-    --header-line: var(--color-header-menu-separator-line, #5e546d);
-    --header-link: var(--color-text-heading, #000000);
-    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
-    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
-    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
-    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
-    --header-menu-text: var(--color-menu-item-text, #654d6c);
-    --header-border-radius: var(--border-radius-sm, 0.2rem);
-    --header-button-bg: var(--color-menu-bg, #ffffff);
-    --header-button-text: var(--color-header-button-text, #0F172B);
-    --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);
-    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
-    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
-  }
-
-  // for now light and dark are the same
-  :host([theme='dark']) {
-    display: block;
-    --header-bg: var(--color-header-row-bg, #332746);
-    --header-text: var(--color-header-text, #ffffff);
-    --header-border: var(--color-border, #efecf3);
-    --header-line: var(--color-header-menu-separator-line, #5e546d);
-    --header-link: var(--color-text-heading, #000000);
-    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
-    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
-    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
-    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
-    --header-menu-text: var(--color-menu-item-text, #654d6c);
-    --header-border-radius: var(--border-radius-sm, 0.2rem);
-    --header-button-bg: var(--color-menu-bg, #ffffff);
-    --header-button-text: var(--color-header-button-text, #0f172a);
-    --header-button-detail-text: var(--color-header-button-detail-text, #878192);
-    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from white to black */
-    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
-    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
-  }
+import*as e from"solid-logic";var t={7423(e,t,o){function r(...e){console.log(...e)}o.d(t,{Rm:()=>r})},3378(e,t,o){o.d(t,{Pt:()=>i});var r=o(7423);const n="https://solidos.github.io/solid-ui/src",i=(e=o.hmd(e)).scriptURI?{iconBase:e.scriptURI.slice(0,e.scriptURI.lastIndexOf("/"))+"/icons/",originalIconBase:e.scriptURI.slice(0,e.scriptURI.lastIndexOf("/"))+"/originalIcons/"}:"undefined"!=typeof $SolidTestEnvironment&&$SolidTestEnvironment.iconBase?{iconBase:$SolidTestEnvironment.iconBase,originalIconBase:$SolidTestEnvironment.originalIconBase}:{iconBase:n+"/icons/",originalIconBase:n+"/originalIcons/"};(0,r.Rm)("   icons.iconBase is set to : "+i.iconBase);i.iconBase,i.originalIconBase},4614(e,t,o){o.d(t,{M:()=>s});var r=o(6161),n=o(3138),i=o(6454);class s extends r.WF{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},issuerUrl:{type:String,attribute:"issuer-url",reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0},_popupOpen:{state:!0},_issuerInputValue:{state:!0},_dropdownOpen:{state:!0}};static styles=r.AH`
+    :host { /* default theme */
+      display: inline-block;
+      position: relative;
+      z-index: 400;
+      --login-button-background: var(--lavender-900, #7c4cff);
+      --login-button-text: var(--color-header-text, #ffffff);
+      --popup-background: var(--color-background, #F8F9FB);
+      --popup-text: var(--color-text, #1A1A1A);
+      --popup-border: var(--color-border, #E5E7EB);
+      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
+      --popup-overlay-background: rgba(0, 0, 0, 0.6);
+      --issuer-input-background: var(--color-background, #F8F9FB);
+      --issuer-input-text: var(--color-text, #1A1A1A);
+      --issuer-input-border: var(--color-text, #1A1A1A);
+      --issuer-button-background: var(--color-background, #F8F9FB);
+      --issuer-button-text: var(--color-text, #1A1A1A);
+      --issuer-button-border: var(--color-border, #E5E7EB);
+      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
+      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
+      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
+      --error-text-color: var(--color-error, #B00020);
+    }
 
-  :host([layout='mobile']) .headerInner {
-    flex-wrap: wrap;
-    text-align: center;
-    gap: 0.5rem;
-  }
+    :host([theme='dark']) {
+      display: inline-block;
+      position: relative;
+      z-index: 900;
+      --login-button-background: var(--lavender-900, #7c4cff);
+      --login-button-text: var(--color-header-text, #ffffff);
+      --popup-background: var(--color-background, #F8F9FB);
+      --popup-text: var(--color-text, #1A1A1A);
+      --popup-border: var(--color-border, #E5E7EB);
+      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
+      --popup-overlay-background: rgba(0, 0, 0, 0.6);
+      --issuer-input-background: var(--color-background, #F8F9FB);
+      --issuer-input-text: var(--color-text, #1A1A1A);
+      --issuer-input-border: var(--color-text, #1A1A1A);
+      --issuer-button-background: var(--color-background, #F8F9FB);
+      --issuer-button-text: var(--color-text, #1A1A1A);
+      --issuer-button-border: var(--color-text, #1A1A1A);
+      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
+      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
+      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
+      --error-text-color: var(--color-error, #B00020);
+    }
 
-  .headerInner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--header-bg);
-    color: var(--header-text);
-    padding: 0 1.5rem;
-    height: 3.75rem;
-  }
+    .login-button {
+      display: flex;
+      height: 35px;
+      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
+      align-items: center;
+      gap: var(--spacing-xxs, 0.3125rem);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--login-button-background);
+      border: none;
+      color: var(--login-button-text);
+      cursor: pointer;
+      font: inherit;
+      line-height: 1;
+      white-space: nowrap;
+      text-decoration: none;
+      box-sizing: border-box;
+      transition: transform 0.2s ease;
+    }
 
-  ::slotted([slot='navigation-toggle']) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-right: 0.75rem;
-  }
+    .login-button-icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      object-fit: contain;
+    }
 
-  :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {
-    display: none !important;
-  }
+    .login-button:active {
+      transform: translateY(1px);
+    }
 
-  .brand {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-    color: inherit;
-  }
+    .popup-dialog {
+      border: none;
+      padding: 0;
+      background: transparent;
+      outline: none;
+      overflow: visible;
+      width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
+    }
 
-  .brand-not-displayed {
-    display: none;
-  }
+    .popup-dialog::backdrop {
+      background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));
+    }
 
-  .brand img {
-    height: 50px;
-    width: 55px;
-    object-fit: contain;
-  }
+    .popup-box {
+      background: var(--popup-background);
+      color: var(--popup-text);
+      box-shadow: var(--popup-shadow);
+      border: 1px solid var(--popup-border);
+      border-radius: var(--border-radius-md, 0.5rem);
+      width: min(30rem, calc(100vw - 2rem));
+      min-width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
+      overflow: auto;
+      z-index: 1001;
+    }
 
-  .menu {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    margin-left: auto;
-  }
+    .popup-top-menu {
+      border-bottom: 1px solid #DDD;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+      padding: 1rem;
+      background: var(--gray-200, #E5E7EB);
+    }
 
-  .auth-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-  }
+    .popup-title {
+      font-weight: 800;
+    }
 
-  .auth-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    min-height: 2.25rem;
-    padding: 0.5rem 0.875rem;
-    border: 1px solid var(--header-border);
-    border-radius: 999px;
-    background: var(--header-menu-bg);
-    color: var(--header-button-text);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
-    text-decoration: none;
-    box-sizing: border-box;
-    transition: border-color 0.2s ease, transform 0.2s ease;
-  }
+    .popup-close {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 1.25rem;
+      line-height: 1;
+      padding: 0 0.25rem;
+    }
 
-  .auth-button:hover {
-    border-color: var(--header-menu-item-hover);
-  }
+    .issuer-text-section {
+      display: flex;
+      flex-direction: column;
+      padding: 1rem 1rem 1.75rem;
+    }
 
-  .auth-button:active {
-    transform: translateY(1px);
-  }
+    .issuer-text-label {
+      color: var(--issuer-label-color);
+      margin-bottom: 6px;
+    }
 
-  .auth-button-sign-up {
-    background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);
-  }
+    .issuer-text-row {
+      display: flex;
+      flex-direction: row;
+      gap: 6px;
+      align-items: flex-start;
+    }
 
-  .header-menu-separator {
-    background: var(--header-line);
-    width: 1px;
-    height: 2.3rem;
-  }
+    .issuer-input-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      position: relative;
+    }
 
-  .account-menu-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
+    .issuer-input-field-row {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
 
-  .account-menu-trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.625rem;
-    min-height: 2.5rem;
-    border: 1px solid var(--header-menu-loggedin-bg);
-    border-radius: 999px;
-    background: var(--header-menu-loggedin-bg);
-    color: var(--header-button-text);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
-  }
+    .issuer-text-input {
+      flex: 1;
+      padding: 0.375rem 2.75rem 0.375rem 0.5rem;
+      border: 1px solid var(--issuer-input-border);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--issuer-input-background);
+      color: var(--issuer-input-text);
+      font: inherit;
+      min-width: 0;
+    }
 
-  :host([layout='mobile']) .account-menu-trigger {
-    gap: 0;
-    min-height: auto;
-    padding: 0;
-    border: 1.5px solid var(--header-border);
-    background: var(--header-menu-loggedin-bg);
-  }
+    .issuer-text-input::placeholder {
+      color: var(--issuer-placeholder-color);
+    }
 
-  :host([layout='mobile']) .account-menu-trigger-label {
-    display: none;
-  }
+    .issuer-dropdown-toggle {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      border-radius: var(--border-radius-base, 0.3125rem);
+    }
 
-  .account-menu-trigger:disabled {
-    cursor: default;
-    opacity: 0.7;
-  }
+    .issuer-dropdown-toggle:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+    }
 
-  .account-menu-trigger-icon {
-    width: 1rem;
-    height: 1rem;
-    object-fit: contain;
-    flex-shrink: 0;
-  }
+    .issuer-dropdown-toggle svg {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
 
-  .account-avatar,
-  .account-menu-avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    overflow: hidden;
-    background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);
-    color: var(--header-button-text);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
+    .issuer-dropdown-list {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 0;
+      right: 0;
+      border: 1px solid var(--color-border, #E5E7EB);
+      border-top: none;
+      border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);
+      background: var(--issuer-input-background);
+      overflow: visible;
+      z-index: 10;
+      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
+    }
 
-  .account-avatar {
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 999px;
-    border: 1.5px solid var(--header-border);
-  }
+    .issuer-dropdown-item {
+      display: block;
+      width: 100%;
+      padding: 0.625rem 0.75rem;
+      border: none;
+      border-bottom: 1px solid var(--color-border, #E5E7EB);
+      background: transparent;
+      color: var(--issuer-button-text);
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+      box-sizing: border-box;
+    }
 
-  .account-menu-avatar {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.5rem;
-  }
+    .issuer-dropdown-item:last-child {
+      border-bottom: none;
+    }
 
-  .account-avatar img,
-  .account-menu-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+    .issuer-dropdown-item:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+      border-radius: var(--border-radius-base-md, 0.5rem);
+    }
 
-  .account-avatar-img {
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 999px;
-    object-fit: cover;
-    background-color: var(--header-border);
-  }
+    .popup-footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 8px;
+      padding: 0.75rem 1rem 1rem;
+    }
 
-  .account-dropdown {
-    position: absolute;
-    top: calc(100% + 0.9rem);
-    right: 0;
-    min-width: 15rem;
-    padding: 0.5rem;
-    background: var(--header-button-bg);
-    border: 1px solid var(--header-border);
-    border-radius: var(--header-border-radius);
-    box-shadow: var(--header-shadow);
-    z-index: 10;
-  }
+    .popup-footer-hr {
+      margin: 0;
+      border: none;
+      border-top: 1px solid var(--popup-border, #E5E7EB);
+    }
 
-  .account-dropdown[hidden] {
-    display: none;
-  }
+    .popup-cancel-button {
+      padding: 0.5rem 1.25rem;
+      border: 1px solid #C0BFC7;
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--popup-background);
+      color: #314158;
+      cursor: pointer;
+      font: inherit;
+    }
 
-  .account-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
+    .popup-cancel-button:hover {
+      background: #D1D5DB;
+    }
 
-  .account-menu-item-link,
-  .account-menu-item-button,
-  ::slotted([slot='account-menu']) {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    width: 100%;
-    box-sizing: border-box;
-    color: var(--header-link);
-    text-decoration: none;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    padding: 0.5rem;
-    cursor: pointer;
-    font: inherit;
-    text-align: left;
-  }
+    .popup-login-button {
+      padding: 0.5rem 1.25rem;
+      border: none;
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--lavender-900, #7c4cff);
+      color: #ffffff;
+      cursor: pointer;
+      font: inherit;
+    }
 
-  .account-menu-item-link:hover,
-  .account-menu-item-button:hover {
-    color: var(--header-link);
-    background: var(--header-menu-item-hover);
-    border-color: var(--header-menu-item-hover);
-  }
+    .popup-login-button:hover {
+      background: #6a3de8;
+    }
 
-  .account-menu-item-link:active,
-  .account-menu-item-button:active {
-    color: var(--header-link);
-    background: var(--header-menu-item-selected);
-    border-color: var(--header-menu-item-selected);
-    transform: translateY(1px);
-  }
+    .popup-login-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
 
-  .account-switch {
-    display: block;
-    width: 100%;
-    color: var(--header-menu-text);
-    text-align: left;
-    text-transform: uppercase;
-    font-size: 80%;
-  }
+    .error-msg {
+      color: var(--error-text-color);
+      font-size: 0.875rem;
+      margin-top: 8px;
+    }
 
-  .dropdown-menu-separator {
-    display: block;
-    width: calc(100% + 1rem);
-    margin: 0.5rem -0.5rem;
-    border: 0;
-    border-top: 1px solid var(--header-border);
-  }
+    @media (max-width: 40rem) {
+      .popup-dialog {
+        width: calc(100vw - 1rem);
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+      }
+
+      .popup-box {
+        width: calc(100vw - 1rem);
+        min-width: 0;
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+        border-radius: var(--border-radius-base, 0.3125rem);
+      }
+
+      .popup-top-menu,
+      .issuer-text-section,
+      .popup-footer {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+      }
+
+      .popup-footer {
+        flex-wrap: wrap;
+        gap: 0.625rem;
+      }
+
+      .popup-footer > button {
+        flex: 1 1 100%;
+      }
+
+      .issuer-text-row,
+      .issuer-input-field-row {
+        width: 100%;
+      }
+    }
+  `;_issuerInputId=`issuer-url-input-${Math.random().toString(36).slice(2,10)}`;_errorMsg="";constructor(){super(),this.label="Log In",this.theme="light",this.issuerUrl="",this.icon="",this.layout="desktop",this._popupOpen=!1,this._issuerInputValue="",this._dropdownOpen=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}_openPopup(){const e=(0,n.offlineTestID)();e?this._loginComplete(e.uri):(this._issuerInputValue="undefined"!=typeof localStorage&&localStorage.getItem("loginIssuer")||this.issuerUrl||"",this._errorMsg="",this._popupOpen=!0)}_closePopup(){this._popupOpen=!1}updated(){const e=this.shadowRoot?.querySelector("dialog");e&&(this._popupOpen&&!e.open?e.showModal():!this._popupOpen&&e.open&&e.close())}async _loginToIssuer(e){if(e)try{n.solidLogicSingleton.store.updater.flagAuthorizationMetadata();const t=new URL(window.location.href).hash;t&&window.localStorage.setItem("preLoginRedirectHash",t),window.localStorage.setItem("loginIssuer",e);const o=new URL(window.location.href);o.hash="",await n.authSession.login({redirectUrl:o.href,oidcIssuer:e})}catch(e){this._errorMsg=e.message||String(e),this.requestUpdate()}}_loginComplete(e){n.authn.saveUser(e),this.dispatchEvent(new CustomEvent("login-success",{detail:{webId:e},bubbles:!0,composed:!0}))}_handleGoClick(){this._dropdownOpen=!1,this._loginToIssuer(this._issuerInputValue)}_toggleDropdown(){this._dropdownOpen=!this._dropdownOpen}_selectIssuerFromDropdown(e){this._issuerInputValue=e,this._dropdownOpen=!1}_handleInputChange(e){this._issuerInputValue=e.target.value}_handleInputKeydown(e){"Enter"===e.key&&this._loginToIssuer(this._issuerInputValue),"Escape"===e.key&&this._closePopup()}_renderPopup(){const e=(0,n.getSuggestedIssuers)();return r.qy`
+      <div class="popup-box">
+          <div class="popup-top-menu">
+            <span class="popup-title">Select an identity provider</span>
+            <button class="popup-close" type="button" aria-label="Close" @click="${()=>this._closePopup()}">&#x2715;</button>
+          </div>
 
-  .account-menu-copy {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
+          <div class="issuer-text-section">
+            <label class="issuer-text-label" for="${this._issuerInputId}">Solid Identity Provider</label>
+            <div class="issuer-text-row">
+              <div class="issuer-input-wrapper">
+                <div class="issuer-input-field-row">
+                  <input
+                    id="${this._issuerInputId}"
+                    class="issuer-text-input"
+                    type="text"
+                    placeholder="https://example.com"
+                    .value="${this._issuerInputValue}"
+                    @input="${this._handleInputChange}"
+                    @keydown="${this._handleInputKeydown}"
+                    autocomplete="url"
+                  />
+                  ${e.length?r.qy`
+                    <button
+                      class="issuer-dropdown-toggle"
+                      type="button"
+                      aria-label="Show identity provider suggestions"
+                      aria-expanded="${this._dropdownOpen}"
+                      @click="${()=>this._toggleDropdown()}"
+                    >${i.S}</button>
+                  `:""}
+                </div>
+                ${this._dropdownOpen&&e.length?r.qy`
+                  <div class="issuer-dropdown-list" role="listbox">
+                    ${e.map(e=>r.qy`
+                      <button
+                        class="issuer-dropdown-item"
+                        type="button"
+                        role="option"
+                        @click="${()=>this._selectIssuerFromDropdown(e.uri)}"
+                      >${e.name}</button>
+                    `)}
+                  </div>
+                `:""}
+              </div>
+            </div>
+            ${this._errorMsg?r.qy`<div class="error-msg">${this._errorMsg}</div>`:""}
+          </div>
+          <hr class="popup-footer-hr" />
+          <div class="popup-footer">
+            <button class="popup-cancel-button" type="button" @click="${()=>this._closePopup()}">Cancel</button>
+            <button
+              class="popup-login-button"
+              type="button"
+              ?disabled="${!this._issuerInputValue}"
+              @click="${()=>this._handleGoClick()}"
+            >Log In</button>
+          </div>
+        </div>
+    `}render(){return r.qy`
+      <button
+        class="login-button"
+        type="button"
+        part="login-button"
+        @click="${()=>this._openPopup()}"
+      >
+        ${this.icon?r.qy`<img class="login-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="login-button-icon" />`:""}
+        <slot>${this.label}</slot>
+      </button>
+
+      <dialog
+        class="popup-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Select an identity provider"
+        @cancel="${e=>{e.preventDefault(),this._closePopup()}}"
+        @click="${e=>{e.target===e.currentTarget&&this._closePopup()}}"
+      >
+        ${this._popupOpen?this._renderPopup():""}
+      </dialog>
+    `}}},6454(e,t,o){o.d(t,{S:()=>r});const r=o(6752).qy`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 12 7" 
+    fill="none"
+  >
+    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`},2167(e,t,o){var r=o(4614);const n="solid-ui-login-button";customElements.get(n)||customElements.define(n,r.M)},8228(e,t,o){o.d(t,{X:()=>n});var r=o(6161);class n extends r.WF{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},signupUrl:{type:String,attribute:"signup-url",reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0}};static styles=r.AH`
+    :host {
+      display: inline-block;
+      --signup-button-background: transparent;
+      --signup-button-border: var(--color-border, #E5E7EB);
+      --signup-button-text: var(--color-header-text, #ffffff);
+    }
+
+    :host([theme='dark']) {
+      --signup-button-background: transparent;
+      --signup-button-border: var(--color-border, #E5E7EB);
+      --signup-button-text: var(--color-header-text, #ffffff);
+    }
+
+    .signup-button {
+      display: flex;
+      height: 35px;
+      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
+      align-items: center;
+      gap: var(--spacing-xxs, 0.3125rem);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--signup-button-background);
+      border: 1px solid var(--signup-button-border);
+      color: var(--signup-button-text);
+      cursor: pointer;
+      font: inherit;
+      line-height: 1;
+      white-space: nowrap;
+      text-decoration: none;
+      box-sizing: border-box;
+      transition: transform 0.2s ease;
+    }
+
+    :host([layout='mobile']) .signup-button {
+      border: none;
+    }
+
+    .signup-button-icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      object-fit: contain;
+    }
+
+    .signup-button:active {
+      transform: translateY(1px);
+    }
+  `;constructor(){super(),this.label="Sign Up",this.signupUrl="https://solidproject.org/get_a_pod",this.theme="light",this.icon="",this.layout="desktop"}_handleClick(){window.open(this.signupUrl,"_blank","noopener,noreferrer")}render(){return r.qy`
+      <button
+        class="signup-button"
+        type="button"
+        part="signup-button"
+        @click="${()=>this._handleClick()}"
+      >
+        ${this.icon?r.qy`<img class="signup-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="signup-button-icon" />`:""}
+        <slot>${this.label}</slot>
+      </button>
+    `}}},8005(e,t,o){var r=o(8228);const n="solid-ui-signup-button";customElements.get(n)||customElements.define(n,r.X)},1166(e,t,o){o.d(t,{Y:()=>l});var r=o(6161),n=o(3378),i=o(3138),s=(o(2167),o(8005),o(1413));const a=n.Pt.iconBase+"emptyProfileAvatar.png";class l extends r.WF{static properties={logo:{type:String,reflect:!0},helpIcon:{type:String,attribute:"help-icon",reflect:!0},layout:{type:String,reflect:!0},theme:{type:String,reflect:!0},brandLink:{type:String,attribute:"brand-link",reflect:!0},authState:{type:String,attribute:"auth-state",reflect:!0},loginAction:{type:Object,attribute:!1},signUpAction:{type:Object,attribute:!1},accountMenu:{type:Array,attribute:!1},logoutLabel:{type:String,attribute:"logout-label",reflect:!0},logoutIcon:{type:String,attribute:"logout-icon",reflect:!0},accountIcon:{type:String,attribute:"account-icon",reflect:!0},accountAvatar:{type:String,attribute:"account-avatar",reflect:!0},accountAvatarFallback:{type:String,attribute:"account-avatar-fallback",reflect:!0},loginIcon:{type:String,attribute:"login-icon",reflect:!0},signUpIcon:{type:String,attribute:"sign-up-icon",reflect:!0},helpMenuList:{type:Array},accountMenuOpen:{state:!0},helpMenuOpen:{state:!0},hasSlottedAccountMenu:{state:!0},hasSlottedHelpMenu:{state:!0}};static styles=r.AH`
+  :host { /* default theme */
+    display: block;
+    --header-bg: var(--color-header-row-bg, #332746);
+    --header-text: var(--color-header-text, #ffffff);
+    --header-border: var(--color-border, #efecf3);
+    --header-line: var(--color-header-menu-separator-line, #5e546d);
+    --header-link: var(--color-text-heading, #000000);
+    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
+    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
+    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
+    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
+    --header-menu-text: var(--color-menu-item-text, #654d6c);
+    --header-border-radius: var(--border-radius-sm, 0.2rem);
+    --header-button-bg: var(--color-menu-bg, #ffffff);
+    --header-button-text: var(--color-header-button-text, #0F172B);
+    --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);
+    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
+    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
   }
 
-  .account-menu-label {
-    color: var(--header-button-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  /* for now light and dark are the same */
+  :host([theme='dark']) {
+    display: block;
+    --header-bg: var(--color-header-row-bg, #332746);
+    --header-text: var(--color-header-text, #ffffff);
+    --header-border: var(--color-border, #efecf3);
+    --header-line: var(--color-header-menu-separator-line, #5e546d);
+    --header-link: var(--color-text-heading, #000000);
+    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
+    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
+    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
+    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
+    --header-menu-text: var(--color-menu-item-text, #654d6c);
+    --header-border-radius: var(--border-radius-sm, 0.2rem);
+    --header-button-bg: var(--color-menu-bg, #ffffff);
+    --header-button-text: var(--color-header-button-text, #0f172a);
+    --header-button-detail-text: var(--color-header-button-detail-text, #878192);
+    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from white to black */
+    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
+    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
   }
 
-  .account-menu-webid {
-    color: var(--header-button-detail-text);
-    font-size: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  :host([layout='mobile']) .headerInner {
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 0.5rem;
   }
 
-  .help-menu-container {
-    position: relative;
+  .headerInner {
     display: flex;
     align-items: center;
-    background: transparent;
+    justify-content: space-between;
+    background: var(--header-bg);
+    color: var(--header-text);
+    padding: 0 1.5rem;
+    height: 3.75rem;
   }
 
-  .help-menu-trigger {
+  ::slotted([slot='navigation-toggle']) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
+    flex-shrink: 0;
+    margin-right: 0.75rem;
   }
 
-  .help-menu-trigger:disabled {
-    cursor: default;
+  :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {
+    display: none !important;
   }
 
-  .help-dropdown {
-    position: absolute;
-    top: calc(100% + 0.9rem);
-    right: 0;
-    min-width: 12rem;
-    padding: 0.5rem;
-    background: var(--header-button-bg);
-    border: 1px solid var(--header-border);
-    border-radius: var(--header-border-radius);
-    box-shadow: var(--header-shadow);
-    z-index: 10;
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
   }
 
-  .help-dropdown[hidden] {
+  .brand-not-displayed {
     display: none;
   }
 
-  .help-dropdown-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  .brand img {
+    height: 50px;
+    width: 55px;
+    object-fit: contain;
   }
 
-  .help-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  .menu {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-left: auto;
+  }
+
+  .auth-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  .auth-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.25rem;
+    padding: 0.5rem 0.875rem;
+    border: 1px solid var(--header-border);
+    border-radius: 999px;
+    background: var(--header-menu-bg);
+    color: var(--header-button-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+    text-decoration: none;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, transform 0.2s ease;
+  }
+
+  .auth-button:hover {
+    border-color: var(--header-menu-item-hover);
+  }
+
+  .auth-button:active {
+    transform: translateY(1px);
+  }
+
+  .auth-button-sign-up {
+    background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);
+  }
+
+  .header-menu-separator {
+    background: var(--header-line);
+    width: 1px;
+    height: 2.3rem;
+  }
+
+  .account-menu-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .account-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    min-height: 2.5rem;
+    border: 1px solid var(--header-menu-loggedin-bg);
+    border-radius: 999px;
+    background: var(--header-menu-loggedin-bg);
+    color: var(--header-button-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+  }
+
+  :host([layout='mobile']) .account-menu-trigger {
+    gap: 0;
+    min-height: auto;
+    padding: 0;
+    border: 1.5px solid var(--header-border);
+    background: var(--header-menu-loggedin-bg);
+  }
+
+  :host([layout='mobile']) .account-menu-trigger-label {
+    display: none;
+  }
+
+  .account-menu-trigger:disabled {
+    cursor: default;
+    opacity: 0.7;
+  }
+
+  .account-menu-trigger-icon {
+    width: 1rem;
+    height: 1rem;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  .account-avatar,
+  .account-menu-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);
+    color: var(--header-button-text);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .account-avatar {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    border: 1.5px solid var(--header-border);
+  }
+
+  .account-menu-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+  }
+
+  .account-avatar img,
+  .account-menu-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .account-avatar-img {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    object-fit: cover;
+    background-color: var(--header-border);
+  }
+
+  .account-dropdown {
+    position: absolute;
+    top: calc(100% + 0.9rem);
+    right: 0;
+    min-width: 15rem;
+    padding: 0.5rem;
+    background: var(--header-button-bg);
+    border: 1px solid var(--header-border);
+    border-radius: var(--header-border-radius);
+    box-shadow: var(--header-shadow);
+    z-index: 10;
+  }
+
+  .account-dropdown[hidden] {
+    display: none;
+  }
+
+  .account-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
   }
 
-  .help-menu-list a,
-  .help-menu-list button,
-  ::slotted([slot='help-menu']) {
-    display: block;
+  .account-menu-item-link,
+  .account-menu-item-button,
+  ::slotted([slot='account-menu']) {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
     width: 100%;
     box-sizing: border-box;
     color: var(--header-link);
     text-decoration: none;
     background: transparent;
     border: 1px solid transparent;
-    border-radius: 4px;
-    padding: 0.375rem 0.5rem;
+    border-radius: 10px;
+    padding: 0.5rem;
     cursor: pointer;
     font: inherit;
     text-align: left;
   }
 
-  .help-menu-list a:hover,
-  .help-menu-list button:hover {
+  .account-menu-item-link:hover,
+  .account-menu-item-button:hover {
     color: var(--header-link);
     background: var(--header-menu-item-hover);
     border-color: var(--header-menu-item-hover);
   }
 
-  .help-menu-list a:active,
-  .help-menu-list button:active {
+  .account-menu-item-link:active,
+  .account-menu-item-button:active {
     color: var(--header-link);
     background: var(--header-menu-item-selected);
     border-color: var(--header-menu-item-selected);
     transform: translateY(1px);
   }
 
-  ::slotted(a), ::slotted(button) {
-    color: var(--header-link);
-    text-decoration: none;
-    background: var(--header-button-bg);
-    border: 1px solid var(--header-border);
-    border-radius: 4px;
-    padding: 0.25rem 0.5rem;
-    cursor: pointer;
-    font: inherit;
+  .account-switch {
+    display: block;
+    width: 100%;
+    color: var(--header-menu-text);
+    text-align: left;
+    text-transform: uppercase;
+    font-size: 80%;
   }
 
-  .help-icon {
-    width: 35px;
-    height: 35px;
-    cursor: pointer;
+  .dropdown-menu-separator {
+    display: block;
+    width: calc(100% + 1rem);
+    margin: 0.5rem -0.5rem;
+    border: 0;
+    border-top: 1px solid var(--header-border);
   }
 
-  .help-text {
-    color: var(--header-text, #ffffff);
-    font: inherit;
+  .account-menu-copy {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
   }
 
-  .logout-action-icon {
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-    object-fit: contain;
-    margin-right: 0.5rem;
+  .account-menu-label {
+    color: var(--header-button-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  `;constructor(){super(),this.logo="https://solidproject.org/assets/img/solid-emblem.svg",this.helpIcon="",this.layout="desktop",this.theme="light",this.brandLink="#",this.authState="logged-out",this.loginAction={label:"Log In",action:"login"},this.signUpAction={label:"Sign Up",action:"sign-up",url:"https://solidproject.org/get_a_pod"},this.accountMenu=[],this.logoutLabel="Log Out",this.logoutIcon="",this.accountIcon="▼",this.accountAvatar="",this.accountAvatarFallback="",this.loginIcon="",this.signUpIcon="",this.helpMenuList=[],this.accountMenuOpen=!1,this.helpMenuOpen=!1,this.hasSlottedAccountMenu=!1,this.hasSlottedHelpMenu=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),window.addEventListener("keydown",this.handleWindowKeydown)}disconnectedCallback(){document.removeEventListener("click",this.handleDocumentClick),window.removeEventListener("keydown",this.handleWindowKeydown),super.disconnectedCallback()}handleHelpMenuClick(e,t){if(t.preventDefault(),this.helpMenuOpen=!1,this.dispatchEvent(new CustomEvent("help-menu-select",{detail:e,bubbles:!0,composed:!0})),e.url){const t=e.target||"_blank",o="_blank"===t?"noopener,noreferrer":void 0;window.open(e.url,t,o)}}handleAccountMenuClick(e){this.accountMenuOpen=!1,this.dispatchEvent(new CustomEvent("account-menu-select",{detail:e,bubbles:!0,composed:!0}))}handleDocumentClick=e=>{e.composedPath().includes(this)||(this.accountMenuOpen=!1,this.helpMenuOpen=!1)};handleWindowKeydown=e=>{"Escape"===e.key&&(this.accountMenuOpen||this.helpMenuOpen)&&(this.accountMenuOpen=!1,this.helpMenuOpen=!1)};handleAccountSlotChange(e){const t=e.target;this.hasSlottedAccountMenu=t.assignedElements({flatten:!0}).length>0}handleHelpSlotChange(e){const t=e.target;this.hasSlottedHelpMenu=t.assignedElements({flatten:!0}).length>0}toggleAccountMenu(e){e.preventDefault(),this.hasAccountMenuItems()&&(this.helpMenuOpen=!1,this.accountMenuOpen=!this.accountMenuOpen)}toggleHelpMenu(e){e.preventDefault(),this.hasHelpMenuItems()&&(this.accountMenuOpen=!1,this.helpMenuOpen=!this.helpMenuOpen)}hasAccountMenuItems(){return Boolean(this.accountMenu?.length||this.hasSlottedAccountMenu||this.logoutLabel)}hasHelpMenuItems(){return Boolean(this.helpMenuList?.length||this.hasSlottedHelpMenu)}shouldRenderHelpMenu(){return"mobile"!==this.layout&&this.hasHelpMenuItems()}renderLoggedInAvatar(e,t="account-avatar"){const o=Boolean(e),n=o?e:this.accountAvatarFallback||a,i=o?"Profile Avatar":"Default Avatar";return"mobile"===this.layout&&"account-avatar"===t?r.qy`<img class="account-avatar-img" src="${n}" alt="${i}" />`:r.qy`
-      <span class="${t}" aria-hidden="true">
-        <img src="${n}" alt="${i}" />
-      </span>
-    `}renderLoggedOutActions(){return r.qy`
-      <div class="auth-actions" part="auth-actions">
-        <slot name="login-action">
-          <solid-ui-login-button
-            label="${this.loginAction.label}"
-            icon=${(0,s.J)("mobile"!==this.layout?this.loginIcon||this.loginAction.icon:void 0)}
-            layout="${this.layout}"
-            theme="${this.theme}"
-            part="login-action"
-            @login-success="${()=>this.handleLoginSuccess()}"
-          ></solid-ui-login-button>
-        </slot>
-        <slot name="sign-up-action">
-          <solid-ui-signup-button
-            label="${this.signUpAction.label}"
-            signup-url="${(0,s.J)(this.signUpAction.url)}"
-            layout="${this.layout}"
-            .icon=${(0,s.J)("mobile"!==this.layout?this.signUpIcon||this.signUpAction.icon:void 0)}
-            theme="${this.theme}"
-            part="sign-up-action"
-          ></solid-ui-signup-button>
-        </slot>
-      </div>
-    `}handleLoginSuccess(){this.authState="logged-in",this.dispatchEvent(new CustomEvent("auth-action-select",{detail:{role:"login"},bubbles:!0,composed:!0}))}async handleLogout(){this.accountMenuOpen=!1;try{await i.authSession.logout()}catch(e){}this.authState="logged-out",this.dispatchEvent(new CustomEvent("logout-select",{detail:{role:"logout"},bubbles:!0,composed:!0}))}renderAccountMenuItem(e){const t=r.qy`
-      ${this.renderLoggedInAvatar(e.avatar,"account-menu-avatar")}
-      <span class="account-menu-copy">
-        <span class="account-menu-label">${e.label}</span>
-        ${e.webid&&"mobile"!==this.layout?r.qy`<span class="account-menu-webid">${e.webid}</span>`:""}
-      </span>
-    `;return e.url?r.qy`
+
+  .account-menu-webid {
+    color: var(--header-button-detail-text);
+    font-size: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .help-menu-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: transparent;
+  }
+
+  .help-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .help-menu-trigger:disabled {
+    cursor: default;
+  }
+
+  .help-dropdown {
+    position: absolute;
+    top: calc(100% + 0.9rem);
+    right: 0;
+    min-width: 12rem;
+    padding: 0.5rem;
+    background: var(--header-button-bg);
+    border: 1px solid var(--header-border);
+    border-radius: var(--header-border-radius);
+    box-shadow: var(--header-shadow);
+    z-index: 10;
+  }
+
+  .help-dropdown[hidden] {
+    display: none;
+  }
+
+  .help-dropdown-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .help-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .help-menu-list a,
+  .help-menu-list button,
+  ::slotted([slot='help-menu']) {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--header-link);
+    text-decoration: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.375rem 0.5rem;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+
+  .help-menu-list a:hover,
+  .help-menu-list button:hover {
+    color: var(--header-link);
+    background: var(--header-menu-item-hover);
+    border-color: var(--header-menu-item-hover);
+  }
+
+  .help-menu-list a:active,
+  .help-menu-list button:active {
+    color: var(--header-link);
+    background: var(--header-menu-item-selected);
+    border-color: var(--header-menu-item-selected);
+    transform: translateY(1px);
+  }
+
+  ::slotted(a), ::slotted(button) {
+    color: var(--header-link);
+    text-decoration: none;
+    background: var(--header-button-bg);
+    border: 1px solid var(--header-border);
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  .help-icon {
+    width: 35px;
+    height: 35px;
+    cursor: pointer;
+  }
+
+  .help-text {
+    color: var(--header-text, #ffffff);
+    font: inherit;
+  }
+
+  .logout-action-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    object-fit: contain;
+    margin-right: 0.5rem;
+  }
+  `;constructor(){super(),this.logo="https://solidproject.org/assets/img/solid-emblem.svg",this.helpIcon="",this.layout="desktop",this.theme="light",this.brandLink="#",this.authState="logged-out",this.loginAction={label:"Log In",action:"login"},this.signUpAction={label:"Sign Up",action:"sign-up",url:"https://solidproject.org/get_a_pod"},this.accountMenu=[],this.logoutLabel="Log Out",this.logoutIcon="",this.accountIcon="▼",this.accountAvatar="",this.accountAvatarFallback="",this.loginIcon="",this.signUpIcon="",this.helpMenuList=[],this.accountMenuOpen=!1,this.helpMenuOpen=!1,this.hasSlottedAccountMenu=!1,this.hasSlottedHelpMenu=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),window.addEventListener("keydown",this.handleWindowKeydown)}disconnectedCallback(){document.removeEventListener("click",this.handleDocumentClick),window.removeEventListener("keydown",this.handleWindowKeydown),super.disconnectedCallback()}handleHelpMenuClick(e,t){if(t.preventDefault(),this.helpMenuOpen=!1,this.dispatchEvent(new CustomEvent("help-menu-select",{detail:e,bubbles:!0,composed:!0})),e.url){const t=e.target||"_blank",o="_blank"===t?"noopener,noreferrer":void 0;window.open(e.url,t,o)}}handleAccountMenuClick(e){this.accountMenuOpen=!1,this.dispatchEvent(new CustomEvent("account-menu-select",{detail:e,bubbles:!0,composed:!0}))}handleDocumentClick=e=>{e.composedPath().includes(this)||(this.accountMenuOpen=!1,this.helpMenuOpen=!1)};handleWindowKeydown=e=>{"Escape"===e.key&&(this.accountMenuOpen||this.helpMenuOpen)&&(this.accountMenuOpen=!1,this.helpMenuOpen=!1)};handleAccountSlotChange(e){const t=e.target;this.hasSlottedAccountMenu=t.assignedElements({flatten:!0}).length>0}handleHelpSlotChange(e){const t=e.target;this.hasSlottedHelpMenu=t.assignedElements({flatten:!0}).length>0}toggleAccountMenu(e){e.preventDefault(),this.hasAccountMenuItems()&&(this.helpMenuOpen=!1,this.accountMenuOpen=!this.accountMenuOpen)}toggleHelpMenu(e){e.preventDefault(),this.hasHelpMenuItems()&&(this.accountMenuOpen=!1,this.helpMenuOpen=!this.helpMenuOpen)}hasAccountMenuItems(){return Boolean(this.accountMenu?.length||this.hasSlottedAccountMenu||this.logoutLabel)}hasHelpMenuItems(){return Boolean(this.helpMenuList?.length||this.hasSlottedHelpMenu)}shouldRenderHelpMenu(){return"mobile"!==this.layout&&this.hasHelpMenuItems()}renderLoggedInAvatar(e,t="account-avatar"){const o=Boolean(e),n=o?e:this.accountAvatarFallback||a,i=o?"Profile Avatar":"Default Avatar";return"mobile"===this.layout&&"account-avatar"===t?r.qy`<img class="account-avatar-img" src="${n}" alt="${i}" />`:r.qy`
+      <span class="${t}" aria-hidden="true">
+        <img src="${n}" alt="${i}" />
+      </span>
+    `}renderLoggedOutActions(){return r.qy`
+      <div class="auth-actions" part="auth-actions">
+        <slot name="login-action">
+          <solid-ui-login-button
+            label="${this.loginAction.label}"
+            icon=${(0,s.J)("mobile"!==this.layout?this.loginIcon||this.loginAction.icon:void 0)}
+            layout="${this.layout}"
+            theme="${this.theme}"
+            part="login-action"
+            @login-success="${()=>this.handleLoginSuccess()}"
+          ></solid-ui-login-button>
+        </slot>
+        <slot name="sign-up-action">
+          <solid-ui-signup-button
+            label="${this.signUpAction.label}"
+            signup-url="${(0,s.J)(this.signUpAction.url)}"
+            layout="${this.layout}"
+            .icon=${(0,s.J)("mobile"!==this.layout?this.signUpIcon||this.signUpAction.icon:void 0)}
+            theme="${this.theme}"
+            part="sign-up-action"
+          ></solid-ui-signup-button>
+        </slot>
+      </div>
+    `}handleLoginSuccess(){this.authState="logged-in",this.dispatchEvent(new CustomEvent("auth-action-select",{detail:{role:"login"},bubbles:!0,composed:!0}))}async handleLogout(){this.accountMenuOpen=!1;try{await i.authSession.logout()}catch(e){}this.authState="logged-out",this.dispatchEvent(new CustomEvent("logout-select",{detail:{role:"logout"},bubbles:!0,composed:!0}))}renderAccountMenuItem(e){const t=r.qy`
+      ${this.renderLoggedInAvatar(e.avatar,"account-menu-avatar")}
+      <span class="account-menu-copy">
+        <span class="account-menu-label">${e.label}</span>
+        ${e.webid&&"mobile"!==this.layout?r.qy`<span class="account-menu-webid">${e.webid}</span>`:""}
+      </span>
+    `;return e.url?r.qy`
         <a
           class="account-menu-item-link"
           href="${e.url}"
@@ -617,441 +1093,7 @@ import*as e from"solid-logic";var t={7423(e,t,o){function r(...e){console.log(..
           </div>`:""}
         </div>
       </div>
-    `}}},1209(e,t,o){o.d(t,{M:()=>s});var r=o(6161),n=o(3138),i=o(1353);class s extends r.WF{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},issuerUrl:{type:String,attribute:"issuer-url",reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0},_popupOpen:{state:!0},_issuerInputValue:{state:!0},_dropdownOpen:{state:!0}};static styles=r.AH`
-    :host { // default theme
-      display: inline-block;
-      position: relative;
-      z-index: 400;
-      --login-button-background: var(--lavender-900, #7c4cff);
-      --login-button-text: var(--color-header-text, #ffffff);
-      --popup-background: var(--color-background, #F8F9FB);
-      --popup-text: var(--color-text, #1A1A1A);
-      --popup-border: var(--color-border, #E5E7EB);
-      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
-      --popup-overlay-background: rgba(0, 0, 0, 0.6);
-      --issuer-input-background: var(--color-background, #F8F9FB);
-      --issuer-input-text: var(--color-text, #1A1A1A);
-      --issuer-input-border: var(--color-text, #1A1A1A);
-      --issuer-button-background: var(--color-background, #F8F9FB);
-      --issuer-button-text: var(--color-text, #1A1A1A);
-      --issuer-button-border: var(--color-border, #E5E7EB);
-      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
-      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
-      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
-      --error-text-color: var(--color-error, #B00020);
-    }
-
-    :host([theme='dark']) {
-      display: inline-block;
-      position: relative;
-      z-index: 900;
-      --login-button-background: var(--lavender-900, #7c4cff);
-      --login-button-text: var(--color-header-text, #ffffff);
-      --popup-background: var(--color-background, #F8F9FB);
-      --popup-text: var(--color-text, #1A1A1A);
-      --popup-border: var(--color-border, #E5E7EB);
-      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
-      --popup-overlay-background: rgba(0, 0, 0, 0.6);
-      --issuer-input-background: var(--color-background, #F8F9FB);
-      --issuer-input-text: var(--color-text, #1A1A1A);
-      --issuer-input-border: var(--color-text, #1A1A1A);
-      --issuer-button-background: var(--color-background, #F8F9FB);
-      --issuer-button-text: var(--color-text, #1A1A1A);
-      --issuer-button-border: var(--color-text, #1A1A1A);
-      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
-      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
-      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
-      --error-text-color: var(--color-error, #B00020);
-    }
-
-    .login-button {
-      display: flex;
-      height: 35px;
-      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
-      align-items: center;
-      gap: var(--spacing-xxs, 0.3125rem);
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--login-button-background);
-      border: none;
-      color: var(--login-button-text);
-      cursor: pointer;
-      font: inherit;
-      line-height: 1;
-      white-space: nowrap;
-      text-decoration: none;
-      box-sizing: border-box;
-      transition: transform 0.2s ease;
-    }
-
-    .login-button-icon {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-      object-fit: contain;
-    }
-
-    .login-button:active {
-      transform: translateY(1px);
-    }
-
-    .popup-dialog {
-      border: none;
-      padding: 0;
-      background: transparent;
-      outline: none;
-      overflow: visible;
-      max-height: none;
-      max-width: none;
-    }
-
-    .popup-dialog::backdrop {
-      background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));
-    }
-
-    .popup-box {
-      background: var(--popup-background);
-      color: var(--popup-text);
-      box-shadow: var(--popup-shadow);
-      border: 1px solid var(--popup-border);
-      border-radius: var(--border-radius-md, 0.5rem);
-      min-width: 480px;
-      z-index: 1001;
-    }
-
-    .popup-top-menu {
-      border-bottom: 1px solid #DDD;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
-      padding: 1rem;
-      background: var(--gray-200, #E5E7EB);
-    }
-
-    .popup-title {
-      font-weight: 800;
-    }
-
-    .popup-close {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      font-size: 1.25rem;
-      line-height: 1;
-      padding: 0 0.25rem;
-    }
-
-    .issuer-text-section {
-      display: flex;
-      flex-direction: column;
-      padding: 1rem 1rem 1.75rem;
-    }
-
-    .issuer-text-label {
-      color: var(--issuer-label-color);
-      margin-bottom: 6px;
-    }
-
-    .issuer-text-row {
-      display: flex;
-      flex-direction: row;
-      gap: 6px;
-      align-items: flex-start;
-    }
-
-    .issuer-input-wrapper {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      position: relative;
-    }
-
-    .issuer-input-field-row {
-      display: flex;
-      flex-direction: row;
-      position: relative;
-    }
-
-    .issuer-text-input {
-      flex: 1;
-      padding: 0.375rem 2.75rem 0.375rem 0.5rem;
-      border: 1px solid var(--issuer-input-border);
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--issuer-input-background);
-      color: var(--issuer-input-text);
-      font: inherit;
-      min-width: 0;
-    }
-
-    .issuer-text-input::placeholder {
-      color: var(--issuer-placeholder-color);
-    }
-
-    .issuer-dropdown-toggle {
-      position: absolute;
-      right: 6px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 26px;
-      height: 26px;
-      padding: 0;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      border-radius: var(--border-radius-base, 0.3125rem);
-    }
-
-    .issuer-dropdown-toggle:hover {
-      background: var(--color-header-menu-item-hover, #e6dcff);
-    }
-
-    .issuer-dropdown-toggle svg {
-      width: 14px;
-      height: 14px;
-      display: block;
-    }
-
-    .issuer-dropdown-list {
-      position: absolute;
-      top: calc(100% + 6px);
-      left: 0;
-      right: 0;
-      border: 1px solid var(--color-border, #E5E7EB);
-      border-top: none;
-      border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);
-      background: var(--issuer-input-background);
-      overflow: visible;
-      z-index: 10;
-      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
-    }
-
-    .issuer-dropdown-item {
-      display: block;
-      width: 100%;
-      padding: 0.625rem 0.75rem;
-      border: none;
-      border-bottom: 1px solid var(--color-border, #E5E7EB);
-      background: transparent;
-      color: var(--issuer-button-text);
-      cursor: pointer;
-      font: inherit;
-      text-align: left;
-      box-sizing: border-box;
-    }
-
-    .issuer-dropdown-item:last-child {
-      border-bottom: none;
-    }
-
-    .issuer-dropdown-item:hover {
-      background: var(--color-header-menu-item-hover, #e6dcff);
-      border-radius: var(--border-radius-base-md, 0.5rem);
-    }
-
-    .popup-footer {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      gap: 8px;
-      padding: 0.75rem 1rem 1rem;
-    }
-
-    .popup-footer-hr {
-      margin: 0;
-      border: none;
-      border-top: 1px solid var(--popup-border, #E5E7EB);
-    }
-
-    .popup-cancel-button {
-      padding: 0.5rem 1.25rem;
-      border: 1px solid #C0BFC7;
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--popup-background);
-      color: #314158;
-      cursor: pointer;
-      font: inherit;
-    }
-
-    .popup-cancel-button:hover {
-      background: #D1D5DB;
-    }
-
-    .popup-login-button {
-      padding: 0.5rem 1.25rem;
-      border: none;
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--lavender-900, #7c4cff);
-      color: #ffffff;
-      cursor: pointer;
-      font: inherit;
-    }
-
-    .popup-login-button:hover {
-      background: #6a3de8;
-    }
-
-    .popup-login-button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .error-msg {
-      color: var(--error-text-color);
-      font-size: 0.875rem;
-      margin-top: 8px;
-    }
-  `;_issuerInputId=`issuer-url-input-${Math.random().toString(36).slice(2,10)}`;_errorMsg="";constructor(){super(),this.label="Log In",this.theme="light",this.issuerUrl="",this.icon="",this.layout="desktop",this._popupOpen=!1,this._issuerInputValue="",this._dropdownOpen=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}_openPopup(){const e=(0,n.offlineTestID)();e?this._loginComplete(e.uri):(this._issuerInputValue="undefined"!=typeof localStorage&&localStorage.getItem("loginIssuer")||this.issuerUrl||"",this._errorMsg="",this._popupOpen=!0)}_closePopup(){this._popupOpen=!1}updated(){const e=this.shadowRoot?.querySelector("dialog");e&&(this._popupOpen&&!e.open?e.showModal():!this._popupOpen&&e.open&&e.close())}async _loginToIssuer(e){if(e)try{n.solidLogicSingleton.store.updater.flagAuthorizationMetadata();const t=new URL(window.location.href).hash;t&&window.localStorage.setItem("preLoginRedirectHash",t),window.localStorage.setItem("loginIssuer",e);const o=new URL(window.location.href);o.hash="",await n.authSession.login({redirectUrl:o.href,oidcIssuer:e})}catch(e){this._errorMsg=e.message||String(e),this.requestUpdate()}}_loginComplete(e){n.authn.saveUser(e),this.dispatchEvent(new CustomEvent("login-success",{detail:{webId:e},bubbles:!0,composed:!0}))}_handleGoClick(){this._dropdownOpen=!1,this._loginToIssuer(this._issuerInputValue)}_toggleDropdown(){this._dropdownOpen=!this._dropdownOpen}_selectIssuerFromDropdown(e){this._issuerInputValue=e,this._dropdownOpen=!1}_handleInputChange(e){this._issuerInputValue=e.target.value}_handleInputKeydown(e){"Enter"===e.key&&this._loginToIssuer(this._issuerInputValue),"Escape"===e.key&&this._closePopup()}_renderPopup(){const e=(0,n.getSuggestedIssuers)();return r.qy`
-      <div class="popup-box">
-          <div class="popup-top-menu">
-            <span class="popup-title">Select an identity provider</span>
-            <button class="popup-close" type="button" aria-label="Close" @click="${()=>this._closePopup()}">&#x2715;</button>
-          </div>
-
-          <div class="issuer-text-section">
-            <label class="issuer-text-label" for="${this._issuerInputId}">Solid Identity Provider</label>
-            <div class="issuer-text-row">
-              <div class="issuer-input-wrapper">
-                <div class="issuer-input-field-row">
-                  <input
-                    id="${this._issuerInputId}"
-                    class="issuer-text-input"
-                    type="text"
-                    placeholder="https://example.com"
-                    .value="${this._issuerInputValue}"
-                    @input="${this._handleInputChange}"
-                    @keydown="${this._handleInputKeydown}"
-                    autocomplete="url"
-                  />
-                  ${e.length?r.qy`
-                    <button
-                      class="issuer-dropdown-toggle"
-                      type="button"
-                      aria-label="Show identity provider suggestions"
-                      aria-expanded="${this._dropdownOpen}"
-                      @click="${()=>this._toggleDropdown()}"
-                    >${i.S}</button>
-                  `:""}
-                </div>
-                ${this._dropdownOpen&&e.length?r.qy`
-                  <div class="issuer-dropdown-list" role="listbox">
-                    ${e.map(e=>r.qy`
-                      <button
-                        class="issuer-dropdown-item"
-                        type="button"
-                        role="option"
-                        @click="${()=>this._selectIssuerFromDropdown(e.uri)}"
-                      >${e.name}</button>
-                    `)}
-                  </div>
-                `:""}
-              </div>
-            </div>
-            ${this._errorMsg?r.qy`<div class="error-msg">${this._errorMsg}</div>`:""}
-          </div>
-          <hr class="popup-footer-hr" />
-          <div class="popup-footer">
-            <button class="popup-cancel-button" type="button" @click="${()=>this._closePopup()}">Cancel</button>
-            <button
-              class="popup-login-button"
-              type="button"
-              ?disabled="${!this._issuerInputValue}"
-              @click="${()=>this._handleGoClick()}"
-            >Log In</button>
-          </div>
-        </div>
-    `}render(){return r.qy`
-      <button
-        class="login-button"
-        type="button"
-        part="login-button"
-        @click="${()=>this._openPopup()}"
-      >
-        ${this.icon?r.qy`<img class="login-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="login-button-icon" />`:""}
-        <slot>${this.label}</slot>
-      </button>
-
-      <dialog
-        class="popup-dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Select an identity provider"
-        @cancel="${e=>{e.preventDefault(),this._closePopup()}}"
-        @click="${e=>{e.target===e.currentTarget&&this._closePopup()}}"
-      >
-        ${this._popupOpen?this._renderPopup():""}
-      </dialog>
-    `}}},1353(e,t,o){o.d(t,{S:()=>r});const r=o(6752).qy`
-  <svg xmlns="http://www.w3.org/2000/svg" 
-    viewBox="0 0 12 7" 
-    fill="none"
-  >
-    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-`},9140(e,t,o){var r=o(1209);const n="solid-ui-login-button";customElements.get(n)||customElements.define(n,r.M)},3591(e,t,o){o.d(t,{X:()=>n});var r=o(6161);class n extends r.WF{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},signupUrl:{type:String,attribute:"signup-url",reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0}};static styles=r.AH`
-    :host {
-      display: inline-block;
-      --signup-button-background: transparent;
-      --signup-button-border: var(--color-border, #E5E7EB);
-      --signup-button-text: var(--color-header-text, #ffffff);
-    }
-
-    :host([theme='dark']) {
-      --signup-button-background: transparent;
-      --signup-button-border: var(--color-border, #E5E7EB);
-      --signup-button-text: var(--color-header-text, #ffffff);
-    }
-
-    .signup-button {
-      display: flex;
-      height: 35px;
-      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
-      align-items: center;
-      gap: var(--spacing-xxs, 0.3125rem);
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--signup-button-background);
-      border: 1px solid var(--signup-button-border);
-      color: var(--signup-button-text);
-      cursor: pointer;
-      font: inherit;
-      line-height: 1;
-      white-space: nowrap;
-      text-decoration: none;
-      box-sizing: border-box;
-      transition: transform 0.2s ease;
-    }
-
-    :host([layout='mobile']) .signup-button {
-      border: none;
-    }
-
-    .signup-button-icon {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-      object-fit: contain;
-    }
-
-    .signup-button:active {
-      transform: translateY(1px);
-    }
-  `;constructor(){super(),this.label="Sign Up",this.signupUrl="https://solidproject.org/get_a_pod",this.theme="light",this.icon="",this.layout="desktop"}_handleClick(){window.open(this.signupUrl,"_blank","noopener,noreferrer")}render(){return r.qy`
-      <button
-        class="signup-button"
-        type="button"
-        part="signup-button"
-        @click="${()=>this._handleClick()}"
-      >
-        ${this.icon?r.qy`<img class="signup-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="signup-button-icon" />`:""}
-        <slot>${this.label}</slot>
-      </button>
-    `}}},1291(e,t,o){var r=o(3591);const n="solid-ui-signup-button";customElements.get(n)||customElements.define(n,r.X)},3138(t,o,r){t.exports=(e=>{var t={};return r.d(t,e),t})({authSession:()=>e.authSession,authn:()=>e.authn,getSuggestedIssuers:()=>e.getSuggestedIssuers,offlineTestID:()=>e.offlineTestID,solidLogicSingleton:()=>e.solidLogicSingleton})},3826(e,t,o){o.d(t,{AH:()=>l,Rf:()=>c,sk:()=>d});
+    `}}},3138(t,o,r){t.exports=(e=>{var t={};return r.d(t,e),t})({authSession:()=>e.authSession,authn:()=>e.authn,getSuggestedIssuers:()=>e.getSuggestedIssuers,offlineTestID:()=>e.offlineTestID,solidLogicSingleton:()=>e.solidLogicSingleton})},3826(e,t,o){o.d(t,{AH:()=>l,Rf:()=>c,sk:()=>d});
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -1079,5 +1121,5 @@ const i=globalThis;class s extends r.mN{constructor(){super(...arguments),this.r
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const r=globalThis,n=e=>e,i=r.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:e=>e}):void 0,a="$lit$",l=`lit$${Math.random().toFixed(9).slice(2)}$`,c="?"+l,d=`<${c}>`,u=document,h=()=>u.createComment(""),p=e=>null===e||"object"!=typeof e&&"function"!=typeof e,g=Array.isArray,b=e=>g(e)||"function"==typeof e?.[Symbol.iterator],m="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,f=/-->/g,y=/>/g,x=RegExp(`>|${m}(?:([^\\s"'>=/]+)(${m}*=${m}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),$=/'/g,_=/"/g,A=/^(?:script|style|textarea|title)$/i,w=e=>(t,...o)=>({_$litType$:e,strings:t,values:o}),k=w(1),S=(w(2),w(3),Symbol.for("lit-noChange")),E=Symbol.for("lit-nothing"),M=new WeakMap,I=u.createTreeWalker(u,129);function C(e,t){if(!g(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(t):t}const O=(e,t)=>{const o=e.length-1,r=[];let n,i=2===t?"<svg>":3===t?"<math>":"",s=v;for(let t=0;t<o;t++){const o=e[t];let c,u,h=-1,p=0;for(;p<o.length&&(s.lastIndex=p,u=s.exec(o),null!==u);)p=s.lastIndex,s===v?"!--"===u[1]?s=f:void 0!==u[1]?s=y:void 0!==u[2]?(A.test(u[2])&&(n=RegExp("</"+u[2],"g")),s=x):void 0!==u[3]&&(s=x):s===x?">"===u[0]?(s=n??v,h=-1):void 0===u[1]?h=-2:(h=s.lastIndex-u[2].length,c=u[1],s=void 0===u[3]?x:'"'===u[3]?_:$):s===_||s===$?s=x:s===f||s===y?s=v:(s=x,n=void 0);const g=s===x&&e[t+1].startsWith("/>")?" ":"";i+=s===v?o+d:h>=0?(r.push(c),o.slice(0,h)+a+o.slice(h)+l+g):o+l+(-2===h?t:g)}return[C(e,i+(e[o]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),r]};class U{constructor({strings:e,_$litType$:t},o){let r;this.parts=[];let n=0,s=0;const d=e.length-1,u=this.parts,[p,g]=O(e,t);if(this.el=U.createElement(p,o),I.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=I.nextNode())&&u.length<d;){if(1===r.nodeType){if(r.hasAttributes())for(const e of r.getAttributeNames())if(e.endsWith(a)){const t=g[s++],o=r.getAttribute(e).split(l),i=/([.?@])?(.*)/.exec(t);u.push({type:1,index:n,name:i[2],strings:o,ctor:"."===i[1]?R:"?"===i[1]?T:"@"===i[1]?q:B}),r.removeAttribute(e)}else e.startsWith(l)&&(u.push({type:6,index:n}),r.removeAttribute(e));if(A.test(r.tagName)){const e=r.textContent.split(l),t=e.length-1;if(t>0){r.textContent=i?i.emptyScript:"";for(let o=0;o<t;o++)r.append(e[o],h()),I.nextNode(),u.push({type:2,index:++n});r.append(e[t],h())}}}else if(8===r.nodeType)if(r.data===c)u.push({type:2,index:n});else{let e=-1;for(;-1!==(e=r.data.indexOf(l,e+1));)u.push({type:7,index:n}),e+=l.length-1}n++}}static createElement(e,t){const o=u.createElement("template");return o.innerHTML=e,o}}function H(e,t,o=e,r){if(t===S)return t;let n=void 0!==r?o._$Co?.[r]:o._$Cl;const i=p(t)?void 0:t._$litDirective$;return n?.constructor!==i&&(n?._$AO?.(!1),void 0===i?n=void 0:(n=new i(e),n._$AT(e,o,r)),void 0!==r?(o._$Co??=[])[r]=n:o._$Cl=n),void 0!==n&&(t=H(e,n._$AS(e,t.values),n,r)),t}class P{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:o}=this._$AD,r=(e?.creationScope??u).importNode(t,!0);I.currentNode=r;let n=I.nextNode(),i=0,s=0,a=o[0];for(;void 0!==a;){if(i===a.index){let t;2===a.type?t=new L(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new j(n,this,e)),this._$AV.push(t),a=o[++s]}i!==a?.index&&(n=I.nextNode(),i++)}return I.currentNode=u,r}p(e){let t=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(e,o,t),t+=o.strings.length-2):o._$AI(e[t])),t++}}class L{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,o,r){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=o,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=H(this,e,t),p(e)?e===E||null==e||""===e?(this._$AH!==E&&this._$AR(),this._$AH=E):e!==this._$AH&&e!==S&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):b(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==E&&p(this._$AH)?this._$AA.nextSibling.data=e:this.T(u.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:o}=e,r="number"==typeof o?this._$AC(e):(void 0===o.el&&(o.el=U.createElement(C(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new P(r,this),o=e.u(this.options);e.p(t),this.T(o),this._$AH=e}}_$AC(e){let t=M.get(e.strings);return void 0===t&&M.set(e.strings,t=new U(e)),t}k(e){g(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let o,r=0;for(const n of e)r===t.length?t.push(o=new L(this.O(h()),this.O(h()),this,this.options)):o=t[r],o._$AI(n),r++;r<t.length&&(this._$AR(o&&o._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=n(e).nextSibling;n(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class B{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,o,r,n){this.type=1,this._$AH=E,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=n,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=E}_$AI(e,t=this,o,r){const n=this.strings;let i=!1;if(void 0===n)e=H(this,e,t,0),i=!p(e)||e!==this._$AH&&e!==S,i&&(this._$AH=e);else{const r=e;let s,a;for(e=n[0],s=0;s<n.length-1;s++)a=H(this,r[o+s],t,s),a===S&&(a=this._$AH[s]),i||=!p(a)||a!==this._$AH[s],a===E?e=E:e!==E&&(e+=(a??"")+n[s+1]),this._$AH[s]=a}i&&!r&&this.j(e)}j(e){e===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class R extends B{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===E?void 0:e}}class T extends B{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==E)}}class q extends B{constructor(e,t,o,r,n){super(e,t,o,r,n),this.type=5}_$AI(e,t=this){if((e=H(this,e,t,0)??E)===S)return;const o=this._$AH,r=e===E&&o!==E||e.capture!==o.capture||e.once!==o.once||e.passive!==o.passive,n=e!==E&&(o===E||r);r&&this.element.removeEventListener(this.name,this,o),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class j{constructor(e,t,o){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(e){H(this,e)}}const D=r.litHtmlPolyfillSupport;D?.(U,L),(r.litHtmlVersions??=[]).push("3.3.2");const N=(e,t,o)=>{const r=o?.renderBefore??t;let n=r._$litPart$;if(void 0===n){const e=o?.renderBefore??null;r._$litPart$=n=new L(t.insertBefore(h(),e),e,void 0,o??{})}return n._$AI(e),n}},1413(e,t,o){o.d(t,{J:()=>r.J});var r=o(4765)},6161(e,t,o){o.d(t,{AH:()=>r.AH,WF:()=>r.WF,qy:()=>r.qy});o(8760),o(6752);var r=o(5228)}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var i=o[e]={id:e,loaded:!1,exports:{}};return t[e](i,i.exports,r),i.loaded=!0,i.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.hmd=e=>((e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};r.d(n,{Y:()=>i.Y});var i=r(225);const s="solid-ui-header";customElements.get(s)||customElements.define(s,i.Y);const a=n.Y;export{a as Header};
+const r=globalThis,n=e=>e,i=r.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:e=>e}):void 0,a="$lit$",l=`lit$${Math.random().toFixed(9).slice(2)}$`,c="?"+l,d=`<${c}>`,u=document,h=()=>u.createComment(""),p=e=>null===e||"object"!=typeof e&&"function"!=typeof e,g=Array.isArray,b=e=>g(e)||"function"==typeof e?.[Symbol.iterator],m="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,f=/-->/g,y=/>/g,x=RegExp(`>|${m}(?:([^\\s"'>=/]+)(${m}*=${m}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),$=/'/g,w=/"/g,_=/^(?:script|style|textarea|title)$/i,A=e=>(t,...o)=>({_$litType$:e,strings:t,values:o}),k=A(1),S=(A(2),A(3),Symbol.for("lit-noChange")),E=Symbol.for("lit-nothing"),M=new WeakMap,I=u.createTreeWalker(u,129);function C(e,t){if(!g(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(t):t}const O=(e,t)=>{const o=e.length-1,r=[];let n,i=2===t?"<svg>":3===t?"<math>":"",s=v;for(let t=0;t<o;t++){const o=e[t];let c,u,h=-1,p=0;for(;p<o.length&&(s.lastIndex=p,u=s.exec(o),null!==u);)p=s.lastIndex,s===v?"!--"===u[1]?s=f:void 0!==u[1]?s=y:void 0!==u[2]?(_.test(u[2])&&(n=RegExp("</"+u[2],"g")),s=x):void 0!==u[3]&&(s=x):s===x?">"===u[0]?(s=n??v,h=-1):void 0===u[1]?h=-2:(h=s.lastIndex-u[2].length,c=u[1],s=void 0===u[3]?x:'"'===u[3]?w:$):s===w||s===$?s=x:s===f||s===y?s=v:(s=x,n=void 0);const g=s===x&&e[t+1].startsWith("/>")?" ":"";i+=s===v?o+d:h>=0?(r.push(c),o.slice(0,h)+a+o.slice(h)+l+g):o+l+(-2===h?t:g)}return[C(e,i+(e[o]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),r]};class U{constructor({strings:e,_$litType$:t},o){let r;this.parts=[];let n=0,s=0;const d=e.length-1,u=this.parts,[p,g]=O(e,t);if(this.el=U.createElement(p,o),I.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=I.nextNode())&&u.length<d;){if(1===r.nodeType){if(r.hasAttributes())for(const e of r.getAttributeNames())if(e.endsWith(a)){const t=g[s++],o=r.getAttribute(e).split(l),i=/([.?@])?(.*)/.exec(t);u.push({type:1,index:n,name:i[2],strings:o,ctor:"."===i[1]?R:"?"===i[1]?T:"@"===i[1]?q:B}),r.removeAttribute(e)}else e.startsWith(l)&&(u.push({type:6,index:n}),r.removeAttribute(e));if(_.test(r.tagName)){const e=r.textContent.split(l),t=e.length-1;if(t>0){r.textContent=i?i.emptyScript:"";for(let o=0;o<t;o++)r.append(e[o],h()),I.nextNode(),u.push({type:2,index:++n});r.append(e[t],h())}}}else if(8===r.nodeType)if(r.data===c)u.push({type:2,index:n});else{let e=-1;for(;-1!==(e=r.data.indexOf(l,e+1));)u.push({type:7,index:n}),e+=l.length-1}n++}}static createElement(e,t){const o=u.createElement("template");return o.innerHTML=e,o}}function H(e,t,o=e,r){if(t===S)return t;let n=void 0!==r?o._$Co?.[r]:o._$Cl;const i=p(t)?void 0:t._$litDirective$;return n?.constructor!==i&&(n?._$AO?.(!1),void 0===i?n=void 0:(n=new i(e),n._$AT(e,o,r)),void 0!==r?(o._$Co??=[])[r]=n:o._$Cl=n),void 0!==n&&(t=H(e,n._$AS(e,t.values),n,r)),t}class P{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:o}=this._$AD,r=(e?.creationScope??u).importNode(t,!0);I.currentNode=r;let n=I.nextNode(),i=0,s=0,a=o[0];for(;void 0!==a;){if(i===a.index){let t;2===a.type?t=new L(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new j(n,this,e)),this._$AV.push(t),a=o[++s]}i!==a?.index&&(n=I.nextNode(),i++)}return I.currentNode=u,r}p(e){let t=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(e,o,t),t+=o.strings.length-2):o._$AI(e[t])),t++}}class L{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,o,r){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=o,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=H(this,e,t),p(e)?e===E||null==e||""===e?(this._$AH!==E&&this._$AR(),this._$AH=E):e!==this._$AH&&e!==S&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):b(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==E&&p(this._$AH)?this._$AA.nextSibling.data=e:this.T(u.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:o}=e,r="number"==typeof o?this._$AC(e):(void 0===o.el&&(o.el=U.createElement(C(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new P(r,this),o=e.u(this.options);e.p(t),this.T(o),this._$AH=e}}_$AC(e){let t=M.get(e.strings);return void 0===t&&M.set(e.strings,t=new U(e)),t}k(e){g(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let o,r=0;for(const n of e)r===t.length?t.push(o=new L(this.O(h()),this.O(h()),this,this.options)):o=t[r],o._$AI(n),r++;r<t.length&&(this._$AR(o&&o._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=n(e).nextSibling;n(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class B{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,o,r,n){this.type=1,this._$AH=E,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=n,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=E}_$AI(e,t=this,o,r){const n=this.strings;let i=!1;if(void 0===n)e=H(this,e,t,0),i=!p(e)||e!==this._$AH&&e!==S,i&&(this._$AH=e);else{const r=e;let s,a;for(e=n[0],s=0;s<n.length-1;s++)a=H(this,r[o+s],t,s),a===S&&(a=this._$AH[s]),i||=!p(a)||a!==this._$AH[s],a===E?e=E:e!==E&&(e+=(a??"")+n[s+1]),this._$AH[s]=a}i&&!r&&this.j(e)}j(e){e===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class R extends B{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===E?void 0:e}}class T extends B{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==E)}}class q extends B{constructor(e,t,o,r,n){super(e,t,o,r,n),this.type=5}_$AI(e,t=this){if((e=H(this,e,t,0)??E)===S)return;const o=this._$AH,r=e===E&&o!==E||e.capture!==o.capture||e.once!==o.once||e.passive!==o.passive,n=e!==E&&(o===E||r);r&&this.element.removeEventListener(this.name,this,o),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class j{constructor(e,t,o){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(e){H(this,e)}}const D=r.litHtmlPolyfillSupport;D?.(U,L),(r.litHtmlVersions??=[]).push("3.3.2");const N=(e,t,o)=>{const r=o?.renderBefore??t;let n=r._$litPart$;if(void 0===n){const e=o?.renderBefore??null;r._$litPart$=n=new L(t.insertBefore(h(),e),e,void 0,o??{})}return n._$AI(e),n}},1413(e,t,o){o.d(t,{J:()=>r.J});var r=o(4765)},6161(e,t,o){o.d(t,{AH:()=>r.AH,WF:()=>r.WF,qy:()=>r.qy});o(8760),o(6752);var r=o(5228)}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var i=o[e]={id:e,loaded:!1,exports:{}};return t[e](i,i.exports,r),i.loaded=!0,i.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.hmd=e=>((e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};r.d(n,{Y:()=>i.Y});var i=r(1166);const s="solid-ui-header";customElements.get(s)||customElements.define(s,i.Y);const a=n.Y;export{a as Header};
 //# sourceMappingURL=index.esm.min.js.map