ui.shipaid.com 0.2.12 → 0.2.13-beta

package/dist/widget.es.js

@@ -311,16 +311,7 @@ const i = window, s$1 = i.trustedTypes, e = s$1 ? s$1.createPolicy("lit-html", {
 \f\r](?:([^\\s"'>=/]+)([ 	
 \f\r]*=[ 	
 \f\r]*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), m = /'/g, p = /"/g, $ = /^(?:script|style|textarea|title)$/i, g = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), y = g(1), x = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), T = /* @__PURE__ */ new WeakMap(), A = (t2, i2, s2) => {
-  var e2, o2;
-  const n2 = null !== (e2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== e2 ? e2 : i2;
-  let l2 = n2._$litPart$;
-  if (void 0 === l2) {
-    const t3 = null !== (o2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== o2 ? o2 : null;
-    n2._$litPart$ = l2 = new S(i2.insertBefore(r(), t3), t3, void 0, null != s2 ? s2 : {});
-  }
-  return l2._$AI(t2), l2;
-}, E = h.createTreeWalker(h, 129, null, false), C = (t2, i2) => {
+\f\r"'\`<>=]|("|')|))|$)`, "g"), m = /'/g, p = /"/g, $ = /^(?:script|style|textarea|title)$/i, g = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), y = g(1), x = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), T = /* @__PURE__ */ new WeakMap(), A = h.createTreeWalker(h, 129, null, false), E = (t2, i2) => {
   const s2 = t2.length - 1, n2 = [];
   let h2, r2 = 2 === i2 ? "<svg>" : "", d2 = v;
   for (let i3 = 0; i3 < s2; i3++) {
@@ -336,17 +327,17 @@ const i = window, s$1 = i.trustedTypes, e = s$1 ? s$1.createPolicy("lit-html", {
     throw Error("invalid template strings array");
   return [void 0 !== e ? e.createHTML(u2) : u2, n2];
 };
-class P {
+class C {
   constructor({ strings: t2, _$litType$: i2 }, e2) {
     let l2;
     this.parts = [];
     let h2 = 0, d2 = 0;
-    const u2 = t2.length - 1, c2 = this.parts, [v2, a2] = C(t2, i2);
-    if (this.el = P.createElement(v2, e2), E.currentNode = this.el.content, 2 === i2) {
+    const u2 = t2.length - 1, c2 = this.parts, [v2, a2] = E(t2, i2);
+    if (this.el = C.createElement(v2, e2), A.currentNode = this.el.content, 2 === i2) {
       const t3 = this.el.content, i3 = t3.firstChild;
       i3.remove(), t3.append(...i3.childNodes);
     }
-    for (; null !== (l2 = E.nextNode()) && c2.length < u2; ) {
+    for (; null !== (l2 = A.nextNode()) && c2.length < u2; ) {
       if (1 === l2.nodeType) {
         if (l2.hasAttributes()) {
           const t3 = [];
@@ -355,7 +346,7 @@ class P {
               const s2 = a2[d2++];
               if (t3.push(i3), void 0 !== s2) {
                 const t4 = l2.getAttribute(s2.toLowerCase() + "$lit$").split(o$1), i4 = /([.?@])?(.*)/.exec(s2);
-                c2.push({ type: 1, index: h2, name: i4[2], strings: t4, ctor: "." === i4[1] ? R : "?" === i4[1] ? H : "@" === i4[1] ? I : M });
+                c2.push({ type: 1, index: h2, name: i4[2], strings: t4, ctor: "." === i4[1] ? M : "?" === i4[1] ? k : "@" === i4[1] ? H : S });
               } else
                 c2.push({ type: 6, index: h2 });
             }
@@ -367,7 +358,7 @@ class P {
           if (i3 > 0) {
             l2.textContent = s$1 ? s$1.emptyScript : "";
             for (let s2 = 0; s2 < i3; s2++)
-              l2.append(t3[s2], r()), E.nextNode(), c2.push({ type: 2, index: ++h2 });
+              l2.append(t3[s2], r()), A.nextNode(), c2.push({ type: 2, index: ++h2 });
             l2.append(t3[i3], r());
           }
         }
@@ -387,17 +378,17 @@ class P {
     return s2.innerHTML = t2, s2;
   }
 }
-function V(t2, i2, s2 = t2, e2) {
+function P(t2, i2, s2 = t2, e2) {
   var o2, n2, l2, h2;
   if (i2 === x)
     return i2;
-  let r2 = void 0 !== e2 ? null === (o2 = s2._$Cl) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cu;
+  let r2 = void 0 !== e2 ? null === (o2 = s2._$Co) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cl;
   const u2 = d(i2) ? void 0 : i2._$litDirective$;
-  return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Cl) && void 0 !== l2 ? l2 : h2._$Cl = [])[e2] = r2 : s2._$Cu = r2), void 0 !== r2 && (i2 = V(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
+  return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Co) && void 0 !== l2 ? l2 : h2._$Co = [])[e2] = r2 : s2._$Cl = r2), void 0 !== r2 && (i2 = P(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
 }
-class N {
+class V {
   constructor(t2, i2) {
-    this.v = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+    this.u = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -405,34 +396,34 @@ class N {
   get _$AU() {
     return this._$AM._$AU;
   }
-  p(t2) {
+  v(t2) {
     var i2;
     const { el: { content: s2 }, parts: e2 } = this._$AD, o2 = (null !== (i2 = null == t2 ? void 0 : t2.creationScope) && void 0 !== i2 ? i2 : h).importNode(s2, true);
-    E.currentNode = o2;
-    let n2 = E.nextNode(), l2 = 0, r2 = 0, d2 = e2[0];
+    A.currentNode = o2;
+    let n2 = A.nextNode(), l2 = 0, r2 = 0, d2 = e2[0];
     for (; void 0 !== d2; ) {
       if (l2 === d2.index) {
         let i3;
-        2 === d2.type ? i3 = new S(n2, n2.nextSibling, this, t2) : 1 === d2.type ? i3 = new d2.ctor(n2, d2.name, d2.strings, this, t2) : 6 === d2.type && (i3 = new L(n2, this, t2)), this.v.push(i3), d2 = e2[++r2];
+        2 === d2.type ? i3 = new N(n2, n2.nextSibling, this, t2) : 1 === d2.type ? i3 = new d2.ctor(n2, d2.name, d2.strings, this, t2) : 6 === d2.type && (i3 = new I(n2, this, t2)), this.u.push(i3), d2 = e2[++r2];
       }
-      l2 !== (null == d2 ? void 0 : d2.index) && (n2 = E.nextNode(), l2++);
+      l2 !== (null == d2 ? void 0 : d2.index) && (n2 = A.nextNode(), l2++);
     }
     return o2;
   }
-  m(t2) {
+  p(t2) {
     let i2 = 0;
-    for (const s2 of this.v)
+    for (const s2 of this.u)
       void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
   }
 }
-class S {
+class N {
   constructor(t2, i2, s2, e2) {
     var o2;
-    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$C_ = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
+    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cm = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
   }
   get _$AU() {
     var t2, i2;
-    return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$C_;
+    return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$Cm;
   }
   get parentNode() {
     let t2 = this._$AA.parentNode;
@@ -446,37 +437,37 @@ class S {
     return this._$AB;
   }
   _$AI(t2, i2 = this) {
-    t2 = V(this, t2, i2), d(t2) ? t2 === b || null == t2 || "" === t2 ? (this._$AH !== b && this._$AR(), this._$AH = b) : t2 !== this._$AH && t2 !== x && this.$(t2) : void 0 !== t2._$litType$ ? this.T(t2) : void 0 !== t2.nodeType ? this.k(t2) : c(t2) ? this.O(t2) : this.$(t2);
+    t2 = P(this, t2, i2), d(t2) ? t2 === b || null == t2 || "" === t2 ? (this._$AH !== b && this._$AR(), this._$AH = b) : t2 !== this._$AH && t2 !== x && this.g(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : c(t2) ? this.k(t2) : this.g(t2);
   }
-  S(t2, i2 = this._$AB) {
+  O(t2, i2 = this._$AB) {
     return this._$AA.parentNode.insertBefore(t2, i2);
   }
-  k(t2) {
-    this._$AH !== t2 && (this._$AR(), this._$AH = this.S(t2));
+  T(t2) {
+    this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
   }
-  $(t2) {
-    this._$AH !== b && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.k(h.createTextNode(t2)), this._$AH = t2;
+  g(t2) {
+    this._$AH !== b && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(h.createTextNode(t2)), this._$AH = t2;
   }
-  T(t2) {
+  $(t2) {
     var i2;
-    const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = P.createElement(e2.h, this.options)), e2);
+    const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = C.createElement(e2.h, this.options)), e2);
     if ((null === (i2 = this._$AH) || void 0 === i2 ? void 0 : i2._$AD) === o2)
-      this._$AH.m(s2);
+      this._$AH.p(s2);
     else {
-      const t3 = new N(o2, this), i3 = t3.p(this.options);
-      t3.m(s2), this.k(i3), this._$AH = t3;
+      const t3 = new V(o2, this), i3 = t3.v(this.options);
+      t3.p(s2), this.T(i3), this._$AH = t3;
     }
   }
   _$AC(t2) {
     let i2 = T.get(t2.strings);
-    return void 0 === i2 && T.set(t2.strings, i2 = new P(t2)), i2;
+    return void 0 === i2 && T.set(t2.strings, i2 = new C(t2)), i2;
   }
-  O(t2) {
+  k(t2) {
     u(this._$AH) || (this._$AH = [], this._$AR());
     const i2 = this._$AH;
     let s2, e2 = 0;
     for (const o2 of t2)
-      e2 === i2.length ? i2.push(s2 = new S(this.S(r()), this.S(r()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
+      e2 === i2.length ? i2.push(s2 = new N(this.O(r()), this.O(r()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
     e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
   }
   _$AR(t2 = this._$AA.nextSibling, i2) {
@@ -488,10 +479,10 @@ class S {
   }
   setConnected(t2) {
     var i2;
-    void 0 === this._$AM && (this._$C_ = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
+    void 0 === this._$AM && (this._$Cm = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
   }
 }
-class M {
+class S {
   constructor(t2, i2, s2, e2, o2) {
     this.type = 1, this._$AH = b, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = o2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = b;
   }
@@ -505,43 +496,43 @@ class M {
     const o2 = this.strings;
     let n2 = false;
     if (void 0 === o2)
-      t2 = V(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== x, n2 && (this._$AH = t2);
+      t2 = P(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== x, n2 && (this._$AH = t2);
     else {
       const e3 = t2;
       let l2, h2;
       for (t2 = o2[0], l2 = 0; l2 < o2.length - 1; l2++)
-        h2 = V(this, e3[s2 + l2], i2, l2), h2 === x && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === b ? t2 = b : t2 !== b && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
+        h2 = P(this, e3[s2 + l2], i2, l2), h2 === x && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === b ? t2 = b : t2 !== b && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
     }
-    n2 && !e2 && this.P(t2);
+    n2 && !e2 && this.j(t2);
   }
-  P(t2) {
+  j(t2) {
     t2 === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t2 ? t2 : "");
   }
 }
-class R extends M {
+class M extends S {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  P(t2) {
+  j(t2) {
     this.element[this.name] = t2 === b ? void 0 : t2;
   }
 }
-const k = s$1 ? s$1.emptyScript : "";
-class H extends M {
+const R = s$1 ? s$1.emptyScript : "";
+class k extends S {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  P(t2) {
-    t2 && t2 !== b ? this.element.setAttribute(this.name, k) : this.element.removeAttribute(this.name);
+  j(t2) {
+    t2 && t2 !== b ? this.element.setAttribute(this.name, R) : this.element.removeAttribute(this.name);
   }
 }
-class I extends M {
+class H extends S {
   constructor(t2, i2, s2, e2, o2) {
     super(t2, i2, s2, e2, o2), this.type = 5;
   }
   _$AI(t2, i2 = this) {
     var s2;
-    if ((t2 = null !== (s2 = V(this, t2, i2, 0)) && void 0 !== s2 ? s2 : b) === x)
+    if ((t2 = null !== (s2 = P(this, t2, i2, 0)) && void 0 !== s2 ? s2 : b) === x)
       return;
     const e2 = this._$AH, o2 = t2 === b && e2 !== b || t2.capture !== e2.capture || t2.once !== e2.once || t2.passive !== e2.passive, n2 = t2 !== b && (e2 === b || o2);
     o2 && this.element.removeEventListener(this.name, this, e2), n2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
@@ -551,7 +542,7 @@ class I extends M {
     "function" == typeof this._$AH ? this._$AH.call(null !== (s2 = null === (i2 = this.options) || void 0 === i2 ? void 0 : i2.host) && void 0 !== s2 ? s2 : this.element, t2) : this._$AH.handleEvent(t2);
   }
 }
-class L {
+class I {
   constructor(t2, i2, s2) {
     this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
   }
@@ -559,11 +550,21 @@ class L {
     return this._$AM._$AU;
   }
   _$AI(t2) {
-    V(this, t2);
+    P(this, t2);
   }
 }
-const Z = i.litHtmlPolyfillSupport;
-null == Z || Z(P, S), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.litHtmlVersions = []).push("2.3.1");
+const z = i.litHtmlPolyfillSupport;
+null == z || z(C, N), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.litHtmlVersions = []).push("2.4.0");
+const Z = (t2, i2, s2) => {
+  var e2, o2;
+  const n2 = null !== (e2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== e2 ? e2 : i2;
+  let l2 = n2._$litPart$;
+  if (void 0 === l2) {
+    const t3 = null !== (o2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== o2 ? o2 : null;
+    n2._$litPart$ = l2 = new N(i2.insertBefore(r(), t3), t3, void 0, null != s2 ? s2 : {});
+  }
+  return l2._$AI(t2), l2;
+};
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -581,7 +582,7 @@ class s extends d$1 {
   }
   update(t2) {
     const i2 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Dt = A(i2, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Dt = Z(i2, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var t2;
@@ -653,7 +654,7 @@ const useOnce = (element, on) => useEffect(element, on, []);
 function n(n2, o2, r2) {
   return n2 ? o2() : null == r2 ? void 0 : r2();
 }
-const styles = i$1`
+const styles$1 = i$1`
   :host {
     --shipaid-primary: #002bd6;
     --shipaid-secondary: #0076ff;
@@ -671,17 +672,13 @@ const styles = i$1`
     --shipaid-font-heavy: 700;
   }
 
-  * {
+  p, a {
     font-family: var(--shipaid-font);
+    font-weight: var(--shipaid-font-regular);
+    font-size: var(--shipaid-font-base);
+    color: var(--shipaid-text);
   }
 
-  .error {
-    color: var(--shipaid-danger);
-    font-size: var(--shipaid-font-sm);
-  }
-
-  /* Popups */
-
   .shipaid-popup {
     position: fixed;
     top: 0;
@@ -690,15 +687,20 @@ const styles = i$1`
     right: 0;
     margin: auto;
     max-width: 500px;
-    max-height: 100vh;
+    max-height: 80vh;
     height: fit-content;
-    border: var(--shipaid-light-grey) 1px solid;
-    background-color: #fff;
+    border: var(--shipaid-popup-border, var(--shipaid-light-grey)) 1px solid;
+    background-color:var(--shipaid-popup-background, #fff);
     z-index: 10000;
     overflow: auto;
     visibility: hidden;
     opacity: 0;
     transition: all 250ms ease-in-out;
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 5rem;
   }
 
   .shipaid-popup.active {
@@ -710,24 +712,11 @@ const styles = i$1`
     .shipaid-popup {
       width: 100vw;
       height: 100vh;
-    }
-  }
-
-  .shipaid-popup .popup {
-    display: inline-flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 5rem;
-    height: fit-content;
-  }
-
-  @media (max-width: 600px) {
-    .shipaid-popup .popup {
       padding: 3rem;
     }
   }
 
-  .popup .popup-close {
+  .shipaid-popup .popup-close {
     width: fit-content;
     margin-left: auto;
     background-color: transparent;
@@ -738,26 +727,30 @@ const styles = i$1`
     text-transform: uppercase;
   }
 
-  .popup .popup-title {
+  .shipaid-popup .popup-title {
     font-size: clamp(1rem, 2vw + 1rem, 2.2rem);
+    font-weight: var(--shipaid-font-regular);
     letter-spacing: 1px;
   }
 
-  .popup .popup-top-image {
+  .shipaid-popup .popup-top-image {
     margin: 0 auto;
+    width: 90%;
+    height: auto;
+    object-fit: contain;
   }
 
-  .popup p {
+  .shipaid-popup p {
     font-size: clamp(1rem, 1vw + 1rem, 1.4rem);
     margin: 0;
   }
 
-  .popup .popup-disclaimer {
+  .shipaid-popup .popup-disclaimer {
     font-size: 10px;
     color: var(--shipaid-text-muted);
   }
 
-  .popup .popup-footer {
+  .shipaid-popup .popup-footer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -766,38 +759,154 @@ const styles = i$1`
   }
 
   @media (max-width: 600px) {
-    .popup .popup-footer {
+    .shipaid-popup .popup-footer {
       flex-direction: column;
     }
   }
 
-  .popup .popup-footer .footer-links {
+  .shipaid-popup .popup-footer .footer-links {
     display: flex;
     flex-direction: row;
     gap: 2rem;
   }
 
-  .popup .popup-footer .footer-links a {
+  .shipaid-popup .popup-footer .footer-links a {
     font-family: var(--shipaid-font);
     font-size: var(--shipaid-font-sm);
     color: var(--shipaid-text-muted);
   }
 
-  .popup .popup-footer .footer-date p {
+  .shipaid-popup .popup-footer .footer-date p {
     font-family: var(--shipaid-font);
     font-weight: var(--shipaid-font-heavy);
     font-size: var(--shipaid-font-sm);
     color: var(--shipaid-text);
   }
+`;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+let LearnMorePopup = class extends s {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+  }
+  handleClosePopup() {
+    const event = new Event("close");
+    this.dispatchEvent(event);
+  }
+  render() {
+    return y`
+      <div class=${`shipaid-popup ${this.active && "active"}`}>
+        <button
+          type="button"
+          class="popup-close"
+          @click=${this.handleClosePopup}
+        >
+          Close
+        </button>
+        <p class="popup-title">Instant Package Protection</p>
+        <p>
+          We empower your favorite brands to protect their packages, because
+          every order is precious!
+        </p>
+        <img
+          src="https://res.cloudinary.com/dxyz34kfj/image/upload/v1660782754/shipaid-image_hoz6k8.jpg"
+          alt="shipaid protected parcel"
+          class="popup-top-image"
+        />
+        <p class="popup-title">Shop Worry-Free</p>
+        <p>
+          Brands and shipment carriers cannot always guarantee your order will
+          arrive at your doorstep safely. Things happen! We allow the brand
+          you are purchasing from to protect your order in the chance of an
+          issue in transit. If you encounter an issue, simply reach out to the
+          brand and they will handle your claim as soon as possible
+        </p>
+        <p class="popup-disclaimer">
+          By purchasing this protection, you are agreeing to our Terms Of
+          Service and Privacy Policy. You are not obligated to purchase this
+          protection. This protection is NOT insurance. The claim process and
+          decision for compensation are strictly decided by the brand you are
+          purchasing from in this transaction. Each claim will be reviewed by
+          their customer service team, and you'll get a response accepting
+          or denying the claim within 2-3 business days.
+        </p>
+        <div class="popup-footer">
+          <div class="footer-links">
+            <a
+              href="https://www.shipaid.com/terms-of-service"
+              target="_blank"
+              rel="noreferrer"
+              >Terms of Service</a
+            >
+            <a
+              href="https://www.shipaid.com/privacy-policy"
+              target="_blank"
+              rel="noreferrer"
+              >Privacy Policy</a
+            >
+          </div>
+          <div class="footer-date">
+            <p>ShipAid &copy; ${new Date().getFullYear()}</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+LearnMorePopup.styles = styles$1;
+__decorateClass$1([
+  e$3({ type: Boolean, attribute: true })
+], LearnMorePopup.prototype, "active", 2);
+LearnMorePopup = __decorateClass$1([
+  e$4("shipaid-popup-learn-more")
+], LearnMorePopup);
+const styles = i$1`
+  :host {
+    --shipaid-primary: #002bd6;
+    --shipaid-secondary: #0076ff;
+    --shipaid-danger: #f44336;
+    --shipaid-text: #000000;
+    --shipaid-text-muted: #cccccc;
+    --shipaid-text-grey: #aaaaaa;
+    --shipaid-light-grey: #ebecf0;
+    --shipaid-font: "Lato", sans-serif;
+    --shipaid-font-xs: 12px;
+    --shipaid-font-sm: 14px;
+    --shipaid-font-base: 16px;
+    --shipaid-font-lg: 18px;
+    --shipaid-font-regular: 400;
+    --shipaid-font-heavy: 700;
+  }
+
+  * {
+    font-family: var(--shipaid-font);
+  }
+
+  p, a {
+    font-weight: var(--shipaid-font-regular);
+    font-size: var(--shipaid-font-base);
+    color: var(--shipaid-text);
+  }
 
-  /* Widget */
+  .error {
+    color: var(--shipaid-danger);
+    font-size: var(--shipaid-font-sm);
+  }
 
+  /* Widget */
   .shipaid-prompt {
     width: 400px;
     max-width: 100%;
-    font-family: var(--shipaid-font);
-    font-size: var(--shipaid-font-base);
-    color: var(--shipaid-text);
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -860,7 +969,7 @@ const styles = i$1`
     .prompt-product
     .prompt-product-actions
     .prompt-product-actions-price {
-    color: var(--shipaid-text-muted);
+    color: var(--prompt-actions-price-color, var(--shipaid-text-muted));
     font-size: var(--shipaid-font-base);
   }
   .shipaid-prompt
@@ -869,7 +978,7 @@ const styles = i$1`
     .prompt-product-actions-button {
     background-color: transparent;
     border: none;
-    color: var(--shipaid-primary);
+    color: var(--prompt-actions-button-color, var(--shipaid-primary));
     text-transform: uppercase;
     font-weight: var(--shipaid-font-heavy);
     cursor: pointer;
@@ -893,8 +1002,8 @@ const styles = i$1`
     margin-left: 0.5rem;
   }
   .shipaid-prompt .prompt-footer .prompt-footer-badge {
-    background-color: var(--shipaid-light-grey);
-    color: var(--shipaid-text);
+    background-color: var(--shipaid-prompt-badge-background, var(--shipaid-light-grey));
+    color: var(--shipaid-prompt-badge-text, var(--shipaid-text));
     padding: 0.5rem 1.5rem;
     border-radius: 30px;
     cursor: pointer;
@@ -907,16 +1016,6 @@ const styles = i$1`
   .shipaid-prompt .prompt-footer .prompt-footer-badge svg {
     height: 9px;
   }
-  .shipaid-prompt .prompt-footer .prompt-footer-badge .ship {
-    text-transform: uppercase;
-    color: var(--shipaid-secondary);
-    font-weight: var(--shipaid-font-heavy);
-  }
-  .shipaid-prompt .prompt-footer .prompt-footer-badge .aid {
-    text-transform: uppercase;
-    color: var(--shipaid-text-grey);
-    font-weight: var(--shipaid-font-heavy);
-  }
 `;
 const CheckmarkIcon = y`
   <svg viewBox="0 0 453 511" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
@@ -1365,10 +1464,75 @@ let ShipAidWidget = class extends s {
       );
     }
   }
-  render() {
+  learnMorePopupTemplate() {
+    return y`
+      <shipaid-popup-learn-more ?active=${this._popup === "learn-more"} @close=${() => {
+      this._popup = null;
+    }}></shipaid-popup-learn-more>
+    `;
+  }
+  promptTemplate() {
     var _a;
+    return y`
+      <div class="shipaid-prompt">
+        <div class="prompt-product">
+          <div class="prompt-product-image">
+            ${n(
+      this._hasProtectionInCart,
+      () => CheckmarkIcon,
+      () => ShipAidLogo
+    )}
+          </div>
+          <div class="prompt-product-details">
+            <p class="prompt-product-details-title">
+              <slot name="title">Package Protection</slot>
+            </p>
+            <p class="prompt-product-details-description">
+              <slot name="subtitle">from Loss, Damage or Theft</slot>
+            </p>
+          </div>
+          <div class="prompt-product-actions">
+            <p class="prompt-product-actions-price">
+              ${((_a = this._protectionVariant) == null ? void 0 : _a.price) && this._currencyFormat(this._protectionVariant.price)}
+            </p>
+            <button
+              class="prompt-product-actions-button"
+              @click=${this._updateProtection}
+              ?disabled=${this._state.loading}
+            >
+              ${this._state.loading ? "Loading..." : this._hasProtectionInCart ? "Remove" : "+ Add"}
+            </button>
+          </div>
+        </div>
+        ${n(
+      this._state.error,
+      () => y`<p class="error">${this._state.error}</p>`
+    )}
+        <div class="prompt-footer">
+          <a
+            class="prompt-footer-badge"
+            @click=${() => {
+      this._popup = "learn-more";
+    }}
+          >
+            <span>Powered by</span>
+            ${ShipAidLogoText}
+          </a>
+          <button
+            class="prompt-footer-about"
+            @click=${() => {
+      this._popup = "learn-more";
+    }}
+          >
+            i
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
     useOnce(this, async () => {
-      var _a2, _b;
+      var _a, _b;
       const linkEl = document.createElement("link");
       linkEl.setAttribute(
         "href",
@@ -1404,7 +1568,7 @@ let ShipAidWidget = class extends s {
         this._shouldShowWidget = false;
         return;
       }
-      if (!((_b = (_a2 = this._store) == null ? void 0 : _a2.protectionSettings) == null ? void 0 : _b.protectionType)) {
+      if (!((_b = (_a = this._store) == null ? void 0 : _a.protectionSettings) == null ? void 0 : _b.protectionType)) {
         logger.warn("No protection settings for this store - skipping setup.");
         this._hasFinishedSetup = true;
         this._shouldShowWidget = false;
@@ -1420,10 +1584,10 @@ let ShipAidWidget = class extends s {
       this._shouldShowWidget = true;
       this._dispatchEvent(Events.LOADED, this._store);
       setTimeout(async () => {
-        var _a3, _b2;
+        var _a2, _b2;
         const payload = sessionStorage.getItem(LOCAL_STORAGE_KEY);
         const { lastAction } = payload ? JSON.parse(payload) : {};
-        if (lastAction !== "removed" && !this._hasProtectionInCart && ((_a3 = this._cart) == null ? void 0 : _a3.item_count) && ((_b2 = this._store) == null ? void 0 : _b2.widgetAutoOptIn) && this._store.widgetShowCart) {
+        if (lastAction !== "removed" && !this._hasProtectionInCart && ((_a2 = this._cart) == null ? void 0 : _a2.item_count) && ((_b2 = this._store) == null ? void 0 : _b2.widgetAutoOptIn) && this._store.widgetShowCart) {
           await this.addProtection();
         }
       }, 500);
@@ -1454,13 +1618,13 @@ let ShipAidWidget = class extends s {
     useEffect(
       this,
       async () => {
-        var _a2, _b, _c;
+        var _a, _b, _c;
         this._cartLastUpdated = new Date();
-        if (!((_a2 = this._cart) == null ? void 0 : _a2.items))
+        if (!((_a = this._cart) == null ? void 0 : _a.items))
           return;
         const protectionCartItemIndex = (_b = this._cart.items) == null ? void 0 : _b.findIndex((item) => {
-          var _a3, _b2;
-          return (_b2 = (_a3 = this._protectionProduct) == null ? void 0 : _a3.variants) == null ? void 0 : _b2.some((variant) => variant.id === item.variant_id);
+          var _a2, _b2;
+          return (_b2 = (_a2 = this._protectionProduct) == null ? void 0 : _a2.variants) == null ? void 0 : _b2.some((variant) => variant.id === item.variant_id);
         });
         const protectionCartItem = (_c = this._cart) == null ? void 0 : _c.items[protectionCartItemIndex];
         this._hasProtectionInCart = !!protectionCartItem;
@@ -1517,134 +1681,17 @@ let ShipAidWidget = class extends s {
       },
       [this._store, this._cart]
     );
-    const learnMorePopupTemplate = y`
-      <div class=${`shipaid-popup ${this._popup === "learn-more" && "active"}`}>
-        <div class="popup">
-          <button
-            class="popup-close"
-            @click=${() => {
-      this._popup = null;
-    }}
-          >
-            Close
-          </button>
-          <p class="popup-title">Instant Package Protection</p>
-          <p>
-            We empower your favorite brands to protect their packages, because
-            every order is precious!
-          </p>
-          <img
-            src="https://res.cloudinary.com/dxyz34kfj/image/upload/v1660782754/shipaid-image_hoz6k8.jpg"
-            alt="shipaid protected parcel"
-            height="auto"
-            width="90%"
-            class="popup-top-image"
-          />
-          <p class="popup-title">Shop Worry-Free</p>
-          <p>
-            Brands and shipment carriers cannot always guarantee your order will
-            arrive at your doorstep safely. Things happen! We allow the brand
-            you are purchasing from to protect your order in the chance of an
-            issue in transit. If you encounter an issue, simply reach out to the
-            brand and they will handle your claim as soon as possible
-          </p>
-          <p class="popup-disclaimer">
-            By purchasing this protection, you are agreeing to our Terms Of
-            Service and Privacy Policy. You are not obligated to purchase this
-            protection. This protection is NOT insurance. The claim process and
-            decision for compensation are strictly decided by the brand you are
-            purchasing from in this transaction. Each claim will be reviewed by
-            their customer service team, and you'll get a response accepting
-            or denying the claim within 2-3 business days.
-          </p>
-          <div class="popup-footer">
-            <div class="footer-links">
-              <a
-                href="https://www.shipaid.com/terms-of-service"
-                target="_blank"
-                rel="noreferrer"
-                >Terms of Service</a
-              >
-              <a
-                href="https://www.shipaid.com/privacy-policy"
-                target="_blank"
-                rel="noreferrer"
-                >Privacy Policy</a
-              >
-            </div>
-            <div class="footer-date">
-              <p>ShipAid &copy; ${new Date().getFullYear()}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    const promptTemplate = y`
-      <div class="shipaid-prompt">
-        <div class="prompt-product">
-          <div class="prompt-product-image">
-            ${n(
-      this._hasProtectionInCart,
-      () => CheckmarkIcon,
-      () => ShipAidLogo
-    )}
-          </div>
-          <div class="prompt-product-details">
-            <p class="prompt-product-details-title">
-              <slot name="title">Package Protection</slot>
-            </p>
-            <p class="prompt-product-details-description">
-              <slot name="subtitle">from Loss, Damage or Theft</slot>
-            </p>
-          </div>
-          <div class="prompt-product-actions">
-            <p class="prompt-product-actions-price">
-              ${((_a = this._protectionVariant) == null ? void 0 : _a.price) && this._currencyFormat(this._protectionVariant.price)}
-            </p>
-            <button
-              class="prompt-product-actions-button"
-              @click=${this._updateProtection}
-              ?disabled=${this._state.loading}
-            >
-              ${this._state.loading ? "Loading..." : this._hasProtectionInCart ? "Remove" : "+ Add"}
-            </button>
-          </div>
-        </div>
-        ${n(
-      this._state.error,
-      () => y`<p class="error">${this._state.error}</p>`
-    )}
-        <div class="prompt-footer">
-          <a
-            class="prompt-footer-badge"
-            @click=${() => {
-      this._popup = "learn-more";
-    }}
-          >
-            <span>Powered by</span>
-            ${ShipAidLogoText}
-          </a>
-          <button
-            class="prompt-footer-about"
-            @click=${() => {
-      this._popup = "learn-more";
-    }}
-          >
-            i
-          </button>
-        </div>
-      </div>
-    `;
+    Z(this.learnMorePopupTemplate(), document.body);
     return y`
       <div class="shipaid">
         ${n(
       this._hasFinishedSetup,
       () => {
-        var _a2;
+        var _a;
         return n(
-          this._shouldShowWidget && this.planActive && ((_a2 = this._store) == null ? void 0 : _a2.widgetShowCart),
-          () => [learnMorePopupTemplate, promptTemplate],
-          () => y``
+          this._shouldShowWidget && this.planActive && ((_a = this._store) == null ? void 0 : _a.widgetShowCart),
+          () => this.promptTemplate(),
+          () => b
         );
       },
       () => y`<p><slot name="loading" default>Loading ShipAid Widget...</slot></p>`