@keyringnetwork/keyring-connect-sdk 3.2.0 → 4.1.0-alpha.2

package/dist/ui/composites/keyring-selection-modal.js

@@ -0,0 +1,342 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyringSelectionModal = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+require("../components/keyring-button");
+require("../components/keyring-text");
+require("../icons/check-circle");
+require("../icons/close-circle");
+require("../icons/extension-grid");
+require("../icons/gradient-donut");
+require("../icons/keyring");
+require("../icons/mobile-grid");
+let KeyringSelectionModal = class KeyringSelectionModal extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "Choose how to continue";
+        this.subtitle = "Select your preferred method to complete verification";
+        this.isExtensionInstalled = false;
+        this.extensionBtnText = "Continue with Extension";
+        this.mobileBtnText = "Continue with Mobile App";
+        this.mobileSelected = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.trapFocus();
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div class="modal" @click=${this.stopPropagation}>
+        <div class="header">
+          <div class="header-title">
+            <keyring-text variant="text-2xl" weight="medium">${this.title}</keyring-text>
+            <keyring-text variant="text-sm" color="secondary">${this.subtitle}</keyring-text>
+          </div>
+          <button class="close-btn" @click=${this.handleCancel} aria-label="Close">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M16.0391 6.54694C16.4296 6.15641 17.0626 6.15641 17.4531 6.54694C17.8436 6.93747 17.8436 7.5705 17.4531 7.961L13.4141 12.0001L17.4531 16.0391C17.8436 16.4297 17.8436 17.0627 17.4531 17.4532C17.0626 17.8437 16.4296 17.8436 16.0391 17.4532L12 13.4141L7.96094 17.4532C7.57044 17.8437 6.93741 17.8436 6.54688 17.4532C6.15635 17.0627 6.15635 16.4296 6.54688 16.0391L10.5859 12.0001L6.54688 7.961C6.15635 7.57047 6.15635 6.93746 6.54688 6.54694C6.9374 6.15641 7.57041 6.15641 7.96094 6.54694L12 10.586L16.0391 6.54694Z"
+                fill="#75849A"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div class="content">
+          <div class="selection-buttons">
+            <button class="selection-btn extension-btn" @click=${this.handleExtensionSelect}>
+              <extension-grid-icon></extension-grid-icon>
+              <div class="btn-content">
+                <div class="title">
+                  <keyring-text variant="text-base" weight="medium"
+                    >${this.extensionBtnText}</keyring-text
+                  >
+                  <div
+                    class=${`extension-status ${this.isExtensionInstalled ? "installed" : "not-installed"}`}
+                  >
+                    ${this.isExtensionInstalled
+            ? (0, lit_1.html) `<check-circle-icon
+                          style="display: flex; align-items: center;"
+                        ></check-circle-icon>`
+            : (0, lit_1.html) `<close-circle-icon
+                          style="display: flex; align-items: center;"
+                        ></close-circle-icon>`}
+                    <keyring-text variant="xs" color="white">
+                      ${this.isExtensionInstalled ? "Installed" : "Not Installed"}
+                    </keyring-text>
+                  </div>
+                </div>
+                <keyring-text variant="text-sm" color="secondary"
+                  >Use your browser extension</keyring-text
+                >
+              </div>
+            </button>
+
+            <button class="selection-btn mobile-btn" @click=${this.handleMobileSelect}>
+              <mobile-grid-icon></mobile-grid-icon>
+              <div class="btn-content">
+                <div class="title">
+                  <keyring-text variant="text-base" weight="medium"
+                    >${this.mobileBtnText}</keyring-text
+                  >
+                  ${this.mobileSelected
+            ? (0, lit_1.html) `<gradient-donut-icon spinning></gradient-donut-icon>`
+            : ""}
+                </div>
+                <keyring-text variant="text-sm" color="secondary"
+                  >Scan QR code with your phone</keyring-text
+                >
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <div class="footer">
+          <div class="footer-content">
+            <div class="footer-branding">
+              <keyring-text variant="text-sm" color="secondary"
+                >Verification provided by</keyring-text
+              >
+              <keyring-icon></keyring-icon>
+            </div>
+            <div class="footer-links">
+              <a href="https://www.keyring.network/terms" target="_blank" class="link">
+                <keyring-text variant="text-sm" color="secondary"
+                  >Keyring Terms and Conditions</keyring-text
+                >
+              </a>
+              <a href="https://docs.keyring.network/docs" target="_blank" class="link">
+                <keyring-text variant="text-sm" color="secondary">Keyring Docs</keyring-text>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    // Event handlers
+    handleCancel() {
+        this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+    }
+    handleExtensionSelect() {
+        this.dispatchEvent(new CustomEvent("extension-selected", { bubbles: true, composed: true }));
+    }
+    handleMobileSelect() {
+        if (this.mobileSelected) {
+            return;
+        }
+        this.mobileSelected = true;
+        this.dispatchEvent(new CustomEvent("mobile-selected", { bubbles: true, composed: true }));
+    }
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+    trapFocus() {
+        var _a;
+        // Simple focus trap implementation
+        const focusableElements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button:not([style*="display: none"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusableElements && focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+};
+exports.KeyringSelectionModal = KeyringSelectionModal;
+KeyringSelectionModal.styles = (0, lit_1.css) `
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(15, 40, 48, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      font-family: Inter, "Segoe UI", Roboto, sans-serif;
+    }
+
+    .modal {
+      background: white;
+      border-radius: 20px;
+      display: flex;
+      gap: 24px;
+      padding: 24px 24px 32px 24px;
+      flex-direction: column;
+      align-items: center;
+      max-width: 524px;
+      width: 100%;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .header-title {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      align-items: start;
+    }
+
+    .close-btn {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 8px;
+      transition: all 300ms ease-in-out;
+    }
+
+    .close-btn:hover {
+      background-color: #75849a1a;
+    }
+
+    .content {
+      width: 100%;
+    }
+
+    .selection-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .selection-btn {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      padding: 20px 16px;
+      border: 1px solid #e3e7ee;
+      border-radius: 12px;
+      background-color: transparent;
+      cursor: pointer;
+      transition: all 300ms ease-in-out;
+    }
+
+    .btn-content {
+      flex: 1;
+    }
+
+    .btn-content .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex: 1;
+    }
+
+    .extension-status {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px 2px 4px;
+      border-radius: 100px;
+      min-height: 20px;
+      color: #fff;
+    }
+
+    .extension-status.installed {
+      background-color: #24af75;
+    }
+
+    .extension-status.not-installed {
+      background-color: #eb4577;
+    }
+
+    .extension-btn {
+      border-color: #a5eec7;
+      background-color: #f2fcf7;
+    }
+
+    .extension-btn:hover {
+      background-color: #e6f9ec;
+    }
+
+    .mobile-btn {
+      border-color: #e3e7ee;
+      background-color: #f3f5fa;
+    }
+
+    .mobile-btn:hover {
+      background-color: #e8edf5;
+    }
+
+    .footer {
+      width: 100%;
+      border-top: 1px solid rgba(15, 40, 48, 0.12);
+    }
+
+    .footer-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 24px;
+    }
+
+    .footer-branding {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .footer-links {
+      width: 100%;
+      display: flex;
+      gap: 24px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .footer-links a {
+      text-decoration: none;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .footer-links a:hover {
+      text-decoration: underline;
+      color: #75849a;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringSelectionModal.prototype, "title", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringSelectionModal.prototype, "subtitle", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringSelectionModal.prototype, "isExtensionInstalled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "extension-btn-text" })
+], KeyringSelectionModal.prototype, "extensionBtnText", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "mobile-btn-text" })
+], KeyringSelectionModal.prototype, "mobileBtnText", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringSelectionModal.prototype, "mobileSelected", void 0);
+exports.KeyringSelectionModal = KeyringSelectionModal = __decorate([
+    (0, decorators_js_1.customElement)("keyring-selection-modal")
+], KeyringSelectionModal);

package/dist/ui/composites/keyring-terminated-modal.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+import "../components/keyring-button";
+import "../components/keyring-text";
+import "../icons/error-circle";
+export declare class KeyringTerminatedModal extends LitElement {
+    title: string;
+    subtitle: string;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    private handleClose;
+    private stopPropagation;
+    private trapFocus;
+}

package/dist/ui/composites/keyring-terminated-modal.js

@@ -0,0 +1,121 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyringTerminatedModal = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+require("../components/keyring-button");
+require("../components/keyring-text");
+require("../icons/error-circle");
+let KeyringTerminatedModal = class KeyringTerminatedModal extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "Session Terminated";
+        this.subtitle = "Your verification session has expired or is terminated. Please start a new session to continue.";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.trapFocus();
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div class="modal" @click=${this.stopPropagation}>
+        <div class="content">
+          <error-circle-icon></error-circle-icon>
+
+          <div class="text-wrapper">
+            <keyring-text variant="text-3xl" weight="medium">${this.title}</keyring-text>
+            <keyring-text variant="text-sm" align="center">${this.subtitle}</keyring-text>
+          </div>
+
+          <keyring-button class="close-button" @click=${this.handleClose}>Close Session</keyring-button>
+        </div>
+      </div>
+    `;
+    }
+    // Event handlers
+    handleClose() {
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    }
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+    trapFocus() {
+        var _a;
+        // Simple focus trap implementation
+        const focusableElements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusableElements && focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+};
+exports.KeyringTerminatedModal = KeyringTerminatedModal;
+KeyringTerminatedModal.styles = (0, lit_1.css) `
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(15, 40, 48, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      font-family: Inter, "Segoe UI", Roboto, sans-serif;
+    }
+
+    .modal {
+      background: white;
+      border-radius: 20px;
+      display: flex;
+      gap: 24px;
+      padding: 40px 24px 40px 24px;
+      flex-direction: column;
+      align-items: center;
+      max-width: 524px;
+      width: 100%;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 24px;
+    }
+
+    .text-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      width: 100%;
+      max-width: 400px;
+    }
+
+    .close-button {
+      width: 100%;
+      max-width: 200px;
+      margin: 0 auto;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringTerminatedModal.prototype, "title", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringTerminatedModal.prototype, "subtitle", void 0);
+exports.KeyringTerminatedModal = KeyringTerminatedModal = __decorate([
+    (0, decorators_js_1.customElement)("keyring-terminated-modal")
+], KeyringTerminatedModal);

package/dist/ui/icons/apple-icon.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from "lit";
+export declare class AppleIcon extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/ui/icons/apple-icon.js

@@ -0,0 +1,47 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppleIcon = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let AppleIcon = class AppleIcon extends lit_1.LitElement {
+    render() {
+        return (0, lit_1.html) `
+      <svg
+        width="120"
+        height="41"
+        viewBox="0 0 120 41"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect x="0.5" y="1" width="119" height="39" rx="5.5" fill="black" />
+        <rect x="0.5" y="1" width="119" height="39" rx="5.5" stroke="#A6A6A6" />
+        <path
+          d="M24.7045 21.2631C24.7166 20.3432 24.9669 19.4412 25.4321 18.6411C25.8972 17.841 26.5621 17.1688 27.3648 16.687C26.8548 15.9759 26.1821 15.3908 25.4 14.978C24.6178 14.5652 23.7479 14.3361 22.8592 14.309C20.9635 14.1147 19.1258 15.4164 18.1598 15.4164C17.1751 15.4164 15.6878 14.3282 14.0862 14.3604C13.0502 14.3931 12.0406 14.6872 11.1557 15.2141C10.2708 15.741 9.54075 16.4826 9.03674 17.3669C6.85352 21.0573 8.48201 26.4809 10.5734 29.464C11.6197 30.9247 12.8426 32.5563 14.4428 32.4985C16.0086 32.4351 16.5934 31.5237 18.4835 31.5237C20.3561 31.5237 20.9048 32.4985 22.5374 32.4617C24.2176 32.4351 25.2762 30.9945 26.2859 29.5199C27.0377 28.4791 27.6162 27.3288 28 26.1116C27.0238 25.7085 26.1908 25.0338 25.6048 24.1716C25.0187 23.3094 24.7056 22.2979 24.7045 21.2631Z"
+          fill="white"
+        />
+        <path
+          d="M21.6201 12.3471C22.5362 11.2734 22.9875 9.89335 22.8782 8.5C21.4786 8.64352 20.1857 9.2966 19.2572 10.3291C18.8033 10.8335 18.4556 11.4203 18.234 12.056C18.0125 12.6917 17.9215 13.3638 17.9661 14.0338C18.6662 14.0408 19.3588 13.8927 19.9917 13.6005C20.6246 13.3084 21.1814 12.8798 21.6201 12.3471Z"
+          fill="white"
+        />
+        <path
+          d="M36.791 9.00146H38.8608C40.6494 9.00146 41.5195 10.0649 41.5195 11.9941C41.5195 13.9233 40.6406 15 38.8608 15H36.791V9.00146ZM37.7886 9.84082V14.1606H38.751C39.9375 14.1606 40.4956 13.4443 40.4956 12.0073C40.4956 10.5615 39.9331 9.84082 38.751 9.84082H37.7886ZM44.6748 10.2759C45.8877 10.2759 46.7358 11.0625 46.7358 12.3677V12.9697C46.7358 14.3188 45.8877 15.0791 44.6748 15.0791C43.4443 15.0791 42.605 14.3276 42.605 12.9741V12.3721C42.605 11.1021 43.4575 10.2759 44.6748 10.2759ZM44.6792 11.0625C43.9849 11.0625 43.5894 11.6426 43.5894 12.4204V12.939C43.5894 13.7168 43.9585 14.2925 44.6792 14.2925C45.3911 14.2925 45.7559 13.7212 45.7559 12.939V12.4204C45.7559 11.6426 45.3735 11.0625 44.6792 11.0625ZM53.8989 10.355L52.6772 15H51.6841L50.7129 11.5723H50.6865L49.7329 15H48.7354L47.4609 10.355H48.5112L49.2583 13.897H49.3022L50.2383 10.355H51.1567L52.1191 13.897H52.1631L52.9233 10.355H53.8989ZM54.8657 15V10.355H55.8237V11.1899H55.8721C55.9907 10.8252 56.3291 10.2847 57.2695 10.2847C58.2056 10.2847 58.834 10.8032 58.834 11.8623V15H57.8584V12.1479C57.8584 11.4404 57.4893 11.1152 56.9399 11.1152C56.2192 11.1152 55.8413 11.6689 55.8413 12.4204V15H54.8657ZM60.3105 15V8.68506H61.2861V15H60.3105ZM64.6348 10.2759C65.8477 10.2759 66.6958 11.0625 66.6958 12.3677V12.9697C66.6958 14.3188 65.8477 15.0791 64.6348 15.0791C63.4043 15.0791 62.5649 14.3276 62.5649 12.9741V12.3721C62.5649 11.1021 63.4175 10.2759 64.6348 10.2759ZM64.6392 11.0625C63.9448 11.0625 63.5493 11.6426 63.5493 12.4204V12.939C63.5493 13.7168 63.9185 14.2925 64.6392 14.2925C65.3511 14.2925 65.7158 13.7212 65.7158 12.939V12.4204C65.7158 11.6426 65.3335 11.0625 64.6392 11.0625ZM69.2227 15.0703C68.3218 15.0703 67.7021 14.5166 67.7021 13.6509C67.7021 12.8291 68.2734 12.2754 69.3457 12.2754H70.519V11.8403C70.519 11.3086 70.1807 11.0581 69.6445 11.0581C69.1172 11.0581 68.8799 11.2778 68.8052 11.5854H67.8779C67.9351 10.8076 68.5195 10.2847 69.6753 10.2847C70.6685 10.2847 71.4902 10.6978 71.4902 11.8535V15H70.563V14.3979H70.519C70.3125 14.7539 69.9082 15.0703 69.2227 15.0703ZM69.5259 14.3145C70.0796 14.3145 70.519 13.9365 70.519 13.4312V12.9302H69.4995C68.9326 12.9302 68.6821 13.2158 68.6821 13.6025C68.6821 14.0859 69.0864 14.3145 69.5259 14.3145ZM74.4961 10.2935C75.1509 10.2935 75.6519 10.5835 75.832 11.0537H75.8804V8.68506H76.856V15H75.9067V14.2573H75.8584C75.7178 14.7275 75.1597 15.0615 74.4829 15.0615C73.415 15.0615 72.7207 14.3013 72.7207 13.0752V12.2798C72.7207 11.0537 73.4282 10.2935 74.4961 10.2935ZM74.7686 11.0933C74.1182 11.0933 73.7139 11.5767 73.7139 12.4204V12.9302C73.7139 13.7783 74.1226 14.2617 74.7905 14.2617C75.4497 14.2617 75.8804 13.7827 75.8804 12.9917V12.2886C75.8804 11.5723 75.4102 11.0933 74.7686 11.0933ZM82.2129 10.2759C83.4258 10.2759 84.2739 11.0625 84.2739 12.3677V12.9697C84.2739 14.3188 83.4258 15.0791 82.2129 15.0791C80.9824 15.0791 80.1431 14.3276 80.1431 12.9741V12.3721C80.1431 11.1021 80.9956 10.2759 82.2129 10.2759ZM82.2173 11.0625C81.5229 11.0625 81.1274 11.6426 81.1274 12.4204V12.939C81.1274 13.7168 81.4966 14.2925 82.2173 14.2925C82.9292 14.2925 83.2939 13.7212 83.2939 12.939V12.4204C83.2939 11.6426 82.9116 11.0625 82.2173 11.0625ZM85.5308 15V10.355H86.4888V11.1899H86.5371C86.6558 10.8252 86.9941 10.2847 87.9346 10.2847C88.8706 10.2847 89.499 10.8032 89.499 11.8623V15H88.5234V12.1479C88.5234 11.4404 88.1543 11.1152 87.605 11.1152C86.8843 11.1152 86.5063 11.6689 86.5063 12.4204V15H85.5308ZM93.2739 10.3857V9.22559H94.2275V10.3857H95.269V11.1504H94.2275V13.6157C94.2275 14.1211 94.4165 14.2617 94.9395 14.2617C95.0713 14.2617 95.2471 14.2529 95.3218 14.2441V14.9912C95.2427 15.0044 94.9175 15.0308 94.6978 15.0308C93.5684 15.0308 93.2607 14.6265 93.2607 13.6948V11.1504H92.5532V10.3857H93.2739ZM96.4995 15V8.68506H97.4707V11.1899H97.519C97.6201 10.8604 97.998 10.2847 98.9297 10.2847C99.835 10.2847 100.481 10.8076 100.481 11.8667V15H99.5098V12.1523C99.5098 11.4448 99.1187 11.1152 98.5649 11.1152C97.8662 11.1152 97.4707 11.6646 97.4707 12.4204V15H96.4995ZM103.755 15.0791C102.489 15.0791 101.703 14.3013 101.703 12.9917V12.3633C101.703 11.0449 102.564 10.2759 103.698 10.2759C104.862 10.2759 105.684 11.0845 105.684 12.3633V12.9082H102.669V13.1367C102.669 13.8047 103.065 14.2969 103.75 14.2969C104.26 14.2969 104.612 14.0552 104.678 13.7651H105.631C105.574 14.3013 105.007 15.0791 103.755 15.0791ZM102.669 12.271H104.73V12.2095C104.73 11.5107 104.322 11.0449 103.702 11.0449C103.083 11.0449 102.669 11.5107 102.669 12.2095V12.271Z"
+          fill="white"
+        />
+        <path
+          d="M38.2061 31H36.1758L40.3066 19.0029H42.5391L46.6611 31H44.5518L43.4883 27.6777H39.2783L38.2061 31ZM41.4316 21.0771H41.3525L39.7266 26.1484H43.04L41.4316 21.0771ZM52.2644 31.1318C51.0603 31.1318 50.1462 30.5605 49.654 29.708H49.5837V34.085H47.6325V21.71H49.531V23.0723H49.6013C50.1111 22.1846 51.0603 21.5869 52.3083 21.5869C54.3913 21.5869 55.8767 23.1602 55.8767 25.9375V26.7637C55.8767 29.5234 54.4089 31.1318 52.2644 31.1318ZM51.8161 29.5234C53.0554 29.5234 53.8991 28.5303 53.8991 26.6582V26.0078C53.8991 24.2061 53.1081 23.1777 51.781 23.1777C50.4187 23.1777 49.5661 24.2852 49.5661 25.999V26.6582C49.5661 28.416 50.4275 29.5234 51.8161 29.5234ZM62.183 31.1318C60.9789 31.1318 60.0649 30.5605 59.5727 29.708H59.5024V34.085H57.5512V21.71H59.4496V23.0723H59.52C60.0297 22.1846 60.9789 21.5869 62.227 21.5869C64.31 21.5869 65.7954 23.1602 65.7954 25.9375V26.7637C65.7954 29.5234 64.3276 31.1318 62.183 31.1318ZM61.7348 29.5234C62.9741 29.5234 63.8178 28.5303 63.8178 26.6582V26.0078C63.8178 24.2061 63.0268 23.1777 61.6996 23.1777C60.3373 23.1777 59.4848 24.2852 59.4848 25.999V26.6582C59.4848 28.416 60.3461 29.5234 61.7348 29.5234ZM69.8387 27.6689H71.7899C71.8778 28.7061 72.7919 29.5938 74.4882 29.5938C76.0438 29.5938 76.9667 28.8643 76.9667 27.7305C76.9667 26.8164 76.3514 26.3242 75.0682 26.0166L73.0995 25.5244C71.5526 25.1641 70.1639 24.2412 70.1639 22.29C70.1639 19.9961 72.1679 18.7393 74.497 18.7393C76.8261 18.7393 78.7684 19.9961 78.8124 22.2373H76.8964C76.8085 21.2178 76.0262 20.374 74.4706 20.374C73.0995 20.374 72.1679 21.0244 72.1679 22.1406C72.1679 22.9229 72.7128 23.4854 73.829 23.7402L75.7889 24.2236C77.5907 24.6631 78.9618 25.5156 78.9618 27.5547C78.9618 29.9102 77.0546 31.2373 74.3387 31.2373C70.9989 31.2373 69.8827 29.2861 69.8387 27.6689ZM81.3395 21.71V19.4512H83.2555V21.71H85.066V23.2744H83.2555V28.2314C83.2555 29.2422 83.6334 29.5234 84.6793 29.5234C84.8463 29.5234 85.0045 29.5234 85.1188 29.5059V31C84.9605 31.0264 84.5914 31.0615 84.1959 31.0615C81.9371 31.0615 81.3131 30.2529 81.3131 28.3896V23.2744H80.0299V21.71H81.3395ZM90.3353 21.5518C93.0071 21.5518 94.4573 23.4326 94.4573 25.9639V26.7109C94.4573 29.3301 93.0159 31.1582 90.3353 31.1582C87.6546 31.1582 86.1956 29.3301 86.1956 26.7109V25.9639C86.1956 23.4414 87.6634 21.5518 90.3353 21.5518ZM90.3353 23.1162C88.8851 23.1162 88.1644 24.3027 88.1644 25.9902V26.7021C88.1644 28.3633 88.8763 29.585 90.3353 29.585C91.7943 29.585 92.4974 28.3721 92.4974 26.7021V25.9902C92.4974 24.2939 91.7855 23.1162 90.3353 23.1162ZM96.1055 31V21.71H98.0567V22.9316H98.127C98.3643 22.3516 99.0586 21.5781 100.351 21.5781C100.606 21.5781 100.825 21.5957 101.01 21.6309V23.3535C100.843 23.3096 100.5 23.2832 100.175 23.2832C98.6104 23.2832 98.083 24.25 98.083 25.498V31H96.1055ZM105.743 31.1582C103.256 31.1582 101.674 29.5146 101.674 26.7637V25.8232C101.674 23.2305 103.22 21.5518 105.664 21.5518C108.142 21.5518 109.636 23.292 109.636 25.9111V26.7988H103.598V27.0186C103.598 28.583 104.442 29.6201 105.769 29.6201C106.762 29.6201 107.439 29.1279 107.677 28.3281H109.531C109.25 29.8311 108.037 31.1582 105.743 31.1582ZM103.598 25.4365H107.729V25.4189C107.729 24.1006 106.912 23.0635 105.673 23.0635C104.416 23.0635 103.598 24.1006 103.598 25.4189V25.4365Z"
+          fill="white"
+        />
+      </svg>
+    `;
+    }
+};
+exports.AppleIcon = AppleIcon;
+exports.AppleIcon = AppleIcon = __decorate([
+    (0, decorators_js_1.customElement)("apple-icon")
+], AppleIcon);

package/dist/ui/icons/check-circle.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from "lit";
+export declare class CheckCircleIcon extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/ui/icons/check-circle.js

@@ -0,0 +1,35 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckCircleIcon = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let CheckCircleIcon = class CheckCircleIcon extends lit_1.LitElement {
+    render() {
+        return (0, lit_1.html) `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="13"
+        viewBox="0 0 14 13"
+        fill="none"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M9.66135 5.31469L6.58268 8.39335C6.48468 8.49135 6.35735 8.54002 6.22935 8.54002C6.10068 8.54002 5.97335 8.49135 5.87535 8.39335L4.33602 6.85402C4.14068 6.65869 4.14068 6.34202 4.33602 6.14669C4.53135 5.95135 4.84735 5.95135 5.04268 6.14669L6.22935 7.33269L8.95402 4.60735C9.14935 4.41202 9.46602 4.41202 9.66135 4.60735C9.85668 4.80269 9.85668 5.11935 9.66135 5.31469ZM6.99935 0.166687C3.50735 0.166687 0.666016 3.00802 0.666016 6.50002C0.666016 9.99269 3.50735 12.8334 6.99935 12.8334C10.4913 12.8334 13.3327 9.99269 13.3327 6.50002C13.3327 3.00802 10.4913 0.166687 6.99935 0.166687Z"
+          fill="white"
+        />
+      </svg>
+    `;
+    }
+};
+exports.CheckCircleIcon = CheckCircleIcon;
+exports.CheckCircleIcon = CheckCircleIcon = __decorate([
+    (0, decorators_js_1.customElement)("check-circle-icon")
+], CheckCircleIcon);

package/dist/ui/icons/checkmark.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from "lit";
+export declare class CheckmarkIcon extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/ui/icons/checkmark.js

@@ -0,0 +1,37 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckmarkIcon = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let CheckmarkIcon = class CheckmarkIcon extends lit_1.LitElement {
+    render() {
+        return (0, lit_1.html) `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+        style="display: inline-block; vertical-align: text-top;"
+      >
+        <path
+          d="M18.0371 8.6933L10.4236 16.3068L6.96289 12.8461"
+          stroke="#21CDAE"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    `;
+    }
+};
+exports.CheckmarkIcon = CheckmarkIcon;
+exports.CheckmarkIcon = CheckmarkIcon = __decorate([
+    (0, decorators_js_1.customElement)("checkmark-icon")
+], CheckmarkIcon);

package/dist/ui/icons/close-circle.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from "lit";
+export declare class CloseCircleIcon extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/ui/icons/close-circle.js

@@ -0,0 +1,35 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseCircleIcon = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let CloseCircleIcon = class CloseCircleIcon extends lit_1.LitElement {
+    render() {
+        return (0, lit_1.html) `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="13"
+        viewBox="0 0 14 13"
+        fill="none"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M6.99935 0.166687C3.50735 0.166687 0.666016 3.00802 0.666016 6.50002C0.666016 9.99269 3.50735 12.8334 6.99935 12.8334C10.4913 12.8334 13.3327 9.99269 13.3327 6.50002C13.3327 3.00802 10.4913 0.166687 6.99935 0.166687ZM9.52602 9.02669C9.72135 9.22202 9.72135 9.53869 9.52602 9.73402C9.42802 9.83202 9.30068 9.88069 9.17268 9.88069C9.04468 9.88069 8.91735 9.83202 8.81935 9.73402L6.99935 7.91402L5.17935 9.73402C5.08135 9.83202 4.95402 9.88069 4.82602 9.88069C4.69802 9.88069 4.57068 9.83202 4.47268 9.73402C4.27735 9.53869 4.27735 9.22202 4.47268 9.02669L6.29268 7.20669L4.47268 5.38669C4.27735 5.19135 4.27735 4.87469 4.47268 4.67935C4.66802 4.48402 4.98468 4.48402 5.18002 4.67935L6.99935 6.49935L8.81935 4.67935C9.01468 4.48402 9.33135 4.48402 9.52668 4.67935C9.72202 4.87469 9.72202 5.19135 9.52668 5.38669L7.70668 7.20669L9.52602 9.02669Z"
+          fill="white"
+        />
+      </svg>
+    `;
+    }
+};
+exports.CloseCircleIcon = CloseCircleIcon;
+exports.CloseCircleIcon = CloseCircleIcon = __decorate([
+    (0, decorators_js_1.customElement)("close-circle-icon")
+], CloseCircleIcon);