lido-player 0.0.2-alpha-74 → 0.0.2-alpha-76

package/dist/cjs/{index-BcKX8GV7.js → index-BeLWDohk.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-BNAtcxNG.js');
+var index$1 = require('./index-BrME-8br.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -73202,14 +73202,14 @@ const animateBoxCells = async (element, value) => {
         await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
         cell.classList.remove('lido-box-highlight');
     }
-    // checkout parent cell first then pick the first text child inside cell
+    // checkout parent cell first then pick the second text child inside cell
     const parentCell = document.getElementById(LidoContainer);
     if (!parentCell)
         return;
-    const firstTextChild = parentCell.querySelector('lido-text');
-    if (firstTextChild) {
+    const instructionText = parentCell.children[2];
+    if (instructionText) {
         // play the text child inside parent cell
-        await AudioPlayer.getI().play(firstTextChild);
+        await AudioPlayer.getI().play(instructionText);
     }
     // Now select each box cell's text child and play them one by one
     for (const box of boxCells) {
@@ -73250,9 +73250,9 @@ const SumTogetherAnimation = async (element, value) => {
     if (!value)
         return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
-    const TopRow = Array.from(element.children)[2];
-    const questionRow = Array.from(element.children)[3];
-    const optionRow = Array.from(element.children)[4];
+    const TopRow = Array.from(element.children)[3];
+    const questionRow = Array.from(element.children)[4];
+    const optionRow = Array.from(element.children)[5];
     if (!TopRow || !questionRow || !optionRow)
         return;
     const topRowChildren = Array.from(TopRow.children);

package/dist/cjs/{index-BNAtcxNG.js → index-BrME-8br.js}

@@ -25,7 +25,7 @@ const globalScripts = () => {};
 const globalStyles = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:left 55ms linear,\r\n    top 55ms linear,\r\n    width 55ms ease-out,\r\n    height 55ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height}";
 
 /*
- Stencil Client Platform v4.42.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.0 | MIT Licensed | https://stenciljs.com
  */
 
 var reWireGetterSetter = (instance, hostRef) => {

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BcKX8GV7.js');
-require('./index-BNAtcxNG.js');
+var index = require('./index-BeLWDohk.js');
+require('./index-BrME-8br.js');
 
 
 

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BNAtcxNG.js');
-var index$1 = require('./index-BcKX8GV7.js');
+var index = require('./index-BrME-8br.js');
+var index$1 = require('./index-BeLWDohk.js');
 
 var rive$1 = {exports: {}};
 
@@ -747,7 +747,7 @@ function requireRive () {
 		    return Wa(c, a, b);
 		  }));
 		}
-		var Za, $a, db = {490930:(a, b, c, d, e) => {
+		var Za, $a, db = {491138:(a, b, c, d, e) => {
 		  if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
 		    return 0;
 		  }
@@ -810,11 +810,11 @@ function requireRive () {
 		  }
 		  window.h.za += 1;
 		  return 1;
-		}, 493108:() => {
+		}, 493316:() => {
 		  "undefined" !== typeof window.h && (window.h.Sa.map(function(a) {
 		    document.removeEventListener(a, window.h.unlock, true);
 		  }), --window.h.za, 0 === window.h.za && delete window.h);
-		}, 493412:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 493516:() => {
+		}, 493620:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 493724:() => {
 		  try {
 		    var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
 		    a.close();
@@ -822,7 +822,7 @@ function requireRive () {
 		  } catch (c) {
 		    return 0;
 		  }
-		}, 493687:(a, b, c, d, e, f) => {
+		}, 493895:(a, b, c, d, e, f) => {
 		  if ("undefined" === typeof window.h) {
 		    return -1;
 		  }
@@ -868,7 +868,7 @@ function requireRive () {
 		  a == window.h.J.xa && g.Z.connect(g.L.destination);
 		  g.pb = f;
 		  return window.h.sc(g);
-		}, 496564:a => window.h.qa(a).L.sampleRate, 496637:a => {
+		}, 496772:a => window.h.qa(a).L.sampleRate, 496845:a => {
 		  a = window.h.qa(a);
 		  void 0 !== a.Z && (a.Z.onaudioprocess = function() {
 		  }, a.Z.disconnect(), a.Z = void 0);
@@ -876,13 +876,13 @@ function requireRive () {
 		  a.L.close();
 		  a.L = void 0;
 		  a.pb = void 0;
-		}, 497037:a => {
+		}, 497245:a => {
 		  window.h.Ab(a);
-		}, 497087:a => {
+		}, 497295:a => {
 		  a = window.h.qa(a);
 		  a.L.resume();
 		  a.state = window.h.ga.wb;
-		}, 497226:a => {
+		}, 497434:a => {
 		  a = window.h.qa(a);
 		  a.L.suspend();
 		  a.state = window.h.ga.stopped;
@@ -3390,7 +3390,7 @@ function requireRive () {
 		/* 2 */
 		/***/ ((module) => {
 
-		module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.34.3","description":"Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+		module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.35.0","description":"Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 		/***/ }),
 		/* 3 */
@@ -5967,7 +5967,8 @@ function requireRive () {
 		        var _a;
 		        // Initialize audio if needed
 		        if (audioManager.status == SystemAudioStatus.UNAVAILABLE) {
-		            if (((_a = this.artboard) === null || _a === void 0 ? void 0 : _a.hasAudio) && this._audioEventListener === null) {
+		            if (this.file.hasAudio ||
+		                (((_a = this.artboard) === null || _a === void 0 ? void 0 : _a.hasAudio) && this._audioEventListener === null)) {
 		                this._audioEventListener = {
 		                    type: EventType.AudioStatusChange,
 		                    callback: function () { return _this.onSystemAudioChanged(); },
@@ -8579,7 +8580,7 @@ const LidoCalculator = class {
             return;
         if (this.objective && this.objective != '' && !this.objective.includes(',')) {
             console.log("hi iscorrect verified");
-            isCorrect = userInput === this.objective;
+            isCorrect = Number(userInput) === Number(this.objective);
         }
         // --- Multiple Objectives ---
         else if (this.objective && this.objective.includes(',')) {
@@ -8652,7 +8653,7 @@ const LidoCalculator = class {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (index.h(index.Host, { key: '595c92e80baed8e1709c51302aa427d672b3a9e0', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '4a2966a46fd008d66fedeb5f44e0ee2c5e8c083a', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: '35e38f7412be8489b668ba0aab927b7ba3d98f29', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '926def912022a30a27f5419d98348beb84fc1a42', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '41a69c7aa7d1dfbeea19b1a1ef095b97d2c953ba', class: "lido-calculator-displayParent" }, index.h("div", { key: '047dfc84e8b02739a982287f82b1df2b7f552dcd', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: '41cd91f2c9aa40f6adcf6b0318e07e394bc3b38e', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (index.h(index.Host, { key: '29f91af1bedaa8be605cdf82fddf74b5622eff6e', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '1ac0f61986e688603db21b2eb1bb52bbcabca1ca', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: '3bdacbcb2ea2f371b11a2ed05eb271e0a75c5e09', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '5f7bb3c09bccdb21c2bda00ae99234409bad7eda', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '0891cd4b5929861d264c29684ef260f61e65004b', class: "lido-calculator-displayParent" }, index.h("div", { key: 'ac5861ca1a9ebaee9eb7d729f8d2b88933b733d5', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: 'f80c85a89462fd96630a4bf8a304284e4546fe72', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -10123,7 +10124,7 @@ class PluralResolver {
         type
       });
     } catch (err) {
-      if (!Intl) {
+      if (typeof Intl === 'undefined') {
         this.logger.error('No Intl support, please use an Intl polyfill!');
         return dummyRule;
       }
@@ -10304,13 +10305,13 @@ class Interpolator {
     const handleHasOptions = (key, inheritedOptions) => {
       const sep = this.nestingOptionsSeparator;
       if (key.indexOf(sep) < 0) return key;
-      const c = key.split(new RegExp(`${sep}[ ]*{`));
+      const c = key.split(new RegExp(`${regexEscape(sep)}[ ]*{`));
       let optionsString = `{${c[1]}`;
       key = c[0];
       optionsString = this.interpolate(optionsString, clonedOptions);
       const matchedSingleQuotes = optionsString.match(/'/g);
       const matchedDoubleQuotes = optionsString.match(/"/g);
-      if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || matchedDoubleQuotes.length % 2 !== 0) {
+      if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || (matchedDoubleQuotes?.length ?? 0) % 2 !== 0) {
         optionsString = optionsString.replace(/'/g, '"');
       }
       try {
@@ -10792,6 +10793,7 @@ const bindMemberFunctions = inst => {
     }
   });
 };
+let supportNoticeShown = false;
 const usesLocize = inst => {
   if (inst?.modules?.backend?.name?.indexOf('Locize') > 0) return true;
   if (inst?.modules?.backend?.constructor?.name?.indexOf('Locize') > 0) return true;
@@ -10852,8 +10854,9 @@ class I18n extends EventEmitter {
     if (typeof this.options.overloadTranslationOptionHandler !== 'function') {
       this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
     }
-    if (this.options.showSupportNotice !== false && !usesLocize(this)) {
-      if (typeof console !== 'undefined' && typeof console.info !== 'undefined') console.info('🌐 i18next is maintained with support from locize.com — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com 💙');
+    if (this.options.showSupportNotice !== false && !usesLocize(this) && !supportNoticeShown) {
+      if (typeof console !== 'undefined' && typeof console.info !== 'undefined') console.info('🌐 i18next is maintained with support from Locize — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com 💙');
+      supportNoticeShown = true;
     }
     const createClassOnDemand = ClassOrObject => {
       if (!ClassOrObject) return null;

package/dist/cjs/lido-player.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BNAtcxNG.js');
+var index = require('./index-BrME-8br.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.42.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNAtcxNG.js');
+var index = require('./index-BrME-8br.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/collection/collection-manifest.json

@@ -25,7 +25,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.42.1",
+    "version": "4.43.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/calculator/lido-calculator.js

@@ -67,7 +67,7 @@ export class LidoCalculator {
             return;
         if (this.objective && this.objective != '' && !this.objective.includes(',')) {
             console.log("hi iscorrect verified");
-            isCorrect = userInput === this.objective;
+            isCorrect = Number(userInput) === Number(this.objective);
         }
         // --- Multiple Objectives ---
         else if (this.objective && this.objective.includes(',')) {
@@ -143,7 +143,7 @@ export class LidoCalculator {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: '595c92e80baed8e1709c51302aa427d672b3a9e0', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '4a2966a46fd008d66fedeb5f44e0ee2c5e8c083a', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: '35e38f7412be8489b668ba0aab927b7ba3d98f29', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '926def912022a30a27f5419d98348beb84fc1a42', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '41a69c7aa7d1dfbeea19b1a1ef095b97d2c953ba', class: "lido-calculator-displayParent" }, h("div", { key: '047dfc84e8b02739a982287f82b1df2b7f552dcd', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '41cd91f2c9aa40f6adcf6b0318e07e394bc3b38e', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: '29f91af1bedaa8be605cdf82fddf74b5622eff6e', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '1ac0f61986e688603db21b2eb1bb52bbcabca1ca', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: '3bdacbcb2ea2f371b11a2ed05eb271e0a75c5e09', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '5f7bb3c09bccdb21c2bda00ae99234409bad7eda', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '0891cd4b5929861d264c29684ef260f61e65004b', class: "lido-calculator-displayParent" }, h("div", { key: 'ac5861ca1a9ebaee9eb7d729f8d2b88933b733d5', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'f80c85a89462fd96630a4bf8a304284e4546fe72', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));

package/dist/collection/utils/utils.js

@@ -1226,14 +1226,14 @@ export const animateBoxCells = async (element, value) => {
         await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
         cell.classList.remove('lido-box-highlight');
     }
-    // checkout parent cell first then pick the first text child inside cell
+    // checkout parent cell first then pick the second text child inside cell
     const parentCell = document.getElementById(LidoContainer);
     if (!parentCell)
         return;
-    const firstTextChild = parentCell.querySelector('lido-text');
-    if (firstTextChild) {
+    const instructionText = parentCell.children[2];
+    if (instructionText) {
         // play the text child inside parent cell
-        await AudioPlayer.getI().play(firstTextChild);
+        await AudioPlayer.getI().play(instructionText);
     }
     // Now select each box cell's text child and play them one by one
     for (const box of boxCells) {
@@ -1274,9 +1274,9 @@ export const SumTogetherAnimation = async (element, value) => {
     if (!value)
         return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
-    const TopRow = Array.from(element.children)[2];
-    const questionRow = Array.from(element.children)[3];
-    const optionRow = Array.from(element.children)[4];
+    const TopRow = Array.from(element.children)[3];
+    const questionRow = Array.from(element.children)[4];
+    const optionRow = Array.from(element.children)[5];
     if (!TopRow || !questionRow || !optionRow)
         return;
     const topRowChildren = Array.from(TopRow.children);