solid-ui 3.0.6 → 3.1.0

package/dist/v2/components/loginButton/LoginButton.js

@@ -0,0 +1,497 @@
+import { LitElement, html, css } from 'lit';
+import { authSession, authn, getSuggestedIssuers, offlineTestID, solidLogicSingleton } from 'solid-logic';
+import { phoneIcon as downArrowIcon } from './downArrow';
+export class LoginButton extends LitElement {
+    constructor() {
+        super();
+        this._issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`;
+        this._errorMsg = '';
+        this.label = 'Log In';
+        this.theme = 'light';
+        this.issuerUrl = '';
+        this.icon = '';
+        this.layout = 'desktop';
+        this._popupOpen = false;
+        this._issuerInputValue = '';
+        this._dropdownOpen = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    _openPopup() {
+        const offline = offlineTestID();
+        if (offline) {
+            this._loginComplete(offline.uri);
+            return;
+        }
+        this._issuerInputValue = (typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer')) || this.issuerUrl || '';
+        this._errorMsg = '';
+        this._popupOpen = true;
+    }
+    _closePopup() {
+        this._popupOpen = false;
+    }
+    updated() {
+        var _a;
+        const dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');
+        if (!dialog)
+            return;
+        if (this._popupOpen && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!this._popupOpen && dialog.open) {
+            dialog.close();
+        }
+    }
+    async _loginToIssuer(issuerUri) {
+        if (!issuerUri)
+            return;
+        try {
+            // clear authorization metadata from store
+            ;
+            solidLogicSingleton.store.updater.flagAuthorizationMetadata();
+            const preLoginRedirectHash = new URL(window.location.href).hash;
+            if (preLoginRedirectHash) {
+                window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash);
+            }
+            window.localStorage.setItem('loginIssuer', issuerUri);
+            const locationUrl = new URL(window.location.href);
+            locationUrl.hash = '';
+            await authSession.login({
+                redirectUrl: locationUrl.href,
+                oidcIssuer: issuerUri
+            });
+        }
+        catch (err) {
+            this._errorMsg = err.message || String(err);
+            this.requestUpdate();
+        }
+    }
+    _loginComplete(webIdUri) {
+        authn.saveUser(webIdUri);
+        this.dispatchEvent(new CustomEvent('login-success', {
+            detail: { webId: webIdUri },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    _handleGoClick() {
+        this._dropdownOpen = false;
+        this._loginToIssuer(this._issuerInputValue);
+    }
+    _toggleDropdown() {
+        this._dropdownOpen = !this._dropdownOpen;
+    }
+    _selectIssuerFromDropdown(uri) {
+        this._issuerInputValue = uri;
+        this._dropdownOpen = false;
+    }
+    _handleInputChange(e) {
+        this._issuerInputValue = e.target.value;
+    }
+    _handleInputKeydown(e) {
+        if (e.key === 'Enter') {
+            this._loginToIssuer(this._issuerInputValue);
+        }
+        if (e.key === 'Escape') {
+            this._closePopup();
+        }
+    }
+    _renderPopup() {
+        const suggestedIssuers = getSuggestedIssuers();
+        return html `
+      <div class="popup-box">
+          <div class="popup-top-menu">
+            <span class="popup-title">Select an identity provider</span>
+            <button class="popup-close" type="button" aria-label="Close" @click="${() => this._closePopup()}">&#x2715;</button>
+          </div>
+
+          <div class="issuer-text-section">
+            <label class="issuer-text-label" for="${this._issuerInputId}">Solid Identity Provider</label>
+            <div class="issuer-text-row">
+              <div class="issuer-input-wrapper">
+                <div class="issuer-input-field-row">
+                  <input
+                    id="${this._issuerInputId}"
+                    class="issuer-text-input"
+                    type="text"
+                    placeholder="https://example.com"
+                    .value="${this._issuerInputValue}"
+                    @input="${this._handleInputChange}"
+                    @keydown="${this._handleInputKeydown}"
+                    autocomplete="url"
+                  />
+                  ${suggestedIssuers.length
+            ? html `
+                    <button
+                      class="issuer-dropdown-toggle"
+                      type="button"
+                      aria-label="Show identity provider suggestions"
+                      aria-expanded="${this._dropdownOpen}"
+                      @click="${() => this._toggleDropdown()}"
+                    >${downArrowIcon}</button>
+                  `
+            : ''}
+                </div>
+                ${this._dropdownOpen && suggestedIssuers.length
+            ? html `
+                  <div class="issuer-dropdown-list" role="listbox">
+                    ${suggestedIssuers.map(issuerInfo => html `
+                      <button
+                        class="issuer-dropdown-item"
+                        type="button"
+                        role="option"
+                        @click="${() => this._selectIssuerFromDropdown(issuerInfo.uri)}"
+                      >${issuerInfo.name}</button>
+                    `)}
+                  </div>
+                `
+            : ''}
+              </div>
+            </div>
+            ${this._errorMsg ? html `<div class="error-msg">${this._errorMsg}</div>` : ''}
+          </div>
+          <hr class="popup-footer-hr" />
+          <div class="popup-footer">
+            <button class="popup-cancel-button" type="button" @click="${() => this._closePopup()}">Cancel</button>
+            <button
+              class="popup-login-button"
+              type="button"
+              ?disabled="${!this._issuerInputValue}"
+              @click="${() => this._handleGoClick()}"
+            >Log In</button>
+          </div>
+        </div>
+    `;
+    }
+    render() {
+        return html `
+      <button
+        class="login-button"
+        type="button"
+        part="login-button"
+        @click="${() => this._openPopup()}"
+      >
+        ${this.icon ? html `<img class="login-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="login-button-icon" />` : ''}
+        <slot>${this.label}</slot>
+      </button>
+
+      <dialog
+        class="popup-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Select an identity provider"
+        @cancel="${(e) => { e.preventDefault(); this._closePopup(); }}"
+        @click="${(e) => { if (e.target === e.currentTarget)
+            this._closePopup(); }}"
+      >
+        ${this._popupOpen ? this._renderPopup() : ''}
+      </dialog>
+    `;
+    }
+}
+LoginButton.properties = {
+    label: { type: String, reflect: true },
+    theme: { type: String, reflect: true },
+    issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },
+    icon: { type: String, reflect: true },
+    layout: { type: String, reflect: true },
+    _popupOpen: { state: true },
+    _issuerInputValue: { state: true },
+    _dropdownOpen: { state: true }
+};
+LoginButton.styles = css `
+    :host { // default theme
+      display: inline-block;
+      position: relative;
+      z-index: 400;
+      --login-button-background: var(--lavender-900, #7c4cff);
+      --login-button-text: var(--color-header-text, #ffffff);
+      --popup-background: var(--color-background, #F8F9FB);
+      --popup-text: var(--color-text, #1A1A1A);
+      --popup-border: var(--color-border, #E5E7EB);
+      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
+      --popup-overlay-background: rgba(0, 0, 0, 0.6);
+      --issuer-input-background: var(--color-background, #F8F9FB);
+      --issuer-input-text: var(--color-text, #1A1A1A);
+      --issuer-input-border: var(--color-text, #1A1A1A);
+      --issuer-button-background: var(--color-background, #F8F9FB);
+      --issuer-button-text: var(--color-text, #1A1A1A);
+      --issuer-button-border: var(--color-border, #E5E7EB);
+      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
+      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
+      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
+      --error-text-color: var(--color-error, #B00020);
+    }
+
+    :host([theme='dark']) {
+      display: inline-block;
+      position: relative;
+      z-index: 900;
+      --login-button-background: var(--lavender-900, #7c4cff);
+      --login-button-text: var(--color-header-text, #ffffff);
+      --popup-background: var(--color-background, #F8F9FB);
+      --popup-text: var(--color-text, #1A1A1A);
+      --popup-border: var(--color-border, #E5E7EB);
+      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
+      --popup-overlay-background: rgba(0, 0, 0, 0.6);
+      --issuer-input-background: var(--color-background, #F8F9FB);
+      --issuer-input-text: var(--color-text, #1A1A1A);
+      --issuer-input-border: var(--color-text, #1A1A1A);
+      --issuer-button-background: var(--color-background, #F8F9FB);
+      --issuer-button-text: var(--color-text, #1A1A1A);
+      --issuer-button-border: var(--color-text, #1A1A1A);
+      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
+      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
+      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
+      --error-text-color: var(--color-error, #B00020);
+    }
+
+    .login-button {
+      display: flex;
+      height: 35px;
+      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
+      align-items: center;
+      gap: var(--spacing-xxs, 0.3125rem);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--login-button-background);
+      border: none;
+      color: var(--login-button-text);
+      cursor: pointer;
+      font: inherit;
+      line-height: 1;
+      white-space: nowrap;
+      text-decoration: none;
+      box-sizing: border-box;
+      transition: transform 0.2s ease;
+    }
+
+    .login-button-icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      object-fit: contain;
+    }
+
+    .login-button:active {
+      transform: translateY(1px);
+    }
+
+    .popup-dialog {
+      border: none;
+      padding: 0;
+      background: transparent;
+      outline: none;
+      overflow: visible;
+      max-height: none;
+      max-width: none;
+    }
+
+    .popup-dialog::backdrop {
+      background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));
+    }
+
+    .popup-box {
+      background: var(--popup-background);
+      color: var(--popup-text);
+      box-shadow: var(--popup-shadow);
+      border: 1px solid var(--popup-border);
+      border-radius: var(--border-radius-md, 0.5rem);
+      min-width: 480px;
+      z-index: 1001;
+    }
+
+    .popup-top-menu {
+      border-bottom: 1px solid #DDD;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+      padding: 1rem;
+      background: var(--gray-200, #E5E7EB);
+    }
+
+    .popup-title {
+      font-weight: 800;
+    }
+
+    .popup-close {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 1.25rem;
+      line-height: 1;
+      padding: 0 0.25rem;
+    }
+
+    .issuer-text-section {
+      display: flex;
+      flex-direction: column;
+      padding: 1rem 1rem 1.75rem;
+    }
+
+    .issuer-text-label {
+      color: var(--issuer-label-color);
+      margin-bottom: 6px;
+    }
+
+    .issuer-text-row {
+      display: flex;
+      flex-direction: row;
+      gap: 6px;
+      align-items: flex-start;
+    }
+
+    .issuer-input-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      position: relative;
+    }
+
+    .issuer-input-field-row {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
+
+    .issuer-text-input {
+      flex: 1;
+      padding: 0.375rem 2.75rem 0.375rem 0.5rem;
+      border: 1px solid var(--issuer-input-border);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--issuer-input-background);
+      color: var(--issuer-input-text);
+      font: inherit;
+      min-width: 0;
+    }
+
+    .issuer-text-input::placeholder {
+      color: var(--issuer-placeholder-color);
+    }
+
+    .issuer-dropdown-toggle {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      border-radius: var(--border-radius-base, 0.3125rem);
+    }
+
+    .issuer-dropdown-toggle:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+    }
+
+    .issuer-dropdown-toggle svg {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
+
+    .issuer-dropdown-list {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 0;
+      right: 0;
+      border: 1px solid var(--color-border, #E5E7EB);
+      border-top: none;
+      border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);
+      background: var(--issuer-input-background);
+      overflow: visible;
+      z-index: 10;
+      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
+    }
+
+    .issuer-dropdown-item {
+      display: block;
+      width: 100%;
+      padding: 0.625rem 0.75rem;
+      border: none;
+      border-bottom: 1px solid var(--color-border, #E5E7EB);
+      background: transparent;
+      color: var(--issuer-button-text);
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+      box-sizing: border-box;
+    }
+
+    .issuer-dropdown-item:last-child {
+      border-bottom: none;
+    }
+
+    .issuer-dropdown-item:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+      border-radius: var(--border-radius-base-md, 0.5rem);
+    }
+
+    .popup-footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 8px;
+      padding: 0.75rem 1rem 1rem;
+    }
+
+    .popup-footer-hr {
+      margin: 0;
+      border: none;
+      border-top: 1px solid var(--popup-border, #E5E7EB);
+    }
+
+    .popup-cancel-button {
+      padding: 0.5rem 1.25rem;
+      border: 1px solid #C0BFC7;
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--popup-background);
+      color: #314158;
+      cursor: pointer;
+      font: inherit;
+    }
+
+    .popup-cancel-button:hover {
+      background: #D1D5DB;
+    }
+
+    .popup-login-button {
+      padding: 0.5rem 1.25rem;
+      border: none;
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--lavender-900, #7c4cff);
+      color: #ffffff;
+      cursor: pointer;
+      font: inherit;
+    }
+
+    .popup-login-button:hover {
+      background: #6a3de8;
+    }
+
+    .popup-login-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .error-msg {
+      color: var(--error-text-color);
+      font-size: 0.875rem;
+      margin-top: 8px;
+    }
+  `;
+//# sourceMappingURL=LoginButton.js.map

package/dist/v2/components/loginButton/LoginButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginButton.js","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/LoginButton.ts"],"names":[],"mappings":"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"}

package/dist/v2/components/loginButton/LoginButton.test.d.ts

@@ -0,0 +1,2 @@
+import './index';
+//# sourceMappingURL=LoginButton.test.d.ts.map

package/dist/v2/components/loginButton/LoginButton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginButton.test.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/LoginButton.test.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAA"}

package/dist/v2/components/loginButton/LoginButton.test.js

@@ -0,0 +1,53 @@
+import { LoginButton } from './LoginButton';
+import './index';
+jest.mock('solid-logic', () => ({
+    authSession: { login: jest.fn() },
+    authn: { saveUser: jest.fn() },
+    getSuggestedIssuers: jest.fn(() => []),
+    offlineTestID: jest.fn(() => false),
+    solidLogicSingleton: { store: { updater: { flagAuthorizationMetadata: jest.fn() } } }
+}));
+describe('SolidUILoginButton', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        Object.defineProperty(window, 'open', {
+            configurable: true,
+            writable: true,
+            value: jest.fn()
+        });
+        HTMLDialogElement.prototype.showModal = jest.fn();
+        HTMLDialogElement.prototype.close = jest.fn();
+        localStorage.clear();
+    });
+    it('is defined as a custom element', () => {
+        expect(customElements.get('solid-ui-login-button')).toBe(LoginButton);
+    });
+    it('renders the login button and opens a popup with an associated label and input', async () => {
+        var _a, _b, _c, _d;
+        const loginButton = new LoginButton();
+        document.body.appendChild(loginButton);
+        await loginButton.updateComplete;
+        const button = (_a = loginButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button.login-button');
+        expect(button).not.toBeNull();
+        expect((_b = button.textContent) === null || _b === void 0 ? void 0 : _b.trim()).toBe('Log In');
+        button.click();
+        await loginButton.updateComplete;
+        const label = (_c = loginButton.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('label.issuer-text-label');
+        const input = (_d = loginButton.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('input.issuer-text-input');
+        expect(label).not.toBeNull();
+        expect(input).not.toBeNull();
+        expect(label === null || label === void 0 ? void 0 : label.getAttribute('for')).toBe(input === null || input === void 0 ? void 0 : input.id);
+        expect(input === null || input === void 0 ? void 0 : input.id).toBeTruthy();
+    });
+    it('renders an icon when the icon property is set', async () => {
+        var _a;
+        const loginButton = new LoginButton();
+        loginButton.icon = 'https://example.com/login-icon.svg';
+        document.body.appendChild(loginButton);
+        await loginButton.updateComplete;
+        const icon = (_a = loginButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img.login-button-icon');
+        expect(icon).not.toBeNull();
+        expect(icon.src).toContain('https://example.com/login-icon.svg');
+    });
+});
+//# sourceMappingURL=LoginButton.test.js.map

package/dist/v2/components/loginButton/LoginButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginButton.test.js","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/LoginButton.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,SAAS,CAAA;AAEhB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC;IAC9B,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE;IACjC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE;IAC9B,mBAAmB,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;IACtC,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;IACnC,mBAAmB,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,yBAAyB,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;CACtF,CAAC,CAAC,CAAA;AAEH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE;YACpC,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE;SACjB,CAAC,CAAA;QACF,iBAAiB,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACjD,iBAAiB,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QAC7C,YAAY,CAAC,KAAK,EAAE,CAAA;IACtB,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IACvE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;;QAC7F,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAA;QACrC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QACtC,MAAM,WAAW,CAAC,cAAc,CAAA;QAEhC,MAAM,MAAM,GAAG,MAAA,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,qBAAqB,CAAsB,CAAA;QAChG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAC7B,MAAM,CAAC,MAAA,MAAM,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAEjD,MAAM,CAAC,KAAK,EAAE,CAAA;QACd,MAAM,WAAW,CAAC,cAAc,CAAA;QAEhC,MAAM,KAAK,GAAG,MAAA,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,yBAAyB,CAAqB,CAAA;QAClG,MAAM,KAAK,GAAG,MAAA,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,yBAAyB,CAAqB,CAAA;QAClG,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAC5B,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAC5B,MAAM,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAC,CAAA;QAClD,MAAM,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAC,CAAC,UAAU,EAAE,CAAA;IAChC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;;QAC7D,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAA;QACrC,WAAW,CAAC,IAAI,GAAG,oCAAoC,CAAA;QACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QACtC,MAAM,WAAW,CAAC,cAAc,CAAA;QAEhC,MAAM,IAAI,GAAG,MAAA,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAqB,CAAA;QAC/F,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,oCAAoC,CAAC,CAAA;IAClE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/v2/components/loginButton/downArrow.d.ts

@@ -0,0 +1,2 @@
+export declare const phoneIcon: import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=downArrow.d.ts.map

package/dist/v2/components/loginButton/downArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"downArrow.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/downArrow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,sCAOrB,CAAA"}

package/dist/v2/components/loginButton/downArrow.js

@@ -0,0 +1,10 @@
+import { html } from 'lit-html';
+export const phoneIcon = html `
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 12 7" 
+    fill="none"
+  >
+    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+//# sourceMappingURL=downArrow.js.map

package/dist/v2/components/loginButton/downArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"downArrow.js","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/downArrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;;;;;;;CAO5B,CAAA"}

package/dist/v2/components/loginButton/index.d.ts

@@ -0,0 +1,3 @@
+import { LoginButton } from './LoginButton';
+export { LoginButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/loginButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/v2/components/loginButton/index.js

@@ -0,0 +1,7 @@
+import { LoginButton } from './LoginButton';
+export { LoginButton };
+const LOGIN_BUTTON_TAG_NAME = 'solid-ui-login-button';
+if (!customElements.get(LOGIN_BUTTON_TAG_NAME)) {
+    customElements.define(LOGIN_BUTTON_TAG_NAME, LoginButton);
+}
+//# sourceMappingURL=index.js.map

package/dist/v2/components/loginButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/v2/components/loginButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,CAAA;AAEtB,MAAM,qBAAqB,GAAG,uBAAuB,CAAA;AAErD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,WAAW,CAAC,CAAA;AAC3D,CAAC"}

package/dist/v2/components/signupButton/SignupButton.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+export declare class SignupButton extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        signupUrl: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        layout: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    label: string;
+    theme: 'light' | 'dark';
+    signupUrl: string;
+    icon: string;
+    layout: 'desktop' | 'mobile';
+    constructor();
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=SignupButton.d.ts.map

package/dist/v2/components/signupButton/SignupButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignupButton.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/signupButton/SignupButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAI3C,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;MAMhB;IAED,MAAM,CAAC,MAAM,0BA+CZ;IAEO,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,SAAS,GAAG,QAAQ,CAAA;;IAWpC,OAAO,CAAC,YAAY;IAIpB,MAAM;CAaP"}