pollcatch 1.0.6 → 1.0.8

package/pc.js

@@ -22,14 +22,14 @@ let de = class {
     return this.cssText;
   }
 };
-const Oe = (e) => new de(typeof e == "string" ? e : e + "", void 0, At), B = (e, ...t) => {
+const Pe = (e) => new de(typeof e == "string" ? e : e + "", void 0, At), B = (e, ...t) => {
   const s = e.length === 1 ? e[0] : t.reduce((i, o, r) => i + ((a) => {
     if (a._$cssResult$ === !0) return a.cssText;
     if (typeof a == "number") return a;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + a + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(o) + e[r + 1], e[0]);
   return new de(s, e, At);
-}, Te = (e, t) => {
+}, Me = (e, t) => {
   if (Et) e.adoptedStyleSheets = t.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
   else for (const s of t) {
     const i = document.createElement("style"), o = pt.litNonce;
@@ -38,14 +38,14 @@ const Oe = (e) => new de(typeof e == "string" ? e : e + "", void 0, At), B = (e,
 }, Dt = Et ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
   let s = "";
   for (const i of t.cssRules) s += i.cssText;
-  return Oe(s);
+  return Pe(s);
 })(e) : e;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Me, defineProperty: ze, getOwnPropertyDescriptor: Ne, getOwnPropertyNames: Ie, getOwnPropertySymbols: Re, getPrototypeOf: Ue } = Object, D = globalThis, Vt = D.trustedTypes, Le = Vt ? Vt.emptyScript : "", ft = D.reactiveElementPolyfillSupport, st = (e, t) => e, ht = { toAttribute(e, t) {
+const { is: Oe, defineProperty: ze, getOwnPropertyDescriptor: Ne, getOwnPropertyNames: Re, getOwnPropertySymbols: Ie, getPrototypeOf: Ue } = Object, D = globalThis, Vt = D.trustedTypes, Le = Vt ? Vt.emptyScript : "", gt = D.reactiveElementPolyfillSupport, st = (e, t) => e, ht = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
       e = e ? Le : null;
@@ -73,7 +73,7 @@ const { is: Me, defineProperty: ze, getOwnPropertyDescriptor: Ne, getOwnProperty
       }
   }
   return s;
-} }, _t = (e, t) => !Me(e, t), Ht = { attribute: !0, type: String, converter: ht, reflect: !1, hasChanged: _t };
+} }, _t = (e, t) => !Oe(e, t), Ht = { attribute: !0, type: String, converter: ht, reflect: !1, hasChanged: _t };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), D.litPropertyMetadata ?? (D.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let J = class extends HTMLElement {
   static addInitializer(t) {
@@ -112,7 +112,7 @@ let J = class extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(st("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(st("properties"))) {
-      const s = this.properties, i = [...Ie(s), ...Re(s)];
+      const s = this.properties, i = [...Re(s), ...Ie(s)];
       for (const o of i) this.createProperty(o, s[o]);
     }
     const t = this[Symbol.metadata];
@@ -161,7 +161,7 @@ let J = class extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Te(t, this.constructor.elementStyles), t;
+    return Me(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -273,17 +273,17 @@ let J = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-J.elementStyles = [], J.shadowRootOptions = { mode: "open" }, J[st("elementProperties")] = /* @__PURE__ */ new Map(), J[st("finalized")] = /* @__PURE__ */ new Map(), ft == null || ft({ ReactiveElement: J }), (D.reactiveElementVersions ?? (D.reactiveElementVersions = [])).push("2.0.4");
+J.elementStyles = [], J.shadowRootOptions = { mode: "open" }, J[st("elementProperties")] = /* @__PURE__ */ new Map(), J[st("finalized")] = /* @__PURE__ */ new Map(), gt == null || gt({ ReactiveElement: J }), (D.reactiveElementVersions ?? (D.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const it = globalThis, ut = it.trustedTypes, Bt = ut ? ut.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, pe = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, he = "?" + j, je = `<${he}>`, W = document, rt = () => W.createComment(""), at = (e) => e === null || typeof e != "object" && typeof e != "function", Pt = Array.isArray, De = (e) => Pt(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", gt = `[ 	
-\f\r]`, et = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Ft = /-->/g, qt = />/g, K = RegExp(`>|${gt}(?:([^\\s"'>=/]+)(${gt}*=${gt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Kt = /'/g, Yt = /"/g, ue = /^(?:script|style|textarea|title)$/i, Ve = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), l = Ve(1), H = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Gt = /* @__PURE__ */ new WeakMap(), Y = W.createTreeWalker(W, 129);
+const it = globalThis, ut = it.trustedTypes, Bt = ut ? ut.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, pe = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, he = "?" + j, je = `<${he}>`, Z = document, rt = () => Z.createComment(""), at = (e) => e === null || typeof e != "object" && typeof e != "function", Tt = Array.isArray, De = (e) => Tt(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", ft = `[ 	
+\f\r]`, et = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, qt = /-->/g, Ft = />/g, K = RegExp(`>|${ft}(?:([^\\s"'>=/]+)(${ft}*=${ft}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Kt = /'/g, Yt = /"/g, ue = /^(?:script|style|textarea|title)$/i, Ve = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), l = Ve(1), H = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Gt = /* @__PURE__ */ new WeakMap(), Y = Z.createTreeWalker(Z, 129);
 function me(e, t) {
-  if (!Pt(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  if (!Tt(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Bt !== void 0 ? Bt.createHTML(t) : t;
 }
 const He = (e, t) => {
@@ -292,7 +292,7 @@ const He = (e, t) => {
   for (let n = 0; n < s; n++) {
     const c = e[n];
     let h, m, b = -1, S = 0;
-    for (; S < c.length && (a.lastIndex = S, m = a.exec(c), m !== null); ) S = a.lastIndex, a === et ? m[1] === "!--" ? a = Ft : m[1] !== void 0 ? a = qt : m[2] !== void 0 ? (ue.test(m[2]) && (o = RegExp("</" + m[2], "g")), a = K) : m[3] !== void 0 && (a = K) : a === K ? m[0] === ">" ? (a = o ?? et, b = -1) : m[1] === void 0 ? b = -2 : (b = a.lastIndex - m[2].length, h = m[1], a = m[3] === void 0 ? K : m[3] === '"' ? Yt : Kt) : a === Yt || a === Kt ? a = K : a === Ft || a === qt ? a = et : (a = K, o = void 0);
+    for (; S < c.length && (a.lastIndex = S, m = a.exec(c), m !== null); ) S = a.lastIndex, a === et ? m[1] === "!--" ? a = qt : m[1] !== void 0 ? a = Ft : m[2] !== void 0 ? (ue.test(m[2]) && (o = RegExp("</" + m[2], "g")), a = K) : m[3] !== void 0 && (a = K) : a === K ? m[0] === ">" ? (a = o ?? et, b = -1) : m[1] === void 0 ? b = -2 : (b = a.lastIndex - m[2].length, h = m[1], a = m[3] === void 0 ? K : m[3] === '"' ? Yt : Kt) : a === Yt || a === Kt ? a = K : a === qt || a === Ft ? a = et : (a = K, o = void 0);
     const L = a === K && e[n + 1].startsWith("/>") ? " " : "";
     r += a === et ? c + je : b >= 0 ? (i.push(h), c.slice(0, b) + pe + c.slice(b) + j + L) : c + j + (b === -2 ? n : L);
   }
@@ -312,7 +312,7 @@ let kt = class be {
       if (o.nodeType === 1) {
         if (o.hasAttributes()) for (const b of o.getAttributeNames()) if (b.endsWith(pe)) {
           const S = m[a++], L = o.getAttribute(b).split(j), ct = /([.?@])?(.*)/.exec(S);
-          c.push({ type: 1, index: r, name: ct[2], strings: L, ctor: ct[1] === "." ? Fe : ct[1] === "?" ? qe : ct[1] === "@" ? Ke : mt }), o.removeAttribute(b);
+          c.push({ type: 1, index: r, name: ct[2], strings: L, ctor: ct[1] === "." ? qe : ct[1] === "?" ? Fe : ct[1] === "@" ? Ke : mt }), o.removeAttribute(b);
         } else b.startsWith(j) && (c.push({ type: 6, index: r }), o.removeAttribute(b));
         if (ue.test(o.tagName)) {
           const b = o.textContent.split(j), S = b.length - 1;
@@ -331,7 +331,7 @@ let kt = class be {
     }
   }
   static createElement(t, s) {
-    const i = W.createElement("template");
+    const i = Z.createElement("template");
     return i.innerHTML = t, i;
   }
 };
@@ -353,7 +353,7 @@ let Be = class {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: s }, parts: i } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? W).importNode(s, !0);
+    const { el: { content: s }, parts: i } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? Z).importNode(s, !0);
     Y.currentNode = o;
     let r = Y.nextNode(), a = 0, n = 0, c = i[0];
     for (; c !== void 0; ) {
@@ -363,7 +363,7 @@ let Be = class {
       }
       a !== (c == null ? void 0 : c.index) && (r = Y.nextNode(), a++);
     }
-    return Y.currentNode = W, o;
+    return Y.currentNode = Z, o;
   }
   p(t) {
     let s = 0;
@@ -399,7 +399,7 @@ class nt {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== d && at(this._$AH) ? this._$AA.nextSibling.data = t : this.T(W.createTextNode(t)), this._$AH = t;
+    this._$AH !== d && at(this._$AH) ? this._$AA.nextSibling.data = t : this.T(Z.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     var r;
@@ -415,7 +415,7 @@ class nt {
     return s === void 0 && Gt.set(t.strings, s = new kt(t)), s;
   }
   k(t) {
-    Pt(this._$AH) || (this._$AH = [], this._$AR());
+    Tt(this._$AH) || (this._$AH = [], this._$AR());
     const s = this._$AH;
     let i, o = 0;
     for (const r of t) o === s.length ? s.push(i = new nt(this.O(rt()), this.O(rt()), this, this.options)) : i = s[o], i._$AI(r), o++;
@@ -458,7 +458,7 @@ class mt {
     t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-let Fe = class extends mt {
+let qe = class extends mt {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -466,7 +466,7 @@ let Fe = class extends mt {
     this.element[this.name] = t === d ? void 0 : t;
   }
 };
-class qe extends mt {
+class Fe extends mt {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -550,7 +550,7 @@ vt == null || vt({ LitElement: V });
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const F = (e) => (t, s) => {
+const q = (e) => (t, s) => {
   s !== void 0 ? s.addInitializer(() => {
     customElements.define(e, t);
   }) : customElements.define(e, t);
@@ -560,7 +560,7 @@ const F = (e) => (t, s) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const We = { attribute: !0, type: String, converter: ht, reflect: !1, hasChanged: _t }, Ze = (e = We, t, s) => {
+const Ze = { attribute: !0, type: String, converter: ht, reflect: !1, hasChanged: _t }, We = (e = Ze, t, s) => {
   const { kind: i, metadata: o } = s;
   let r = globalThis.litPropertyMetadata.get(o);
   if (r === void 0 && globalThis.litPropertyMetadata.set(o, r = /* @__PURE__ */ new Map()), r.set(s.name, e), i === "accessor") {
@@ -582,7 +582,7 @@ const We = { attribute: !0, type: String, converter: ht, reflect: !1, hasChanged
   throw Error("Unsupported decorator location: " + i);
 };
 function p(e) {
-  return (t, s) => typeof s == "object" ? Ze(e, t, s) : ((i, o, r) => {
+  return (t, s) => typeof s == "object" ? We(e, t, s) : ((i, o, r) => {
     const a = o.hasOwnProperty(r);
     return o.constructor.createProperty(r, a ? { ...i, wrapped: !0 } : i), a ? Object.getOwnPropertyDescriptor(o, r) : void 0;
   })(e, t, s);
@@ -624,6 +624,7 @@ const Je = B`
     --pc-bar-height: clamp(0.5em, 0.6em, 0.8em);
     --pc-font-size-small: clamp(0.6em, 0.7em, 0.8em);
     --pc-font-size-medium: clamp(0.8em, 0.9em, 1em);
+    --pc-font-size-large: clamp(1em, 1.1em, 1.2em);
   }
 
   .pc-container {
@@ -902,7 +903,64 @@ const Je = B`
       padding: 0.2em 0;
     }
   }
-`, fe = "https://jpxwfjorwcsrqraorpbj.supabase.co/functions/v1/data", Xe = "pc_session_id", Qe = 24 * 60 * 60 * 1e3;
+
+  .thank-you-msg {
+    font-size: 0.8em;
+    color: var(--pc-text-color, #333);
+    background: white;
+    padding: 1em 1.5em;
+    border-radius: var(--pc-border-radius, 0.375em);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--pc-mute-color, #ddd);
+    max-width: 300px;
+    font-style: normal;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Unified thank you overlay section and overlay */
+  .pc-thank-you-section-with-overlay {
+    position: relative;
+  }
+  .pc-thank-you-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    animation: fadeInOverlay 0.3s ease-out;
+  }
+  @keyframes fadeInOverlay {
+    from {
+      opacity: 0;
+      backdrop-filter: blur(0px);
+    }
+    to {
+      opacity: 1;
+      backdrop-filter: blur(2px);
+    }
+  }
+  .pc-thank-you-overlay .thank-you-msg {
+    animation: slideInUp 0.4s ease-out;
+  }
+  @keyframes slideInUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+`, ge = "https://jpxwfjorwcsrqraorpbj.supabase.co/functions/v1/data", Xe = "pc_session_id", Qe = 24 * 60 * 60 * 1e3;
 function ts(e) {
   return {
     debug: (t, ...s) => {
@@ -916,27 +974,27 @@ function ts(e) {
     }
   };
 }
-const f = ts("Pollcatch");
-function Wt() {
-  return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : (f.warn("crypto.randomUUID not available, using fallback UUID generator"), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
+const g = ts("Pollcatch");
+function Zt() {
+  return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : (g.warn("crypto.randomUUID not available, using fallback UUID generator"), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
     const t = Math.random() * 16 | 0;
     return (e === "x" ? t : t & 3 | 8).toString(16);
   }));
 }
-function Ot() {
+function Pt() {
   const e = "test-local-storage";
   try {
     return localStorage.setItem(e, e), localStorage.removeItem(e), !0;
   } catch {
-    return f.warn("localStorage not available, session ID will not persist"), !1;
+    return g.warn("localStorage not available, session ID will not persist"), !1;
   }
 }
-function ge(e) {
+function fe(e) {
   try {
     const t = localStorage.getItem(e);
     return t ? JSON.parse(t) : void 0;
   } catch (t) {
-    f.warn(`Failed to get item from localStorage: ${e}`, t);
+    g.warn(`Failed to get item from localStorage: ${e}`, t);
     return;
   }
 }
@@ -944,54 +1002,54 @@ function ye(e, t) {
   try {
     return localStorage.setItem(e, JSON.stringify(t)), !0;
   } catch (s) {
-    return f.warn(`Failed to set item in localStorage: ${e}`, s), !1;
+    return g.warn(`Failed to set item in localStorage: ${e}`, s), !1;
   }
 }
 async function es() {
   if (typeof window < "u") {
     if (window.pcProject !== void 0)
-      return f.debug("Found project key in global variable"), window.pcProject;
+      return g.debug("Found project key in global variable"), window.pcProject;
     const e = document.querySelectorAll("script[pc-project]");
     if (e.length > 0) {
       const t = e[e.length - 1], s = t == null ? void 0 : t.getAttribute("pc-project");
       if (s)
-        return f.debug("Found project key in script tag attribute"), s;
+        return g.debug("Found project key in script tag attribute"), s;
     }
   }
-  f.warn("No project key found in global variable or script tags");
+  g.warn("No project key found in global variable or script tags");
 }
-async function Zt() {
+async function Wt() {
   const e = Xe, t = Qe;
-  if (Ot()) {
-    const s = ge(e);
+  if (Pt()) {
+    const s = fe(e);
     if (s && s.id && s.timestamp && Date.now() - s.timestamp < t)
-      return f.debug("Using existing session ID from localStorage"), s.id;
-    f.debug(
+      return g.debug("Using existing session ID from localStorage"), s.id;
+    g.debug(
       s ? "Session ID expired" : "No session ID found",
       "generating new one"
     );
-    const i = Wt();
+    const i = Zt();
     return ye(e, {
       id: i,
       timestamp: Date.now()
-    }) ? f.debug("Generated and stored new session ID") : f.warn("Generated session ID but failed to store it"), i;
+    }) ? g.debug("Generated and stored new session ID") : g.warn("Generated session ID but failed to store it"), i;
   } else {
-    const s = Wt();
-    return f.debug("Generated non-persistent session ID"), s;
+    const s = Zt();
+    return g.debug("Generated non-persistent session ID"), s;
   }
 }
 async function ss(e, t) {
   try {
     if (!e)
       throw new Error("Name parameter is required");
-    const s = `${fe}/${encodeURIComponent(t)}/${encodeURIComponent(e)}`;
-    f.debug(`Fetching stats for: ${e}`, { projectKey: t });
+    const s = `${ge}/${encodeURIComponent(t)}/${encodeURIComponent(e)}`;
+    g.debug(`Fetching stats for: ${e}`, { projectKey: t });
     const i = await fetch(s);
     if (!i.ok)
       throw new Error(`API request failed with status: ${i.status}`);
     const o = await i.json();
     if (!o.success)
-      throw f.error("Backend returned unsuccessful response", o), new Error("Backend returned unsuccessful response");
+      throw g.error("Backend returned unsuccessful response", o), new Error("Backend returned unsuccessful response");
     const r = o.data || {}, a = r.count > 0 ? Math.round(r.sum / r.count) : 0, n = Math.round(r.sum / r.count * 100);
     return {
       count: r.count ?? 0,
@@ -1002,18 +1060,18 @@ async function ss(e, t) {
       updated: r.updated_at || (/* @__PURE__ */ new Date()).toISOString()
     };
   } catch (s) {
-    throw f.error("Error loading stats:", s), s;
+    throw g.error("Error loading stats:", s), s;
   }
 }
 async function is(e) {
-  const t = JSON.stringify(e), s = `${fe}`;
+  const t = JSON.stringify(e), s = `${ge}`;
   try {
-    if (f.debug("Sending stats", e), typeof navigator < "u" && navigator.sendBeacon)
+    if (g.debug("Sending stats", e), typeof navigator < "u" && navigator.sendBeacon)
       if (navigator.sendBeacon(s, t)) {
-        f.debug("Successfully sent stats via sendBeacon");
+        g.debug("Successfully sent stats via sendBeacon");
         return;
       } else
-        f.debug("sendBeacon failed, falling back to fetch");
+        g.debug("sendBeacon failed, falling back to fetch");
     const i = await fetch(s, {
       body: t,
       method: "POST",
@@ -1024,15 +1082,15 @@ async function is(e) {
     });
     if (!i.ok)
       throw new Error(`API request failed with status: ${i.status}`);
-    f.debug("Successfully sent stats via fetch");
+    g.debug("Successfully sent stats via fetch");
   } catch (i) {
-    throw f.error("Failed to send analytics:", i), i;
+    throw g.error("Failed to send analytics:", i), i;
   }
 }
 function ve(e) {
   return !e || typeof e != "string" ? !1 : /^[\p{Emoji}]$/u.test(e) ? !0 : new RegExp("^\\p{Emoji}(\\p{Emoji_Modifier}|\\u200D\\p{Emoji})*$", "u").test(e);
 }
-function Tt(e) {
+function Mt(e) {
   if (!e || typeof e != "string")
     return !1;
   const t = e.trim();
@@ -1073,7 +1131,7 @@ function as(e, t) {
     s ^= i.charCodeAt(o), s += (s << 1) + (s << 4) + (s << 7) + (s << 8) + (s << 24);
   return (s >>> 0).toString(16).padStart(8, "0");
 }
-var ns = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, I = function(e) {
+var ns = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
   return typeof e == "string" ? e.length > 0 : typeof e == "number";
 }, x = function(e, t, s) {
   return t === void 0 && (t = 0), s === void 0 && (s = Math.pow(10, t)), Math.round(s * e) / s + 0;
@@ -1119,15 +1177,15 @@ var ns = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, I = function(e) {
   return te(o);
 }, "hsl"]], object: [[function(e) {
   var t = e.r, s = e.g, i = e.b, o = e.a, r = o === void 0 ? 1 : o;
-  return I(t) && I(s) && I(i) ? Jt({ r: Number(t), g: Number(s), b: Number(i), a: Number(r) }) : null;
+  return R(t) && R(s) && R(i) ? Jt({ r: Number(t), g: Number(s), b: Number(i), a: Number(r) }) : null;
 }, "rgb"], [function(e) {
   var t = e.h, s = e.s, i = e.l, o = e.a, r = o === void 0 ? 1 : o;
-  if (!I(t) || !I(s) || !I(i)) return null;
+  if (!R(t) || !R(s) || !R(i)) return null;
   var a = Xt({ h: Number(t), s: Number(s), l: Number(i), a: Number(r) });
   return te(a);
 }, "hsl"], [function(e) {
   var t = e.h, s = e.s, i = e.v, o = e.a, r = o === void 0 ? 1 : o;
-  if (!I(t) || !I(s) || !I(i)) return null;
+  if (!R(t) || !R(s) || !R(i)) return null;
   var a = function(n) {
     return { h: xe(n.h), s: k(n.s, 0, 100), v: k(n.v, 0, 100), a: k(n.a) };
   }({ h: Number(t), s: Number(s), v: Number(i), a: Number(r) });
@@ -1229,7 +1287,7 @@ function St(e, t) {
   return (o + 0.05) / (r + 0.05);
 }
 function re(e) {
-  const t = fs(e), s = t.r / 255, i = t.g / 255, o = t.b / 255, r = s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4), a = i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4), n = o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4);
+  const t = gs(e), s = t.r / 255, i = t.g / 255, o = t.b / 255, r = s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4), a = i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4), n = o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4);
   return 0.2126 * r + 0.7152 * a + 0.0722 * n;
 }
 function ae(e, t = {}) {
@@ -1263,17 +1321,17 @@ function ae(e, t = {}) {
   }
   return c;
 }
-function fs(e) {
+function gs(e) {
   const s = bs(e) || e, i = _(s);
   if (!i.isValid())
     return console.warn(`Invalid color provided: ${e}`), { r: 0, g: 0, b: 0 };
   const { r: o, g: r, b: a } = i.toRgb();
   return { r: o, g: r, b: a };
 }
-function R(e, t) {
+function I(e, t) {
   return e === "left" || e === "right" ? t || "center" : e === "top" || e === "bottom" ? t || "start" : t || "center";
 }
-function gs(e, t = "1rem") {
+function fs(e, t = "1rem") {
   if (!e) return t;
   const s = {
     xs: "0.75rem",
@@ -1323,22 +1381,22 @@ function G() {
   };
 }
 function vs(e) {
-  if (!Ot())
+  if (!Pt())
     return G();
   try {
-    const t = ge(e);
+    const t = fe(e);
     return t ? { ...G(), ...t } : G();
   } catch (t) {
-    return f.warn("Failed to load localStats from localStorage", t), G();
+    return g.warn("Failed to load localStats from localStorage", t), G();
   }
 }
 function xs(e, t) {
-  if (!Ot())
+  if (!Pt())
     return !1;
   try {
-    return ye(e, t) ? (f.debug("Saved localStats to localStorage", t), !0) : !1;
+    return ye(e, t) ? (g.debug("Saved localStats to localStorage", t), !0) : !1;
   } catch (s) {
-    return f.warn("Failed to save localStats to localStorage", s), !1;
+    return g.warn("Failed to save localStats to localStorage", s), !1;
   }
 }
 function $s(e, t) {
@@ -1390,7 +1448,7 @@ function Ss(e) {
   const o = t / i * 100, r = s / i * 100;
   return Math.round(o - r);
 }
-var ks = Object.defineProperty, g = (e, t, s, i) => {
+var ks = Object.defineProperty, f = (e, t, s, i) => {
   for (var o = void 0, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = a(t, s, o) || o);
   return o && ks(t, s, o), o;
@@ -1410,7 +1468,7 @@ const Lt = class Lt extends V {
    * Gets the localStorage key for this widget's localStats
    */
   async getLocalStatsKey() {
-    const t = await Zt(), s = await this.getProjectKey(), i = this.name || "unnamed";
+    const t = await Wt(), s = await this.getProjectKey(), i = this.name || "unnamed";
     return `pc-local-stats-${t}-${s}-${i}`;
   }
   /**
@@ -1419,9 +1477,9 @@ const Lt = class Lt extends V {
   async loadLocalStatsFromStorage() {
     try {
       const t = await this.getLocalStatsKey();
-      this.localStats = vs(t), f.debug("Loaded localStats from localStorage", this.localStats);
+      this.localStats = vs(t), g.debug("Loaded localStats from localStorage", this.localStats);
     } catch (t) {
-      f.warn("Failed to generate localStorage key for localStats", t), this.localStats = G();
+      g.warn("Failed to generate localStorage key for localStats", t), this.localStats = G();
     }
   }
   /**
@@ -1430,9 +1488,9 @@ const Lt = class Lt extends V {
   async saveLocalStatsToStorage() {
     try {
       const t = await this.getLocalStatsKey();
-      xs(t, this.localStats) || f.warn("Failed to save localStats to localStorage");
+      xs(t, this.localStats) || g.warn("Failed to save localStats to localStorage");
     } catch (t) {
-      f.warn("Failed to save localStats to localStorage", t);
+      g.warn("Failed to save localStats to localStorage", t);
     }
   }
   /**
@@ -1457,7 +1515,7 @@ const Lt = class Lt extends V {
    * Undo the stats with the localStats
    */
   async submitStats(t, s) {
-    const i = Math.floor(Date.now() / 1e3).toString(), o = await Zt(), r = await this.getProjectKey(), a = this.name || "", n = {
+    const i = Math.floor(Date.now() / 1e3).toString(), o = await Wt(), r = await this.getProjectKey(), a = this.name || "", n = {
       sessionId: o,
       projectId: r,
       widgetName: a,
@@ -1471,7 +1529,7 @@ const Lt = class Lt extends V {
     try {
       is({ ...n, hash: c });
     } catch (h) {
-      f.warn("Failed to send stats event", h);
+      g.warn("Failed to send stats event", h);
     }
     return n;
   }
@@ -1522,7 +1580,7 @@ const Lt = class Lt extends V {
     }
     if (this.textColor && (s += `--pc-text-color: ${this.textColor} !important;
 `), this.size) {
-      const i = gs(this.size);
+      const i = fs(this.size);
       s += `font-size: ${i} !important;
 `;
     }
@@ -1539,7 +1597,7 @@ const Lt = class Lt extends V {
         const t = await this.getProjectKey();
         this.stats = await ss(this.name, t);
       } catch (t) {
-        f.debug("Error loading stats", t), this.stats = void 0;
+        g.debug("Error loading stats", t), this.stats = void 0;
       } finally {
         this.statsIsLoading = !1;
       }
@@ -1554,7 +1612,7 @@ const Lt = class Lt extends V {
       const i = await this.submitStats(t, s);
       this.dispatchEvent(new CustomEvent("change", { detail: i }));
     } else
-      f.warn("Widget name is not set, skipping data submission.");
+      g.warn("Widget name is not set, skipping data submission.");
   }
   // Common rendering for label
   renderLabel() {
@@ -1574,79 +1632,79 @@ const Lt = class Lt extends V {
 };
 Lt.styles = [Je];
 let u = Lt;
-g([
+f([
   p({ type: Boolean, reflect: !0 })
 ], u.prototype, "readonly");
-g([
+f([
   p({ type: String, attribute: "project" })
 ], u.prototype, "projectKey");
-g([
+f([
   p({ type: String })
 ], u.prototype, "tags");
-g([
+f([
   p({ type: String })
 ], u.prototype, "name");
-g([
+f([
   p({ type: Boolean, attribute: "show-stats" })
 ], u.prototype, "showStats");
-g([
+f([
   p({ type: Boolean, attribute: "show-counts" })
 ], u.prototype, "showCounts");
-g([
+f([
   p({ type: Boolean, attribute: "show-chart" })
 ], u.prototype, "showChart");
-g([
+f([
   p({ type: String, attribute: "stats-text" })
 ], u.prototype, "statsText");
-g([
+f([
   p({ type: String, attribute: "stats-position" })
 ], u.prototype, "statsPosition");
-g([
+f([
   p({ type: String, attribute: "stats-align" })
 ], u.prototype, "statsAlign");
-g([
+f([
   p({ type: String })
 ], u.prototype, "icon");
-g([
+f([
   p({ type: String, attribute: "icon-active" })
 ], u.prototype, "iconActive");
-g([
+f([
   p({ type: String, attribute: "primary-color" })
 ], u.prototype, "primaryColor");
-g([
+f([
   p({ type: String, attribute: "mute-color" })
 ], u.prototype, "muteColor");
-g([
+f([
   p({ type: String, attribute: "text-color" })
 ], u.prototype, "textColor");
-g([
+f([
   p({ type: String })
 ], u.prototype, "size");
-g([
+f([
   p({ type: String, attribute: "button-radius" })
 ], u.prototype, "buttonRadius");
-g([
+f([
   p({ type: Number, attribute: "min-contrast" })
 ], u.prototype, "minContrast");
-g([
+f([
   p({ type: String })
 ], u.prototype, "css");
-g([
+f([
   p({ type: String })
 ], u.prototype, "label");
-g([
+f([
   p({ type: String, attribute: "label-position" })
 ], u.prototype, "labelPosition");
-g([
+f([
   p({ type: String, attribute: "label-align" })
 ], u.prototype, "labelAlign");
-g([
+f([
   y()
 ], u.prototype, "statsIsLoading");
-g([
+f([
   y()
 ], u.prototype, "stats");
-g([
+f([
   y()
 ], u.prototype, "localStats");
 const Cs = B`
@@ -1689,7 +1747,7 @@ const Cs = B`
     gap: 0.5em;
   }
 
-  .thank-you-msg {
+  .nps-thank-you-msg {
     font-size: 0.8em;
     color: var(--pc-text-color, #666);
     font-style: italic;
@@ -1943,7 +2001,7 @@ const v = Ce(class extends Ee {
     return H;
   }
 });
-function Mt(e, t = {}) {
+function Ot(e, t = {}) {
   if (!e || e.length === 0)
     return l`<div class="pc-bar-chart pc-bar-chart--empty">No data available</div>`;
   const s = Math.max(...e.map((r) => r.value)), o = { ...{
@@ -1976,7 +2034,7 @@ function Mt(e, t = {}) {
   `;
 }
 const lt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='5'%20viewBox='0%200%2020%205'%20fill='currentColor'%3e%3ccircle%20cx='3'%20cy='2.5'%20r='1.5'%20opacity='0.3'%3e%3canimate%20attributeName='opacity'%20begin='0s'%20dur='1s'%20values='0.3;0.8;0.3'%20repeatCount='indefinite'/%3e%3c/circle%3e%3ccircle%20cx='10'%20cy='2.5'%20r='1.5'%20opacity='0.3'%3e%3canimate%20attributeName='opacity'%20begin='0.2s'%20dur='1s'%20values='0.3;0.8;0.3'%20repeatCount='indefinite'/%3e%3c/circle%3e%3ccircle%20cx='17'%20cy='2.5'%20r='1.5'%20opacity='0.3'%3e%3canimate%20attributeName='opacity'%20begin='0.4s'%20dur='1s'%20values='0.3;0.8;0.3'%20repeatCount='indefinite'/%3e%3c/circle%3e%3c/svg%3e", bt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='currentColor'%3e%3cpath%20d='M200-200h57l391-391-57-57-391%20391v57Zm-80%2080v-170l528-527q12-11%2026.5-17t30.5-6q16%200%2031%206t26%2018l55%2056q12%2011%2017.5%2026t5.5%2030q0%2016-5.5%2030.5T817-647L290-120H120Zm640-584-56-56%2056%2056Zm-141%2085-28-29%2057%2057-29-28Z'/%3e%3c/svg%3e", zt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23434343'%3e%3cpath%20d='M640-160v-280h160v280H640Zm-240%200v-640h160v640H400Zm-240%200v-440h160v440H160Z'/%3e%3c/svg%3e", Nt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23434343'%3e%3cpath%20d='M160-160v-440h160v440H160Zm240%200v-400l160%20160v240H400Zm160-354L400-674v-126h160v286Zm240%20240L640-434v-6h160v166Zm-9%20219L55-791l57-57%20736%20736-57%2057Z'/%3e%3c/svg%3e";
-var It = /* @__PURE__ */ ((e) => (e.DECORATIVE = "decorative", e.FUNCTIONAL = "functional", e.STATUS = "status", e))(It || {});
+var Rt = /* @__PURE__ */ ((e) => (e.DECORATIVE = "decorative", e.FUNCTIONAL = "functional", e.STATUS = "status", e))(Rt || {});
 function Ae(e, t = {}) {
   const {
     type: s = "functional",
@@ -1992,14 +2050,14 @@ function Ae(e, t = {}) {
   s === "functional" && !i && !o && console.warn(
     `No alt text or aria-label provided for functional icon in ${a}. This may cause accessibility issues.`
   );
-  const n = r ? " (selected)" : "", c = Tt(e) && !i ? "" : i || e, h = o || (c ? `${c}${n}` : n);
+  const n = r ? " (selected)" : "", c = Mt(e) && !i ? "" : i || e, h = o || (c ? `${c}${n}` : n);
   return {
     alt: c,
     ariaLabel: h,
     ariaHidden: !1
   };
 }
-function Rt(e, t = "polite") {
+function It(e, t = "polite") {
   let s = document.getElementById("screen-reader-announcer");
   s ? s.setAttribute("aria-live", t) : (s = document.createElement("div"), s.id = "screen-reader-announcer", s.setAttribute("aria-live", t), s.setAttribute("role", "status"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.width = "1px", s.style.height = "1px", s.style.margin = "-1px", s.style.padding = "0", s.style.overflow = "hidden", s.style.clip = "rect(0, 0, 0, 0)", s.style.whiteSpace = "nowrap", s.style.border = "0", document.body.appendChild(s)), s.textContent = "", setTimeout(() => {
     s.textContent = e;
@@ -2009,7 +2067,7 @@ function Ut(e, t) {
   return `${e}: ${t}`;
 }
 var w = /* @__PURE__ */ ((e) => (e.BUTTON = "button", e.CHECKBOX = "checkbox", e.RADIO = "radio", e.RADIOGROUP = "radiogroup", e.SWITCH = "switch", e.TAB = "tab", e.TABLIST = "tablist", e.TABPANEL = "tabpanel", e.MENU = "menu", e.MENUITEM = "menuitem", e.MENUITEMCHECKBOX = "menuitemcheckbox", e.MENUITEMRADIO = "menuitemradio", e.SLIDER = "slider", e.TEXTBOX = "textbox", e.COMBOBOX = "combobox", e.LISTBOX = "listbox", e.OPTION = "option", e.PROGRESSBAR = "progressbar", e.STATUS = "status", e.ALERT = "alert", e.DIALOG = "dialog", e.GROUP = "group", e.REGION = "region", e.NONE = "none", e.PRESENTATION = "presentation", e))(w || {});
-function O(e) {
+function P(e) {
   const t = {};
   e.role !== void 0 && (t.role = e.role);
   for (const [s, i] of Object.entries(e)) {
@@ -2020,7 +2078,7 @@ function O(e) {
   return t;
 }
 function Es(e, t, s) {
-  return O({
+  return P({
     role: "button",
     ariaLabel: e,
     ariaPressed: t,
@@ -2028,19 +2086,19 @@ function Es(e, t, s) {
   });
 }
 function ne(e, t, s, i = !1) {
-  return O({
+  return P({
     role: i ? "radio" : "checkbox",
     ariaLabel: e,
     ariaChecked: t,
     ariaDisabled: s
   });
 }
-var As = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, q = (e, t, s, i) => {
+var As = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, F = (e, t, s, i) => {
   for (var o = i > 1 ? void 0 : i ? _s(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
   return i && o && As(t, s, o), o;
 };
-let T = class extends u {
+let M = class extends u {
   constructor() {
     super(), this.min = 0, this.max = 10, this.minLabel = "Not at all", this.maxLabel = "Extremely", this.thankYouMsg = "Thank you for sharing your feedback!", this.minMaxPosition = "top", this.isChartVisible = !1, this.isEditMode = !0, this.hoverValue = -1, this.handleChartToggleKeyDown = (e) => {
       (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleChart());
@@ -2089,7 +2147,7 @@ let T = class extends u {
    * Render NPS buttons for edit mode
    */
   renderEditNps() {
-    const e = this.getCurrentScore(), t = this.hasUserScore(), s = Array.from({ length: this.max - this.min + 1 }, (a, n) => n + this.min), i = `nps-control-${this.name || this.widgetType}`, o = O({
+    const e = this.getCurrentScore(), t = this.hasUserScore(), s = Array.from({ length: this.max - this.min + 1 }, (a, n) => n + this.min), i = `nps-control-${this.name || this.widgetType}`, o = P({
       role: w.GROUP,
       ariaLabel: this.label || "NPS Rating",
       ariaDescribedby: `${i}-description`
@@ -2140,7 +2198,7 @@ let T = class extends u {
       "nps-button": !0,
       selected: !0,
       "view-mode": !0
-    }, i = O({
+    }, i = P({
       role: w.PRESENTATION
     }), o = l`
       <button
@@ -2168,11 +2226,11 @@ let T = class extends u {
         label: c,
         value: h
       })
-    ), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Mt(s, {
+    ), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Ot(s, {
       barColor: o,
       labelFormatter: (c) => `${c}`,
       valueFormatter: (c) => `${t > 0 ? Math.round(c / t * 100) : 0}%`
-    }), a = O({
+    }), a = P({
       role: w.REGION,
       ariaLabel: `Results chart for ${this.label || "NPS Rating"}`
     });
@@ -2231,7 +2289,7 @@ let T = class extends u {
     const e = this.hasUserScore(), t = e ? "Edit rating" : "Add rating";
     return l`
       <div class="action-button-container">
-        ${e ? l`<span class="thank-you-msg" data-testid="nps-thank-you-msg"
+        ${e ? l`<span class="nps-thank-you-msg" data-testid="nps-thank-you-msg"
               >${this.thankYouMsg}</span
             >` : d}
         <button
@@ -2258,7 +2316,7 @@ let T = class extends u {
     if (this.readonly) return;
     this.hoverValue = -1;
     const t = this.label || "NPS", s = `Rated ${e} out of ${this.max}`;
-    Rt(Ut(t, s)), await this.handleChange(e, [String(e)]), this.isEditMode = !1;
+    It(Ut(t, s)), await this.handleChange(e, [String(e)]), this.isEditMode = !1;
   }
   /**
    * Render min/max labels
@@ -2293,14 +2351,14 @@ let T = class extends u {
   render() {
     const e = {
       [`pc-flex-pos-${this.labelPosition}`]: !0,
-      [`pc-flex-align-${R(this.labelPosition, this.labelAlign)}`]: !0,
+      [`pc-flex-align-${I(this.labelPosition, this.labelAlign)}`]: !0,
       "edit-mode": this.isEditMode,
       "view-mode": !this.isEditMode
     }, t = {
       nps: !0,
       [`pc-flex-pos-${this.statsPosition}`]: !0,
-      [`pc-flex-align-${R(this.statsPosition, this.statsAlign)}`]: !0
-    }, s = O({
+      [`pc-flex-align-${I(this.statsPosition, this.statsAlign)}`]: !0
+    }, s = P({
       role: w.REGION,
       ariaLabel: this.label || "NPS Rating"
     });
@@ -2320,32 +2378,32 @@ let T = class extends u {
     `;
   }
 };
-T.styles = [...u.styles, Cs];
-q([
+M.styles = [...u.styles, Cs];
+F([
   p({ type: String, attribute: "min-label" })
-], T.prototype, "minLabel", 2);
-q([
+], M.prototype, "minLabel", 2);
+F([
   p({ type: String, attribute: "max-label" })
-], T.prototype, "maxLabel", 2);
-q([
+], M.prototype, "maxLabel", 2);
+F([
   p({ type: String, attribute: "thank-you-msg" })
-], T.prototype, "thankYouMsg", 2);
-q([
+], M.prototype, "thankYouMsg", 2);
+F([
   p({ type: String, attribute: "min-max-position" })
-], T.prototype, "minMaxPosition", 2);
-q([
+], M.prototype, "minMaxPosition", 2);
+F([
   y()
-], T.prototype, "isChartVisible", 2);
-q([
+], M.prototype, "isChartVisible", 2);
+F([
   y()
-], T.prototype, "isEditMode", 2);
-q([
+], M.prototype, "isEditMode", 2);
+F([
   y()
-], T.prototype, "hoverValue", 2);
-T = q([
-  F("pc-nps")
-], T);
-const Ps = B`
+], M.prototype, "hoverValue", 2);
+M = F([
+  q("pc-nps")
+], M);
+const Ts = B`
   /* Add responsive sizing with CSS variables */
   :host {
     --pc-checkbox-size: clamp(1em, calc(0.8em + 0.3vw), 1.4em);
@@ -2648,17 +2706,6 @@ const Ps = B`
     text-align: center;
   }
 
-  .thank-you-msg {
-    font-size: 1em;
-    color: var(--pc-text-color, #333);
-    background: white;
-    padding: 1em 1.5em;
-    border-radius: var(--pc-border-radius, 0.375em);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    border: 1px solid var(--pc-mute-color, #ddd);
-    max-width: 300px;
-  }
-
   /* Edit toggle icon styles */
   .edit-toggle-icon {
     width: 1em;
@@ -2715,52 +2762,6 @@ const Ps = B`
     }
   }
 
-  /* Overlay styles */
-  .poll-section-with-overlay {
-    position: relative;
-  }
-
-  .poll-thank-you-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(2px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    animation: fadeInOverlay 0.3s ease-out;
-  }
-
-  @keyframes fadeInOverlay {
-    from {
-      opacity: 0;
-      backdrop-filter: blur(0px);
-    }
-    to {
-      opacity: 1;
-      backdrop-filter: blur(2px);
-    }
-  }
-
-  .poll-thank-you-overlay .poll-thank-you {
-    animation: slideInUp 0.4s ease-out;
-  }
-
-  @keyframes slideInUp {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
   /* Disabled poll options styles */
   .poll-container--disabled {
     filter: brightness(0.95);
@@ -2782,12 +2783,12 @@ const Ps = B`
     gap: 0.5em;
   }
 `;
-var Os = Object.defineProperty, Ts = Object.getOwnPropertyDescriptor, Q = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? Ts(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+var Ps = Object.defineProperty, Ms = Object.getOwnPropertyDescriptor, Q = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Ms(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
-  return i && o && Os(t, s, o), o;
+  return i && o && Ps(t, s, o), o;
 };
-let P = class extends V {
+let T = class extends V {
   constructor() {
     super(...arguments), this.value = "", this.icon = "", this.tooltip = "", this.disabled = !1, this.selected = !1;
   }
@@ -2806,33 +2807,33 @@ let P = class extends V {
     return l` <slot></slot> `;
   }
 };
-P.styles = B`
+T.styles = B`
     :host {
       display: none;
     }
   `;
 Q([
   p({ type: String, reflect: !0 })
-], P.prototype, "value", 2);
+], T.prototype, "value", 2);
 Q([
   p({ type: String })
-], P.prototype, "icon", 2);
+], T.prototype, "icon", 2);
 Q([
   p({ type: String })
-], P.prototype, "tooltip", 2);
+], T.prototype, "tooltip", 2);
 Q([
   p({ type: Boolean, reflect: !0 })
-], P.prototype, "disabled", 2);
+], T.prototype, "disabled", 2);
 Q([
   p({ type: Boolean, reflect: !0 })
-], P.prototype, "selected", 2);
-P = Q([
-  F("pc-poll-option")
-], P);
-var Ms = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, z = (e, t, s, i) => {
+], T.prototype, "selected", 2);
+T = Q([
+  q("pc-poll-option")
+], T);
+var Os = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, z = (e, t, s, i) => {
   for (var o = i > 1 ? void 0 : i ? zs(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
-  return i && o && Ms(t, s, o), o;
+  return i && o && Os(t, s, o), o;
 };
 let C = class extends u {
   constructor() {
@@ -2862,7 +2863,7 @@ let C = class extends u {
   getSlottedOptions() {
     var s;
     const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
-    return e ? e.assignedElements().filter((i) => i instanceof P).map((i) => {
+    return e ? e.assignedElements().filter((i) => i instanceof T).map((i) => {
       var o, r;
       return {
         value: i.value || i.labelContent || ((o = i.textContent) == null ? void 0 : o.trim()) || "",
@@ -2943,7 +2944,7 @@ let C = class extends u {
     if (!this.slotExists) return;
     const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
     if (!e) return;
-    e.assignedElements().filter((i) => i instanceof P).forEach((i) => {
+    e.assignedElements().filter((i) => i instanceof T).forEach((i) => {
       i.selected = this.isSelected(i.value);
     });
   }
@@ -2955,7 +2956,7 @@ let C = class extends u {
     if (!this.slotExists) return;
     const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
     if (!e) return;
-    e.assignedElements().filter((i) => i instanceof P).forEach((i) => {
+    e.assignedElements().filter((i) => i instanceof T).forEach((i) => {
       i.selected = this.pendingSelections.includes(i.value);
     });
   }
@@ -2964,7 +2965,7 @@ let C = class extends u {
    */
   renderOptionIcon(e, t) {
     if (!e) return "";
-    const s = It.DECORATIVE, i = `Poll for: ${t == null ? void 0 : t.label}`, o = (t == null ? void 0 : t.label) || "", r = t ? this.isSelected(t.value) : !1, a = Ae(e, {
+    const s = Rt.DECORATIVE, i = `Poll for: ${t == null ? void 0 : t.label}`, o = (t == null ? void 0 : t.label) || "", r = t ? this.isSelected(t.value) : !1, a = Ae(e, {
       type: s,
       alt: o,
       isSelected: r,
@@ -2974,7 +2975,7 @@ let C = class extends u {
         class="poll-option-icon"
         aria-hidden="${a.ariaHidden ? "true" : "false"}"
         >${e}</span
-      >` : Tt(e) ? l`<img
+      >` : Mt(e) ? l`<img
         src="${e}"
         alt="${a.alt}"
         class="poll-option-icon-img"
@@ -3047,7 +3048,7 @@ let C = class extends u {
    * Render poll options with proper grouping role
    */
   renderPollOptions() {
-    const e = this.multiple ? w.GROUP : w.RADIOGROUP, t = this.label || this.name || "Options", s = O({
+    const e = this.multiple ? w.GROUP : w.RADIOGROUP, t = this.label || this.name || "Options", s = P({
       role: e,
       ariaLabel: t
     });
@@ -3100,7 +3101,7 @@ let C = class extends u {
   renderStats() {
     if (!this.statsText) return d;
     if (this.statsIsLoading) {
-      const s = O({
+      const s = P({
         ariaLabel: "Loading poll statistics",
         ariaBusy: !0
       });
@@ -3185,7 +3186,7 @@ let C = class extends u {
    * Render poll options with previous selections but disabled (for view mode)
    */
   renderDisabledPollOptions() {
-    const e = this.multiple ? w.GROUP : w.RADIOGROUP, t = this.label || this.name || "Options", s = O({
+    const e = this.multiple ? w.GROUP : w.RADIOGROUP, t = this.label || this.name || "Options", s = P({
       role: e,
       ariaLabel: t
     });
@@ -3235,9 +3236,9 @@ let C = class extends u {
    */
   renderContent() {
     return this.isEditMode ? l`<div class="pc-section">${this.renderPollOptions()}</div>` : this.showChart ? l`<div class="pc-section">${this.renderLinkedInChart()}</div>` : this.hasUserVote() ? l`
-          <div class="pc-section poll-section-with-overlay">
+          <div class="pc-section pc-thank-you-section-with-overlay">
             ${this.renderDisabledPollOptions()}
-            <div class="poll-thank-you-overlay" data-testid="poll-thank-you-overlay">
+            <div class="pc-thank-you-overlay" data-testid="poll-thank-you-overlay">
               ${this.renderThankYouMessage()}
             </div>
           </div>
@@ -3271,17 +3272,17 @@ let C = class extends u {
   announceSelectionChange(e, t, s) {
     const i = `Poll for: ${e.label}`;
     let o = "";
-    this.multiple ? o = (t == null ? void 0 : t.includes(e.value)) || !1 ? `${e.label} selected` : `${e.label} unselected` : o = t && t.length > 0 ? `${e.label} selected` : "Selection cleared", Rt(Ut(i, o));
+    this.multiple ? o = (t == null ? void 0 : t.includes(e.value)) || !1 ? `${e.label} selected` : `${e.label} unselected` : o = t && t.length > 0 ? `${e.label} selected` : "Selection cleared", It(Ut(i, o));
   }
   render() {
     const e = {
       [`pc-flex-pos-${this.labelPosition}`]: !0,
-      [`pc-flex-align-${R(this.labelPosition, this.labelAlign)}`]: !0
+      [`pc-flex-align-${I(this.labelPosition, this.labelAlign)}`]: !0
     }, t = "bottom", s = {
       poll: !0,
       [`pc-flex-pos-${t}`]: !0,
-      [`pc-flex-align-${R(t, this.statsAlign)}`]: !0
-    }, i = O({
+      [`pc-flex-align-${I(t, this.statsAlign)}`]: !0
+    }, i = P({
       role: w.REGION,
       ariaLabel: this.label || this.name || "Poll"
     });
@@ -3301,7 +3302,7 @@ let C = class extends u {
     `;
   }
 };
-C.styles = [...u.styles, Ps];
+C.styles = [...u.styles, Ts];
 z([
   p({ type: Array })
 ], C.prototype, "options", 2);
@@ -3330,7 +3331,7 @@ z([
   y()
 ], C.prototype, "pendingSelections", 2);
 C = z([
-  F("pc-poll")
+  q("pc-poll")
 ], C);
 const Ns = B`
   .pc-container {
@@ -3458,17 +3459,6 @@ const Ns = B`
     text-align: center;
   }
 
-  .thank-you-msg {
-    font-size: 1em;
-    color: var(--pc-text-color, #333);
-    background: white;
-    padding: 1em 1.5em;
-    border-radius: var(--pc-border-radius, 0.375em);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    border: 1px solid var(--pc-mute-color, #ddd);
-    max-width: 300px;
-  }
-
   /* Edit toggle icon styles */
   .edit-toggle-icon {
     width: 1em;
@@ -3489,52 +3479,6 @@ const Ns = B`
     border-radius: 2px;
   }
 
-  /* Overlay styles */
-  .text-section-with-overlay {
-    position: relative;
-  }
-
-  .text-thank-you-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(2px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    animation: fadeInOverlay 0.3s ease-out;
-  }
-
-  @keyframes fadeInOverlay {
-    from {
-      opacity: 0;
-      backdrop-filter: blur(0px);
-    }
-    to {
-      opacity: 1;
-      backdrop-filter: blur(2px);
-    }
-  }
-
-  .text-thank-you-overlay .text-thank-you {
-    animation: slideInUp 0.4s ease-out;
-  }
-
-  @keyframes slideInUp {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
   /* Disabled text input styles */
   .text-input-container--disabled {
     filter: brightness(0.95);
@@ -3564,10 +3508,10 @@ const Ns = B`
     }
   }
 `;
-var Is = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, A = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? Rs(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+var Rs = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, A = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Is(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
-  return i && o && Is(t, s, o), o;
+  return i && o && Rs(t, s, o), o;
 };
 let $ = class extends u {
   constructor() {
@@ -3746,9 +3690,9 @@ let $ = class extends u {
    */
   renderContent() {
     return this.isEditMode ? l`<div class="pc-section">${this.renderTextarea()}</div>` : this.hasSubmitted() ? l`
-        <div class="pc-section text-section-with-overlay">
+        <div class="pc-section pc-thank-you-section-with-overlay">
           ${this.renderDisabledTextarea()}
-          <div class="text-thank-you-overlay" data-testid="text-thank-you-overlay">
+          <div class="pc-thank-you-overlay" data-testid="text-thank-you-overlay">
             ${this.renderThankYouMessage()}
           </div>
         </div>
@@ -3766,7 +3710,7 @@ let $ = class extends u {
   render() {
     const e = {
       [`pc-flex-pos-${this.labelPosition}`]: !0,
-      [`pc-flex-align-${R(this.labelPosition, this.labelAlign)}`]: !0
+      [`pc-flex-align-${I(this.labelPosition, this.labelAlign)}`]: !0
     };
     return l`
       <div class="pc-container ${v(e)}" data-testid="text-container">
@@ -3811,7 +3755,7 @@ A([
   y()
 ], $.prototype, "hasUserSubmitted", 2);
 $ = A([
-  F("pc-text")
+  q("pc-text")
 ], $);
 const Us = B`
   /* Adjust stats text for reactions */
@@ -3833,6 +3777,7 @@ const Us = B`
   /* Main reaction container */
   .reaction {
     display: flex;
+    flex-direction: row;
     gap: 0.5em;
     align-items: center;
     flex-wrap: wrap;
@@ -3857,19 +3802,21 @@ const Us = B`
     background: var(--pc-background-color, white);
     border-radius: var(--pc-button-radius, 1em);
     cursor: pointer;
-    transition: all 0.2s;
+    transition:
+      background 0.2s,
+      color 0.2s,
+      border-color 0.2s;
     position: relative;
-    font-size: var(--pc-font-size-small, 0.8em);
+    font-size: var(--pc-font-size-medium, 1em);
     gap: 0.25em;
-    min-height: 2em;
     box-sizing: border-box;
+    min-width: 2em;
+    min-height: 2em;
   }
 
   /* Modifier class for reaction buttons without counts - creates circular appearance */
   .reaction-btn.no-counts {
     padding: 0.25em;
-    min-height: 2em;
-    min-width: 2em;
   }
 
   .reaction-btn.readonly {
@@ -3888,6 +3835,16 @@ const Us = B`
     color: var(--pc-primary-color, #007bff);
   }
 
+  .reaction-btn:not(.readonly):hover {
+    background: var(--pc-hover-color, #f5f5f5);
+    color: var(--pc-primary-color, #007bff);
+    transform: translateY(-1px);
+  }
+
+  .reaction-btn.selected:not(.readonly):hover {
+    background: var(--pc-primary-color-light, rgba(0, 123, 255, 0.2));
+  }
+
   /* Trigger button for compact mode */
   .trigger-btn {
     display: flex;
@@ -3898,8 +3855,11 @@ const Us = B`
     background: var(--pc-background-color, white);
     border-radius: var(--pc-button-radius, 1em);
     cursor: pointer;
-    transition: all 0.2s;
-    font-size: var(--pc-font-size-medium, 0.8em);
+    transition:
+      background 0.2s,
+      color 0.2s,
+      border-color 0.2s;
+    font-size: var(--pc-font-size-medium, 1em);
   }
 
   .trigger-btn:hover {
@@ -3914,11 +3874,13 @@ const Us = B`
   /* Icon styling */
   .icon {
     display: inline-block;
-    line-height: 1;
-    transition: all 0.3s ease;
+    line-height: 1.2;
+    transition:
+      color 0.3s,
+      transform 0.3s;
     will-change: transform;
     font-size: 1em;
-    height: 0.9em; /* don't know why this is needed */
+    height: 1em;
   }
 
   .icon-img {
@@ -3928,9 +3890,10 @@ const Us = B`
   }
 
   .trigger-icon {
-    width: 1em;
-    height: 1em;
-    object-fit: contain;
+    width: 1.5em;
+    height: 1.5em;
+    display: block;
+    filter: brightness(2) contrast(1);
   }
 
   /* Count label */
@@ -3940,16 +3903,6 @@ const Us = B`
     color: var(--pc-text-color, #333);
   }
 
-  /* Hover effects */
-  /* .reaction-btn:not(.readonly):hover {
-    background: var(--pc-hover-color, #f5f5f5);
-    transform: translateY(-1px);
-  } */
-
-  .reaction-btn.selected:not(.readonly):hover {
-    background: var(--pc-primary-color-light, rgba(0, 123, 255, 0.2));
-  }
-
   /* Popover styles */
   .popover {
     position: absolute;
@@ -4171,7 +4124,7 @@ const Us = B`
 };
 function Ls(e) {
   let t = "❓", s = !1;
-  return e ? e in le ? t = le[e] : ve(e) ? t = e : Tt(e) ? (s = !0, t = e) : /^\w+@\w+$/.test(e) ? t = e : e.endsWith(".svg") ? (t = `https://cdn.jsdelivr.net/npm/@mdi/svg@7.4.47/svg/${e}`, s = !0) : t = e : t = "❓", {
+  return e ? e in le ? t = le[e] : ve(e) ? t = e : Mt(e) ? (s = !0, t = e) : /^\w+@\w+$/.test(e) ? t = e : e.endsWith(".svg") ? (t = `https://cdn.jsdelivr.net/npm/@mdi/svg@7.4.47/svg/${e}`, s = !0) : t = e : t = "❓", {
     icon: t,
     isRemoteImage: s
   };
@@ -4181,7 +4134,7 @@ var js = Object.defineProperty, Ds = Object.getOwnPropertyDescriptor, tt = (e, t
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
   return i && o && js(t, s, o), o;
 };
-let M = class extends V {
+let O = class extends V {
   constructor() {
     super(...arguments), this.name = "", this.icon = "", this.tooltip = "", this.disabled = !1, this.selected = !1;
   }
@@ -4200,38 +4153,38 @@ let M = class extends V {
     return l` <slot></slot> `;
   }
 };
-M.styles = B`
+O.styles = B`
     :host {
       display: none;
     }
   `;
 tt([
   p({ type: String, reflect: !0 })
-], M.prototype, "name", 2);
+], O.prototype, "name", 2);
 tt([
   p({ type: String })
-], M.prototype, "icon", 2);
+], O.prototype, "icon", 2);
 tt([
   p({ type: String })
-], M.prototype, "tooltip", 2);
+], O.prototype, "tooltip", 2);
 tt([
   p({ type: Boolean, reflect: !0 })
-], M.prototype, "disabled", 2);
+], O.prototype, "disabled", 2);
 tt([
   p({ type: Boolean, reflect: !0 })
-], M.prototype, "selected", 2);
-M = tt([
-  F("pc-reaction-icon")
-], M);
-var Vs = Object.defineProperty, Hs = Object.getOwnPropertyDescriptor, N = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? Hs(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+], O.prototype, "selected", 2);
+O = tt([
+  q("pc-reaction-icon")
+], O);
+const Vs = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23434343'%3e%3cpath%20d='M480-480Zm0%20400q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q43%200%2083%208.5t77%2024.5v90q-35-20-75.5-31.5T480-800q-133%200-226.5%2093.5T160-480q0%20133%2093.5%20226.5T480-160q133%200%20226.5-93.5T800-480q0-32-6.5-62T776-600h86q9%2029%2013.5%2058.5T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm320-600v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM620-520q25%200%2042.5-17.5T680-580q0-25-17.5-42.5T620-640q-25%200-42.5%2017.5T560-580q0%2025%2017.5%2042.5T620-520Zm-280%200q25%200%2042.5-17.5T400-580q0-25-17.5-42.5T340-640q-25%200-42.5%2017.5T280-580q0%2025%2017.5%2042.5T340-520Zm140%20260q68%200%20123.5-38.5T684-400H276q25%2063%2080.5%20101.5T480-260Z'/%3e%3c/svg%3e";
+var Hs = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, N = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Bs(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
-  return i && o && Vs(t, s, o), o;
+  return i && o && Hs(t, s, o), o;
 };
-const Bs = "/src/images/emoji/add_reaction.svg";
 let E = class extends u {
   constructor() {
-    super(), this.options = [], this.multiple = !1, this.mode = "compact", this.popupPosition = "auto", this.buttonRadius = "999px", this.normalizedReactions = [], this.slotExists = !1, this.isPopoverVisible = !1, this.isChartVisible = !1, this.handleClickOutside = (e) => {
+    super(), this.options = [], this.multiple = !1, this.compact = !1, this.popupPosition = "auto", this.buttonRadius = "999px", this.normalizedReactions = [], this.slotExists = !1, this.isPopoverVisible = !1, this.isChartVisible = !1, this.handleClickOutside = (e) => {
       var o, r;
       const t = e.target, s = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".popover"), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".trigger-btn");
       s && !s.contains(t) && !(i != null && i.contains(t)) && (this.isPopoverVisible = !1);
@@ -4248,7 +4201,7 @@ let E = class extends u {
   getSlottedReactions() {
     var s;
     const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
-    return e ? e.assignedElements().filter((i) => i instanceof M).map((i) => ({
+    return e ? e.assignedElements().filter((i) => i instanceof O).map((i) => ({
       name: i.name || i.labelContent || i.icon,
       icon: i.icon,
       tooltip: i.tooltip,
@@ -4304,7 +4257,7 @@ let E = class extends u {
         return (((a = this.localStats.breakdown) == null ? void 0 : a[r]) || 0) > 0;
       }
     );
-    this.multiple ? t ? s = i.filter((r) => r !== e.name) : s = [...i, e.name] : t ? s = [] : s = [e.name], this.updateSlottedElementsState(), this.mode === "compact" && (this.isPopoverVisible = !1), this.announceReactionChange(e, !t);
+    this.multiple ? t ? s = i.filter((r) => r !== e.name) : s = [...i, e.name] : t ? s = [] : s = [e.name], this.updateSlottedElementsState(), this.compact && (this.isPopoverVisible = !1), this.announceReactionChange(e, !t);
     const o = s.length;
     await this.handleChange(o, s);
   }
@@ -4316,7 +4269,7 @@ let E = class extends u {
     if (!this.slotExists) return;
     const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
     if (!e) return;
-    e.assignedElements().filter((i) => i instanceof M).forEach((i) => {
+    e.assignedElements().filter((i) => i instanceof O).forEach((i) => {
       i.selected = this.isSelected(i.name);
     });
   }
@@ -4330,7 +4283,7 @@ let E = class extends u {
    * Renders the icon for a reaction
    */
   renderReactionIcon(e, t) {
-    const { icon: s, isRemoteImage: i } = Ls(e), o = It.FUNCTIONAL, r = "reaction", a = t.tooltip || `${t.name} reaction`, n = Ae(s, {
+    const { icon: s, isRemoteImage: i } = Ls(e), o = Rt.FUNCTIONAL, r = "reaction", a = t.tooltip || `${t.name} reaction`, n = Ae(s, {
       type: o,
       alt: a,
       ariaLabel: a,
@@ -4384,7 +4337,7 @@ let E = class extends u {
         aria-expanded="${this.isPopoverVisible}"
         aria-haspopup="menu"
       >
-        <img src="${Bs}" alt="" class="trigger-icon" />
+        <img src="${Vs}" alt="" class="trigger-icon" />
       </button>
     `;
   }
@@ -4392,7 +4345,7 @@ let E = class extends u {
    * Render the popover for compact mode
    */
   renderPopover() {
-    if (!this.isPopoverVisible || this.mode !== "compact") return d;
+    if (!this.isPopoverVisible || !this.compact) return d;
     const e = {
       popover: !0,
       top: this.popupPosition === "top" || this.popupPosition === "auto" && this.shouldShowPopoverOnTop(),
@@ -4437,20 +4390,10 @@ let E = class extends u {
     if (this.normalizedReactions.length === 0) return d;
     const e = {
       reaction: !0,
-      expand: this.mode === "expand",
-      compact: this.mode === "compact"
+      expand: !this.compact,
+      compact: this.compact
     };
-    if (this.mode === "expand")
-      return l`
-        <div class="${v(e)}">
-          <div class="reaction-list">
-            ${this.normalizedReactions.map(
-        (t) => this.renderReactionButton(t, this.showCounts)
-      )}
-          </div>
-        </div>
-      `;
-    {
+    if (this.compact) {
       const t = this.getActiveReactions();
       return l`
         <div class="${v(e)}">
@@ -4465,7 +4408,16 @@ let E = class extends u {
           ${this.renderPopover()}
         </div>
       `;
-    }
+    } else
+      return l`
+        <div class="${v(e)}">
+          <div class="reaction-list">
+            ${this.normalizedReactions.map(
+        (t) => this.renderReactionButton(t, this.showCounts)
+      )}
+          </div>
+        </div>
+      `;
   }
   /**
    * Render chart for reaction stats
@@ -4483,7 +4435,7 @@ let E = class extends u {
           icon: h && this.renderReactionIcon((h == null ? void 0 : h.icon) || "", h ?? {}) || ""
         };
       }
-    ), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Mt(s, {
+    ), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Ot(s, {
       barColor: o,
       labelFormatter: (n) => `${n}`,
       valueFormatter: (n) => `${t > 0 ? Math.round(n / t * 100) : 0}%`
@@ -4571,15 +4523,15 @@ let E = class extends u {
    */
   announceReactionChange(e, t) {
     const s = this.componentName, i = t ? `Added ${e.name} reaction` : `Removed ${e.name} reaction`;
-    Rt(Ut(s, i));
+    It(Ut(s, i));
   }
   render() {
     const e = {
       [`pc-flex-pos-${this.labelPosition}`]: !0,
-      [`pc-flex-align-${R(this.labelPosition, this.labelAlign)}`]: !0
+      [`pc-flex-align-${I(this.labelPosition, this.labelAlign)}`]: !0
     }, t = {
       [`pc-flex-pos-${this.statsPosition}`]: !0,
-      [`pc-flex-align-${R(this.statsPosition, this.statsAlign)}`]: !0
+      [`pc-flex-align-${I(this.statsPosition, this.statsAlign)}`]: !0
     };
     return l`
       <div class="pc-container ${v(e)}" data-testid="reaction-container">
@@ -4601,10 +4553,10 @@ N([
   p({ type: Boolean, reflect: !0 })
 ], E.prototype, "multiple", 2);
 N([
-  p({ type: String })
-], E.prototype, "mode", 2);
+  p({ type: Boolean, reflect: !0 })
+], E.prototype, "compact", 2);
 N([
-  p({ type: String, attribute: "popup-position" })
+  p({ type: String })
 ], E.prototype, "popupPosition", 2);
 N([
   p({ type: String, attribute: "button-radius" })
@@ -4622,9 +4574,9 @@ N([
   y()
 ], E.prototype, "isChartVisible", 2);
 E = N([
-  F("pc-reaction")
+  q("pc-reaction")
 ], E);
-const Fs = B`
+const qs = B`
   /* Base variables */
   :host {
     --pc-stars-star-size: clamp(1.2em, calc(1.2em + 0.3vw), 2em);
@@ -4981,7 +4933,7 @@ const Fs = B`
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const _e = "important", qs = " !" + _e, Ks = Ce(class extends Ee {
+const _e = "important", Fs = " !" + _e, Ks = Ce(class extends Ee {
   constructor(e) {
     var t;
     if (super(e), e.type !== ke.ATTRIBUTE || e.name !== "style" || ((t = e.strings) == null ? void 0 : t.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
@@ -5000,14 +4952,14 @@ const _e = "important", qs = " !" + _e, Ks = Ce(class extends Ee {
       const o = t[i];
       if (o != null) {
         this.ft.add(i);
-        const r = typeof o == "string" && o.endsWith(qs);
+        const r = typeof o == "string" && o.endsWith(Fs);
         i.includes("-") || r ? s.setProperty(i, r ? o.slice(0, -11) : o, r ? _e : "") : s[i] = o;
       }
     }
     return H;
   }
 });
-var Ys = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, Z = (e, t, s, i) => {
+var Ys = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, W = (e, t, s, i) => {
   for (var o = i > 1 ? void 0 : i ? Gs(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
   return i && o && Ys(t, s, o), o;
@@ -5186,7 +5138,7 @@ let U = class extends u {
         value: c,
         icon: "★"
       })
-    ), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Mt(s, {
+    ), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Ot(s, {
       barColor: o,
       labelFormatter: (n) => `${n}`,
       valueFormatter: (n) => `${t > 0 ? Math.round(n / t * 100) : 0}%`
@@ -5230,13 +5182,13 @@ let U = class extends u {
   render() {
     const e = {
       [`pc-flex-pos-${this.labelPosition}`]: !0,
-      [`pc-flex-align-${R(this.labelPosition, this.labelAlign)}`]: !0,
+      [`pc-flex-align-${I(this.labelPosition, this.labelAlign)}`]: !0,
       "edit-mode": this.isEditMode,
       "view-mode": !this.isEditMode
     }, t = {
       stars: !0,
       [`pc-flex-pos-${this.statsPosition}`]: !0,
-      [`pc-flex-align-${R(this.statsPosition, this.statsAlign)}`]: !0
+      [`pc-flex-align-${I(this.statsPosition, this.statsAlign)}`]: !0
     };
     return l`
       <div class="pc-container ${v(e)}" data-testid="stars-container">
@@ -5255,32 +5207,32 @@ let U = class extends u {
     `;
   }
 };
-U.styles = [...u.styles, Fs];
-Z([
+U.styles = [...u.styles, qs];
+W([
   p({ type: Number, attribute: "num-stars" })
 ], U.prototype, "numStars", 2);
-Z([
+W([
   p({ type: String, attribute: "default-mode" })
 ], U.prototype, "defaultMode", 2);
-Z([
+W([
   y()
 ], U.prototype, "isChartVisible", 2);
-Z([
+W([
   y()
 ], U.prototype, "isEditMode", 2);
-Z([
+W([
   y()
 ], U.prototype, "hoverValue", 2);
-Z([
+W([
   y()
 ], U.prototype, "editValue", 2);
-U = Z([
-  F("pc-stars")
+U = W([
+  q("pc-stars")
 ], U);
-var Ws = Object.defineProperty, Zs = Object.getOwnPropertyDescriptor, Pe = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? Zs(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+var Zs = Object.defineProperty, Ws = Object.getOwnPropertyDescriptor, Te = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Ws(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
-  return i && o && Ws(t, s, o), o;
+  return i && o && Zs(t, s, o), o;
 };
 let Ct = class extends V {
   /**
@@ -5340,18 +5292,18 @@ let Ct = class extends V {
     }
   }
 };
-Pe([
+Te([
   p({ type: String })
 ], Ct.prototype, "type", 2);
-Ct = Pe([
-  F("poll-catch")
+Ct = Te([
+  q("poll-catch")
 ], Ct);
 export {
-  T as PcNps,
+  M as PcNps,
   C as PcPoll,
-  P as PcPollOption,
+  T as PcPollOption,
   E as PcReaction,
-  M as PcReactionIcon,
+  O as PcReactionIcon,
   U as PcStars,
   $ as PcText,
   Ct as PollCatch