rivia 0.0.93 → 0.0.95

package/dist/index.js

@@ -280,6 +280,21 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   if (!user_var)
     return;
   let i = 0;
+  const translateStyle = cssConfig.launcherProgressBar ? 'style="transform: translateY(10px);"' : "";
+  const iconHTML1 = cssConfig.launcherShowIcon ? `<svg class="launcher-icon" width="24" height="24"   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 10.167L12.123 6.043C13.248 4.919 13.811 4.356 14.431 3.903C15.7049 2.97403 17.1822 2.36274 18.74 2.12C19.499 2 20.293 2 21.885 2C21.968 2 22 2.038 22 2.115C22 3.705 22 4.501 21.881 5.26C21.638 6.81791 21.0263 8.29523 20.097 9.569C19.644 10.189 19.081 10.752 17.957 11.877L13.833 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.341 8.098C8.638 8.098 6.498 7.738 4.904 8.398C3.737 8.88 2.878 10 2 10.878L5.306 12.296C6.182 12.671 5.646 13.776 5.501 14.502C5.34 15.31 5.349 15.34 5.931 15.922L8.078 18.068C8.66 18.651 8.69 18.66 9.498 18.498C10.223 18.353 11.329 17.818 11.704 18.694L13.121 22C13.999 21.122 15.119 20.263 15.602 19.096C16.262 17.502 15.902 15.362 15.902 13.659" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M12 20L11 21M4 12L3 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 4.08008C16.2 4.26008 17.46 4.74008 18.161 5.46008C19.058 6.25208 19.68 7.32008 19.92 9.00008" stroke="white" stroke-width="1.5" stroke-linecap="square"/>
+  <path d="M17.94 6.05957L16.5 7.49957" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>` : "";
+  const iconHTML = cssConfig.launcherShowIcon ? `<svg class="launcher-icon" width="24" height="24" ${translateStyle}  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 10.167L12.123 6.043C13.248 4.919 13.811 4.356 14.431 3.903C15.7049 2.97403 17.1822 2.36274 18.74 2.12C19.499 2 20.293 2 21.885 2C21.968 2 22 2.038 22 2.115C22 3.705 22 4.501 21.881 5.26C21.638 6.81791 21.0263 8.29523 20.097 9.569C19.644 10.189 19.081 10.752 17.957 11.877L13.833 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.341 8.098C8.638 8.098 6.498 7.738 4.904 8.398C3.737 8.88 2.878 10 2 10.878L5.306 12.296C6.182 12.671 5.646 13.776 5.501 14.502C5.34 15.31 5.349 15.34 5.931 15.922L8.078 18.068C8.66 18.651 8.69 18.66 9.498 18.498C10.223 18.353 11.329 17.818 11.704 18.694L13.121 22C13.999 21.122 15.119 20.263 15.602 19.096C16.262 17.502 15.902 15.362 15.902 13.659" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M12 20L11 21M4 12L3 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 4.08008C16.2 4.26008 17.46 4.74008 18.161 5.46008C19.058 6.25208 19.68 7.32008 19.92 9.00008" stroke="white" stroke-width="1.5" stroke-linecap="square"/>
+  <path d="M17.94 6.05957L16.5 7.49957" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>` : "";
   const stepsHTML = items.map((it) => {
     return `
   <div id="${it.id}" class="onboard-step">
@@ -289,227 +304,259 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   
   <div class="onboard-text">
   <strong class="onboard-title">${it.title}</strong><br />
-  <small class="onboard-desc">${it.description || ""}</small>
+  <div class="onboard-desc">${it.description || ""}</div>
       </div>
       </div>
-    ${i++ < items.length - 1 ? '<hr class="onboard-divider" />' : ""}
     `;
   }).join("");
   const labelHTML = `
         <div id="checklistRoot" class="checklist-root">
-        <button id="checklistCloseBtn" class="checklist-close">&times;</button>
-        
-        <div class="checklist-header">
-        <h3 class="checklist-title">${topTitle}</h3>
-        <p class="checklist-subtitle">${subtitle}</p>
-        
-        <div class="checklist-progress">
-        <div id="progressContainer" style="display: flex; gap: 4px; width: 300px;  height: 10px;"></div>
-          <span id="progressFraction" style="margin-left: 0px; font-size: 13px; color: ${cssConfig.textColor}; min-width: 20px; text-align: right;">0/0 </span>
+  
+  <button id="checklistCloseBtn" class="checklist-close">&times;</button>
+  
+  <div class="checklist-header">
+    
+    <h3 class="checklist-title">
+        ${iconHTML1}&nbsp;${topTitle}</h3>
+    
+    <p class="checklist-subtitle">${subtitle}</p>
+    
+    <div class="checklist-progress">
+      
+      <div id="progressContainer" 
+        style="display: flex !important; gap: 4px !important; width: 300px !important; height: 10px !important;">
+      </div>
+      
+      <span id="progressFraction" 
+        style="margin-left: 0px !important; font-size: 13px !important; color: ${cssConfig.textColor} !important; min-width: 20px !important; text-align: right !important;">
+        0/0
+      </span>
+    
+    </div>
+  
+  </div>
+  
+  <div class="checklist-body">
     
-        </div>
-        
-        </div>
-        
-        <div class="checklist-body">
-        ${stepsHTML}
-        <div style="text-align: right; margin-top: 10px; cursor: pointer; color: black; font-size: 12px;" id="dismissChecklist">Dismiss this checklist</div>
-        </div>
+    ${stepsHTML}
+    
+    <div id="dismissChecklist" 
+      style="text-align: right !important; margin-top: 10px !important; cursor: pointer !important; font-style: italic !important; color: black !important; font-size: 12px !important;padding-right: 16px !important;">
+      Dismiss this checklist
     </div>
+  
+  </div>
+
+</div>
     `;
   function injectChecklistBaseCSS() {
     if (document.getElementById("rivia-checklist-css")) return;
     const style2 = document.createElement("style");
     style2.id = "rivia-checklist-css";
-    style2.textContent = custom_css || `/* Root */
+    style2.textContent = custom_css || `
 .checklist-root {
-  max-width: 500px;
-  margin: auto;
-  position: relative;
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  color: var(--text-color);
+  max-width: 500px !important;
+  margin: auto !important;
+  position: relative !important;
+  font-family: var(--font-family) !important;
+  font-size: var(--font-size) !important;
+  color: var(--text-color) !important;
+}
+.onboard-step:hover {
+  background: #f3f3f3 !important;
 }
 
 .checklist-title {
-  max-width: 500px;
-  margin: auto;
-  position: relative;
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  color: var(--text-color);
+  max-width: 500px !important;
+  margin: auto !important;
+  position: relative !important;
+  font-family: var(--font-family) !important;
+  font-size: var(--font-size) !important;
+  color: var(--text-color) !important;
+  white-space: nowrap !important;
+}
+.checklist-title svg {
+  display: inline-block !important;
+  vertical-align: middle !important;
+  flex-shrink: 0 !important;
 }
 /* Close button */
 .checklist-close {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  background: transparent;
-  border: none;
-  font-size: 28px;
-  cursor: pointer;
-  color: var(--text-color);
+  position: absolute !important;
+  top: 8px !important;
+  right: 12px !important;
+  z-index: 10001 !important;
+  pointer-events: auto !important;
+  background: transparent !important;
+  border: none !important;
+  font-size: 28px !important;
+  color: var(--text-color) !important;
 }
 
 /* Header */
 .checklist-header {
-  background: var(--header-bg);
-  padding: 16px;
-  border-radius: 8px 8px 0 0;
+  background: var(--header-bg) !important;
+  padding: 16px !important;
+  border-radius: 8px 8px 0 0 !important;
+  white-space: nowrap !important;
 }
 
 .checklist-subtitle {
-  margin-top: 8px;
-  color: var(--subtitle-color);
+  margin-top: 8px !important;
+  color: var(--subtitle-color) !important;
 }
 
 /* Progress */
 .checklist-progress {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
 }
 
 .progress-fraction {
-  font-size: 13px;
+  font-size: 13px !important;
 }
 
 /* Body */
 .checklist-body {
-height:380px;
-width:400px;
-  padding: 16px;
-  background: var(--lower-bg);
-  max-height: 420px;
-  overflow: auto;
-  border-radius: 0 0 8px 8px;
+  height: auto !important;
+  width: 400px !important;
+  padding: 0 !important;
+  background: var(--lower-bg) !important;
+  max-height: 420px !important;
+  overflow: auto !important;
+  border-radius: 0 0 8px 8px !important;
 }
 
 /* Steps */
 .onboard-step {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 6px;
-  background: var(--step-bg);
-  margin-bottom: 2px;
+  position: relative !important;
+  display: flex !important;
+  align-items: flex-start !important;
+  cursor: pointer !important;
+  padding: 5px !important;
+  border-radius: 6px !important;
+  background: var(--step-bg) !important;
+  margin-bottom: 2px !important;
+  width: 100% !important;
+  margin: 0 !important;         /* remove outer gaps */
+  border-radius: 0 !important;  /* optional: full flat row look */
+  padding: 12px 16px !important;
 }
 
 .start-select {
-  position: absolute;
-  top: 0;
-  left: -18px;
-  width: 10px;
-  height: 120%;
-  background: rgba(247,143,7,0.9);
-  border-radius: 4px 0 0 4px;
-  display: none;
+  position: absolute !important;
+  top: 0 !important;
+  left: -18px !important;
+  width: 10px !important;
+  height: 120% !important;
+  background: rgba(247,143,7,0.9) !important;
+  border-radius: 4px 0 0 4px !important;
+  display: none !important;
 }
 
 .onboard-circle {
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  min-height: 16px;
-  border-radius: 50%;
-  border: 2px solid var(--checkbox-color, #f78f07);
-  background: transparent;
-  margin-right: 10px;
-  box-sizing: border-box;
-  display: block;
+  width: 16px !important;
+  height: 16px !important;
+  min-width: 16px !important;
+  min-height: 16px !important;
+  border-radius: 50% !important;
+  border: 2px solid var(--checkbox-color, #f78f07) !important;
+  background: transparent !important;
+  margin-right: 10px !important;
+  align-self: center !important;
+  box-sizing: border-box !important;
+  display: block !important;
 }
 
 .onboard-title {
-  color: var(--heading-color);
+  color: var(--heading-color) !important;
 }
 
 .onboard-desc {
-  color: var(--body-color);
+  color: var(--body-color) !important;
 }
 
 .onboard-divider {
-  border: none;
-  border-top: 1px solid #9d9d9d;
+  border: none !important;
+  border-top: 1px solid #9d9d9d !important;
 }
 
 .rivia-launcher {
-  position: fixed;
-  display: block;
-  z-index: 9999;
-  cursor: pointer;
-  border: none;
-  box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2);
-  background: var(--launcher-bg);
-  color: var(--launcher-text);
-  font-weight: bold;
-  border-radius: 20px;
+  position: fixed !important;
+  z-index: 9999 !important;
+  cursor: pointer !important;
+  border: none !important;
+  box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2) !important;
+  background: var(--launcher-bg) !important;
+  color: var(--launcher-text) !important;
+  font-weight: bold !important;
+  border-radius: 20px !important;
 }
 
 .rivia-launcher .launcher-root {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+  display: flex !important;
+  align-items: center !important;
+  width: 100% !important;
+  height: 100% !important;
 }
 
 .rivia-launcher .launcher-left {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 .rivia-launcher .launcher-title {
-transform: translateY(-20%);
-  position: relative;
-  margin: 0;
-  line-height: 1;
-  text-align: center;
-  padding-left: 28px;
+  transform: translateY(-20%) !important;
+  position: relative !important;
+  margin: 0 !important;
+  line-height: 1 !important;
+  text-align: center !important;
+  padding-left: 28px !important;
 }
 
 .rivia-launcher .launcher-icon {
-  position: absolute;
-  left: 10px;
-  
+  position: absolute !important;
+  left: 10px !important;
 }
 
-.rivia-launcher .launcher-text { font-size:var(--font-size);
-  display: block;
-  width: 100%;
-  padding-left: 5%;
-  text-align: center;
-  pointer-events: none;
+.rivia-launcher .launcher-text {
+  font-size: var(--font-size) !important;
+  display: block !important;
+  width: 100% !important;
+  padding-left: 5% !important;
+  text-align: center !important;
+  pointer-events: none !important;
 }
 
 .rivia-launcher .launcher-progress-wrap {
-  margin-top: 4px;
-  padding-left: 32px;
+  margin-top: 4px !important;
+  padding-left: 32px !important;
 }
 
 /* Text adjustment when progress bar is hidden */
 .rivia-launcher.no-progress .launcher-text {
-  transform: translateY(50%);
+  transform: translateY(50%) !important;
 }
 
 .rivia-launcher .launcher-progress {
-  display: flex;
-  gap: 4px;
-  width: 100%;
-  padding: 5px;
-  height: 6px;
-  box-sizing: border-box;
+  display: flex !important;
+  gap: 4px !important;
+  width: 100% !important;
+  padding: 5px !important;
+  height: 6px !important;
+  box-sizing: border-box !important;
 }
 
 .rivia-launcher .launcher-right {
-  flex-shrink: 0;
-  padding-right: 8px;
+  flex-shrink: 0 !important;
+  padding-right: 8px !important;
 }
 
 .rivia-launcher .launcher-fraction {
-  font-size: 13px;
-  white-space: nowrap;
+  font-size: 13px !important;
+  white-space: nowrap !important;
 }`;
     document.head.appendChild(style2);
     console.log("inside injectChecklistBaseCSS");
@@ -520,37 +567,40 @@ transform: translateY(-20%);
     label.id = "route-label";
     label.innerHTML = labelHTML;
   }
-  const closeElement = label.querySelector(`#checklistCloseBtn`);
-  closeElement.addEventListener("click", (e) => {
-    e.stopPropagation();
-    label.style.opacity = "0";
-    label.style.pointerEvents = "none";
-    sessionStorage.setItem("onboardingVisible", "false");
-    closeBtn.style.display = "none";
-    showBtn.style.display = "block";
-  });
   const dismissElement = label.querySelector(`#dismissChecklist`);
   dismissElement.addEventListener("click", (e) => {
     label.style.display = "none";
     e.stopPropagation();
     const confirmDiv = document.createElement("div");
     confirmDiv.innerHTML = `
-<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: flex-end; justify-content: flex-start;">
-  <div style="background: white;width: 250px;  border-radius: 10px; text-align: center; margin: 20px;">
-    <p style="padding: 15px;">Are you sure you want to dismiss this checklist?</p>
-    <hr class="confirmHR1293" id="confirmHR947" style="
-    all: unset !important;
-  display: block !important;
-  box-sizing: border-box !important;
-  border-top: 2px solid #f33f27 !important;
-  margin: 0 10px !important;
-  height: 0 !important;">
-    <button id="confirmYes" style="margin: 10px; padding: 4px 8px;color: #f33f27ff; border: none;  cursor: pointer;">Yes</button>
-    <span style="border-left: 2px solid #f33f27ff;color:#eda600ff; height: 52px; margin: 0 10px; display: inline-block; vertical-align: top;"></span>
-    <button id="confirmNo" style="margin: 10px; padding: 4px 8px;  color: #f33f27ff; border: none; cursor: pointer;">No</button>
-  </div>
+    <div style="position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0,0,0,0.5) !important; z-index: 10000 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-start !important;">
+  
+  <div style="background: white !important; width: 250px !important; border-radius: 10px !important; text-align: center !important; margin: 20px !important;">
+    
+    <p style="padding: 15px !important;">Are you sure you want to dismiss this checklist?</p>
+        <hr class="confirmHR1293" id="confirmHR947" style="
+        all: unset !important;
+      display: block !important;
+      box-sizing: border-box !important;
+      border-top: 2px solid #f33f27 !important;
+      margin: 0 10px !important;
+      height: 0 !important;">
+        <button id="confirmYes"
+  style="margin: 10px !important; padding: 4px 8px !important; color: #f33f27ff !important; border: none !important; cursor: pointer !important;">
+  Yes
+</button>
+
+<span 
+  style="border-left: 2px solid #f33f27ff !important; color: #eda600ff !important; height: 52px !important; margin: 0 10px !important; display: inline-block !important; vertical-align: top !important;">
+</span>
+
+<button id="confirmNo" 
+  style="margin: 10px !important; padding: 4px 8px !important; color: #f33f27ff !important; border: none !important; cursor: pointer !important;">
+  No
+</button>
 </div>
-`;
+    </div>
+    `;
     document.body.appendChild(confirmDiv);
     const yesBtn = confirmDiv.querySelector("#confirmYes");
     const noBtn = confirmDiv.querySelector("#confirmNo");
@@ -561,9 +611,13 @@ transform: translateY(-20%);
       showBtn.style.display = "none";
       sessionStorage.setItem(`dismissedChecklist${checklist_id}`, "true");
       document.body.removeChild(confirmDiv);
+      if (document.body.contains(confirmDiv))
+        document.body.removeChild(confirmDiv);
     });
     noBtn.addEventListener("click", () => {
       document.body.removeChild(confirmDiv);
+      if (document.body.contains(confirmDiv))
+        document.body.removeChild(confirmDiv);
       showBtn.style.display = "block";
     });
   });
@@ -657,15 +711,7 @@ transform: translateY(-20%);
   }
   showBtn.id = "show-tooltip-btn";
   showBtn.className = "rivia-launcher";
-  const translateStyle = cssConfig.launcherProgressBar ? 'style="transform: translateY(10px);"' : "";
   const isRight = cssConfig.launcherPosition === "right";
-  const iconHTML = cssConfig.launcherShowIcon ? `<svg class="launcher-icon" width="24" height="24"   ${translateStyle} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 10.167L12.123 6.043C13.248 4.919 13.811 4.356 14.431 3.903C15.7049 2.97403 17.1822 2.36274 18.74 2.12C19.499 2 20.293 2 21.885 2C21.968 2 22 2.038 22 2.115C22 3.705 22 4.501 21.881 5.26C21.638 6.81791 21.0263 8.29523 20.097 9.569C19.644 10.189 19.081 10.752 17.957 11.877L13.833 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.341 8.098C8.638 8.098 6.498 7.738 4.904 8.398C3.737 8.88 2.878 10 2 10.878L5.306 12.296C6.182 12.671 5.646 13.776 5.501 14.502C5.34 15.31 5.349 15.34 5.931 15.922L8.078 18.068C8.66 18.651 8.69 18.66 9.498 18.498C10.223 18.353 11.329 17.818 11.704 18.694L13.121 22C13.999 21.122 15.119 20.263 15.602 19.096C16.262 17.502 15.902 15.362 15.902 13.659" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M12 20L11 21M4 12L3 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15 4.08008C16.2 4.26008 17.46 4.74008 18.161 5.46008C19.058 6.25208 19.68 7.32008 19.92 9.00008" stroke="white" stroke-width="1.5" stroke-linecap="square"/>
-<path d="M17.94 6.05957L16.5 7.49957" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-</svg>` : "";
   const textTranslateStyle = !cssConfig.launcherProgressBar ? " translateY(50%);" : "";
   if (!cssConfig.launcherProgressBar) {
     showBtn.classList.add("no-progress");
@@ -690,17 +736,6 @@ transform: translateY(-20%);
     </div>
   </div>
 `;
-  function injectLauncherCSS() {
-    if (document.getElementById("rivia-launcher-css")) return;
-    const style2 = document.createElement("style");
-    style2.id = "rivia-launcher-css";
-    style2.textContent = `
-    /* Root */ .checklist-root { max-width: 500px; margin: auto; position: relative; font-family: var(--font-family); font-size: var(--font-size); color: var(--text-color); } /* Close button */ .checklist-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 28px; cursor: pointer; color: var(--text-color); } /* Header */ .checklist-header { background: var(--header-bg); padding: 16px; border-radius: 8px 8px 0 0; } .checklist-subtitle { margin-top: 8px; color: var(--subtitle-color); } /* Progress */ .checklist-progress { display: flex; align-items: center; justify-content: space-between; } .progress-fraction { font-size: 13px; } /* Body */ .checklist-body { padding: 16px; background: var(--lower-bg); max-height: 340px; overflow: auto; border-radius: 0 0 8px 8px; } /* Steps */ .onboard-step { position: relative; display: flex; align-items: flex-start; cursor: pointer; padding: 8px; border-radius: 6px; background: var(--step-bg); margin-bottom: 16px; } .start-select { position: absolute; top: 0; left: -18px; width: 10px; height: 120%; background: rgba(247,143,7,0.9); border-radius: 4px 0 0 4px; display: none; } .onboard-circle { width: 16px; height: 16px; min-width: 16px; min-height: 16px; border-radius: 50%; border: 2px solid var(--checkbox-color, #f78f07); /* hardcoded for test */ background: transparent; margin-right: 10px; box-sizing: border-box; display: block; } .onboard-title { color: var(--heading-color); } .onboard-desc { color: var(--body-color); } .onboard-divider { border: none; border-top: 1px solid #9d9d9d; } .rivia-launcher { position: fixed; display: block; z-index: 9999; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2); background: var(--launcher-bg); color: var(--launcher-text); font-weight: bold; } .rivia-launcher .launcher-root { display: flex; align-items: center; width: 100%; height: 100%; } .rivia-launcher .launcher-left { flex: 1; display: flex; flex-direction: column; } .rivia-launcher .launcher-title { position: relative; margin: 0; line-height: 1; text-align: center; padding-left: 28px; } .rivia-launcher .launcher-icon { position: absolute; left: 10px; transform: translateY(50%); }
-     .rivia-launcher .launcher-text {font-size:var(--font-size); display: block; width: 100%; padding-left: 5%; text-align: center; pointer-events: none; } 
-     .rivia-launcher .launcher-progress-wrap { margin-top: 4px; padding-left: 32px; } /* Text adjustment when progress bar is hidden */ .rivia-launcher.no-progress .launcher-text { transform: translateY(50%);font-size:var(--font-size); } .rivia-launcher .launcher-progress { display:flex; gap:4px; width:100%; padding:5px; height:3px; box-sizing:border-box; } .rivia-launcher .launcher-right { flex-shrink: 0; padding-right: 8px; } .rivia-launcher .launcher-fraction { font-size: 13px; white-space: nowrap; } /* Customer CSS */ .rivia-launcher { border-radius: 20px; } .rivia-launcher .launcher-progress { height: 6px; }
-    `;
-    document.head.appendChild(style2);
-  }
   function applyChecklistTheme(root, cssConfig2) {
     root.style.setProperty("--font-family", cssConfig2.fontFamily);
     root.style.setProperty("--font-size", cssConfig2.fontSize);
@@ -776,6 +811,17 @@ transform: translateY(-20%);
     closeBtn.style.left = `${Math.max(8, rect.left + rect.width / 2 - 170)}px`;
     closeBtn.style.top = `${rect.bottom + 10}px`;
   }
+  const closeElement = label.querySelector(`#checklistCloseBtn`);
+  console.log("closeElement", closeElement);
+  closeElement.addEventListener("click", (e) => {
+    console.log("close button clicked");
+    e.stopPropagation();
+    label.style.opacity = "0";
+    label.style.pointerEvents = "none";
+    sessionStorage.setItem("onboardingVisible", "false");
+    showBtn.style.display = "block";
+  });
+  closeBtn.onclick = () => console.log("CLICKED");
   let check = 0;
   console.log("before");
   const STORAGE_KEY = "onboardingVisited";
@@ -984,7 +1030,7 @@ transform: translateY(-20%);
           const circle = stepElement.querySelector(".onboard-circle");
           if (circle) {
             circle.innerHTML = `
-          <div style="background-color: green; border-radius: 50%; width: 30px; height: 18px; display: flex; align-items: center; justify-content: center;">
+          <div style="background-color: green; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;">
             <svg width="16" height="16" viewBox="0 0 512 512" fill="white" xmlns="http://www.w3.org/2000/svg">
             <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 
               0-36.204l36.203-36.204c9.997-9.998 26.207-9.998
@@ -1053,7 +1099,7 @@ transform: translateY(-20%);
         const circle = stepElement.querySelector(".onboard-circle");
         if (circle) {
           circle.innerHTML = `
-          <div style="background-color: green; border-radius: 50%; width: 30px; height: 18px; display: flex; align-items: center; justify-content: center;">
+          <div style="background-color: green; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;position:relative;top: -3px;left: -4px;">
           <svg width="16" height="16" viewBox="0 0 512 512" fill="white" xmlns="http://www.w3.org/2000/svg">
           <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 
           0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 
@@ -1213,19 +1259,12 @@ transform: translateY(-20%);
     label.style.pointerEvents = "auto";
     closeBtn.style.display = "flex";
     showBtn.style.display = "none";
+    console.log("after click:", showBtn.style.display);
     sessionStorage.setItem("onboardingVisible", "true");
-    positionCloseBtn();
     requestAnimationFrame(() => {
       label.style.opacity = "1";
     });
   });
-  closeBtn.addEventListener("click", (ev) => {
-    ev.stopPropagation();
-    label.style.opacity = "0";
-    label.style.pointerEvents = "none";
-    closeBtn.style.display = "none";
-    showBtn.style.display = "block";
-  });
   label.addEventListener(
     "mouseenter",
     () => label.style.transform = "scale(1.02)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rivia",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",