@internetarchive/donation-form 0.5.17-a3 → 0.5.18-alpha.1

package/dist/src/form-elements/payment-selector.js

@@ -1,287 +1,287 @@
-import { __awaiter, __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import applePayButtonImage from '@internetarchive/icon-applepay';
-import googlePayButtonImage from '@internetarchive/icon-googlepay';
-import paypalButtonImage from '@internetarchive/icon-paypal';
-import venmoButtonImage from '@internetarchive/icon-venmo';
-var PaymentButtonMode;
-(function (PaymentButtonMode) {
-    PaymentButtonMode["Loading"] = "loading";
-    PaymentButtonMode["Available"] = "available";
-    PaymentButtonMode["Unavailable"] = "unavailable";
-})(PaymentButtonMode || (PaymentButtonMode = {}));
-let PaymentSelector = class PaymentSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.donationInfoValid = true;
-        this.applePayMode = PaymentButtonMode.Loading;
-        this.googlePayMode = PaymentButtonMode.Loading;
-        this.venmoMode = PaymentButtonMode.Loading;
-        this.payPalMode = PaymentButtonMode.Loading;
-    }
-    /** @inheritdoc */
-    render() {
-        return html `
-      <div
-        class="payment-container ${this.donationInfoValid
-            ? 'donation-info-valid'
-            : 'donation-info-invalid'}
-          "
-      >
-        <div class="payment-provider-container">
-          <button
-            class="applepay provider-button ${this.applePayMode}"
-            @click=${this.applePaySelected}
-            tabindex="0"
-          >
-            <div class="payment-image">${applePayButtonImage}</div>
-          </button>
-
-          <button
-            class="googlepay provider-button ${this.googlePayMode}"
-            @click=${this.googlePaySelected}
-            tabindex="0"
-          >
-            <div class="payment-image">${googlePayButtonImage}</div>
-          </button>
-
-          <button
-            class="venmo provider-button ${this.venmoMode}"
-            @click=${this.venmoSelected}
-            tabindex="0"
-          >
-            <div class="payment-image">${venmoButtonImage}</div>
-          </button>
-
-          <div class="paypal-container provider-button ${this.payPalMode}" tabindex="0">
-            <div class="payment-image">
-              <div class="paypal-local-button" @click=${this.localPaypalButtonClicked}>
-                ${paypalButtonImage}
-              </div>
-              <slot name="paypal-button"></slot>
-            </div>
-          </div>
-        </div>
-
-        <div class="credit-card-container">
-          <button
-            @click=${this.creditCardSelected}
-            class="button-style credit-card-button"
-            tabindex="0"
-          >
-            <div class="cc-title">Credit Card</div>
-            <div class="cc-background"></div>
-          </button>
-        </div>
-      </div>
-    `;
-    }
-    /** @inheritdoc */
-    firstUpdated() {
-        this.dispatchEvent(new Event('firstUpdated'));
-    }
-    /** @inheritdoc */
-    updated(changed) {
-        if (changed.has('paymentProviders')) {
-            this.setButtonVisibility();
-        }
-    }
-    showPaypalButton() {
-        this.payPalMode = PaymentButtonMode.Available;
-    }
-    setButtonVisibility() {
-        var _a, _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            (_a = this.paymentProviders) === null || _a === void 0 ? void 0 : _a.venmoHandler.get().then(handler => {
-                if (!handler) {
-                    this.venmoMode = PaymentButtonMode.Unavailable;
-                    return;
-                }
-                handler
-                    .isBrowserSupported()
-                    .then(supported => {
-                    this.venmoMode = supported
-                        ? PaymentButtonMode.Available
-                        : PaymentButtonMode.Unavailable;
-                })
-                    .catch(reason => {
-                    console.error('error loading venmo', reason);
-                    this.venmoMode = PaymentButtonMode.Unavailable;
-                });
-            }).catch(reason => {
-                console.error('venmo unavailable', reason);
-                this.venmoMode = PaymentButtonMode.Unavailable;
-            });
-            (_b = this.paymentProviders) === null || _b === void 0 ? void 0 : _b.applePayHandler.get().then(handler => {
-                if (!handler) {
-                    console.error('applePayHandler unavailable');
-                    this.applePayMode = PaymentButtonMode.Unavailable;
-                    return;
-                }
-                handler
-                    .isAvailable()
-                    .then(supported => {
-                    this.applePayMode = supported
-                        ? PaymentButtonMode.Available
-                        : PaymentButtonMode.Unavailable;
-                })
-                    .catch(reason => {
-                    console.error('error loading applepay', reason);
-                    this.applePayMode = PaymentButtonMode.Unavailable;
-                });
-            }).catch(reason => {
-                console.error('apple pay unavailable', reason);
-                this.applePayMode = PaymentButtonMode.Unavailable;
-            });
-            (_c = this.paymentProviders) === null || _c === void 0 ? void 0 : _c.googlePayHandler.get().then(handler => {
-                if (!handler) {
-                    console.error('google pay handler unavailable');
-                    this.googlePayMode = PaymentButtonMode.Unavailable;
-                    return;
-                }
-                handler
-                    .isBrowserSupported()
-                    .then(supported => {
-                    this.googlePayMode = supported
-                        ? PaymentButtonMode.Available
-                        : PaymentButtonMode.Unavailable;
-                })
-                    .catch(reason => {
-                    console.error('error loading googlepay', reason);
-                    this.googlePayMode = PaymentButtonMode.Unavailable;
-                });
-            }).catch(reason => {
-                console.error('google pay unavailable', reason);
-                this.googlePayMode = PaymentButtonMode.Unavailable;
-            });
-        });
-    }
-    googlePaySelected() {
-        this.dispatchEvent(new Event('googlePaySelected'));
-    }
-    applePaySelected(e) {
-        const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });
-        this.dispatchEvent(event);
-    }
-    venmoSelected() {
-        this.dispatchEvent(new Event('venmoSelected'));
-    }
-    creditCardSelected() {
-        this.dispatchEvent(new Event('creditCardSelected'));
-    }
-    localPaypalButtonClicked() {
-        this.dispatchEvent(new Event('paypalBlockerSelected'));
-    }
-    /** @inheritdoc */
-    static get styles() {
-        const paymentButtonWidthCss = css `var(--paymentButtonWidth, 5rem)`;
-        const paymentButtonHeightCss = css `var(--paymentButtonHeight, 3.2rem)`;
-        const creditCardFontSizeCss = css `var(--creditCardFontSize, 1.8rem)`;
-        return css `
-      button {
-        color: inherit;
-        font-family: inherit;
-      }
-
-      .payment-container {
-        width: 100%;
-      }
-
-      .payment-provider-container {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        grid-gap: 1rem;
-        margin-bottom: 1rem;
-        max-width: 23rem;
-      }
-
-      .provider-button {
-        border: 0;
-        padding: 0;
-        background: none;
-        cursor: pointer;
-        width: ${paymentButtonWidthCss};
-        height: ${paymentButtonHeightCss};
-      }
-
-      .provider-button.unavailable {
-        display: none;
-      }
-
-      .provider-button.loading {
-        border: 1px solid #ddd;
-        border-radius: 2px;
-        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */
-        margin-bottom: -2px;
-      }
-
-      .provider-button.loading .payment-image {
-        display: none;
-      }
-
-      .paypal-local-button {
-        position: absolute;
-        width: ${paymentButtonWidthCss};
-        height: ${paymentButtonHeightCss};
-      }
-
-      .donation-info-valid .paypal-local-button {
-        z-index: 0;
-      }
-
-      .donation-info-invalid .paypal-local-button {
-        z-index: 250;
-      }
-
-      .credit-card-button {
-        color: var(--ccButtonFontColor, #333);
-        background-color: var(--ccButtonColor, white);
-        border: 1px solid #333;
-        border-radius: 4px;
-        cursor: pointer;
-        margin: 0;
-        padding: 0.7rem 1rem;
-        width: 100%;
-      }
-
-      .credit-card-button .cc-background {
-        height: 2.4rem;
-        width: 100%;
-        background-repeat: no-repeat;
-        background-image: url(https://archive.org/images/cc_logos.png);
-        background-position: 50% 50%;
-        background-size: contain;
-      }
-
-      .credit-card-button .cc-title {
-        font-size: ${creditCardFontSizeCss};
-        font-weight: 700;
-        margin-bottom: 0.5rem;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], PaymentSelector.prototype, "donationInfoValid", void 0);
-__decorate([
-    property({ type: Object })
-], PaymentSelector.prototype, "paymentProviders", void 0);
-__decorate([
-    property({ type: String })
-], PaymentSelector.prototype, "applePayMode", void 0);
-__decorate([
-    property({ type: String })
-], PaymentSelector.prototype, "googlePayMode", void 0);
-__decorate([
-    property({ type: String })
-], PaymentSelector.prototype, "venmoMode", void 0);
-__decorate([
-    property({ type: String })
-], PaymentSelector.prototype, "payPalMode", void 0);
-PaymentSelector = __decorate([
-    customElement('payment-selector')
-], PaymentSelector);
-export { PaymentSelector };
+import { __awaiter, __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import applePayButtonImage from '@internetarchive/icon-applepay';
+import googlePayButtonImage from '@internetarchive/icon-googlepay';
+import paypalButtonImage from '@internetarchive/icon-paypal';
+import venmoButtonImage from '@internetarchive/icon-venmo';
+var PaymentButtonMode;
+(function (PaymentButtonMode) {
+    PaymentButtonMode["Loading"] = "loading";
+    PaymentButtonMode["Available"] = "available";
+    PaymentButtonMode["Unavailable"] = "unavailable";
+})(PaymentButtonMode || (PaymentButtonMode = {}));
+let PaymentSelector = class PaymentSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.donationInfoValid = true;
+        this.applePayMode = PaymentButtonMode.Loading;
+        this.googlePayMode = PaymentButtonMode.Loading;
+        this.venmoMode = PaymentButtonMode.Loading;
+        this.payPalMode = PaymentButtonMode.Loading;
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      <div
+        class="payment-container ${this.donationInfoValid
+            ? 'donation-info-valid'
+            : 'donation-info-invalid'}
+          "
+      >
+        <div class="payment-provider-container">
+          <button
+            class="applepay provider-button ${this.applePayMode}"
+            @click=${this.applePaySelected}
+            tabindex="0"
+          >
+            <div class="payment-image">${applePayButtonImage}</div>
+          </button>
+
+          <button
+            class="googlepay provider-button ${this.googlePayMode}"
+            @click=${this.googlePaySelected}
+            tabindex="0"
+          >
+            <div class="payment-image">${googlePayButtonImage}</div>
+          </button>
+
+          <button
+            class="venmo provider-button ${this.venmoMode}"
+            @click=${this.venmoSelected}
+            tabindex="0"
+          >
+            <div class="payment-image">${venmoButtonImage}</div>
+          </button>
+
+          <div class="paypal-container provider-button ${this.payPalMode}" tabindex="0">
+            <div class="payment-image">
+              <div class="paypal-local-button" @click=${this.localPaypalButtonClicked}>
+                ${paypalButtonImage}
+              </div>
+              <slot name="paypal-button"></slot>
+            </div>
+          </div>
+        </div>
+
+        <div class="credit-card-container">
+          <button
+            @click=${this.creditCardSelected}
+            class="button-style credit-card-button"
+            tabindex="0"
+          >
+            <div class="cc-title">Credit Card</div>
+            <div class="cc-background"></div>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    /** @inheritdoc */
+    firstUpdated() {
+        this.dispatchEvent(new Event('firstUpdated'));
+    }
+    /** @inheritdoc */
+    updated(changed) {
+        if (changed.has('paymentProviders')) {
+            this.setButtonVisibility();
+        }
+    }
+    showPaypalButton() {
+        this.payPalMode = PaymentButtonMode.Available;
+    }
+    setButtonVisibility() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            (_a = this.paymentProviders) === null || _a === void 0 ? void 0 : _a.venmoHandler.get().then(handler => {
+                if (!handler) {
+                    this.venmoMode = PaymentButtonMode.Unavailable;
+                    return;
+                }
+                handler
+                    .isBrowserSupported()
+                    .then(supported => {
+                    this.venmoMode = supported
+                        ? PaymentButtonMode.Available
+                        : PaymentButtonMode.Unavailable;
+                })
+                    .catch(reason => {
+                    console.error('error loading venmo', reason);
+                    this.venmoMode = PaymentButtonMode.Unavailable;
+                });
+            }).catch(reason => {
+                console.error('venmo unavailable', reason);
+                this.venmoMode = PaymentButtonMode.Unavailable;
+            });
+            (_b = this.paymentProviders) === null || _b === void 0 ? void 0 : _b.applePayHandler.get().then(handler => {
+                if (!handler) {
+                    console.error('applePayHandler unavailable');
+                    this.applePayMode = PaymentButtonMode.Unavailable;
+                    return;
+                }
+                handler
+                    .isAvailable()
+                    .then(supported => {
+                    this.applePayMode = supported
+                        ? PaymentButtonMode.Available
+                        : PaymentButtonMode.Unavailable;
+                })
+                    .catch(reason => {
+                    console.error('error loading applepay', reason);
+                    this.applePayMode = PaymentButtonMode.Unavailable;
+                });
+            }).catch(reason => {
+                console.error('apple pay unavailable', reason);
+                this.applePayMode = PaymentButtonMode.Unavailable;
+            });
+            (_c = this.paymentProviders) === null || _c === void 0 ? void 0 : _c.googlePayHandler.get().then(handler => {
+                if (!handler) {
+                    console.error('google pay handler unavailable');
+                    this.googlePayMode = PaymentButtonMode.Unavailable;
+                    return;
+                }
+                handler
+                    .isBrowserSupported()
+                    .then(supported => {
+                    this.googlePayMode = supported
+                        ? PaymentButtonMode.Available
+                        : PaymentButtonMode.Unavailable;
+                })
+                    .catch(reason => {
+                    console.error('error loading googlepay', reason);
+                    this.googlePayMode = PaymentButtonMode.Unavailable;
+                });
+            }).catch(reason => {
+                console.error('google pay unavailable', reason);
+                this.googlePayMode = PaymentButtonMode.Unavailable;
+            });
+        });
+    }
+    googlePaySelected() {
+        this.dispatchEvent(new Event('googlePaySelected'));
+    }
+    applePaySelected(e) {
+        const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });
+        this.dispatchEvent(event);
+    }
+    venmoSelected() {
+        this.dispatchEvent(new Event('venmoSelected'));
+    }
+    creditCardSelected() {
+        this.dispatchEvent(new Event('creditCardSelected'));
+    }
+    localPaypalButtonClicked() {
+        this.dispatchEvent(new Event('paypalBlockerSelected'));
+    }
+    /** @inheritdoc */
+    static get styles() {
+        const paymentButtonWidthCss = css `var(--paymentButtonWidth, 5rem)`;
+        const paymentButtonHeightCss = css `var(--paymentButtonHeight, 3.2rem)`;
+        const creditCardFontSizeCss = css `var(--creditCardFontSize, 1.8rem)`;
+        return css `
+      button {
+        color: inherit;
+        font-family: inherit;
+      }
+
+      .payment-container {
+        width: 100%;
+      }
+
+      .payment-provider-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-gap: 1rem;
+        margin-bottom: 1rem;
+        max-width: 23rem;
+      }
+
+      .provider-button {
+        border: 0;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+        width: ${paymentButtonWidthCss};
+        height: ${paymentButtonHeightCss};
+      }
+
+      .provider-button.unavailable {
+        display: none;
+      }
+
+      .provider-button.loading {
+        border: 1px solid #ddd;
+        border-radius: 2px;
+        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */
+        margin-bottom: -2px;
+      }
+
+      .provider-button.loading .payment-image {
+        display: none;
+      }
+
+      .paypal-local-button {
+        position: absolute;
+        width: ${paymentButtonWidthCss};
+        height: ${paymentButtonHeightCss};
+      }
+
+      .donation-info-valid .paypal-local-button {
+        z-index: 0;
+      }
+
+      .donation-info-invalid .paypal-local-button {
+        z-index: 250;
+      }
+
+      .credit-card-button {
+        color: var(--ccButtonFontColor, #333);
+        background-color: var(--ccButtonColor, white);
+        border: 1px solid #333;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 0;
+        padding: 0.7rem 1rem;
+        width: 100%;
+      }
+
+      .credit-card-button .cc-background {
+        height: 2.4rem;
+        width: 100%;
+        background-repeat: no-repeat;
+        background-image: url(https://archive.org/images/cc_logos.png);
+        background-position: 50% 50%;
+        background-size: contain;
+      }
+
+      .credit-card-button .cc-title {
+        font-size: ${creditCardFontSizeCss};
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], PaymentSelector.prototype, "donationInfoValid", void 0);
+__decorate([
+    property({ type: Object })
+], PaymentSelector.prototype, "paymentProviders", void 0);
+__decorate([
+    property({ type: String })
+], PaymentSelector.prototype, "applePayMode", void 0);
+__decorate([
+    property({ type: String })
+], PaymentSelector.prototype, "googlePayMode", void 0);
+__decorate([
+    property({ type: String })
+], PaymentSelector.prototype, "venmoMode", void 0);
+__decorate([
+    property({ type: String })
+], PaymentSelector.prototype, "payPalMode", void 0);
+PaymentSelector = __decorate([
+    customElement('payment-selector')
+], PaymentSelector);
+export { PaymentSelector };
 //# sourceMappingURL=payment-selector.js.map

package/dist/src/form-elements/payment-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport applePayButtonImage from '@internetarchive/icon-applepay';\nimport googlePayButtonImage from '@internetarchive/icon-googlepay';\nimport paypalButtonImage from '@internetarchive/icon-paypal';\nimport venmoButtonImage from '@internetarchive/icon-venmo';\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\n\nenum PaymentButtonMode {\n  Loading = 'loading',\n  Available = 'available',\n  Unavailable = 'unavailable',\n}\n\n@customElement('payment-selector')\nexport class PaymentSelector extends LitElement {\n  @property({ type: Boolean }) donationInfoValid = true;\n\n  @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n  @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div\n        class=\"payment-container ${this.donationInfoValid\n          ? 'donation-info-valid'\n          : 'donation-info-invalid'}\n          \"\n      >\n        <div class=\"payment-provider-container\">\n          <button\n            class=\"applepay provider-button ${this.applePayMode}\"\n            @click=${this.applePaySelected}\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">${applePayButtonImage}</div>\n          </button>\n\n          <button\n            class=\"googlepay provider-button ${this.googlePayMode}\"\n            @click=${this.googlePaySelected}\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">${googlePayButtonImage}</div>\n          </button>\n\n          <button\n            class=\"venmo provider-button ${this.venmoMode}\"\n            @click=${this.venmoSelected}\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">${venmoButtonImage}</div>\n          </button>\n\n          <div class=\"paypal-container provider-button ${this.payPalMode}\" tabindex=\"0\">\n            <div class=\"payment-image\">\n              <div class=\"paypal-local-button\" @click=${this.localPaypalButtonClicked}>\n                ${paypalButtonImage}\n              </div>\n              <slot name=\"paypal-button\"></slot>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"credit-card-container\">\n          <button\n            @click=${this.creditCardSelected}\n            class=\"button-style credit-card-button\"\n            tabindex=\"0\"\n          >\n            <div class=\"cc-title\">Credit Card</div>\n            <div class=\"cc-background\"></div>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  firstUpdated(): void {\n    this.dispatchEvent(new Event('firstUpdated'));\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    if (changed.has('paymentProviders')) {\n      this.setButtonVisibility();\n    }\n  }\n\n  showPaypalButton(): void {\n    this.payPalMode = PaymentButtonMode.Available;\n  }\n\n  private async setButtonVisibility(): Promise<void> {\n    this.paymentProviders?.venmoHandler\n      .get()\n      .then(handler => {\n        if (!handler) {\n          this.venmoMode = PaymentButtonMode.Unavailable;\n          return;\n        }\n\n        handler\n          .isBrowserSupported()\n          .then(supported => {\n            this.venmoMode = supported\n              ? PaymentButtonMode.Available\n              : PaymentButtonMode.Unavailable;\n          })\n          .catch(reason => {\n            console.error('error loading venmo', reason);\n            this.venmoMode = PaymentButtonMode.Unavailable;\n          });\n      })\n      .catch(reason => {\n        console.error('venmo unavailable', reason);\n        this.venmoMode = PaymentButtonMode.Unavailable;\n      });\n\n    this.paymentProviders?.applePayHandler\n      .get()\n      .then(handler => {\n        if (!handler) {\n          console.error('applePayHandler unavailable');\n          this.applePayMode = PaymentButtonMode.Unavailable;\n          return;\n        }\n\n        handler\n          .isAvailable()\n          .then(supported => {\n            this.applePayMode = supported\n              ? PaymentButtonMode.Available\n              : PaymentButtonMode.Unavailable;\n          })\n          .catch(reason => {\n            console.error('error loading applepay', reason);\n            this.applePayMode = PaymentButtonMode.Unavailable;\n          });\n      })\n      .catch(reason => {\n        console.error('apple pay unavailable', reason);\n        this.applePayMode = PaymentButtonMode.Unavailable;\n      });\n\n    this.paymentProviders?.googlePayHandler\n      .get()\n      .then(handler => {\n        if (!handler) {\n          console.error('google pay handler unavailable');\n          this.googlePayMode = PaymentButtonMode.Unavailable;\n          return;\n        }\n\n        handler\n          .isBrowserSupported()\n          .then(supported => {\n            this.googlePayMode = supported\n              ? PaymentButtonMode.Available\n              : PaymentButtonMode.Unavailable;\n          })\n          .catch(reason => {\n            console.error('error loading googlepay', reason);\n            this.googlePayMode = PaymentButtonMode.Unavailable;\n          });\n      })\n      .catch(reason => {\n        console.error('google pay unavailable', reason);\n        this.googlePayMode = PaymentButtonMode.Unavailable;\n      });\n  }\n\n  private googlePaySelected(): void {\n    this.dispatchEvent(new Event('googlePaySelected'));\n  }\n\n  private applePaySelected(e: Event): void {\n    const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\n    this.dispatchEvent(event);\n  }\n\n  private venmoSelected(): void {\n    this.dispatchEvent(new Event('venmoSelected'));\n  }\n\n  private creditCardSelected(): void {\n    this.dispatchEvent(new Event('creditCardSelected'));\n  }\n\n  private localPaypalButtonClicked(): void {\n    this.dispatchEvent(new Event('paypalBlockerSelected'));\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\n    const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\n    const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\n\n    return css`\n      button {\n        color: inherit;\n        font-family: inherit;\n      }\n\n      .payment-container {\n        width: 100%;\n      }\n\n      .payment-provider-container {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr 1fr;\n        grid-gap: 1rem;\n        margin-bottom: 1rem;\n        max-width: 23rem;\n      }\n\n      .provider-button {\n        border: 0;\n        padding: 0;\n        background: none;\n        cursor: pointer;\n        width: ${paymentButtonWidthCss};\n        height: ${paymentButtonHeightCss};\n      }\n\n      .provider-button.unavailable {\n        display: none;\n      }\n\n      .provider-button.loading {\n        border: 1px solid #ddd;\n        border-radius: 2px;\n        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */\n        margin-bottom: -2px;\n      }\n\n      .provider-button.loading .payment-image {\n        display: none;\n      }\n\n      .paypal-local-button {\n        position: absolute;\n        width: ${paymentButtonWidthCss};\n        height: ${paymentButtonHeightCss};\n      }\n\n      .donation-info-valid .paypal-local-button {\n        z-index: 0;\n      }\n\n      .donation-info-invalid .paypal-local-button {\n        z-index: 250;\n      }\n\n      .credit-card-button {\n        color: var(--ccButtonFontColor, #333);\n        background-color: var(--ccButtonColor, white);\n        border: 1px solid #333;\n        border-radius: 4px;\n        cursor: pointer;\n        margin: 0;\n        padding: 0.7rem 1rem;\n        width: 100%;\n      }\n\n      .credit-card-button .cc-background {\n        height: 2.4rem;\n        width: 100%;\n        background-repeat: no-repeat;\n        background-image: url(https://archive.org/images/cc_logos.png);\n        background-position: 50% 50%;\n        background-size: contain;\n      }\n\n      .credit-card-button .cc-title {\n        font-size: ${creditCardFontSizeCss};\n        font-weight: 700;\n        margin-bottom: 0.5rem;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6C,MAAM,KAAK,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,mBAAmB,MAAM,gCAAgC,CAAC;AACjE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAG3D,IAAK,iBAIJ;AAJD,WAAK,iBAAiB;IACpB,wCAAmB,CAAA;IACnB,4CAAuB,CAAA;IACvB,gDAA2B,CAAA;AAC7B,CAAC,EAJI,iBAAiB,KAAjB,iBAAiB,QAIrB;AAGD,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAC+B,sBAAiB,GAAG,IAAI,CAAC;QAIlB,iBAAY,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAE5D,kBAAa,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAE7D,cAAS,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAEzD,eAAU,GAAsB,iBAAiB,CAAC,OAAO,CAAC;IAyQhG,CAAC;IAvQC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,iBAAiB;YAC/C,CAAC,CAAC,qBAAqB;YACvB,CAAC,CAAC,uBAAuB;;;;;8CAKW,IAAI,CAAC,YAAY;qBAC1C,IAAI,CAAC,gBAAgB;;;yCAGD,mBAAmB;;;;+CAIb,IAAI,CAAC,aAAa;qBAC5C,IAAI,CAAC,iBAAiB;;;yCAGF,oBAAoB;;;;2CAIlB,IAAI,CAAC,SAAS;qBACpC,IAAI,CAAC,aAAa;;;yCAGE,gBAAgB;;;yDAGA,IAAI,CAAC,UAAU;;wDAEhB,IAAI,CAAC,wBAAwB;kBACnE,iBAAiB;;;;;;;;;qBASd,IAAI,CAAC,kBAAkB;;;;;;;;;KASvC,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,kBAAkB;IAClB,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;YACnC,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC;IAChD,CAAC;IAEa,mBAAmB;;;YAC/B,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAChC,GAAG,GACH,IAAI,CAAC,OAAO,CAAC,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;oBACZ,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,WAAW,CAAC;oBAC/C,OAAO;iBACR;gBAED,OAAO;qBACJ,kBAAkB,EAAE;qBACpB,IAAI,CAAC,SAAS,CAAC,EAAE;oBAChB,IAAI,CAAC,SAAS,GAAG,SAAS;wBACxB,CAAC,CAAC,iBAAiB,CAAC,SAAS;wBAC7B,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC;gBACpC,CAAC,CAAC;qBACD,KAAK,CAAC,MAAM,CAAC,EAAE;oBACd,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;oBAC7C,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,WAAW,CAAC;gBACjD,CAAC,CAAC,CAAC;YACP,CAAC,EACA,KAAK,CAAC,MAAM,CAAC,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;gBAC3C,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,WAAW,CAAC;YACjD,CAAC,EAAE;YAEL,MAAA,IAAI,CAAC,gBAAgB,0CAAE,eAAe,CACnC,GAAG,GACH,IAAI,CAAC,OAAO,CAAC,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;oBAC7C,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,WAAW,CAAC;oBAClD,OAAO;iBACR;gBAED,OAAO;qBACJ,WAAW,EAAE;qBACb,IAAI,CAAC,SAAS,CAAC,EAAE;oBAChB,IAAI,CAAC,YAAY,GAAG,SAAS;wBAC3B,CAAC,CAAC,iBAAiB,CAAC,SAAS;wBAC7B,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC;gBACpC,CAAC,CAAC;qBACD,KAAK,CAAC,MAAM,CAAC,EAAE;oBACd,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;oBAChD,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,WAAW,CAAC;gBACpD,CAAC,CAAC,CAAC;YACP,CAAC,EACA,KAAK,CAAC,MAAM,CAAC,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,WAAW,CAAC;YACpD,CAAC,EAAE;YAEL,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB,CACpC,GAAG,GACH,IAAI,CAAC,OAAO,CAAC,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;oBAChD,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,WAAW,CAAC;oBACnD,OAAO;iBACR;gBAED,OAAO;qBACJ,kBAAkB,EAAE;qBACpB,IAAI,CAAC,SAAS,CAAC,EAAE;oBAChB,IAAI,CAAC,aAAa,GAAG,SAAS;wBAC5B,CAAC,CAAC,iBAAiB,CAAC,SAAS;wBAC7B,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC;gBACpC,CAAC,CAAC;qBACD,KAAK,CAAC,MAAM,CAAC,EAAE;oBACd,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;oBACjD,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,WAAW,CAAC;gBACrD,CAAC,CAAC,CAAC;YACP,CAAC,EACA,KAAK,CAAC,MAAM,CAAC,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;gBAChD,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,WAAW,CAAC;YACrD,CAAC,EAAE;;KACN;IAEO,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;IACrD,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IACjD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACtD,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,qBAAqB,GAAG,GAAG,CAAA,iCAAiC,CAAC;QACnE,MAAM,sBAAsB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QACvE,MAAM,qBAAqB,GAAG,GAAG,CAAA,mCAAmC,CAAC;QAErE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;iBAuBG,qBAAqB;kBACpB,sBAAsB;;;;;;;;;;;;;;;;;;;;iBAoBvB,qBAAqB;kBACpB,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgCnB,qBAAqB;;;;KAIrC,CAAC;IACJ,CAAC;CACF,CAAA;AAnR8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAA0B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAqE;AAEpE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAsE;AAErE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAkE;AAEjE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmE;AAXnF,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAoR3B;SApRY,eAAe","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport applePayButtonImage from '@internetarchive/icon-applepay';\r\nimport googlePayButtonImage from '@internetarchive/icon-googlepay';\r\nimport paypalButtonImage from '@internetarchive/icon-paypal';\r\nimport venmoButtonImage from '@internetarchive/icon-venmo';\r\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\r\n\r\nenum PaymentButtonMode {\r\n  Loading = 'loading',\r\n  Available = 'available',\r\n  Unavailable = 'unavailable',\r\n}\r\n\r\n@customElement('payment-selector')\r\nexport class PaymentSelector extends LitElement {\r\n  @property({ type: Boolean }) donationInfoValid = true;\r\n\r\n  @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\r\n\r\n  @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div\r\n        class=\"payment-container ${this.donationInfoValid\r\n          ? 'donation-info-valid'\r\n          : 'donation-info-invalid'}\r\n          \"\r\n      >\r\n        <div class=\"payment-provider-container\">\r\n          <button\r\n            class=\"applepay provider-button ${this.applePayMode}\"\r\n            @click=${this.applePaySelected}\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">${applePayButtonImage}</div>\r\n          </button>\r\n\r\n          <button\r\n            class=\"googlepay provider-button ${this.googlePayMode}\"\r\n            @click=${this.googlePaySelected}\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">${googlePayButtonImage}</div>\r\n          </button>\r\n\r\n          <button\r\n            class=\"venmo provider-button ${this.venmoMode}\"\r\n            @click=${this.venmoSelected}\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">${venmoButtonImage}</div>\r\n          </button>\r\n\r\n          <div class=\"paypal-container provider-button ${this.payPalMode}\" tabindex=\"0\">\r\n            <div class=\"payment-image\">\r\n              <div class=\"paypal-local-button\" @click=${this.localPaypalButtonClicked}>\r\n                ${paypalButtonImage}\r\n              </div>\r\n              <slot name=\"paypal-button\"></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"credit-card-container\">\r\n          <button\r\n            @click=${this.creditCardSelected}\r\n            class=\"button-style credit-card-button\"\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"cc-title\">Credit Card</div>\r\n            <div class=\"cc-background\"></div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  firstUpdated(): void {\r\n    this.dispatchEvent(new Event('firstUpdated'));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  updated(changed: PropertyValues): void {\r\n    if (changed.has('paymentProviders')) {\r\n      this.setButtonVisibility();\r\n    }\r\n  }\r\n\r\n  showPaypalButton(): void {\r\n    this.payPalMode = PaymentButtonMode.Available;\r\n  }\r\n\r\n  private async setButtonVisibility(): Promise<void> {\r\n    this.paymentProviders?.venmoHandler\r\n      .get()\r\n      .then(handler => {\r\n        if (!handler) {\r\n          this.venmoMode = PaymentButtonMode.Unavailable;\r\n          return;\r\n        }\r\n\r\n        handler\r\n          .isBrowserSupported()\r\n          .then(supported => {\r\n            this.venmoMode = supported\r\n              ? PaymentButtonMode.Available\r\n              : PaymentButtonMode.Unavailable;\r\n          })\r\n          .catch(reason => {\r\n            console.error('error loading venmo', reason);\r\n            this.venmoMode = PaymentButtonMode.Unavailable;\r\n          });\r\n      })\r\n      .catch(reason => {\r\n        console.error('venmo unavailable', reason);\r\n        this.venmoMode = PaymentButtonMode.Unavailable;\r\n      });\r\n\r\n    this.paymentProviders?.applePayHandler\r\n      .get()\r\n      .then(handler => {\r\n        if (!handler) {\r\n          console.error('applePayHandler unavailable');\r\n          this.applePayMode = PaymentButtonMode.Unavailable;\r\n          return;\r\n        }\r\n\r\n        handler\r\n          .isAvailable()\r\n          .then(supported => {\r\n            this.applePayMode = supported\r\n              ? PaymentButtonMode.Available\r\n              : PaymentButtonMode.Unavailable;\r\n          })\r\n          .catch(reason => {\r\n            console.error('error loading applepay', reason);\r\n            this.applePayMode = PaymentButtonMode.Unavailable;\r\n          });\r\n      })\r\n      .catch(reason => {\r\n        console.error('apple pay unavailable', reason);\r\n        this.applePayMode = PaymentButtonMode.Unavailable;\r\n      });\r\n\r\n    this.paymentProviders?.googlePayHandler\r\n      .get()\r\n      .then(handler => {\r\n        if (!handler) {\r\n          console.error('google pay handler unavailable');\r\n          this.googlePayMode = PaymentButtonMode.Unavailable;\r\n          return;\r\n        }\r\n\r\n        handler\r\n          .isBrowserSupported()\r\n          .then(supported => {\r\n            this.googlePayMode = supported\r\n              ? PaymentButtonMode.Available\r\n              : PaymentButtonMode.Unavailable;\r\n          })\r\n          .catch(reason => {\r\n            console.error('error loading googlepay', reason);\r\n            this.googlePayMode = PaymentButtonMode.Unavailable;\r\n          });\r\n      })\r\n      .catch(reason => {\r\n        console.error('google pay unavailable', reason);\r\n        this.googlePayMode = PaymentButtonMode.Unavailable;\r\n      });\r\n  }\r\n\r\n  private googlePaySelected(): void {\r\n    this.dispatchEvent(new Event('googlePaySelected'));\r\n  }\r\n\r\n  private applePaySelected(e: Event): void {\r\n    const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private venmoSelected(): void {\r\n    this.dispatchEvent(new Event('venmoSelected'));\r\n  }\r\n\r\n  private creditCardSelected(): void {\r\n    this.dispatchEvent(new Event('creditCardSelected'));\r\n  }\r\n\r\n  private localPaypalButtonClicked(): void {\r\n    this.dispatchEvent(new Event('paypalBlockerSelected'));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\r\n    const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\r\n    const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\r\n\r\n    return css`\r\n      button {\r\n        color: inherit;\r\n        font-family: inherit;\r\n      }\r\n\r\n      .payment-container {\r\n        width: 100%;\r\n      }\r\n\r\n      .payment-provider-container {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr 1fr 1fr;\r\n        grid-gap: 1rem;\r\n        margin-bottom: 1rem;\r\n        max-width: 23rem;\r\n      }\r\n\r\n      .provider-button {\r\n        border: 0;\r\n        padding: 0;\r\n        background: none;\r\n        cursor: pointer;\r\n        width: ${paymentButtonWidthCss};\r\n        height: ${paymentButtonHeightCss};\r\n      }\r\n\r\n      .provider-button.unavailable {\r\n        display: none;\r\n      }\r\n\r\n      .provider-button.loading {\r\n        border: 1px solid #ddd;\r\n        border-radius: 2px;\r\n        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */\r\n        margin-bottom: -2px;\r\n      }\r\n\r\n      .provider-button.loading .payment-image {\r\n        display: none;\r\n      }\r\n\r\n      .paypal-local-button {\r\n        position: absolute;\r\n        width: ${paymentButtonWidthCss};\r\n        height: ${paymentButtonHeightCss};\r\n      }\r\n\r\n      .donation-info-valid .paypal-local-button {\r\n        z-index: 0;\r\n      }\r\n\r\n      .donation-info-invalid .paypal-local-button {\r\n        z-index: 250;\r\n      }\r\n\r\n      .credit-card-button {\r\n        color: var(--ccButtonFontColor, #333);\r\n        background-color: var(--ccButtonColor, white);\r\n        border: 1px solid #333;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        margin: 0;\r\n        padding: 0.7rem 1rem;\r\n        width: 100%;\r\n      }\r\n\r\n      .credit-card-button .cc-background {\r\n        height: 2.4rem;\r\n        width: 100%;\r\n        background-repeat: no-repeat;\r\n        background-image: url(https://archive.org/images/cc_logos.png);\r\n        background-position: 50% 50%;\r\n        background-size: contain;\r\n      }\r\n\r\n      .credit-card-button .cc-title {\r\n        font-size: ${creditCardFontSizeCss};\r\n        font-weight: 700;\r\n        margin-bottom: 0.5rem;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}