@popgrids/ui 0.0.1 → 0.0.4

package/dist/index.cjs

@@ -1,2015 +1,2 @@
-"use strict";var B=Object.defineProperty;var i0=Object.getOwnPropertyDescriptor;var Ap=Object.getOwnPropertyNames;var yp=Object.getPrototypeOf,Fp=Object.prototype.hasOwnProperty;var $p=Reflect.get;var qp=(n,e)=>{for(var t in e)B(n,t,{get:e[t],enumerable:!0})},Lp=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let h of Ap(e))!Fp.call(n,h)&&h!==t&&B(n,h,{get:()=>e[h],enumerable:!(i=i0(e,h))||i.enumerable});return n};var Ip=n=>Lp(B({},"__esModule",{value:!0}),n),p=(n,e,t,i)=>{for(var h=i>1?void 0:i?i0(e,t):e,k=n.length-1,M;k>=0;k--)(M=n[k])&&(h=(i?M(e,t,h):M(h))||h);return i&&h&&B(e,t,h),h};var o=(n,e,t)=>$p(yp(n),t,e);var zp={};qp(zp,{PopButton:()=>a,PopButtonLink:()=>f0,PopButtonVertical:()=>s,PopCodeInputField:()=>G0,PopCommentAvatar:()=>L0,PopCommentIcon:()=>Y0,PopElement:()=>z0,PopFocusIndicator:()=>K0,PopFormInputSimple:()=>T0,PopIcon:()=>pp,PopLoader:()=>Pp,PopLogo:()=>hp,PopSum:()=>dp,PopTimestampCountdown:()=>up,PopToast:()=>wp,colors:()=>_,sampleColor:()=>p0});module.exports=Ip(zp);var J=require("lit"),b=require("lit/decorators.js"),S=require("lit/directives/class-map.js"),Z=require("lit/directives/if-defined.js");var c0=require("lit");var o0=require("@popgrids/theme/lit"),l0=require("lit"),n0=[o0.themeStyles,l0.css`
-    :host {
-      box-sizing: border-box;
-    }
-
-    :host *,
-    :host *::before,
-    :host *::after {
-      box-sizing: border-box;
-    }
-
-    [hidden] {
-      display: none !important;
-    }
-
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border-width: 0;
-    }
-  `];var R=!1;function h0(){if(R)return;if(document.querySelector('link[href="https://rsms.me/inter/inter.css"]')){R=!0;return}let e=document.createElement("link");e.rel="stylesheet",e.href="https://rsms.me/inter/inter.css",document.head.appendChild(e),R=!0}var s0=require("lit"),x0=s0.css`
-  :host {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    color: var(--color-text-text-default, #000);
-    font-family:
-      var(--font-sans),
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      Helvetica,
-      Arial,
-      sans-serif;
-    font-size: var(--text-base);
-    line-height: var(--text-base--line-height);
-    font-feature-settings: var(--font--feature-settings);
-    font-variation-settings: var(--font--variation-settings);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin: 0;
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  ul,
-  ol {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  button,
-  input,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  img,
-  svg {
-    max-width: 100%;
-    display: block;
-  }
-`;var P=class extends c0.LitElement{emit(e,t,i={bubbles:!0,composed:!0}){let h=new CustomEvent(e,{detail:t,...i});return this.dispatchEvent(h),h}constructor(){super(),h0()}};P.styles=[x0,n0];var H0=require("lit"),d0=H0.css`
-  :host {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .button-link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--button-link-gap, var(--spacing-xs));
-    font-family: var(--font-sans);
-    font-weight: var(--font-weight-medium);
-    text-decoration: none;
-    border: none;
-    padding: 0;
-    background: transparent;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .button-link:focus {
-    outline: none;
-  }
-
-  .content {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Size Variants */
-  .size-sm {
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-    letter-spacing: -0.6153846016296973%;
-  }
-
-  .size-md {
-    font-size: var(--text-base);
-    line-height: var(--text-base--line-height);
-  }
-
-  .size-lg {
-    font-size: var(--text-lg);
-    line-height: var(--text-lg--line-height);
-  }
-
-  /* Theme & Primary/Secondary Variants */
-  .theme-default.primary {
-    color: var(--color-text-text-default);
-  }
-
-  .theme-default.secondary {
-    color: var(--color-text-text-default-dim-light);
-  }
-
-  .theme-white.primary,
-  .theme-white.secondary {
-    color: var(--color-text-text-white);
-  }
-
-  .theme-black.primary,
-  .theme-black.secondary {
-    color: var(--color-text-text-black);
-  }
-
-  /* States */
-  /* Hover States */
-  .theme-default:hover:not(:disabled) {
-    background-color: var(--color-surface-alpha-alpha-default-10);
-    box-shadow: 0 0 0 4px var(--color-surface-alpha-alpha-default-10);
-  }
-
-  .theme-white:hover:not(:disabled) {
-    background-color: var(--color-surface-alpha-alpha-white-ghost);
-    box-shadow: 0 0 0 4px var(--color-surface-alpha-alpha-white-ghost);
-  }
-
-  .theme-black:hover:not(:disabled) {
-    background-color: var(--color-surface-alpha-alpha-default-10);
-    box-shadow: 0 0 0 4px var(--color-surface-alpha-alpha-default-10);
-  }
-
-  /* Active/Pressed States */
-  .button-link:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-
-  /* Focus States */
-  .theme-default:focus-visible:not(:disabled),
-  .theme-white:focus-visible:not(:disabled),
-  .theme-black:focus-visible:not(:disabled) {
-    background-color: var(--color-surface-buttons-conditional-bg-focus);
-    color: var(--color-text-text-white);
-    box-shadow: 0 0 0 4px var(--color-border-conditional-border-focus);
-    outline: none;
-  }
-
-  /* Disabled States */
-  .button-link:disabled,
-  .button-link.disabled {
-    color: var(--color-text-text-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* Ensure WCAG contrast for focused state on each theme */
-  .theme-default:focus-visible:not(:disabled) .icon ::slotted(*),
-  .theme-white:focus-visible:not(:disabled) .icon ::slotted(*),
-  .theme-black:focus-visible:not(:disabled) .icon ::slotted(*) {
-    stroke: var(--color-text-text-white);
-  }
-
-  /* Size-specific adjustments for hover and focus shadow */
-  .size-sm:hover:not(:disabled) {
-    box-shadow: 0 0 0 2px var(--color-surface-alpha-alpha-default-10);
-  }
-
-  .size-sm:focus-visible:not(:disabled) {
-    box-shadow: 0 0 0 2px var(--color-border-conditional-border-focus);
-  }
-
-  .size-md:hover:not(:disabled) {
-    box-shadow: 0 0 0 3px var(--color-surface-alpha-alpha-default-10);
-  }
-
-  .size-md:focus-visible:not(:disabled) {
-    box-shadow: 0 0 0 3px var(--color-border-conditional-border-focus);
-  }
-
-  .size-lg:hover:not(:disabled) {
-    box-shadow: 0 0 0 4px var(--color-surface-alpha-alpha-default-10);
-  }
-
-  .size-lg:focus-visible:not(:disabled) {
-    box-shadow: 0 0 0 4px var(--color-border-conditional-border-focus);
-  }
-`;var x=class extends P{constructor(){super(...arguments);this.size="md";this.primary=!1;this.theme="default";this.disabled=!1;this.href="";this.target="_self";this.rel="";this.type="button";this.id=""}handleClick(t){if(this.disabled){t.preventDefault();return}this.emit("pop-button-link-click",{originalEvent:t})}handleKeyDown(t){this.disabled||(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.emit("pop-button-link-click",{originalEvent:t}))}render(){let t={"button-link":!0,[`size-${this.size}`]:!0,[`theme-${this.theme}`]:!0,primary:this.primary,secondary:!this.primary,disabled:this.disabled},i=J.html`
-      <span part="content" class="content">
-        <slot></slot>
-      </span>
-      <span part="icon" class="icon">
-        <slot name="icon"></slot>
-      </span>
-    `;if(this.href&&!this.disabled){let h=this.rel||(this.target==="_blank"?"noopener noreferrer":void 0);return J.html`
-        <a
-          class=${(0,S.classMap)(t)}
-          part="base"
-          href=${this.href}
-          target=${this.target}
-          rel=${(0,Z.ifDefined)(h)}
-          id=${(0,Z.ifDefined)(this.id||void 0)}
-          aria-disabled="false"
-          @click=${this.handleClick}
-          @keydown=${this.handleKeyDown}
-        >
-          ${i}
-        </a>
-      `}return J.html`
-      <button
-        class=${(0,S.classMap)(t)}
-        part="base"
-        ?disabled=${this.disabled}
-        type=${this.type}
-        id=${(0,Z.ifDefined)(this.id||void 0)}
-        aria-disabled=${this.disabled?"true":"false"}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      >
-        ${i}
-      </button>
-    `}};x.styles=[o(x,x,"styles"),d0],p([(0,b.property)({type:String,reflect:!0})],x.prototype,"size",2),p([(0,b.property)({type:Boolean,reflect:!0})],x.prototype,"primary",2),p([(0,b.property)({type:String,reflect:!0})],x.prototype,"theme",2),p([(0,b.property)({type:Boolean,reflect:!0})],x.prototype,"disabled",2),p([(0,b.property)({type:String})],x.prototype,"href",2),p([(0,b.property)({type:String})],x.prototype,"target",2),p([(0,b.property)({type:String})],x.prototype,"rel",2),p([(0,b.property)({type:String})],x.prototype,"type",2),p([(0,b.property)({type:String})],x.prototype,"id",2),x=p([(0,b.customElement)("pop-button-link")],x);var f0=x;var K=require("lit"),m=require("lit/decorators.js"),U=require("lit/directives/class-map.js");var v0=require("lit"),g0=v0.css`
-  :host {
-    display: inline-block;
-  }
-
-  .button-vertical {
-    --button-vertical-background: var(--color-surface-buttons-secondary-bg-blank-resting, transparent);
-    --button-vertical-background-hover: var(--color-surface-buttons-secondary-bg-blank-hover, rgba(0, 0, 0, 0.05));
-    --button-vertical-background-active: var(--color-surface-buttons-secondary-bg-blank-resting, transparent);
-    --button-vertical-background-focus: var(--color-surface-buttons-secondary-bg-blank-resting, transparent);
-    --button-vertical-color: var(--color-text-text-default, #111827);
-
-    align-items: center;
-    background: var(--button-vertical-background);
-    border-radius: var(--border-radius-sm, 6px);
-    color: var(--button-vertical-color);
-    display: inline-flex;
-    font-size: var(--font-size-sm, 14px);
-    font-weight: var(--font-weight-medium, 500);
-    gap: var(--spacing-0-5, 0.125rem);
-    isolation: isolate;
-    min-width: 120px;
-    padding: var(--spacing-2, 0.5rem) var(--spacing-2-5, 0.625rem) var(--spacing-2, 0.5rem) var(--spacing-2, 0.5rem);
-    position: relative;
-    border: none;
-    cursor: pointer;
-    width: 100%;
-    text-decoration: none;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .button-vertical:not(:disabled):hover {
-      background: var(--button-vertical-background-hover);
-    }
-  }
-
-  .button-vertical:active {
-    background: var(--button-vertical-background-active);
-  }
-
-  .button-vertical:focus-visible {
-    background: var(--button-vertical-background-focus);
-    box-shadow: 0px 0px 0px 3px var(--color-blue-dark-600, #1e40af);
-    outline: none;
-  }
-
-  .button-vertical--mini {
-    justify-content: center;
-    min-width: 40px;
-    width: 40px;
-    padding: var(--spacing-2, 0.5rem);
-  }
-
-  .button-vertical--mini .button-vertical__label {
-    display: none;
-  }
-
-  .button-vertical--mini .button-vertical__leading {
-    margin-right: 0;
-  }
-
-  .button-vertical--mini .button-vertical__trailing {
-    position: absolute;
-    right: -8px;
-    top: 9px;
-  }
-
-  .button-vertical--current {
-    --button-vertical-background: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --button-vertical-background-hover: var(--color-surface-buttons-primary-bg-brand-hover, #1e40af);
-    --button-vertical-background-active: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --button-vertical-background-focus: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --button-vertical-color: var(--color-text-text-reversed, #ffffff);
-  }
-
-  .button-vertical__label {
-    align-items: center;
-    flex: 1 0 0;
-    gap: var(--spacing-1-5, 0.375rem);
-    line-height: var(--line-height-5, 1.375);
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .button-vertical--loading {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .button-vertical--loading .button-vertical__label,
-  .button-vertical--loading .button-vertical__leading,
-  .button-vertical--loading .button-vertical__trailing {
-    visibility: hidden;
-  }
-
-  .button-vertical--loading .button-vertical__loader {
-    display: flex;
-    visibility: visible;
-  }
-
-  .button-vertical__leading {
-    margin-right: 4px;
-  }
-
-  .button-vertical__loader {
-    align-items: center;
-    inset: 0;
-    justify-content: center;
-    position: absolute;
-    visibility: hidden;
-  }
-
-  .button-vertical__loader-spinner {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 2px solid var(--button-vertical-color);
-    border-top-color: transparent;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .button-vertical:disabled {
-    background: var(--color-surface-alpha-alpha-default-disabled-8, rgba(0, 0, 0, 0.08));
-    color: var(--color-text-text-disabled, #9ca3af);
-    cursor: not-allowed;
-  }
-`;var s=class extends P{constructor(){super(...arguments);this.loading=!1;this.mini=!1;this.current=!1;this.variant="avatar";this.disabled=!1;this.loaderTheme="default";this.loaderVariant="spinner";this.type="button"}get buttonClasses(){return{"button-vertical":!0,"button-vertical--loading":this.loading,"button-vertical--mini":this.mini,"button-vertical--current":this.current,[`button-vertical--variant-${this.variant}`]:!0}}render(){let t=K.html`
-      <span part="loader" class="button-vertical__loader">
-        <div class="button-vertical__loader-spinner"></div>
-      </span>
-
-      <slot name="leading" part="leading" class="button-vertical__leading"></slot>
-
-      <span part="label" class="button-vertical__label">
-        <slot></slot>
-      </span>
-
-      <slot name="trailing" part="trailing" class="button-vertical__trailing"></slot>
-    `;return this.href?K.html`
-        <a
-          part="base"
-          class=${(0,U.classMap)(this.buttonClasses)}
-          ?disabled=${this.disabled||this.loading}
-          href=${this.href}
-          aria-busy=${this.loading?"true":"false"}
-        >
-          ${t}
-        </a>
-      `:K.html`
-      <button
-        part="base"
-        class=${(0,U.classMap)(this.buttonClasses)}
-        ?disabled=${this.disabled||this.loading}
-        type=${this.type}
-        aria-busy=${this.loading?"true":"false"}
-      >
-        ${t}
-      </button>
-    `}};s.styles=[o(s,s,"styles"),g0],p([(0,m.property)({type:Boolean,reflect:!0})],s.prototype,"loading",2),p([(0,m.property)({type:Boolean,reflect:!0})],s.prototype,"mini",2),p([(0,m.property)({type:Boolean,reflect:!0})],s.prototype,"current",2),p([(0,m.property)({type:String,reflect:!0})],s.prototype,"variant",2),p([(0,m.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),p([(0,m.property)({type:String})],s.prototype,"loaderTheme",2),p([(0,m.property)({type:String})],s.prototype,"loaderVariant",2),p([(0,m.property)({type:String})],s.prototype,"type",2),p([(0,m.property)({type:String})],s.prototype,"href",2),s=p([(0,m.customElement)("pop-button-vertical")],s);var E=require("lit"),c=require("lit/decorators.js"),O=require("lit/directives/class-map.js");var X0=require("lit"),u0=X0.css`
-  :host {
-    display: inline-block;
-  }
-
-  .button {
-    /* Default variables */
-    --bg-resting: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-hover: var(--color-surface-buttons-primary-bg-brand-hover, #1e40af);
-    --bg-active: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-focused: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --backdrop-filter-blur-resting: 0px;
-    --backdrop-filter-blur-hover: 0px;
-    --backdrop-filter-blur-active: 0px;
-    --backdrop-filter-blur-focused: 0px;
-    --color-resting: var(--color-text-text-reversed, #ffffff);
-    --color-hover: var(--color-text-text-reversed, #ffffff);
-    --color-active: var(--color-text-text-reversed, #ffffff);
-    --color-focused: var(--color-text-text-reversed, #ffffff);
-    --font-size: var(--text-base, 16px);
-    --line-height: var(--text-base--line-height, 1.5);
-    --ring-resting: none;
-    --ring-hover: none;
-    --ring-active: none;
-    --ring-focused: none;
-
-    /* Button styles */
-    align-items: center;
-    background: var(--bg-resting);
-    backdrop-filter: blur(var(--backdrop-filter-blur-resting));
-    border-radius: var(--border-radius-sm, 4px);
-    box-shadow: var(--ring-resting, none);
-    color: var(--color-resting);
-    display: inline-flex;
-    font-size: var(--font-size);
-    font-weight: var(--font-weight-medium, 500);
-    justify-content: center;
-    line-height: var(--line-height);
-    position: relative;
-    border: none;
-    text-decoration: none;
-    cursor: pointer;
-    width: 100%;
-  }
-
-  /* Disabled state */
-  .button:disabled,
-  .button--disabled {
-    backdrop-filter: blur(8px);
-    background: var(--color-surface-alpha-alpha-default-disabled-8, rgba(0, 0, 0, 0.08));
-    box-shadow: none;
-    color: var(--color-text-text-disabled, #9ca3af);
-    cursor: not-allowed;
-  }
-
-  /* Hover state */
-  .button:not(:disabled):hover {
-    backdrop-filter: blur(var(--backdrop-filter-blur-hover));
-    background: var(--bg-hover);
-    box-shadow: var(--ring-hover, none);
-    color: var(--color-hover);
-  }
-
-  /* Active state */
-  .button:not(:disabled):active {
-    backdrop-filter: blur(var(--backdrop-filter-blur-active));
-    background: var(--bg-active);
-    box-shadow: var(--ring-active, none);
-    color: var(--color-active);
-  }
-
-  /* Focus states */
-  .button:focus {
-    outline: none;
-  }
-
-  .button:focus-visible {
-    backdrop-filter: blur(var(--backdrop-filter-blur-focused));
-    background: var(--bg-focused);
-    box-shadow: var(--ring-focused);
-    color: var(--color-focused);
-    outline: 3px solid var(--color-blue-dark-600, #1e40af);
-    outline-offset: 0px;
-  }
-
-  /* Alignment */
-  .button--align-left {
-    justify-content: flex-start;
-  }
-
-  .button--align-left .button__label {
-    margin-right: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* Collapsed state */
-  .button--collapsed .button__label,
-  .button--collapsed .button__trailing {
-    display: none;
-  }
-
-  /* Loading state */
-  .button--loading {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .button--loading .button__label,
-  .button--loading .button__leading,
-  .button--loading .button__trailing {
-    visibility: hidden;
-  }
-
-  .button--loading .button__loader {
-    display: flex;
-    opacity: 1;
-  }
-
-  /* Rounded variation */
-  .button--rounded {
-    border-radius: var(--border-radius-full, 9999px);
-  }
-
-  /* Size variations */
-  .button--size-md {
-    --font-size: var(--text-sm, 14px);
-    --line-height: var(--text-sm--line-height, 1.375);
-    gap: var(--spacing-sm, 0.375rem);
-    min-height: 40px;
-  }
-
-  .button--size-md:not(.button--collapsed) {
-    padding: 0 var(--spacing-3, 0.75rem);
-  }
-
-  .button--size-md.button--highlight {
-    --font-size: var(--text-base, 16px);
-    --line-height: var(--text-base--line-height, 1.5);
-  }
-
-  .button--size-md.button--collapsed {
-    min-width: 40px;
-    padding: 0;
-  }
-
-  .button--size-md.button--rounded:not(.button--collapsed) {
-    padding: 0 var(--spacing-4, 1rem);
-  }
-
-  .button--size-lg {
-    --font-size: var(--text-lg, 18px);
-    --line-height: var(--line-height-7, 1.75);
-    gap: var(--spacing-2, 0.5rem);
-    min-height: 54px;
-    padding: 0 var(--spacing-5, 1.25rem);
-  }
-
-  .button--size-lg.button--collapsed {
-    min-width: 54px;
-    padding: 0;
-  }
-
-  .button--size-sm {
-    --font-size: var(--text-xs, 12px);
-    --line-height: var(--text-sm--line-height, 1.25);
-    gap: var(--spacing-1, 0.25rem);
-    min-height: 32px;
-    padding: 0 var(--spacing-2, 0.5rem);
-  }
-
-  .button--size-sm.button--collapsed {
-    min-width: 32px;
-    padding: 0;
-  }
-
-  /* Button parts */
-  .button__label {
-    white-space: nowrap;
-  }
-
-  .button__loader {
-    align-items: center;
-    display: none;
-    inset: 0;
-    justify-content: center;
-    opacity: 0;
-    position: absolute;
-    transition-duration: 0.2s;
-    transition-property: opacity, display;
-  }
-
-  .button__loader-spinner {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 2px solid var(--color-text-text-reversed, #ffffff);
-    border-top-color: transparent;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Theme: Brand */
-  /* Primary variant */
-  .button--theme-brand.button--variant-primary {
-    --bg-resting: var(--color-surface-buttons-secondary-bg-light-resting, #f9fafb);
-    --bg-hover: var(--color-surface-buttons-secondary-bg-light-hover, #f3f4f6);
-    --bg-active: var(--color-surface-buttons-secondary-bg-light-resting, #f9fafb);
-    --bg-focused: var(--color-surface-buttons-secondary-bg-light-resting, #f9fafb);
-    --color-resting: var(--color-text-text-default, #111827);
-    --color-hover: var(--color-text-text-default, #111827);
-    --color-active: var(--color-text-text-default, #111827);
-    --color-focused: var(--color-text-text-default, #111827);
-  }
-
-  .button--theme-brand.button--variant-primary.button--current {
-    --bg-resting: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-hover: var(--color-surface-buttons-primary-bg-brand-hover, #1e40af);
-    --bg-active: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-focused: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --color-resting: var(--color-text-text-reversed, #ffffff);
-    --color-hover: var(--color-text-text-reversed, #ffffff);
-    --color-active: var(--color-text-text-reversed, #ffffff);
-    --color-focused: var(--color-text-text-reversed, #ffffff);
-  }
-
-  .button--theme-brand.button--variant-primary.button--current.button--outline {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 0px;
-    --backdrop-filter-blur-active: 0px;
-    --backdrop-filter-blur-focused: 8px;
-    --bg-resting: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --bg-hover: var(--color-surface-buttons-primary-bg-brand-hover, #1e40af);
-    --bg-active: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-focused: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --color-resting: var(--color-text-text-default, #111827);
-    --color-hover: var(--color-text-text-reversed, #ffffff);
-    --color-active: var(--color-text-text-reversed, #ffffff);
-    --color-focused: var(--color-text-text-default, #111827);
-    --ring-resting: 0px 0px 0px 1px var(--color-border-border-reversed, #ffffff);
-    --ring-hover: none;
-    --ring-active: none;
-  }
-
-  .button--theme-brand.button--variant-primary.button--outline {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 8px;
-    --backdrop-filter-blur-active: 0px;
-    --backdrop-filter-blur-focused: 8px;
-    --bg-resting: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --bg-active: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-focused: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --ring-resting: 0px 0px 0px 1px var(--color-border-border-reversed, #ffffff);
-    --ring-hover: none;
-    --ring-active: none;
-  }
-
-  /* Secondary variant */
-  .button--theme-brand.button--variant-secondary {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 8px;
-    --backdrop-filter-blur-active: 0;
-    --backdrop-filter-blur-focused: 8px;
-    --bg-resting: var(--color-surface-buttons-secondary-bg-light-resting, #f9fafb);
-    --bg-hover: var(--color-surface-buttons-secondary-bg-light-hover, #f3f4f6);
-    --bg-active: var(--color-surface-buttons-secondary-bg-light-resting, #f9fafb);
-    --bg-focused: var(--color-surface-buttons-secondary-bg-light-resting, #f9fafb);
-    --color-resting: var(--color-text-text-default, #111827);
-    --color-hover: var(--color-text-text-default, #111827);
-    --color-active: var(--color-text-text-default, #111827);
-    --color-focused: var(--color-text-text-default, #111827);
-    --ring-resting: none;
-    --ring-hover: 0px 0px 0px 1px var(--color-border-border-default, #d1d5db);
-    --ring-active: none;
-  }
-
-  .button--theme-brand.button--variant-secondary.button--outline {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 8px;
-    --backdrop-filter-blur-active: 0px;
-    --backdrop-filter-blur-focused: 8px;
-    --bg-resting: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --bg-hover: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --bg-active: var(--color-surface-buttons-primary-bg-brand-resting, #2563eb);
-    --bg-focused: var(--color-surface-alpha-alpha-reversed-ghost, rgba(255, 255, 255, 0.1));
-    --color-resting: var(--color-text-text-default, #111827);
-    --color-hover: var(--color-text-text-default, #111827);
-    --color-active: var(--color-text-text-reversed, #ffffff);
-    --color-focused: var(--color-text-text-default, #111827);
-    --ring-hover: 0px 0px 0px 1px var(--color-border-border-reversed, #ffffff);
-    --ring-active: none;
-  }
-
-  /* Tertiary variant */
-  .button--theme-brand.button--variant-tertiary {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 8px;
-    --backdrop-filter-blur-active: 0px;
-    --backdrop-filter-blur-focused: 0px;
-    --bg-resting: var(--color-surface-buttons-secondary-bg-blank-resting, transparent);
-    --bg-hover: var(--color-surface-buttons-secondary-bg-blank-hover, rgba(0, 0, 0, 0.05));
-    --bg-active: var(--color-surface-buttons-secondary-bg-blank-resting, transparent);
-    --bg-focused: var(--color-surface-buttons-secondary-bg-blank-resting, transparent);
-    --color-resting: var(--color-text-text-default, #111827);
-    --color-hover: var(--color-text-text-default, #111827);
-    --color-active: var(--color-text-text-default, #111827);
-    --color-focused: var(--color-text-text-default, #111827);
-  }
-
-  /* Theme: Glass */
-  .button--theme-glass.button--variant-secondary.button--outline {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 8px;
-    --backdrop-filter-blur-active: 8px;
-    --backdrop-filter-blur-focused: 8px;
-    --bg-resting: var(--color-surface-alpha-alpha-default-ghost, rgba(0, 0, 0, 0.1));
-    --bg-hover: var(--color-surface-alpha-alpha-default-ghost, rgba(0, 0, 0, 0.1));
-    --bg-active: var(--color-surface-alpha-alpha-default-ghost, rgba(0, 0, 0, 0.1));
-    --bg-focused: var(--color-surface-alpha-alpha-default-ghost, rgba(0, 0, 0, 0.1));
-    --color-resting: var(--color-text-text-reversed, #ffffff);
-    --color-hover: var(--color-text-text-reversed, #ffffff);
-    --color-active: var(--color-text-text-reversed, #ffffff);
-    --color-focused: var(--color-text-text-reversed, #ffffff);
-    --ring-resting: none;
-    --ring-hover: 0px 0px 0px 1px var(--color-border-border-default, #d1d5db);
-    --ring-active: none;
-  }
-
-  .button--theme-glass.button--variant-secondary.button--outline.button--white {
-    --bg-resting: var(--color-surface-alpha-alpha-black-ghost, rgba(0, 0, 0, 0.1));
-    --bg-hover: var(--color-surface-alpha-alpha-black-ghost, rgba(0, 0, 0, 0.1));
-    --bg-active: var(--color-surface-alpha-alpha-black-ghost, rgba(0, 0, 0, 0.1));
-    --bg-focused: var(--color-surface-alpha-alpha-black-ghost, rgba(0, 0, 0, 0.1));
-    --color-resting: var(--color-text-text-white, #ffffff);
-    --color-hover: var(--color-text-text-white, #ffffff);
-    --color-active: var(--color-text-text-white, #ffffff);
-    --color-focused: var(--color-text-text-white, #ffffff);
-    --ring-resting: none;
-    --ring-hover: 0px 0px 0px 1px var(--color-border-border-white, rgba(255, 255, 255, 0.5));
-    --ring-active: none;
-  }
-
-  .button--theme-glass.button--variant-secondary.button--outline.button--black {
-    --bg-resting: var(--color-surface-alpha-alpha-white-ghost, rgba(255, 255, 255, 0.1));
-    --bg-hover: var(--color-surface-alpha-alpha-white-ghost, rgba(255, 255, 255, 0.1));
-    --bg-active: var(--color-surface-alpha-alpha-white-ghost, rgba(255, 255, 255, 0.1));
-    --bg-focused: var(--color-surface-alpha-alpha-white-ghost, rgba(255, 255, 255, 0.1));
-    --color-resting: var(--color-text-text-black, #000000);
-    --color-hover: var(--color-text-text-black, #000000);
-    --color-active: var(--color-text-text-black, #000000);
-    --color-focused: var(--color-text-text-black, #000000);
-    --ring-resting: none;
-    --ring-hover: 0px 0px 0px 1px var(--color-border-border-black, rgba(0, 0, 0, 0.5));
-    --ring-active: none;
-  }
-
-  /* Theme: Error */
-  .button--theme-error {
-    --backdrop-filter-blur-resting: 8px;
-    --backdrop-filter-blur-hover: 8px;
-    --backdrop-filter-blur-active: 0px;
-    --backdrop-filter-blur-focused: 8px;
-    --bg-resting: var(--color-surface-buttons-primary-bg-error-resting, #ef4444);
-    --bg-hover: var(--color-surface-buttons-primary-bg-error-hover, #b91c1c);
-    --bg-active: var(--color-surface-buttons-primary-bg-error-resting, #ef4444);
-    --bg-focused: var(--color-surface-buttons-primary-bg-error-resting, #ef4444);
-    --color-resting: var(--color-text-text-default, #111827);
-    --color-hover: var(--color-text-text-default, #111827);
-    --color-active: var(--color-text-text-default, #111827);
-    --color-focused: var(--color-text-text-default, #111827);
-    --ring-resting: none;
-    --ring-hover: none;
-    --ring-active: none;
-  }
-`;var a=class extends P{constructor(){super(...arguments);this.theme="brand";this.variant="primary";this.size="md";this.align="center";this.loading=!1;this.disabled=!1;this.current=!1;this.outline=!1;this.collapsed=!1;this.highlight=!1;this.rounded=!1;this.white=!1;this.black=!1;this.loaderTheme="reversed";this.loaderVariant="spinner";this.type="button"}get buttonClasses(){return{button:!0,"button--loading":this.loading,"button--disabled":this.disabled,"button--current":this.current,"button--outline":this.outline,"button--collapsed":this.collapsed,"button--highlight":this.highlight,"button--rounded":this.rounded,[`button--theme-${this.theme}`]:!0,[`button--variant-${this.variant}`]:!0,[`button--size-${this.size}`]:!0,[`button--align-${this.align}`]:!0}}render(){let t=E.html`
-      <span part="loader" class="button__loader">
-        <div class="button__loader-spinner"></div>
-      </span>
-
-      <slot name="leading" part="leading" class="button__leading"></slot>
-
-      <span part="label" class="button__label">
-        <slot></slot>
-      </span>
-
-      <slot name="trailing" part="trailing" class="button__trailing"></slot>
-    `;return this.href?E.html`
-        <a
-          part="base"
-          class=${(0,O.classMap)(this.buttonClasses)}
-          ?disabled=${this.disabled||this.loading}
-          href=${this.href}
-          aria-busy=${this.loading?"true":"false"}
-        >
-          ${t}
-        </a>
-      `:E.html`
-      <button
-        part="base"
-        class=${(0,O.classMap)(this.buttonClasses)}
-        ?disabled=${this.disabled||this.loading}
-        type=${this.type}
-        aria-busy=${this.loading?"true":"false"}
-      >
-        ${t}
-      </button>
-    `}};a.styles=[o(a,a,"styles"),u0],p([(0,c.property)({type:String,reflect:!0})],a.prototype,"theme",2),p([(0,c.property)({type:String,reflect:!0})],a.prototype,"variant",2),p([(0,c.property)({type:String,reflect:!0})],a.prototype,"size",2),p([(0,c.property)({type:String,reflect:!0})],a.prototype,"align",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"loading",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"current",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"outline",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"collapsed",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"highlight",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"rounded",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"white",2),p([(0,c.property)({type:Boolean,reflect:!0})],a.prototype,"black",2),p([(0,c.property)({type:String})],a.prototype,"loaderTheme",2),p([(0,c.property)({type:String})],a.prototype,"loaderVariant",2),p([(0,c.property)({type:String})],a.prototype,"type",2),p([(0,c.property)({type:String})],a.prototype,"href",2),a=p([(0,c.customElement)("pop-button")],a);var C0=require("lit"),q=require("lit/decorators.js");var b0=require("lit"),m0=b0.css`
-  :host {
-    display: inline-block;
-  }
-
-  .code-input-field {
-    align-items: center;
-    background: var(--color-surface-bg-default);
-    border-radius: 8px;
-    border: 1px solid var(--color-border-border-disabled);
-    box-sizing: border-box;
-    color: var(--color-text-text-default);
-    display: flex;
-    flex-direction: column;
-    font-size: var(--text-display-xs);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    height: 40px;
-    justify-content: center;
-    line-height: 36px;
-    padding: 2px 8px;
-    text-align: center;
-    width: 40px;
-  }
-
-  .code-input-field:focus {
-    outline: none;
-  }
-
-  .code-input-field:focus-visible {
-    border-color: var(--color-text-text-default);
-    box-shadow: 0px 0px 0px 3px #155eef;
-  }
-
-  .code-input-field::placeholder {
-    color: var(--color-text-text-disabled);
-  }
-
-  .code-input-field:disabled {
-    background: rgb(var(--color-gray-neutral-50));
-    border-color: var(--color-border-border-edge-strong);
-  }
-`;var d=class extends P{constructor(){super(...arguments);this.disabled=!1;this.name="";this.value=""}render(){return C0.html`
-      <input
-        autocomplete=${"one-time-code"}
-        class="code-input-field"
-        maxlength="1"
-        part="base"
-        pattern="^d$"
-        title="Please enter a single digit (0-9)"
-        type="text"
-        .name=${this.name}
-        .value=${this.value}
-        .disabled=${this.disabled}
-        @input=${this.onInput}
-      />
-    `}onInput(t){this.value=t.target.value}focus(){this.input.focus()}select(){this.input.select()}};d.styles=[o(d,d,"styles"),m0],p([(0,q.property)({type:Boolean})],d.prototype,"disabled",2),p([(0,q.property)()],d.prototype,"name",2),p([(0,q.property)()],d.prototype,"value",2),p([(0,q.query)(".code-input-field")],d.prototype,"input",2),d=p([(0,q.customElement)("pop-code-input-field")],d);var G0=d;var F0=require("lit"),W=require("lit/decorators.js"),$0=require("lit/directives/class-map.js"),q0=require("lit/directives/style-map.js");var _=["#DDD0BE","#E9DCBB","#E9DCBB","#C7D1B0","#C6D0CB","#E9DCBB","#C7D1B0","#E9DCBB","#DFC2C0","#CFD4C6","#D7E3E8","#CFD4C6","#D6B3B3","#E9DCBB","#CFCBDC","#BFD6D7","#E3D2C6","#D1E2E7","#D6B3B3","#BFD6D7","#E9DCBB","#C7D1B0","#DFC2C0","#D1E2E7","#CFD4C6","#E9DCBB","#D7E3E8","#CFD4C6","#C6D0CB","#E9DCBB","#C7D1B0","#E9DCBB","#CFCBDC","#E3D2C6","#E9DCBB"],p0=()=>_[Math.floor(Math.random()*_.length)];var w0=require("lit"),L=w0.css`
-  .mask {
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-  }
-
-  .mask--squircle {
-    mask-image: url("data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e");
-  }
-`;var A0=require("lit"),y0=A0.css`
-  :host {
-    display: block;
-
-    --comment-avatar-border-size: 1px;
-    --comment-avatar-border-color: var(--color-border-singular-border-avatar);
-    --comment-avatar-size: 32px;
-  }
-
-  .comment-avatar {
-    align-items: center;
-    display: flex;
-    flex-shrink: 0;
-    isolation: isolate;
-    justify-content: center;
-    position: relative;
-  }
-
-  .comment-avatar--size-xs {
-    --comment-avatar-size: 32px;
-  }
-
-  .comment-avatar--size-sm {
-    --comment-avatar-size: 56px;
-  }
-
-  .comment-avatar--size-md {
-    --comment-avatar-size: 80px;
-  }
-
-  .comment-avatar--size-lg {
-    --comment-avatar-size: 120px;
-  }
-
-  .comment-avatar--size-xl {
-    --comment-avatar-size: 140px;
-  }
-
-  .comment-avatar__background {
-    background-color: var(--comment-avatar-border-color);
-    position: absolute;
-    top: calc(var(--comment-avatar-border-size) * -1);
-    left: calc(var(--comment-avatar-border-size) * -1);
-    z-index: 10;
-    width: calc(100% + calc(var(--comment-avatar-border-size) * 2));
-    height: calc(100% + calc(var(--comment-avatar-border-size) * 2));
-  }
-
-  /**
-   * Content
-   */
-
-  .comment-avatar__content {
-    align-items: center;
-    background-color: var(--color-surface-bg-default);
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    height: var(--comment-avatar-size);
-    width: var(--comment-avatar-size);
-    z-index: 20;
-  }
-
-  .comment-avatar__content::slotted(img) {
-    -webkit-user-drag: none;
-    align-self: stretch;
-    flex: 1 0 0;
-    height: var(--comment-avatar-size);
-    object-fit: cover;
-    pointer-events: none;
-    position: absolute;
-    user-select: none;
-    width: var(--comment-avatar-size);
-  }
-`;var g=class extends P{constructor(){super(...arguments);this.size="md";this.backgroundColor=p0()}render(){return F0.html`
-      <div
-        class=${(0,$0.classMap)({"comment-avatar":!0,[`comment-avatar--size-${this.size}`]:!0})}
-        part="base"
-      >
-        <div class="comment-avatar__background mask mask--squircle" part="background"></div>
-        <slot
-          class="comment-avatar__content mask mask--squircle"
-          part="content"
-          style=${(0,q0.styleMap)({backgroundColor:this.backgroundColor})}
-        ></slot>
-      </div>
-    `}};g.styles=[o(g,g,"styles"),L,y0],p([(0,W.property)({type:String,reflect:!0})],g.prototype,"size",2),p([(0,W.state)()],g.prototype,"backgroundColor",2),g=p([(0,W.customElement)("pop-comment-avatar")],g);var L0=g;var C=require("lit"),F=require("lit/decorators.js"),W0=require("lit/directives/class-map.js"),V0=require("lit/directives/if-defined.js"),k0=require("lit/directives/when.js");var I0=require("lit"),D0=I0.css`
-  :host {
-    display: block;
-
-    --comment-icon-scale: 1;
-    --comment-icon-scale-hover: 1.1875;
-    --comment-icon-scale-active: 0.9375;
-    --comment-icon-size: 32px;
-    --comment-icon-color: var(--color-text-text-black);
-    --comment-icon-color-hover: var(--color-text-text-black);
-    --comment-icon-color-active: var(--color-text-text-black);
-    --comment-icon-color-focused: var(--color-text-text-black);
-    --comment-icon-background: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-hover: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-active: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-focused: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-  }
-
-  .comment-icon {
-    align-items: center;
-    background: transparent;
-    border: none;
-    display: inline-flex;
-    height: 32px;
-    justify-content: center;
-    padding: 0;
-    position: relative;
-    transform-origin: center;
-    width: 32px;
-  }
-
-  .comment-icon__focus-indicator {
-    display: none;
-    height: calc(100% + 3px);
-    inset: -1.5px;
-    transform-origin: center;
-    transform: scale(var(--comment-icon-scale));
-    transition: all 200ms ease-out;
-    width: calc(100% + 3px);
-  }
-
-  .comment-icon:focus-visible .comment-icon__focus-indicator {
-    display: flex;
-  }
-
-  .comment-icon:focus-visible {
-    outline: none;
-  }
-
-  .comment-icon__inner {
-    align-items: center;
-    background: var(--comment-icon-background);
-    color: var(--comment-icon-color);
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    height: var(--comment-icon-size);
-    justify-content: center;
-    position: absolute;
-    transform-origin: center;
-    transition: all 200ms ease-out;
-    transform: scale(var(--comment-icon-scale));
-    width: var(--comment-icon-size);
-  }
-
-  .comment-icon__icon-container {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    transition: transform ease-out 150ms;
-    width: 100%;
-  }
-
-  .comment-icon__icon-image {
-    display: flex;
-    width: 32px;
-    height: 32px;
-  }
-
-  .comment-icon__icon {
-    display: hidden;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .comment-icon:hover .comment-icon__inner {
-      background: var(--comment-icon-background-hover);
-      color: var(--comment-icon-color-hover);
-      transform: scale(var(--comment-icon-scale-hover));
-    }
-
-    .comment-icon:hover .comment-icon__icon-image {
-      display: none;
-    }
-
-    .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon-icon {
-      display: flex;
-    }
-  }
-
-  .comment-icon:active .comment-icon__inner {
-    background: var(--comment-icon-background-active);
-    color: var(--comment-icon-color-active);
-    transform: scale(var(--comment-icon-scale-active));
-    transition-duration: 100ms;
-  }
-
-  .comment-icon:is(:focus-visible) .comment-icon__inner {
-    background: var(--comment-icon-background-focused);
-    color: var(--comment-icon-color-focused);
-  }
-
-  /* Brand / Add */
-  .comment-icon--theme-brand.comment-icon--variant-add {
-    --comment-icon-color: var(--color-text-text-black);
-    --comment-icon-color-hover: var(--color-text-text-black);
-    --comment-icon-color-active: var(--color-text-text-black);
-    --comment-icon-color-focused: var(--color-text-text-black);
-    --comment-icon-background: transparent;
-    --comment-icon-background-hover: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-active: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-focused: transparent;
-  }
-
-  /* Brand / Close */
-  .comment-icon--theme-brand.comment-icon--variant-close {
-    --comment-icon-color: var(--color-text-text-white);
-    --comment-icon-color-hover: var(--color-text-text-white);
-    --comment-icon-color-active: var(--color-text-text-white);
-    --comment-icon-color-focused: var(--color-text-text-white);
-    --comment-icon-background: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-hover: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-active: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-focused: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-  }
-
-  /* Neutral / Add */
-  .comment-icon--theme-neutral.comment-icon--variant-add {
-    --comment-icon-color: var(--color-text-text-white);
-    --comment-icon-color-hover: var(--color-text-text-black);
-    --comment-icon-color-active: var(--color-text-text-black);
-    --comment-icon-color-focused: var(--color-text-text-white);
-    --comment-icon-background: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-hover: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-active: var(--color-surface-buttons-singular-bg-launch-icon-hover);
-    --comment-icon-background-focused: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-  }
-
-  /* Neutral / Close */
-  .comment-icon--theme-neutral.comment-icon--variant-close {
-    --comment-icon-color: var(--color-text-text-white);
-    --comment-icon-color-hover: var(--color-text-text-white);
-    --comment-icon-color-active: var(--color-text-text-white);
-    --comment-icon-color-focused: var(--color-text-text-white);
-    --comment-icon-background: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-hover: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-active: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-    --comment-icon-background-focused: var(--color-surface-buttons-singular-bg-launch-icon-resting);
-  }
-
-  /* Neutral / Send */
-  .comment-icon--theme-neutral.comment-icon--variant-send {
-    --comment-icon-color: var(--color-text-text-reversed);
-    --comment-icon-color-hover: var(--color-text-text-reversed);
-    --comment-icon-color-active: var(--color-text-text-reversed);
-    --comment-icon-color-focused: var(--color-text-text-reversed);
-    --comment-icon-background: var(--color-surface-bg-reversed);
-    --comment-icon-background-hover: var(--color-surface-bg-reversed);
-    --comment-icon-background-active: var(--color-surface-bg-reversed);
-    --comment-icon-background-focused: var(--color-surface-bg-reversed);
-  }
-
-  /* Neutral / More */
-  .comment-icon--theme-neutral.comment-icon--variant-more {
-    --comment-icon-color: var(--color-text-text-default);
-    --comment-icon-color-hover: var(--color-text-text-reversed);
-    --comment-icon-color-active: var(--color-text-text-default);
-    --comment-icon-color-focused: var(--color-text-text-default);
-    --comment-icon-background: var(--color-surface-buttons-secondary-bg-blank-resting);
-    --comment-icon-background-hover: var(--color-surface-bg-reversed);
-    --comment-icon-background-active: var(--color-surface-buttons-secondary-bg-blank-resting);
-    --comment-icon-background-focused: var(--color-surface-buttons-secondary-bg-blank-resting);
-  }
-
-  /* Neutral / Cancel */
-  .comment-icon--theme-neutral.comment-icon--variant-cancel {
-    --comment-icon-color: var(--color-text-text-default);
-    --comment-icon-color-hover: var(--color-text-text-default);
-    --comment-icon-color-active: var(--color-text-text-reversed);
-    --comment-icon-color-focused: var(--color-text-text-default);
-    --comment-icon-background: var(--color-surface-buttons-secondary-bg-blank-resting);
-    --comment-icon-background-hover: var(--color-surface-buttons-secondary-bg-blank-resting);
-    --comment-icon-background-active: var(--color-surface-bg-reversed);
-    --comment-icon-background-focused: var(--color-surface-buttons-secondary-bg-blank-resting);
-  }
-`;var H=class extends P{constructor(){super(...arguments);this.counter=0;this.size="sm";this.theme="brand";this.variant="add";this.type="button";this.disabled=!1}handleClick(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation()),this.dispatchEvent(new CustomEvent("pop-click",{bubbles:!0,composed:!0}))}get icon(){let t=C.html``;return this.theme==="brand"?this.variant==="add"?t=C.html`
-          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M11 4.58325V17.4166M4.58333 10.9999H17.4167"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        `:this.variant==="close"&&(t=C.html`
-          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        `):this.theme==="neutral"&&(this.variant==="add"?t=C.html`
-          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M11.0002 4.58301V17.4163M4.5835 10.9997H17.4168"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        `:this.variant==="close"?t=C.html`
-          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M11.4628 11.4627L20.5373 20.5373M11.4628 20.5373L20.5373 11.4627"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        `:this.variant==="more"?t=C.html`
-          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M12.8335 16.5L7.3335 11L12.8335 5.5"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        `:this.variant==="send"?t=C.html`
-          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M18.0394 3.68048C18.2139 3.61601 18.3837 3.78583 18.3193 3.96036L12.3858 20.0241C12.314 20.2185 12.0369 20.2123 11.9739 20.0149L9.89172 13.4908C9.86908 13.4199 9.88424 13.3423 9.93191 13.2851L14.4838 7.82287C14.6536 7.61906 14.3807 7.34616 14.1769 7.516L8.71467 12.0678C8.65746 12.1155 8.57987 12.1307 8.50893 12.108L1.98489 10.0259C1.78743 9.96287 1.78121 9.68575 1.97565 9.61393L18.0394 3.68048Z"
-              fill="currentColor"
-            />
-          </svg>
-        `:this.variant==="cancel"&&(t=C.html`
-          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        `)),t}render(){return C.html`
-      <button
-        class=${(0,W0.classMap)({"comment-icon":!0,[`comment-icon--size-${this.size}`]:this.size,[`comment-icon--theme-${this.theme}`]:this.theme,[`comment-icon--variant-${this.variant}`]:this.variant})}
-        part="base"
-        type="${this.type}"
-        ?disabled="${this.disabled}"
-        @click="${this.handleClick}"
-      >
-        <pop-focus-indicator class="comment-icon__focus-indicator"></pop-focus-indicator>
-        <div class="comment-icon__inner mask mask--squircle">
-          <div class="comment-icon__icon-container" part="icon">
-            ${(0,k0.when)(this.iconUrl,()=>C.html`
-                <img src="${(0,V0.ifDefined)(this.iconUrl)}" alt="" class="comment-icon__icon-image" />
-                <slot class="comment-icon__icon" name="icon">${this.icon}</slot>
-              `,()=>C.html` <slot class="comment-icon__icon" name="icon">${this.icon}</slot> `)}
-          </div>
-        </div>
-      </button>
-    `}};H.styles=[o(H,H,"styles"),L,D0],p([(0,F.property)({type:Number})],H.prototype,"counter",2),p([(0,F.property)({type:String,attribute:"icon-url"})],H.prototype,"iconUrl",2),p([(0,F.property)({type:String})],H.prototype,"size",2),p([(0,F.property)({type:String})],H.prototype,"theme",2),p([(0,F.property)({type:String})],H.prototype,"variant",2),p([(0,F.property)({type:String})],H.prototype,"type",2),p([(0,F.property)({type:Boolean,reflect:!0})],H.prototype,"disabled",2),H=p([(0,F.customElement)("pop-comment-icon")],H);var Y0=H;var z0=P;var J0=require("lit"),Z0=require("lit/decorators.js");var Q0=require("lit"),B0=Q0.css`
-  :host {
-    position: absolute;
-    inset: -3px;
-    z-index: 1;
-  }
-`;var A=class extends P{render(){return J0.html`
-      <svg part="base" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M27 1.5C22.0248 1.5 17.9244 1.76463 14.5866 2.50641C11.2319 3.25198 8.55629 4.4994 6.52784 6.52784C4.4994 8.55629 3.25198 11.2319 2.50641 14.5866C1.76463 17.9244 1.5 22.0248 1.5 27C1.5 31.9752 1.76463 36.0756 2.50641 39.4134C3.25198 42.7681 4.4994 45.4437 6.52784 47.4722C8.55629 49.5006 11.2319 50.748 14.5866 51.4936C17.9244 52.2354 22.0248 52.5 27 52.5C31.9752 52.5 36.0756 52.2354 39.4134 51.4936C42.7681 50.748 45.4437 49.5006 47.4722 47.4722C49.5006 45.4437 50.748 42.7681 51.4936 39.4134C52.2354 36.0756 52.5 31.9752 52.5 27C52.5 22.0248 52.2354 17.9244 51.4936 14.5866C50.748 11.2319 49.5006 8.55629 47.4722 6.52784C45.4437 4.4994 42.7681 3.25198 39.4134 2.50641C36.0756 1.76463 31.9752 1.5 27 1.5Z"
-          stroke="#155EEF"
-          stroke-width="3"
-        />
-      </svg>
-    `}};A.styles=[o(A,A,"styles"),B0],A=p([(0,Z0.customElement)("pop-focus-indicator")],A);var K0=A;var V=require("lit"),l=require("lit/decorators.js"),t0=require("lit/directives/class-map.js"),y=require("lit/directives/if-defined.js");var E0=require("lit"),N0=E0.css`
-  :host {
-    display: block;
-    width: 100%;
-
-    --form-input-border-radius: 6px;
-    --form-input-padding: 8px 10px;
-    --form-input-font-size: var(--text-base);
-    --form-input-color: var(--color-text-text-default);
-    --form-input-placeholder-color: var(--color-text-text-placeholder);
-    --form-input-bg-color: var(--color-surface-bg-default);
-    --form-input-border-color: var(--color-border-border-edge);
-    --form-input-border-color-focus: var(--color-border-border-focused);
-    --form-input-border-color-error: var(--color-border-conditional-border-error);
-    --form-input-bg-color-error: var(--color-surface-alpha-alpha-error);
-    --form-input-hint-font-size: var(--text-sm);
-    --form-input-hint-line-height: var(--text-sm--line-height);
-    --form-input-hint-color: var(--color-text-text-default);
-    --form-input-error-color: var(--color-text-conditional-text-error);
-    --form-input-error-font-size: var(--text-sm);
-    --form-input-error-line-height: var(--text-sm--line-height);
-    --form-input-border-radius: var(--radius-sm);
-  }
-
-  .form-input-container {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .form-input-wrapper {
-    display: flex;
-    align-items: center;
-    background-color: var(--form-input-bg-color);
-    border: 1px solid var(--form-input-border-color);
-    border-radius: var(--form-input-border-radius);
-    padding: var(--form-input-padding);
-    gap: 8px;
-  }
-
-  .form-input-wrapper.has-focus {
-    border-color: var(--form-input-border-color-focus);
-    outline: none;
-  }
-
-  .form-input-wrapper.form-input-wrapper--has-error {
-    border-color: var(--form-input-border-color-error);
-    background-color: var(--form-input-bg-color-error);
-  }
-
-  .form-input-wrapper.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border-color: #697586;
-  }
-
-  .form-input {
-    flex: 1;
-    background: none;
-    border: none;
-    color: var(--form-input-color);
-    font-family: "Inter", sans-serif;
-    font-size: var(--form-input-font-size);
-    line-height: 1.5;
-    outline: none;
-    padding: 0;
-    width: 100%;
-  }
-
-  .form-input::placeholder {
-    color: var(--form-input-placeholder-color);
-  }
-
-  .form-input:disabled {
-    cursor: not-allowed;
-    color: var(--colors-text-text-disabled);
-  }
-  .form-input:disabled::placeholder {
-    color: var(--colors-text-text-disabled);
-  }
-  .form-input:disabled .form-input__hint {
-    color: var(--colors-text-text-disabled);
-  }
-
-  .form-input__hint {
-    font-size: var(--form-input-hint-font-size);
-    line-height: var(--form-input-hint-line-height);
-    color: var(--form-input-hint-color);
-  }
-
-  .form-input__error {
-    color: var(--form-input-error-color);
-    font-size: var(--form-input-error-font-size);
-    line-height: var(--form-input-error-line-height);
-  }
-
-  .icon {
-    width: 20px;
-    height: 20px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .icon svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  .error-icon {
-    color: var(--color-text-conditional-text-error);
-  }
-
-  .success-icon {
-    color: var(--color-text-conditional-text-success);
-  }
-`;var r=class extends P{constructor(){super(...arguments);this.value="";this.type="text";this.disabled=!1;this.error=!1;this.required=!1;this.readonly=!1;this._hasFocus=!1;this._hasBlurred=!1;this._hasBeenValidated=!1;this._showValidationMessage=!1;this._validationMessage=""}checkValidity(){if(!this.input)return!0;let t=this.input.checkValidity();return!t&&!this.error?(this._validationMessage=this.input.validationMessage,this.error=!0,this.errorMessage=this._validationMessage):t&&this.error&&(this.error=!1,this._validationMessage="",this.errorMessage=void 0),this.emit("pop-invalid",{valid:t,validationMessage:this._validationMessage,validity:this.input.validity}),t}handleInput(t){let i=t.target;this.value=i.value,this.emit("pop-input",{value:this.value})}handleFocus(){this._hasFocus=!0,this._showValidationMessage=!1,this.emit("pop-focus")}handleBlur(){this._hasFocus=!1,this._hasBlurred=!0,this._hasBeenValidated=!0,this._showValidationMessage=!0,this.checkValidity(),this.emit("pop-blur")}render(){let t=!!(this._showValidationMessage&&this.errorMessage);return V.html`
-      <div
-        class=${(0,t0.classMap)({"form-input-container":!0})}
-      >
-        <div
-          class=${(0,t0.classMap)({"form-input-wrapper":!0,"has-focus":this._hasFocus,"is-disabled":this.disabled,"form-input-wrapper--has-error":t&&this.error})}
-          part="base"
-        >
-          <slot name="prefix"></slot>
-
-          <input
-            aria-invalid=${this.error?"true":"false"}
-            class="form-input"
-            type=${this.type}
-            placeholder=${(0,y.ifDefined)(this.placeholder)}
-            name=${(0,y.ifDefined)(this.name)}
-            autocomplete=${(0,y.ifDefined)(this.autocomplete)}
-            minlength=${(0,y.ifDefined)(this.minlength)}
-            maxlength=${(0,y.ifDefined)(this.maxlength)}
-            pattern=${(0,y.ifDefined)(this.pattern)}
-            min=${(0,y.ifDefined)(this.min)}
-            max=${(0,y.ifDefined)(this.max)}
-            step=${(0,y.ifDefined)(this.step)}
-            inputmode=${(0,y.ifDefined)(this.inputmode)}
-            .value=${this.value}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            ?readonly=${this.readonly}
-            @input=${this.handleInput}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-            part="input"
-          />
-
-          <slot name="suffix"></slot>
-
-          ${t?this.error?V.html` <pop-icon class="error-icon" name="slash-circle-01" size="20"></pop-icon> `:this.value?V.html` <pop-icon class="success-icon" name="check-circle" size="20"></pop-icon> `:"":""}
-        </div>
-
-        <slot class="form-input__hint" name="hint"></slot>
-
-        ${t?V.html` <div class="form-input__error" part="error">${this.errorMessage}</div> `:V.html`<slot name="hint"></slot>`}
-      </div>
-    `}};r.styles=[o(r,r,"styles"),N0],p([(0,l.property)()],r.prototype,"value",2),p([(0,l.property)()],r.prototype,"placeholder",2),p([(0,l.property)()],r.prototype,"type",2),p([(0,l.property)()],r.prototype,"name",2),p([(0,l.property)()],r.prototype,"autocomplete",2),p([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),p([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"error",2),p([(0,l.property)()],r.prototype,"errorMessage",2),p([(0,l.property)({type:Boolean})],r.prototype,"required",2),p([(0,l.property)({type:Boolean})],r.prototype,"readonly",2),p([(0,l.property)({type:Number})],r.prototype,"minlength",2),p([(0,l.property)({type:Number})],r.prototype,"maxlength",2),p([(0,l.property)()],r.prototype,"pattern",2),p([(0,l.property)({type:Number})],r.prototype,"min",2),p([(0,l.property)({type:Number})],r.prototype,"max",2),p([(0,l.property)({type:Number})],r.prototype,"step",2),p([(0,l.property)()],r.prototype,"inputmode",2),p([(0,l.state)()],r.prototype,"_hasFocus",2),p([(0,l.state)()],r.prototype,"_hasBlurred",2),p([(0,l.state)()],r.prototype,"_hasBeenValidated",2),p([(0,l.state)()],r.prototype,"_showValidationMessage",2),p([(0,l.state)()],r.prototype,"_validationMessage",2),p([(0,l.query)(".form-input")],r.prototype,"input",2),r=p([(0,l.customElement)("pop-form-input-simple")],r);var T0=r;var S0=require("lit"),I=require("lit/decorators.js"),U0=require("lit/directives/class-map.js"),O0=require("lit/directives/style-map.js"),_0=require("lit/directives/unsafe-svg.js");var e0=new Map,Y={};function j0(n,e){e0.set(n,{name:n,resolver:e})}function r0(n,e){if(Y[n]?.[e])return Y[n][e];let t=e0.get(n);if(t){let i=t.resolver(e);if(i)return Y[n]=Y[n]||{},Y[n][e]=i,i}if(n!=="default"&&e0.has("default"))return r0("default",e)}var M0=require("lit"),R0=M0.css`
-  :host {
-    display: inline-block;
-    line-height: 0;
-
-    --icon-color: currentColor;
-  }
-
-  .icon {
-    color: var(--icon-color);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .icon__inner {
-    display: inline-flex;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* SVG inherits color from parent */
-  .icon__inner svg {
-    fill: currentColor;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Stroke-based icons should use stroke instead of fill */
-  .icon__inner svg path[stroke] {
-    fill: none;
-  }
-
-  /* Icon not found */
-  .icon--not-found::after {
-    content: "?";
-    font-family: sans-serif;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-`;var Dp={"check-circle":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>',"slash-circle-01":'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93 4.93L19.07 19.07M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>'};j0("default",n=>Dp[n]);var f=class extends P{constructor(){super(...arguments);this.name="";this.library="default";this.size=24;this.color=""}render(){let t={color:this.color||"inherit",width:`${this.size}px`,height:`${this.size}px`},i=r0(this.library,this.name);return S0.html`
-      <div
-        class=${(0,U0.classMap)({icon:!0,"icon--not-found":!i})}
-        part="base"
-        style=${(0,O0.styleMap)(t)}
-      >
-        <div class="icon__inner" part="icon">${i?(0,_0.unsafeSVG)(i):""}</div>
-      </div>
-    `}};f.styles=[o(f,f,"styles"),R0],p([(0,I.property)()],f.prototype,"name",2),p([(0,I.property)()],f.prototype,"library",2),p([(0,I.property)({type:Number})],f.prototype,"size",2),p([(0,I.property)()],f.prototype,"color",2),f=p([(0,I.customElement)("pop-icon")],f);var pp=f;var N=require("lit"),z=require("lit/decorators.js"),rp=require("lit/directives/class-map.js"),P0=require("lit/directives/when.js");var tp=require("lit"),ep=tp.css`
-  :host {
-    display: block;
-  }
-
-  .loader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-  }
-
-  .loader--theme-default {
-    --foreground: var(--color-brand-midnight-900);
-    --background: var(--color-grayscale-200);
-  }
-
-  .loader--theme-reversed {
-    --foreground: var(--color-grayscale-100);
-    --background: var(--color-brand-midnight-900);
-  }
-
-  .loader--theme-black {
-    --foreground: var(--color-base-black);
-    --background: var(--color-grayscale-300);
-  }
-
-  .loader--theme-white {
-    --foreground: var(--color-base-white);
-    --background: var(--color-grayscale-300);
-  }
-
-  .loader--variant-spinner {
-    animation: spin 1s linear infinite;
-    width: 20px;
-    height: 20px;
-  }
-
-  .loader--variant-spinner {
-    height: 8px;
-    width: 36px;
-  }
-
-  .loader__foreground {
-    fill: var(--foreground);
-  }
-
-  .loader__background {
-    fill: var(--background);
-  }
-
-  .loader--variant-loader {
-    display: flex;
-    position: relative;
-    width: 23px;
-    height: 13px;
-  }
-
-  .loader--variant-loader div {
-    position: absolute;
-    top: 0px;
-    width: 3px;
-    height: 3px;
-    border-radius: 50%;
-    background: var(--color-grayscale-200);
-    animation: wave alternate 0.75s infinite;
-    animation-timing-function: cubic-bezier(0.56, -0.01, 0.48, 1);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .loader--variant-loader div {
-      background: var(--color-grayscale-700);
-    }
-  }
-
-  .loader--variant-loader div:nth-child(1) {
-    animation-delay: 0s;
-    left: 0px;
-  }
-  .loader--variant-loader div:nth-child(2) {
-    animation-delay: 0.04s;
-    left: 1px;
-  }
-  .loader--variant-loader div:nth-child(3) {
-    animation-delay: 0.07s;
-    left: 2px;
-  }
-  .loader--variant-loader div:nth-child(4) {
-    animation-delay: 0.11s;
-    left: 3px;
-  }
-  .loader--variant-loader div:nth-child(5) {
-    animation-delay: 0.14s;
-    left: 4px;
-  }
-  .loader--variant-loader div:nth-child(6) {
-    animation-delay: 0.18s;
-    left: 5px;
-  }
-  .loader--variant-loader div:nth-child(7) {
-    animation-delay: 0.21s;
-    left: 6px;
-  }
-  .loader--variant-loader div:nth-child(8) {
-    animation-delay: 0.25s;
-    left: 7px;
-  }
-  .loader--variant-loader div:nth-child(9) {
-    animation-delay: 0.29s;
-    left: 8px;
-  }
-  .loader--variant-loader div:nth-child(10) {
-    animation-delay: 0.32s;
-    left: 9px;
-  }
-  .loader--variant-loader div:nth-child(11) {
-    animation-delay: 0.36s;
-    left: 10px;
-  }
-  .loader--variant-loader div:nth-child(12) {
-    animation-delay: 0.39s;
-    left: 11px;
-  }
-  .loader--variant-loader div:nth-child(13) {
-    animation-delay: 0.43s;
-    left: 12px;
-  }
-  .loader--variant-loader div:nth-child(14) {
-    animation-delay: 0.46s;
-    left: 13px;
-  }
-  .loader--variant-loader div:nth-child(15) {
-    animation-delay: 0.5s;
-    left: 14px;
-  }
-  .loader--variant-loader div:nth-child(16) {
-    animation-delay: 0.54s;
-    left: 15px;
-  }
-  .loader--variant-loader div:nth-child(17) {
-    animation-delay: 0.57s;
-    left: 16px;
-  }
-  .loader--variant-loader div:nth-child(18) {
-    animation-delay: 0.61s;
-    left: 17px;
-  }
-  .loader--variant-loader div:nth-child(19) {
-    animation-delay: 0.64s;
-    left: 18px;
-  }
-  .loader--variant-loader div:nth-child(20) {
-    animation-delay: 0.68s;
-    left: 19px;
-  }
-  .loader--variant-loader div:nth-child(21) {
-    animation-delay: 0.71s;
-    left: 20px;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes wave {
-    0%,
-    100% {
-      transform: translatey(0px);
-    }
-    50% {
-      transform: translatey(12px);
-    }
-  }
-`;var X=class extends P{constructor(){super(...arguments);this.theme="default";this.variant="spinner"}render(){return N.html`
-      <div
-        class=${(0,rp.classMap)({loader:!0,[`loader--theme-${this.theme}`]:!0,[`loader--variant-${this.variant}`]:!0})}
-        part="base"
-      >
-        ${(0,P0.when)(this.variant==="spinner",()=>N.html`
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <g clip-path="url(#pop_loader_clip_path)">
-                <path
-                  class="loader__foreground"
-                  d="M20 10C20 15.5137 15.5137 20 10 20C4.48627 20 -1.96101e-07 15.5137 -4.37114e-07 10C-6.78127e-07 4.48627 4.48627 -1.96101e-07 10 -4.37114e-07C15.5137 -6.78127e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z"
-                />
-                <path
-                  class="loader__background"
-                  d="M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 0C15.5137 -2.41013e-07 20 4.48627 20 10Z"
-                />
-              </g>
-              <defs>
-                <clipPath id="pop_loader_clip_path">
-                  <rect width="20" height="20" fill="white" transform="translate(0 20) rotate(-90)" />
-                </clipPath>
-              </defs>
-            </svg>
-          `)}
-        ${(0,P0.when)(this.variant==="loader",()=>N.html`
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-          `)}
-      </div>
-    `}};X.styles=[o(X,X,"styles"),ep],p([(0,z.property)({type:String})],X.prototype,"theme",2),p([(0,z.property)({type:String})],X.prototype,"variant",2),X=p([(0,z.customElement)("pop-loader")],X);var Pp=X;var $=require("lit"),D=require("lit/decorators.js"),a0=require("lit/directives/class-map.js"),np=require("lit/directives/when.js");var ap="./popgrids-logomark-letter-2GC4ZJAT.png";var ip="./squircle-L5LSRL2K.gif";var op=require("lit"),lp=op.css`
-  :host {
-    display: block;
-
-    --logo-color: var(--color-text-text-default);
-  }
-
-  svg {
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-    color: var(--logo-color);
-  }
-
-  .logo {
-    color: var(--logo-color);
-  }
-
-  .logo--variant-logo.logo--theme-reversed {
-    color: var(--color-text-text-reversed);
-  }
-
-  .logo--variant-logo.logo--theme-white {
-    color: var(--color-text-text-white);
-  }
-
-  .logo--variant-logo.logo--theme-black {
-    color: var(--color-text-text-black);
-  }
-
-  .logo--variant-icon {
-    display: grid;
-    place-items: center;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .logo--variant-icon__background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .logo--variant-icon .logo--variant-icon__background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  .logo--variant-icon.logo--theme-default .logo--variant-icon__background {
-    background: var(--color-surface-buttons-primary-bg-brand-resting);
-  }
-
-  .logo--variant-icon.logo--theme-reversed .logo--variant-icon__background {
-    background: var(--color-brand-pumpkin-500);
-  }
-
-  .logo--variant-icon.logo--theme-black .logo--variant-icon__background {
-    background: var(--color-border-border-black);
-  }
-
-  .squircle-image {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    inset: 0;
-  }
-
-  .logomark-letter-image {
-    width: 100%;
-    height: auto;
-    position: absolute;
-    transform: scale(0.67);
-  }
-`;var kp=ap,Yp=ip,v=class extends P{constructor(){super(...arguments);this.variant="logo";this.theme="default";this.outline=!1;this.mini=!1}render(){if(this.variant==="logo"&&this.outline)return $.html`
-        <div
-          class=${(0,a0.classMap)({logo:!0,"logo--variant-logo":!0,[`logo--theme-${this.theme}`]:!0})}
-        >
-          <!-- prettier-ignore -->
-          <svg class="pointer-events-none w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 163 28" fill="none">
-            <path d="M12.8208 21.1012C12.8208 24.6215 10.4206 26.8916 6.97043 26.8916C4.50028 26.8916 1.81011 25.6115 1.25008 22.6813C1.05007 21.7313 1.09007 20.7712 0.990064 19.8212C0.76005 17.521 0.500034 15.2209 0.500034 12.8907C0.490033 6.50035 2.69017 0.75 10.5507 0.75C16.041 0.75 20.8113 3.51017 20.8113 9.86056C20.8113 13.9708 18.2511 18.8011 13.1808 18.8011C12.8808 18.8011 12.6208 18.7711 12.3608 18.7011C12.6908 19.3611 12.8208 20.1512 12.8208 21.1012ZM10.0606 17.021C10.8507 17.021 12.1007 17.811 13.1808 17.811C17.4511 17.811 19.8212 13.7008 19.8212 9.86056C19.8212 4.27022 15.711 1.74006 10.5507 1.74006C3.55022 1.74006 1.48009 6.67036 1.48009 12.8807C1.48009 15.1809 1.71011 17.451 1.97012 19.7212C2.07013 20.6112 2.04013 21.5913 2.20014 22.4813C2.63016 24.8115 4.8303 25.9015 6.97043 25.9015C9.90061 25.9015 11.8307 24.0614 11.8307 21.1012C11.8307 19.3911 11.2707 18.2711 9.6606 17.621C9.56059 17.591 9.46058 17.551 9.46058 17.421C9.46058 17.191 9.82061 17.031 10.0506 17.031L10.0606 17.021ZM10.3506 6.70036C10.1906 6.50035 9.96061 6.40035 9.96061 6.14033C9.96061 5.88031 10.2206 5.6503 10.4906 5.6503C11.6107 5.6503 12.1707 8.9405 12.1707 9.79055C12.1707 10.7106 11.8707 13.8308 10.5306 13.8308C10.2706 13.8308 10.0406 13.6008 10.0406 13.3408C10.0406 12.9807 10.5306 12.7207 10.7007 12.4207C11.0607 11.7607 11.1607 10.6406 11.1607 9.89056C11.1607 9.00051 10.9307 7.3604 10.3706 6.70036H10.3506Z" fill="currentColor"/>
-            <path d="M44.7828 14.0008C44.7828 21.1712 40.2125 26.6916 32.682 26.6916C25.1516 26.6916 20.5513 21.2313 20.5513 14.0008C20.5513 6.77037 25.1216 1.31003 32.682 1.31003C40.2425 1.31003 44.7828 6.83037 44.7828 14.0008ZM32.682 25.7015C39.5824 25.7015 43.7927 20.7012 43.7927 14.0008C43.7927 7.3004 39.5824 2.30009 32.682 2.30009C25.7816 2.30009 21.5413 7.23039 21.5413 14.0008C21.5413 20.7712 25.7216 25.7015 32.682 25.7015ZM31.732 8.77049C31.4719 8.44047 30.6419 7.82043 30.6419 7.46041C30.6419 7.20039 30.8719 6.97038 31.1319 6.97038C31.3619 6.97038 31.592 7.17039 31.752 7.3004C33.8521 9.04051 34.4821 13.0207 34.4821 15.6209C34.4821 17.661 34.2821 20.7112 32.972 22.3613C32.842 22.5613 32.642 22.7513 32.382 22.7513C32.122 22.7513 31.852 22.5213 31.852 22.2613C31.852 22.1613 32.712 20.8812 32.842 20.4912C33.3721 18.9411 33.4621 17.271 33.4621 15.6209C33.4621 13.4208 33.072 10.5906 31.722 8.78049L31.732 8.77049Z" fill="currentColor"/>
-            <path d="M57.2835 21.1013C57.2835 24.6215 54.8834 26.8916 51.4331 26.8916C48.963 26.8916 46.2728 25.6115 45.7128 22.6814C45.5128 21.7313 45.5528 20.7712 45.4528 19.8212C45.2228 17.521 44.9627 15.2209 44.9627 12.8908C44.9627 6.51036 47.1629 0.76001 55.0234 0.76001C60.5137 0.76001 65.284 3.52018 65.284 9.87057C65.284 13.9808 62.7238 18.8111 57.6535 18.8111C57.3535 18.8111 57.0935 18.7811 56.8335 18.7111C57.1635 19.3711 57.2935 20.1612 57.2935 21.1113L57.2835 21.1013ZM54.5233 17.021C55.3134 17.021 56.5635 17.8111 57.6435 17.8111C61.9138 17.8111 64.2839 13.7008 64.2839 9.86057C64.2839 4.27022 60.1737 1.74007 55.0134 1.74007C48.0129 1.74007 45.9428 6.67037 45.9428 12.8808C45.9428 15.1809 46.1728 17.451 46.4328 19.7212C46.5328 20.6112 46.5028 21.5913 46.6628 22.4813C47.0929 24.8115 49.293 25.9016 51.4331 25.9016C54.3633 25.9016 56.2934 24.0614 56.2934 21.1013C56.2934 19.3912 55.7334 18.2711 54.1233 17.621C54.0233 17.591 53.9233 17.551 53.9233 17.421C53.9233 17.191 54.2833 17.031 54.5133 17.031L54.5233 17.021ZM54.8234 6.70037C54.6633 6.50036 54.4333 6.40036 54.4333 6.14034C54.4333 5.88032 54.6933 5.65031 54.9634 5.65031C56.0834 5.65031 56.6435 8.94051 56.6435 9.79056C56.6435 10.7106 56.3434 13.8308 55.0034 13.8308C54.7433 13.8308 54.5133 13.6008 54.5133 13.3408C54.5133 12.9808 55.0034 12.7207 55.1734 12.4207C55.5334 11.7607 55.6334 10.6406 55.6334 9.89057C55.6334 9.00051 55.4034 7.36041 54.8433 6.70037H54.8234Z" fill="currentColor"/>
-            <path d="M87.9054 18.7011C87.9054 25.1115 81.855 27.2516 77.0247 27.2516C69.0742 27.2516 65.054 22.1613 65.054 14.6309C65.054 6.48037 69.9843 0.890023 78.3648 0.890023C81.885 0.890023 86.6853 2.04009 86.6853 6.45036C86.6853 8.42048 85.6053 10.4006 83.7952 11.2807C86.4253 12.6907 87.9054 15.6809 87.9054 18.7111V18.7011ZM80.3749 18.6311C80.3749 19.5812 78.5348 20.0112 77.8148 20.0112C75.2846 20.0112 73.9346 17.8411 73.9346 15.5409C73.9346 12.7107 76.5947 10.5406 79.2949 10.5406C80.0849 10.5406 80.905 10.7706 81.695 10.7706C84.0252 10.7706 85.7053 8.6705 85.7053 6.43036C85.7053 2.72014 81.305 1.86008 78.3748 1.86008C70.5843 1.86008 66.0441 6.92039 66.0441 14.6109C66.0441 21.7113 69.7243 26.2516 77.0247 26.2516C81.755 26.2516 86.9153 24.2115 86.9153 18.6911C86.9153 14.9109 84.4452 11.4607 80.435 11.4607C78.0648 11.4607 74.7846 12.5507 74.7846 15.3709C74.7846 16.981 75.9647 19.3812 77.8448 19.3812C79.0249 19.3812 79.7849 18.4611 80.1749 18.4611C80.2749 18.4611 80.3749 18.5311 80.3749 18.6211V18.6311Z" fill="currentColor"/>
-            <path d="M93.4058 27.0116C90.1856 27.0116 88.1754 24.4814 88.1754 21.5213V17.541C88.1754 16.1609 88.1454 14.7508 88.1754 13.4008C88.2755 8.83048 89.3555 4.79023 93.6958 2.39008C95.3059 1.50003 97.146 0.979995 99.0161 0.979995C104.106 0.979995 109.037 4.3302 109.037 10.0506C109.037 12.7507 107.787 14.9809 105.647 16.3909C107.847 17.111 109.657 19.0511 109.657 21.6213C109.657 24.7815 107.097 26.8816 104.166 26.8816C101.466 26.8816 99.5661 25.1115 98.3161 22.9013C97.826 25.1015 96.2159 27.0116 93.3858 27.0116H93.4058ZM97.616 19.4511C97.716 19.4511 97.816 19.5211 97.876 19.5511C99.0261 22.3413 100.606 25.8915 104.186 25.8915C106.657 25.8915 108.687 24.1514 108.687 21.6213C108.687 19.0911 106.317 17.051 103.826 17.051C103.236 17.051 102.736 17.281 102.246 17.281C102.146 17.281 102.116 17.181 102.116 17.121C102.116 16.891 102.216 16.791 102.376 16.731C102.936 16.5309 103.526 16.4009 104.086 16.1409C106.587 14.9609 108.067 12.8507 108.067 10.0606C108.067 5.03024 103.756 1.97006 99.0261 1.97006C97.316 1.97006 95.6359 2.46009 94.1958 3.25013C90.2556 5.39026 89.4955 8.44045 89.2655 12.6207C89.1655 14.2608 89.1655 15.9109 89.1655 17.551V21.5313C89.1655 24.0314 90.8056 26.0315 93.4058 26.0315C95.2759 26.0315 96.956 24.6814 97.386 22.9113C97.616 21.8613 97.486 20.6112 97.486 19.5911C97.486 19.4911 97.516 19.4611 97.616 19.4611V19.4511ZM98.3061 6.70035C98.1461 6.50033 97.946 6.40033 97.946 6.14031C97.946 5.88029 98.1761 5.65028 98.4361 5.65028C99.5561 5.65028 100.116 8.94048 100.116 9.79053C100.116 10.7106 99.8562 13.8308 98.4761 13.8308C98.2161 13.8308 97.986 13.6008 97.986 13.3408C97.986 12.9807 98.4761 12.7207 98.6461 12.4207C99.0061 11.7607 99.1061 10.6406 99.1061 9.89054C99.1061 9.00049 98.8761 7.36039 98.3161 6.70035H98.3061Z" fill="currentColor"/>
-            <path d="M110.177 19.1611C110.177 15.0209 110.277 10.9106 110.277 6.80036C110.277 3.97019 112.087 1.24002 115.367 1.24002C116.457 1.24002 117.797 1.50004 118.787 2.22008C120.927 3.70017 120.957 5.7703 120.957 7.64041V12.7707C120.957 14.4808 120.927 16.1909 120.927 17.901C120.927 18.5911 120.957 19.6712 120.927 20.7612C120.897 21.8113 120.827 23.0314 120.467 23.9214C119.677 25.9215 117.407 27.1716 115.407 27.1716C112.647 27.1716 110.177 24.9715 110.177 22.0813V19.1511V19.1611ZM115.407 26.1915C117.087 26.1915 118.927 25.1415 119.547 23.5614C119.907 22.6713 119.937 21.4213 119.937 20.4712V17.911L119.967 12.7807V7.65041C119.967 5.7403 119.937 4.2302 118.227 3.02013C117.437 2.4901 116.317 2.23008 115.367 2.23008C113.297 2.23008 111.527 3.87018 111.287 5.91031C111.217 6.50034 111.257 7.06038 111.257 7.69042V13.2808L111.157 19.1611V22.0913C111.157 24.3914 113.127 26.2016 115.397 26.2016L115.407 26.1915Z" fill="currentColor"/>
-            <path d="M122.058 7.00037C122.058 3.09013 124.198 1.05001 128.078 1.05001C137.608 1.05001 142.539 5.62029 142.539 15.3209C142.539 23.5414 137.148 26.8616 129.748 26.8616C124.658 26.8616 121.827 24.1614 121.827 19.0411C121.827 17.791 121.988 16.541 122.058 15.2909C122.188 12.5607 122.058 9.77054 122.058 7.01037V7.00037ZM129.748 25.8615C136.788 25.8615 141.549 22.8413 141.549 15.3109C141.549 6.24032 137.178 2.03007 128.068 2.03007C124.718 2.03007 123.038 3.61016 123.038 6.99037V8.34045L123.068 11.0006V12.3507C123.068 13.3708 123.068 14.3208 123.038 15.3409C122.968 16.561 122.808 17.771 122.808 19.0211C122.808 23.6214 125.178 25.8615 129.738 25.8615H129.748ZM130.798 9.53053C130.638 9.27051 130.308 9.0705 130.308 8.74048C130.308 8.48046 130.538 8.25045 130.798 8.25045C131.288 8.25045 131.978 9.50052 132.178 9.93055C132.798 11.3806 132.898 12.9507 132.898 14.5008C132.898 15.4509 132.408 20.2212 131.218 20.2212C130.958 20.2212 130.728 19.9912 130.728 19.7312C130.728 19.6311 130.758 19.5711 130.828 19.4711C131.678 18.061 131.908 16.0809 131.908 14.4708C131.908 12.9607 131.748 10.7206 130.788 9.54053L130.798 9.53053Z" fill="currentColor"/>
-            <path d="M144.059 14.7508C143.009 13.7608 142.779 11.8907 142.779 10.5106C142.779 4.79023 147.019 1.11001 152.539 1.11001C155.86 1.11001 162.5 2.79011 162.5 8.01043C162.5 10.2106 161.19 11.9607 159.38 12.8807C161.75 13.5708 162.5 16.0009 162.5 17.941C162.5 23.9214 156.22 27.1116 151.389 27.1116C147.219 27.1116 142.709 24.5514 142.709 19.5511C142.709 18.071 143.139 16.1309 144.419 15.0109C144.289 14.9409 144.189 14.8509 144.059 14.7508ZM151.849 16.891C151.949 17.051 152.049 17.321 152.049 17.511C152.049 17.581 152.049 17.671 151.979 17.641C151.779 17.571 151.619 17.411 151.489 17.281C150.339 16.1609 148.759 15.0509 147.089 15.0509C144.589 15.0509 143.699 17.451 143.699 19.5511C143.699 23.7914 147.509 26.1215 151.389 26.1215C155.99 26.1215 161.52 23.1014 161.52 17.941C161.52 16.0309 160.7 13.9008 158.56 13.7008C156.65 13.5408 153.929 12.8807 152.449 11.6307C152.249 11.4706 151.919 11.2406 151.919 10.9406C151.919 10.8406 151.949 10.6806 152.079 10.6806C152.439 10.6806 154.74 12.5207 156.71 12.5207C159.21 12.5207 161.51 10.5806 161.51 8.02043C161.51 3.81017 155.92 2.10007 152.539 2.10007C147.509 2.10007 143.759 5.35027 143.759 10.5206C143.759 11.6407 143.919 13.1807 144.749 14.0408C145.139 14.4708 145.799 14.4708 146.329 14.4708C148.299 14.4708 150.799 15.0909 151.849 16.901V16.891Z" fill="currentColor"/>
-          </svg>
-        </div>
-      `;if(this.variant==="logo"&&!this.outline&&!this.mini)return $.html`
-        <!-- prettier-ignore -->
-        <svg width="185" height="32" viewBox="0 0 185 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M11.3056 0.708572C2.58086 0.708572 0 6.85714 0 14.6057C0 17.4743 0.285494 20.2971 0.616667 23.1314C0.742284 24.24 0.696605 25.4629 0.902161 26.5714C1.43889 29.4857 4.17963 30.8343 6.84043 30.8343C10.4833 30.8343 12.9043 28.5371 12.9043 24.8571C12.9043 22.7314 12.2077 21.3371 10.1978 20.5143C10.0722 20.4686 9.9466 20.4343 9.9466 20.2629C9.9466 19.9771 10.4034 19.7714 10.6889 19.7714C11.671 19.7714 13.2241 20.7543 14.583 20.7543C19.9046 20.7543 22.8509 15.6343 22.8509 10.8343C22.8509 3.86286 17.7235 0.708572 11.3056 0.708572ZM11.2599 15.7829C10.9287 15.7829 10.6432 15.4971 10.6432 15.1657C10.6432 14.72 11.2599 14.3886 11.4654 14.0229C11.9108 13.2 12.0364 11.8057 12.0364 10.8686C12.0364 9.76 11.7509 7.71429 11.0543 6.89143C10.8488 6.65143 10.5633 6.52572 10.5633 6.19429C10.5633 5.86286 10.8944 5.57714 11.2142 5.57714C12.6074 5.57714 13.304 9.68 13.304 10.7429C13.304 11.8857 12.9386 15.7829 11.2599 15.7829Z" fill="currentColor"/>
-          <path d="M36.8173 1.4057C28.1383 1.4057 22.9309 7.55427 22.9309 15.9886C22.9309 24.4228 28.1269 30.5714 36.8173 30.5714C45.5077 30.5714 50.658 24.3428 50.658 15.9886C50.658 7.63427 45.4164 1.4057 36.8173 1.4057ZM37.1942 26.4C37.0571 26.5714 36.783 26.8914 36.4519 26.8914C36.1207 26.8914 35.8009 26.6057 35.8009 26.2743C35.8009 26.1486 36.863 24.5486 37.0343 24.0571C37.6852 22.1257 37.8108 20.0343 37.8108 17.9886C37.8108 15.2457 37.3198 11.7143 35.6411 9.46284C35.3099 9.05141 34.2935 8.27427 34.2935 7.82856C34.2935 7.49713 34.579 7.21141 34.9102 7.21141C35.1957 7.21141 35.4812 7.46284 35.6867 7.62284C38.3019 9.79427 39.0898 14.7543 39.0898 17.9886C39.0898 20.5257 38.9871 24.2286 37.2056 26.3886L37.1942 26.4Z" fill="currentColor"/>
-          <path d="M62.5916 0.708572C53.8669 0.708572 51.2861 6.85714 51.2861 14.6057C51.2861 17.4743 51.5716 20.2971 51.9027 23.1314C52.0284 24.24 51.9827 25.4629 52.1882 26.5714C52.725 29.4857 55.4657 30.8343 58.1265 30.8343C61.7694 30.8343 64.1904 28.5371 64.1904 24.8571C64.1904 22.7314 63.4938 21.3371 61.4839 20.5143C61.3583 20.4686 61.2327 20.4343 61.2327 20.2629C61.2327 19.9771 61.6895 19.7714 61.975 19.7714C62.9571 19.7714 64.5102 20.7543 65.8691 20.7543C71.1907 20.7543 74.137 15.6343 74.137 10.8343C74.137 3.86286 69.021 0.708572 62.5916 0.708572ZM62.5574 15.7829C62.2262 15.7829 61.9407 15.4971 61.9407 15.1657C61.9407 14.72 62.5574 14.3886 62.7629 14.0229C63.2083 13.2 63.3339 11.8057 63.3339 10.8686C63.3339 9.76 63.0484 7.71429 62.3518 6.89143C62.1463 6.65143 61.8608 6.52572 61.8608 6.19429C61.8608 5.86286 62.1919 5.57714 62.5117 5.57714C63.9049 5.57714 64.6015 9.68 64.6015 10.7429C64.6015 11.8857 64.2361 15.7829 62.5574 15.7829Z" fill="currentColor"/>
-          <path d="M92.2145 12.8343C89.2682 12.8343 85.1686 14.1829 85.1686 17.7143C85.1686 19.7257 86.6417 22.7086 88.9827 22.7086C90.4559 22.7086 91.4037 21.5657 91.8948 21.5657C92.0204 21.5657 92.1346 21.6457 92.1346 21.7715C92.1346 22.96 89.8392 23.4972 88.9371 23.4972C85.7852 23.4972 84.1065 20.7886 84.1065 17.92C84.1065 14.4 87.4182 11.6915 90.7757 11.6915C91.7577 11.6915 92.7855 11.9772 93.7676 11.9772C96.6797 11.9772 98.7581 9.36003 98.7581 6.57146C98.7581 1.94289 93.2766 0.880029 89.6223 0.880029C79.9155 0.880029 74.2627 7.1886 74.2627 16.7772C74.2627 25.6343 78.8534 31.28 87.9436 31.28C93.8361 31.28 100.265 28.7429 100.265 21.8515C100.265 17.1429 97.1935 12.8343 92.2031 12.8343H92.2145Z" fill="currentColor"/>
-          <path d="M119.291 19.8057C118.548 19.8057 117.943 20.0914 117.326 20.0914C117.201 20.0914 117.167 19.9657 117.167 19.8857C117.167 19.6 117.292 19.4743 117.498 19.3943C118.194 19.1543 118.937 18.9829 119.622 18.6514C122.739 17.1771 124.578 14.5486 124.578 11.0743C124.578 4.8 119.211 0.994287 113.318 0.994287C111.183 0.994287 109.104 1.61143 107.3 2.59429C102.389 5.25714 101.442 9.07429 101.156 14.2743C101.031 16.32 101.031 18.3771 101.031 20.4229V25.3829C101.031 28.4914 103.075 30.9943 106.306 30.9943C108.636 30.9943 110.726 29.3143 111.263 27.0971C111.548 25.7829 111.388 24.2286 111.388 22.96C111.388 22.8343 111.434 22.8 111.548 22.8C111.662 22.8 111.799 22.88 111.879 22.9257C113.318 26.4114 115.282 30.8343 119.736 30.8343C122.808 30.8343 125.343 28.6629 125.343 25.5086C125.343 22.3543 122.397 19.8171 119.279 19.8171L119.291 19.8057ZM112.622 15.7829C112.29 15.7829 112.005 15.4971 112.005 15.1657C112.005 14.72 112.622 14.3886 112.827 14.0229C113.272 13.2 113.398 11.8057 113.398 10.8686C113.398 9.76 113.113 7.71429 112.416 6.89143C112.21 6.65143 111.971 6.52572 111.971 6.19429C111.971 5.86286 112.256 5.57714 112.587 5.57714C113.981 5.57714 114.677 9.68 114.677 10.7429C114.677 11.8857 114.346 15.7829 112.633 15.7829H112.622Z" fill="currentColor"/>
-          <path d="M135.187 2.30855C134.205 1.65712 132.812 1.32569 131.624 1.32569C129.043 1.32569 126.828 3.3714 126.542 5.91998C126.462 6.66283 126.497 7.35998 126.497 8.13712V15.0971L126.371 22.4343V26.08C126.371 28.9485 128.826 31.2 131.658 31.2C133.748 31.2 136.044 29.8857 136.82 27.92C137.265 26.8114 137.311 25.2571 137.311 24.0685V20.8685L137.357 14.48V8.0914C137.357 5.71426 137.311 3.82855 135.187 2.30855Z" fill="currentColor"/>
-          <path d="M145.396 1.07428C141.217 1.07428 139.127 3.04 139.127 7.25714V8.93714L139.173 12.2514V13.9314C139.173 15.2 139.173 16.3886 139.127 17.6571C139.047 19.1771 138.841 20.6857 138.841 22.2514C138.841 27.9886 141.788 30.7771 147.486 30.7771C156.245 30.7771 162.183 27.0057 162.183 17.6229C162.183 6.30857 156.736 1.06286 145.396 1.06286V1.07428ZM149.325 23.7371C148.994 23.7371 148.708 23.4514 148.708 23.12C148.708 22.9943 148.754 22.9143 148.834 22.7886C149.896 21.0286 150.181 18.5714 150.181 16.56C150.181 14.6743 149.976 11.8857 148.788 10.4114C148.582 10.08 148.171 9.84 148.171 9.42857C148.171 9.09714 148.457 8.81143 148.788 8.81143C149.405 8.81143 150.261 10.3657 150.512 10.9029C151.289 12.7086 151.415 14.6743 151.415 16.5943C151.415 17.7829 150.798 23.7257 149.325 23.7257V23.7371Z" fill="currentColor"/>
-          <path d="M181.311 15.6229C178.936 15.4172 175.533 14.5943 173.694 13.04C173.455 12.8343 173.044 12.5486 173.044 12.1829C173.044 12.0572 173.089 11.8515 173.249 11.8515C173.694 11.8515 176.561 14.1486 179.027 14.1486C182.145 14.1486 185 11.7257 185 8.53717C185 3.29146 178.045 1.16574 173.82 1.16574C167.551 1.16574 162.891 5.22289 162.891 11.6572C162.891 13.0515 163.097 14.9715 164.125 16.0457C164.616 16.5829 165.438 16.5829 166.089 16.5829C168.544 16.5829 171.662 17.36 172.964 19.6115C173.089 19.8172 173.203 20.1486 173.203 20.3886C173.203 20.4686 173.203 20.5943 173.123 20.5486C172.884 20.4686 172.678 20.2629 172.507 20.1029C171.068 18.7086 169.104 17.3143 167.025 17.3143C163.908 17.3143 162.811 20.3086 162.811 22.9257C162.811 28.2057 167.562 31.12 172.393 31.12C178.125 31.12 185 27.3486 185 20.9143C185 18.5372 183.972 15.8743 181.311 15.6343V15.6229Z" fill="currentColor"/>
-        </svg>
-      `;if(this.variant==="logo"&&!this.outline&&this.mini){if(this.theme==="default")return $.html`
-          <!-- prettier-ignore -->
-          <svg width="97" height="32" viewBox="0 0 97 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M11.3056 0.708496C2.58086 0.708496 0 6.85707 0 14.6056C0 17.4742 0.285494 20.2971 0.616667 23.1314C0.742284 24.2399 0.696605 25.4628 0.902161 26.5714C1.43889 29.4856 4.17963 30.8342 6.84043 30.8342C10.4833 30.8342 12.9043 28.5371 12.9043 24.8571C12.9043 22.7314 12.2077 21.3371 10.1978 20.5142C10.0722 20.4685 9.9466 20.4342 9.9466 20.2628C9.9466 19.9771 10.4034 19.7714 10.6889 19.7714C11.671 19.7714 13.2241 20.7542 14.583 20.7542C19.9046 20.7542 22.8509 15.6342 22.8509 10.8342C22.8509 3.86278 17.7235 0.708496 11.3056 0.708496ZM11.2599 15.7828C10.9287 15.7828 10.6432 15.4971 10.6432 15.1656C10.6432 14.7199 11.2599 14.3885 11.4654 14.0228C11.9108 13.1999 12.0364 11.8056 12.0364 10.8685C12.0364 9.75992 11.7509 7.71421 11.0543 6.89135C10.8488 6.65135 10.5633 6.52564 10.5633 6.19421C10.5633 5.86278 10.8944 5.57707 11.2142 5.57707C12.6074 5.57707 13.304 9.67992 13.304 10.7428C13.304 11.8856 12.9386 15.7828 11.2599 15.7828Z" fill="black"/>
-            <path d="M36.8173 1.40562C28.1383 1.40562 22.9309 7.55419 22.9309 15.9885C22.9309 24.4228 28.1269 30.5713 36.8173 30.5713C45.5077 30.5713 50.658 24.3428 50.658 15.9885C50.658 7.63419 45.4164 1.40562 36.8173 1.40562ZM37.1942 26.3999C37.0571 26.5713 36.783 26.8913 36.4519 26.8913C36.1207 26.8913 35.8009 26.6056 35.8009 26.2742C35.8009 26.1485 36.863 24.5485 37.0343 24.057C37.6852 22.1256 37.8108 20.0342 37.8108 17.9885C37.8108 15.2456 37.3198 11.7142 35.6411 9.46276C35.3099 9.05134 34.2935 8.27419 34.2935 7.82848C34.2935 7.49705 34.579 7.21134 34.9102 7.21134C35.1957 7.21134 35.4812 7.46277 35.6867 7.62277C38.3019 9.79419 39.0898 14.7542 39.0898 17.9885C39.0898 20.5256 38.9871 24.2285 37.2056 26.3885L37.1942 26.3999Z" fill="black"/>
-            <path d="M62.5916 0.708496C53.8669 0.708496 51.2861 6.85707 51.2861 14.6056C51.2861 17.4742 51.5716 20.2971 51.9027 23.1314C52.0284 24.2399 51.9827 25.4628 52.1882 26.5714C52.725 29.4856 55.4657 30.8342 58.1265 30.8342C61.7694 30.8342 64.1904 28.5371 64.1904 24.8571C64.1904 22.7314 63.4938 21.3371 61.4839 20.5142C61.3583 20.4685 61.2327 20.4342 61.2327 20.2628C61.2327 19.9771 61.6895 19.7714 61.975 19.7714C62.9571 19.7714 64.5102 20.7542 65.8691 20.7542C71.1907 20.7542 74.137 15.6342 74.137 10.8342C74.137 3.86278 69.021 0.708496 62.5916 0.708496ZM62.5574 15.7828C62.2262 15.7828 61.9407 15.4971 61.9407 15.1656C61.9407 14.7199 62.5574 14.3885 62.7629 14.0228C63.2083 13.1999 63.3339 11.8056 63.3339 10.8685C63.3339 9.75992 63.0484 7.71421 62.3518 6.89135C62.1463 6.65135 61.8608 6.52564 61.8608 6.19421C61.8608 5.86278 62.1919 5.57707 62.5117 5.57707C63.9049 5.57707 64.6015 9.67992 64.6015 10.7428C64.6015 11.8856 64.2361 15.7828 62.5574 15.7828Z" fill="black"/>
-            <path d="M93 15.6228C90.6247 15.4171 87.2216 14.5942 85.383 13.04C85.1432 12.8342 84.7321 12.5485 84.7321 12.1828C84.7321 12.0571 84.7778 11.8514 84.9377 11.8514C85.383 11.8514 88.2494 14.1485 90.716 14.1485C93.8336 14.1485 96.6886 11.7257 96.6886 8.5371C96.6886 3.29138 89.7339 1.16567 85.5086 1.16567C79.2392 1.16567 74.5799 5.22281 74.5799 11.6571C74.5799 13.0514 74.7855 14.9714 75.8133 16.0457C76.3043 16.5828 77.1265 16.5828 77.7775 16.5828C80.2327 16.5828 83.3503 17.36 84.6521 19.6114C84.7778 19.8171 84.892 20.1485 84.892 20.3885C84.892 20.4685 84.892 20.5942 84.812 20.5485C84.5722 20.4685 84.3667 20.2628 84.1954 20.1028C82.7565 18.7085 80.7923 17.3142 78.7139 17.3142C75.5963 17.3142 74.5 20.3085 74.5 22.9257C74.5 28.2057 79.2506 31.12 84.0812 31.12C89.8139 31.12 96.6886 27.3485 96.6886 20.9142C96.6886 18.5371 95.6608 15.8742 93 15.6342V15.6228Z" fill="black"/>
-          </svg>
-        `;if(this.theme==="reversed")return $.html`
-          <!-- prettier-ignore -->
-          <svg viewBox="0 0 97 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M11.3056 0.619987C2.58086 0.619987 0 5.99999 0 12.78C0 15.29 0.285494 17.76 0.616667 20.24C0.742284 21.21 0.696605 22.28 0.902161 23.25C1.43889 25.8 4.17963 26.98 6.84043 26.98C10.4833 26.98 12.9043 24.97 12.9043 21.75C12.9043 19.89 12.2077 18.67 10.1978 17.95C10.0722 17.91 9.9466 17.88 9.9466 17.73C9.9466 17.48 10.4034 17.3 10.6889 17.3C11.671 17.3 13.2241 18.16 14.583 18.16C19.9046 18.16 22.8509 13.68 22.8509 9.47999C22.8509 3.37999 17.7235 0.619987 11.3056 0.619987ZM11.2599 13.81C10.9287 13.81 10.6432 13.56 10.6432 13.27C10.6432 12.88 11.2599 12.59 11.4654 12.27C11.9108 11.55 12.0364 10.33 12.0364 9.50999C12.0364 8.53999 11.7509 6.74999 11.0543 6.02999C10.8488 5.81999 10.5633 5.71 9.75 5.42C9.75 5.13 10.04 4.88 10.32 4.88C11.54 4.88 12.15 8.47 12.15 9.39999C12.15 10.4 11.83 13.81 11.2599 13.81Z" fill="currentColor"/>
-          <path d="M36.8173 1.22997C28.1383 1.22997 22.9309 6.60997 22.9309 13.99C22.9309 21.37 28.1269 26.75 36.8173 26.75C45.5077 26.75 50.658 21.3 50.658 13.99C50.658 6.67997 45.4164 1.22997 36.8173 1.22997ZM37.1942 23.1C37.0571 23.25 36.783 23.53 36.4519 23.53C36.1207 23.53 35.8009 23.28 35.8009 22.99C35.8009 22.88 36.863 21.48 37.0343 21.05C37.6852 19.36 37.8108 17.53 37.8108 15.74C37.8108 13.34 37.3198 10.25 35.6411 8.27997C35.3099 7.91997 34.2935 7.23997 34.2935 6.84997C34.2935 6.55997 34.579 6.30997 34.9102 6.30997C35.1957 6.30997 35.4812 6.52997 35.6867 6.66997C38.3019 8.56997 39.0898 12.91 39.0898 15.74C39.0898 17.96 38.9871 21.2 37.2056 23.09L37.1942 23.1Z" fill="currentColor"/>
-          <path d="M62.5916 0.619987C53.8669 0.619987 51.2861 5.99999 51.2861 12.78C51.2861 15.29 51.5716 17.76 51.9027 20.24C52.0284 21.21 51.9827 22.28 52.1882 23.25C52.725 25.8 55.4657 26.98 58.1265 26.98C61.7694 26.98 64.1904 24.97 64.1904 21.75C64.1904 19.89 63.4938 18.67 61.4839 17.95C61.3583 17.91 61.2327 17.88 61.2327 17.73C61.2327 17.48 61.6895 17.3 61.975 17.3C62.9571 17.3 64.5102 18.16 65.8691 18.16C71.1907 18.16 74.137 13.68 74.137 9.47999C74.137 3.37999 69.021 0.619987 62.5916 0.619987ZM62.5574 13.81C62.2262 13.81 61.9407 13.56 61.9407 13.27C61.9407 12.88 62.5574 12.59 62.7629 12.27C63.2083 11.55 63.3339 10.33 63.3339 9.50999C63.3339 8.53999 63.0484 6.74999 62.3518 6.02999C62.1463 5.81999 61.8608 5.71 9.75 5.42C9.75 5.13 10.04 4.88 10.32 4.88C11.54 4.88 12.15 8.47 12.15 9.39999C12.15 10.4 11.83 13.81 11.2599 13.81Z" fill="currentColor"/>
-          <path d="M93 13.67C90.6247 13.49 87.2216 12.77 85.383 11.41C85.1432 11.23 84.7321 10.98 84.7321 10.66C84.7321 10.55 84.7778 10.37 84.9377 10.37C85.383 10.37 88.2494 12.38 90.716 12.38C93.8336 12.38 96.6886 10.26 96.6886 7.47001C96.6886 2.88001 89.7339 1.02001 85.5086 1.02001C79.2392 1.02001 74.5799 4.57001 74.5799 10.2C74.5799 11.42 74.7855 13.1 75.8133 14.04C76.3043 14.51 77.1265 14.51 77.7775 14.51C80.2327 14.51 83.3503 15.19 84.6521 17.16C84.7778 17.34 84.892 17.63 84.892 17.84C84.892 17.91 84.892 18.02 84.812 17.98C84.5722 17.91 84.3667 17.73 84.1954 17.59C82.7565 16.37 80.7923 15.15 78.7139 15.15C75.5963 15.15 74.5 17.77 74.5 20.06C74.5 24.68 79.2506 27.23 84.0812 27.23C89.8139 27.23 96.6886 23.93 96.6886 18.3C96.6886 16.22 95.6608 13.89 93 13.68V13.67Z" fill="currentColor"/>
-        </svg>
-        `}if(this.variant==="logo"&&!this.outline&&this.mini)return $.html`
-        <!-- prettier-ignore -->
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 163 28" fill="none">
-          <path d="M10.4 0.619995C2.76 0.619995 0.5 5.99999 0.5 12.78C0.5 15.29 0.75 17.76 1.04 20.24C1.15 21.21 1.11 22.28 1.29 23.25C1.76 25.8 4.16 26.98 6.49 26.98C9.68 26.98 11.8 24.97 11.8 21.75C11.8 19.89 11.19 18.67 9.43 17.95C9.32 17.91 9.21 17.88 9.21 17.73C9.21 17.48 9.61 17.3 9.86 17.3C10.72 17.3 12.08 18.16 13.27 18.16C17.93 18.16 20.51 13.68 20.51 9.47999C20.51 3.37999 16.02 0.619995 10.4 0.619995ZM10.36 13.81C10.07 13.81 9.82 13.56 9.82 13.27C9.82 12.88 10.36 12.59 10.54 12.27C10.93 11.55 11.04 10.33 11.04 9.51C11.04 8.54 10.79 6.75 10.18 6.02999C10 5.81999 9.75 5.71 9.75 5.42C9.75 5.13 10.04 4.88 10.32 4.88C11.54 4.88 12.15 8.47 12.15 9.39999C12.15 10.4 11.83 13.81 11.2599 13.81Z" fill="currentColor"/>
-          <path d="M32.74 1.22998C25.14 1.22998 20.58 6.60998 20.58 13.99C20.58 21.37 25.13 26.75 32.74 26.75C40.35 26.75 44.86 21.3 44.86 13.99C44.86 6.67998 40.27 1.22998 32.74 1.22998ZM33.07 23.1C32.95 23.25 32.71 23.53 32.42 23.53C32.13 23.53 31.85 23.28 31.85 22.99C31.85 22.88 32.78 21.48 32.93 21.05C33.5 19.36 33.61 17.53 33.61 15.74C33.61 13.34 33.18 10.25 31.71 8.27998C31.42 7.91998 30.53 7.23998 30.53 6.84998C30.53 6.55998 30.78 6.30998 31.07 6.30998C31.32 6.30998 31.57 6.52998 31.75 6.66998C34.04 8.56998 34.73 12.91 34.73 15.74C34.73 17.96 34.64 21.2 33.08 23.09L33.07 23.1Z" fill="currentColor"/>
-          <path d="M55.31 0.619995C47.67 0.619995 45.41 5.99999 45.41 12.78C45.41 15.29 45.66 17.76 45.95 20.24C46.06 21.21 46.02 22.28 46.2 23.25C46.67 25.8 49.07 26.98 51.4 26.98C54.59 26.98 56.71 24.97 56.71 21.75C56.71 19.89 56.1 18.67 54.34 17.95C54.23 17.91 54.12 17.88 54.12 17.73C54.12 17.48 54.52 17.3 54.77 17.3C55.63 17.3 56.99 18.16 58.18 18.16C62.84 18.16 65.42 13.68 65.42 9.47999C65.42 3.37999 60.94 0.619995 55.31 0.619995ZM55.28 13.81C54.99 13.81 54.74 13.56 54.74 13.27C54.74 12.88 55.28 12.59 55.46 12.27C55.85 11.55 55.96 10.33 55.96 9.51C55.96 8.54 55.71 6.75 55.1 6.02999C54.92 5.81999 54.67 5.71 54.67 5.42C54.67 5.13 54.96 4.88 55.24 4.88C56.46 4.88 57.07 8.47 57.07 9.39999C57.07 10.4 56.75 13.81 55.28 13.81Z" fill="currentColor"/>
-          <path d="M81.25 11.23C78.67 11.23 75.08 12.41 75.08 15.5C75.08 17.26 76.37 19.87 78.42 19.87C79.71 19.87 80.54 18.87 80.97 18.87C81.08 18.87 81.18 18.94 81.18 19.05C81.18 20.09 79.17 20.56 78.38 20.56C75.62 20.56 74.15 18.19 74.15 15.68C74.15 12.6 77.05 10.23 79.99 10.23C80.85 10.23 81.75 10.48 82.61 10.48C85.16 10.48 86.98 8.19002 86.98 5.75002C86.98 1.70002 82.18 0.77002 78.98 0.77002C70.48 0.77002 65.53 6.29002 65.53 14.68C65.53 22.43 69.55 27.37 77.51 27.37C82.67 27.37 88.3 25.15 88.3 19.12C88.3 15 85.61 11.23 81.24 11.23H81.25Z" fill="currentColor"/>
-          <path d="M104.96 17.33C104.31 17.33 103.78 17.58 103.24 17.58C103.13 17.58 103.1 17.47 103.1 17.4C103.1 17.15 103.21 17.04 103.39 16.97C104 16.76 104.65 16.61 105.25 16.32C107.98 15.03 109.59 12.73 109.59 9.68999C109.59 4.2 104.89 0.869995 99.73 0.869995C97.86 0.869995 96.04 1.41 94.46 2.27C90.16 4.6 89.33 7.93999 89.08 12.49C88.97 14.28 88.97 16.08 88.97 17.87V22.21C88.97 24.93 90.76 27.12 93.59 27.12C95.63 27.12 97.46 25.65 97.93 23.71C98.18 22.56 98.04 21.2 98.04 20.09C98.04 19.98 98.08 19.95 98.18 19.95C98.28 19.95 98.4 20.02 98.47 20.06C99.73 23.11 101.45 26.98 105.35 26.98C108.04 26.98 110.26 25.08 110.26 22.32C110.26 19.56 107.68 17.34 104.95 17.34L104.96 17.33ZM99.12 13.81C98.83 13.81 98.58 13.56 98.58 13.27C98.58 12.88 99.12 12.59 99.3 12.27C99.69 11.55 99.8 10.33 99.8 9.51C99.8 8.54 99.55 6.75 98.94 6.02999C98.76 5.81999 98.55 5.71 98.55 5.42C98.55 5.13 98.8 4.88 99.09 4.88C100.31 4.88 100.92 8.47 100.92 9.39999C100.92 10.4 100.63 13.81 99.13 13.81H99.12Z" fill="currentColor"/>
-          <path d="M118.88 2.01997C118.02 1.44997 116.8 1.15997 115.76 1.15997C113.5 1.15997 111.56 2.94997 111.31 5.17997C111.24 5.82997 111.27 6.43997 111.27 7.11997V13.21L111.16 19.63V22.82C111.16 25.33 113.31 27.3 115.79 27.3C117.62 27.3 119.63 26.15 120.31 24.43C120.7 23.46 120.74 22.1 120.74 21.06V18.26L120.78 12.67V7.07997C120.78 4.99997 120.74 3.34997 118.88 2.01997Z" fill="currentColor"/>
-          <path d="M127.82 0.939993C124.16 0.939993 122.33 2.65999 122.33 6.34999V7.81999L122.37 10.72V12.19C122.37 13.3 122.37 14.34 122.33 15.45C122.26 16.78 122.08 18.1 122.08 19.47C122.08 24.49 124.66 26.93 129.65 26.93C137.32 26.93 142.52 23.63 142.52 15.42C142.52 5.51999 137.75 0.929993 127.82 0.929993V0.939993ZM131.26 20.77C130.97 20.77 130.72 20.52 130.72 20.23C130.72 20.12 130.76 20.05 130.83 19.94C131.76 18.4 132.01 16.25 132.01 14.49C132.01 12.84 131.83 10.4 130.79 9.10999C130.61 8.81999 130.25 8.60999 130.25 8.24999C130.25 7.95999 130.5 7.70999 130.79 7.70999C131.33 7.70999 132.08 9.06999 132.3 9.53999C132.98 11.12 133.09 12.84 133.09 14.52C133.09 15.56 132.55 20.76 131.26 20.76V20.77Z" fill="currentColor"/>
-          <path d="M159.27 13.67C157.19 13.49 154.21 12.77 152.6 11.41C152.39 11.23 152.03 10.98 152.03 10.66C152.03 10.55 152.07 10.37 152.21 10.37C152.6 10.37 155.11 12.38 157.27 12.38C160 12.38 162.5 10.26 162.5 7.47002C162.5 2.88002 156.41 1.02002 152.71 1.02002C147.22 1.02002 143.14 4.57002 143.14 10.2C143.14 11.42 143.32 13.1 144.22 14.04C144.65 14.51 145.37 14.51 145.94 14.51C148.09 14.51 150.82 15.19 151.96 17.16C152.07 17.34 152.17 17.63 152.17 17.84C152.17 17.91 152.17 18.02 152.1 17.98C151.89 17.91 151.71 17.73 151.56 17.59C150.3 16.37 148.58 15.15 146.76 15.15C144.03 15.15 143.07 17.77 143.07 20.06C143.07 24.68 147.23 27.23 151.46 27.23C156.48 27.23 162.5 23.93 162.5 18.3C162.5 16.22 161.6 13.89 159.27 13.68V13.67Z" fill="currentColor"/>
-        </svg>
-      `;if(this.variant==="icon")return $.html`
-        <div
-          class=${(0,a0.classMap)({logo:!0,"logo--variant-icon":!0,[`logo--theme-${this.theme}`]:!0,"mask mask--squircle":!0})}
-        >
-          ${(0,np.when)(this.theme==="white"||this.theme==="black",()=>$.html`
-              <img
-                src=${Yp}
-                class="squircle-image"
-                alt="An animated background image of rotating lights and shapes"
-              />
-            `,()=>$.html` <div class="logo--variant-icon__background"></div> `)}
-          <img src=${kp} class="logomark-letter-image" alt="The letter P" />
-        </div>
-      `}};v.styles=[o(v,v,"styles"),L,lp],p([(0,D.property)({type:String,reflect:!0})],v.prototype,"variant",2),p([(0,D.property)({type:String,reflect:!0})],v.prototype,"theme",2),p([(0,D.property)({type:Boolean,reflect:!0})],v.prototype,"outline",2),p([(0,D.property)({type:Boolean,reflect:!0})],v.prototype,"mini",2),v=p([(0,D.customElement)("pop-logo")],v);var hp=v;var cp=require("lit"),T=require("lit/decorators.js"),Hp=require("lit/directives/class-map.js");var sp=require("lit"),xp=sp.css`
-  :host {
-    display: block;
-
-    --sum-background: var(--color-surface-bg-default);
-    --sum-border-color: var(--color-border-border-reversed);
-    --sum-color: var(--color-text-text-default);
-  }
-
-  .sum {
-    align-items: center;
-    background-color: var(--sum-border-color);
-    display: flex;
-    flex-shrink: 0;
-    height: 32px;
-    justify-content: center;
-    padding: 0.5px;
-    width: 32px;
-  }
-
-  /**
-   * Content
-   */
-
-  .sum__content {
-    align-items: center;
-    background: var(--sum-background);
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-    height: 31px;
-    width: 31px;
-  }
-
-  .sum__label {
-    color: var(--sum-color);
-    font-size: var(--font-size-md);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: -0.96px;
-    line-height: 28px;
-    text-align: center;
-    user-select: none;
-  }
-`;var G=class extends P{constructor(){super(...arguments);this.id=""}render(){return cp.html`
-      <div
-        class=${(0,Hp.classMap)({sum:!0,"mask mask--squircle":!0})}
-        part="base"
-      >
-        <div class="sum__content mask mask--squircle">
-          <slot class="sum__label">0</slot>
-        </div>
-      </div>
-    `}};G.styles=[o(G,G,"styles"),L,xp],p([(0,T.property)({type:String})],G.prototype,"id",2),G=p([(0,T.customElement)("pop-sum")],G);var dp=G;var gp=require("lit"),Q=require("lit/decorators.js"),Xp=require("lit/directives/class-map.js");var fp=require("lit"),vp=fp.css`
-  :host {
-    display: inline-block;
-  }
-
-  .timestamp-countdown {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-variant-numeric: tabular-nums;
-    font-weight: 500;
-  }
-`;var u=class extends P{constructor(){super(...arguments);this.expires="";this.displayText="00:00"}get datetimeContent(){return this.textContent?.trim()||""}connectedCallback(){super.connectedCallback(),new MutationObserver(()=>this.tick()).observe(this,{childList:!0,characterData:!0,subtree:!0}),this.tick(),this.interval=window.setInterval(()=>this.tick(),1e3)}disconnectedCallback(){this.interval&&window.clearInterval(this.interval),super.disconnectedCallback()}formatTime(t){let i=Math.floor(t/1e3),h=Math.floor(i/60),k=i%60;return`${String(h).padStart(2,"0")}:${String(k).padStart(2,"0")}`}getTargetTimestamp(){let t=this.expires||this.textContent?.trim()||"";return new Date(t)}tick(){let t=new Date,i=this.getTargetTimestamp();if(Number.isNaN(i.getTime()))return;let h=i.getTime()-t.getTime();if(h<=0){this.displayText="00:00",this.interval&&(window.clearInterval(this.interval),this.interval=void 0),this.emit("pop-expired",{}),this.requestUpdate();return}this.displayText=this.formatTime(h),this.requestUpdate()}render(){return gp.html`
-      <div
-        class=${(0,Xp.classMap)({"timestamp-countdown":!0})}
-        part="base"
-      >
-        <slot style="display: none;"></slot>
-        ${this.displayText}
-      </div>
-    `}};u.styles=[o(u,u,"styles"),vp],p([(0,Q.property)({type:String,attribute:"expires-at",reflect:!0})],u.prototype,"expires",2),p([(0,Q.property)()],u.prototype,"datetimeContent",1),u=p([(0,Q.customElement)("pop-timestamp-countdown")],u);var up=u;var Cp=require("lit"),j=require("lit/decorators.js"),Gp=require("lit/directives/class-map.js");var bp=require("lit"),mp=bp.css`
-  :host {
-    display: block;
-    --toast-color: var(--color-text-text-default, #000);
-  }
-
-  .toast {
-    display: flex;
-    padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
-    justify-content: center;
-    align-items: center;
-    color: var(--toast-color);
-    gap: var(--spacing-lg, 12px);
-    border-radius: var(--radius-xl, 12px);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-    font-weight: 500;
-  }
-
-  .toast--theme-transparent {
-    background: var(--color-black-alpha-500, rgba(0, 0, 32, 0.5));
-    backdrop-filter: blur(20px);
-    --toast-color: var(--color-text-text-white, #fff);
-  }
-
-  .toast--theme-default {
-    background-color: var(--color-text-text-default, #fff);
-    backdrop-filter: blur(12px);
-    --toast-color: var(--color-text-text-reversed, #fff);
-  }
-
-  .toast--theme-reversed {
-    background-color: var(--color-text-text-reversed, #000);
-    --toast-color: var(--color-text-text-default, #000);
-    backdrop-filter: blur(12px);
-  }
-
-  .toast__close {
-    color: var(--toast-color);
-  }
-`;var w=class extends P{constructor(){super(...arguments);this.theme="default"}close(){this.emit("pop-close")}render(){return Cp.html`
-      <div
-        class=${(0,Gp.classMap)({toast:!0,[`toast--theme-${this.theme}`]:!0})}
-        part="base"
-      >
-        <slot name="icon"></slot>
-        <slot></slot>
-        <button part="close" aria-label="Close" class="toast__close" type="button" @click=${this.close}>
-          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </button>
-      </div>
-    `}};w.styles=[o(w,w,"styles"),mp],p([(0,j.property)({type:String,reflect:!0})],w.prototype,"theme",2),w=p([(0,j.customElement)("pop-toast")],w);var wp=w;0&&(module.exports={PopButton,PopButtonLink,PopButtonVertical,PopCodeInputField,PopCommentAvatar,PopCommentIcon,PopElement,PopFocusIndicator,PopFormInputSimple,PopIcon,PopLoader,PopLogo,PopSum,PopTimestampCountdown,PopToast,colors,sampleColor});
+'use strict';var button=require('@base-ui/react/button'),classVarianceAuthority=require('class-variance-authority'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var n=classVarianceAuthority.cva("inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none",{variants:{align:{left:"justify-start",center:"justify-center",right:"justify-end"},collapsed:{false:null,true:"min-w-10 max-w-10 justify-center"},outline:{false:null,true:""},leading:{false:null},theme:{base:"[--background:var(--color-brand-midnight-900)] [--foreground:var(--color-text-text-reversed)]",brand:"[--background:var(--color-foreground)] [--foreground:var(--color-background)]",error:""},trailing:{false:null},variant:{default:"hover:bg-background/90",outline:"backdrop-blur-lg ",primary:"bg-primary-foreground/0 backdrop-blur-lg text-primary",secondary:"bg-secondary-foreground/0 backdrop-blur-lg text-secondary",tertiary:"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]"},pill:{false:"rounded-xs",true:"rounded-full"},size:{default:"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]",lg:"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]"}},defaultVariants:{align:"center",pill:false,size:"default",theme:"brand",variant:"default"},compoundVariants:[{pill:true,size:"default",class:"min-w-10 min-h-10 px-4"},{pill:true,collapsed:true,class:"max-w-10"},{pill:true,size:"lg",class:"min-w-12 min-h-12 px-4"},{pill:true,size:"lg",collapsed:true,class:"max-w-[54px] max-h-12"},{collapsed:false,size:"default",align:"left",pill:false,class:"pr-3 pl-2"},{align:"center",collapsed:false,size:"default",pill:false,class:"px-3"},{leading:true,pill:false,align:"left",size:"default",class:"pr-3 pl-2"},{collapsed:false,size:"default",pill:true,class:"px-4"},{size:"lg",pill:true,collapsed:false,class:"px-4"},{variant:"primary",outline:true,class:"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1"},{variant:"secondary",outline:true,class:"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md"},{variant:"primary",theme:"error",class:"[--background:var(--color-error-100)] [--foreground:var(--color-text-text-default)]"},{variant:"tertiary",theme:"error",class:"[--background:transparent] [--foreground:var(--color-error-700)]"}]}),z=classVarianceAuthority.cva("absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]",{variants:{outline:{false:null},variant:{default:"",outline:"",primary:"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0",secondary:"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default",tertiary:"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed"}},defaultVariants:{outline:false,variant:"default"},compoundVariants:[{outline:true,variant:"primary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"},{outline:true,variant:"secondary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"}]});function d({className:e,children:g,collapsed:b=false,variant:l="default",size:c="default",align:f="center",outline:o=false,pill:v=false,theme:p="brand",leadingElement:r,trailingElement:t,...m}){let x={variant:l,size:c,align:f,outline:o,collapsed:b,pill:v,leading:r!=null,theme:p,trailing:t!=null};return jsxRuntime.jsxs(button.Button,{"data-slot":"button",className:a(n(x),e),...m,children:[jsxRuntime.jsx("div",{className:a(z({variant:l,outline:o??false}))}),r&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:r}),g,t&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:t})]})}exports.Button=d;exports.buttonVariants=n;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map