lido-player 0.0.2-alpha-25 → 0.0.2-alpha-27

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-98308657.js');
+const utils = require('./utils-0c09d26d.js');
 require('./index-fe562525.js');
 
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-98308657.js');
+const utils = require('./utils-0c09d26d.js');
 
 var rive = {exports: {}};
 
@@ -7086,7 +7086,7 @@ const LidoFloat = class {
 };
 LidoFloat.style = LidoFloatStyle0;
 
-const indexCss = "@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}.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:0 2px 4px rgba(151, 150, 150, 0.1) !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;gap:145px}.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}";
+const indexCss = "@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}.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:0 2px 4px rgba(151, 150, 150, 0.1) !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:145px}.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}";
 const LidoHomeStyle0 = indexCss;
 
 const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}";
@@ -7124,7 +7124,7 @@ const LidoHome = class {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
                 utils.dispatchGameCompletedEvent();
-                this.currentContainerIndex = 0;
+                // this.currentContainerIndex = 0;
             }
             // Reset the containers array to trigger a re-render
             this.containers = [...this.containers];
@@ -7396,14 +7396,14 @@ const LidoHome = class {
         return (index.h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, index.h("div", { class: "lido-exit-button popup\n        -button", onClick: () => {
                 this.exitFlag = true;
                 utils.AudioPlayer.getI().stop();
-            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg" })), index.h("div", { class: "lido-btn-dot-container" }, index.h("div", { id: "lido-arrow-left", onClick: () => {
+            } }, index.h("lido-image", { src: "./Close.svg" })), index.h("div", { class: "lido-btn-dot-container" }, index.h("div", { id: "lido-arrow-left", onClick: () => {
                 utils.triggerPrevcontainer();
-            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg" })), this.containers.map((_, index$1) => (index.h("div", { class: "parent_dots" }, index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1), style: style })))), index.h("div", { id: "lido-arrow-right", onClick: event => {
+            } }, index.h("lido-image", { src: "./Previous.svg" })), this.containers.map((_, index$1) => (index.h("div", { class: "parent_dots" }, index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1), style: style })))), index.h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 utils.executeActions("this.nextBtn='true'", event.currentTarget);
-            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg" }))), index.h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, index.h("lido-image", { visible: "true", src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" }))));
+            } }, index.h("lido-image", { src: "./Previous.svg" }))), index.h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, index.h("lido-image", { visible: "true", src: "./AudioIcon.svg" }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.

package/dist/cjs/{utils-98308657.js → utils-0c09d26d.js}

@@ -1029,12 +1029,13 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     dragElement.classList.remove('dropped');
     const container = document.getElementById(LidoContainer);
     const cloneArray = container.querySelectorAll(`#${dragElement.id}`);
-    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item);
+    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped'));
     dragElement.style.transition = 'transform 0.5s ease';
     if (cloneDragElement) {
         animateDragToTarget(dragElement, cloneDragElement, container);
         setTimeout(() => {
             if (container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop) {
+                dragElement.removeAttribute('hasDummy');
                 dragElement.style.width = cloneDragElement.style.width;
                 dragElement.style.height = cloneDragElement.style.height;
             }
@@ -1052,7 +1053,6 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     }
     let currentDrop = dragToDropMap.get(dragElement);
     if (currentDrop) {
-        dragElement.removeAttribute(DropToAttr);
         dragToDropMap.delete(dragElement);
         updateDropBorder(currentDrop);
         if (((_a = currentDrop === null || currentDrop === void 0 ? void 0 : currentDrop.getAttribute('drop-attr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Stretch) {
@@ -1080,19 +1080,13 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     }
     if (dragSelectedData) {
         let dragSelected = JSON.parse(dragSelectedData);
-        let dropSelected = JSON.parse(dropSelectedData);
-        for (const key in dragSelected) {
-            if (dragSelected[key].includes(dragElement['value'])) {
-                for (const key in dropSelected) {
-                    if (dropSelected[key].includes(dragElement.id)) {
-                        delete dropSelected[key];
-                    }
-                }
-                delete dragSelected[key];
-            }
+        const dragPreDropElement = container.querySelector(`#${dragElement.getAttribute(DropToAttr)}`);
+        if (dragPreDropElement) {
+            delete dragSelected[dragPreDropElement.getAttribute('tab-index')];
         }
         localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
-        // localStorage.setItem(DragMapKey, JSON.stringify(dropSelected));
+        dragElement.removeAttribute(DropToAttr);
+        updateDropBorder(currentDrop);
     }
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
@@ -1126,16 +1120,16 @@ async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c;
     const selectedValueData = localStorage.getItem(SelectedValuesKey) || '';
     const dragSelectedData = localStorage.getItem(DragSelectedMapKey);
-    const dropSelectedData = localStorage.getItem(DragMapKey);
+    localStorage.getItem(DragMapKey);
     let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
     const container = document.getElementById(LidoContainer);
     if (!dropElement) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     const dropTabIndex = dropElement.getAttribute('tab-index');
     if ((_a = dropHasDrag[dropTabIndex]) === null || _a === void 0 ? void 0 : _a.isFull) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
@@ -1143,10 +1137,10 @@ async function onElementDropComplete(dragElement, dropElement) {
         if (!dropElement) {
             dragElement.style.transition = 'transform 0.5s ease';
             dragElement.style.transform = 'translate(0, 0)';
-            handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+            handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             return;
         }
-        const isCorrect = dropElement['value'].includes(dragElement['value']);
+        const isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         if (!isCorrect) {
             const localStorageKey = `${LidoContainer}_dropData`;
             dragElement.style.transition = 'transform 0.5s ease';
@@ -1161,7 +1155,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                     delete stored[oldDropIndex];
                     localStorage.setItem(localStorageKey, JSON.stringify(stored));
                 }
-                handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+                handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             }, 100);
             if (dragElement['type'] === 'option') {
                 const childs = Array.from(container.querySelectorAll(`[value="${dragElement['value']}"]`));
@@ -1182,9 +1176,16 @@ async function onElementDropComplete(dragElement, dropElement) {
                     const div = document.createElement('div');
                     container.append(div);
                     div.classList.add('after-drop-popup-container');
+                    const hasType = dragElement.nextElementSibling;
                     // Remove from old parents
-                    dragElement.parentElement.parentElement.remove();
-                    dropElement.parentElement.parentElement.remove();
+                    if (hasType && hasType.getAttribute('type') === 'drag') {
+                        dragElement.remove();
+                        dropElement.remove();
+                    }
+                    else {
+                        dragElement.parentElement.parentElement.remove();
+                        dropElement.parentElement.parentElement.remove();
+                    }
                     // Add animation and popup classes
                     dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
                     dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
@@ -1222,7 +1223,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             const dragWidth = dragElement.offsetWidth;
             dropElement.style.width = `${dragWidth}px`;
         }
-        dragElement.classList.add('dropped');
         if (!(((_b = dropElement.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
             if (isisFull) {
@@ -1235,12 +1235,13 @@ async function onElementDropComplete(dragElement, dropElement) {
             if (dragSelectedData) {
                 let dragSelected = JSON.parse(dragSelectedData);
                 for (const key in dragSelected) {
-                    if (dragSelected[key].includes(dragElement['value'])) {
+                    if (dragSelected[key].includes(dragElement['value']) && dragElement.classList.contains('dropped')) {
                         delete dragSelected[key];
                     }
                 }
                 localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
             }
+            dragElement.classList.add('dropped');
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_c = dropHasDrag[dropTabIndex]) === null || _c === void 0 ? void 0 : _c.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement(dragElement, 'drag');
@@ -1280,7 +1281,7 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
     }
     if (!dropElement) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     if (dragSelectedData) {
@@ -1319,7 +1320,7 @@ async function onElementDropComplete(dragElement, dropElement) {
     }
     dragToDropMap.set(dragElement, dropElement);
     // Add pulse and highlight effect for a successful match
-    const isCorrect = (dropElement['value'].toLowerCase()).includes((dragElement['value']).toLowerCase());
+    const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
     if (isCorrect) {
         // Perform actions if onMatch is defined
@@ -1340,7 +1341,7 @@ async function onElementDropComplete(dragElement, dropElement) {
     allDropElements.forEach(el => updateDropBorder(el));
 }
 function updateDropBorder(element) {
-    if (!element.classList.contains('drop-element'))
+    if (!element || !element.classList.contains('drop-element'))
         return;
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -1470,16 +1471,22 @@ const appendingDragElementsInDrop = () => {
             const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
             if (isAllowOnlyCorrect === true) {
                 if (drop['value'] === drag['value']) {
+                    // Get original dimensions of the drag element
+                    const originalWidth = drag.offsetWidth;
+                    const originalHeight = drag.offsetHeight;
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
-                    //  drag.style.boxShadow = 'none';
+                    resizeDragAndDropElementsForRocket(drag, drop, originalWidth, originalHeight);
                 }
             }
             else {
                 if (drop['value'].includes(drag['value'])) {
+                    // Get original dimensions of the drag element
+                    const originalWidth = drag.offsetWidth;
+                    const originalHeight = drag.offsetHeight;
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
-                    //  drag.style.boxShadow = 'none';
+                    resizeDragAndDropElementsForRocket(drag, drop, originalWidth, originalHeight);
                 }
             }
         });
@@ -1503,6 +1510,32 @@ const reduceSizeToOriginal = () => {
         }
     });
 };
+const resizeDragAndDropElementsForRocket = (drag, drop, width, height) => {
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    const Rocket = document.getElementById("fullRrocket");
+    if (!Rocket)
+        return;
+    // Get the scale of the container
+    const containerScale = getElementScale(container);
+    // Hide child image inside lido-image
+    const childImage = drop.querySelector('img');
+    if (childImage) {
+        // Set the opacity to 1 for the drop element
+        drop.style.opacity = '1';
+        // Hide child image inside lido-image
+        childImage.remove(); // remove the child image
+        // Ensure dropped lido-text remains visible
+        const childText = drop.querySelector('lido-text');
+        if (childText) {
+            childText.style.opacity = '1';
+        }
+        //  Ensure dropped text retains its original size
+        drag.style.width = `${width / containerScale}px`;
+        drag.style.height = `${height}px`;
+    }
+};
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
 const slideAnimation = async () => {
@@ -67918,6 +67951,8 @@ const executeActions = async (actionsString, thisElement, element) => {
                     else {
                         dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
                     }
+                    if (dragElement.getAttribute("hasDummy") === "true")
+                        return;
                     afterDropDragHandling(dragElement, dropElement);
                     break;
                 }
@@ -68011,15 +68046,13 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
             if (isInfinite) {
-                const allDummy = container.querySelectorAll(`[id=${dragElement.id}]`);
-                if (allDummy.length === 1) {
-                    dummyElement = cloneElementWithComputedStyles(dragElement);
-                    dummyElement.classList.remove('dropped');
-                    dummyElement.removeAttribute('drop-to');
-                    dummyElement.removeAttribute('drop-time');
-                    dragElement.style.width = dropElement.style.width;
-                    dragElement.style.height = dropElement.style.height;
-                }
+                dummyElement = cloneElementWithComputedStyles(dragElement);
+                dummyElement.classList.remove('dropped');
+                dummyElement.removeAttribute('drop-to');
+                dummyElement.removeAttribute('drop-time');
+                dragElement.style.width = dropElement.style.width;
+                dragElement.style.height = dropElement.style.height;
+                dragElement.setAttribute("hasDummy", "true");
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -68058,7 +68091,6 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     }
 };
 function cloneElementWithComputedStyles(originalEl) {
-    console.log(originalEl.outerHTML);
     let clone = document.createElement('div');
     clone.innerHTML = originalEl.outerHTML;
     clone = clone.firstChild;

package/dist/collection/components/home/AudioIcon.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="white"/>
+<path d="M15.9128 12.3773C14.3383 10.8028 11.6454 11.9188 11.6466 14.145L11.6466 24.7516L9.36971 27.0285C8.02503 28.3732 7.42045 30.5428 8.47994 32.4084C9.20286 33.6782 10.0936 34.8448 11.1281 35.8768C12.1864 36.9351 13.3543 37.8178 14.5988 38.5225C16.462 39.582 18.6328 38.9786 19.9775 37.6339L22.252 35.3594L32.8586 35.3594C35.086 35.3594 36.2021 32.6665 34.6276 31.092L15.9128 12.3773ZM23.1371 7.61844C23.1373 7.28719 23.269 6.96956 23.5032 6.73533C23.7374 6.5011 24.0551 6.36942 24.3863 6.36922C33.3607 6.36804 40.6356 13.643 40.6356 22.6185C40.6242 22.9422 40.4876 23.2488 40.2545 23.4738C40.0215 23.6987 39.7103 23.8244 39.3864 23.8244C39.0625 23.8244 38.7513 23.6987 38.5182 23.4738C38.2852 23.2488 38.1486 22.9422 38.1372 22.6185C38.1373 20.8127 37.7817 19.0245 37.0907 17.3562C36.3997 15.6878 35.3868 14.1718 34.1099 12.8949C32.833 11.618 31.3171 10.6052 29.6487 9.91415C27.9803 9.22314 26.1921 8.86755 24.3863 8.86766C24.0551 8.86745 23.7374 8.73577 23.5032 8.50154C23.269 8.26731 23.1373 7.94969 23.1371 7.61844Z" fill="#F34D08"/>
+<path d="M23.1336 13.8679C23.1335 13.7036 23.1658 13.541 23.2287 13.3893C23.2915 13.2376 23.3836 13.0997 23.4997 12.9836C23.6158 12.8675 23.7537 12.7753 23.9054 12.7125C24.0571 12.6497 24.2198 12.6174 24.384 12.6175C25.6973 12.6173 26.9979 12.8759 28.2113 13.3785C29.4247 13.881 30.5272 14.6177 31.4559 15.5464C32.3846 16.4751 33.1212 17.5776 33.6238 18.791C34.1263 20.0044 34.3849 21.3049 34.3848 22.6183C34.379 22.946 34.2447 23.2583 34.0108 23.4879C33.7769 23.7176 33.4622 23.8462 33.1344 23.846C32.8067 23.8458 32.4921 23.717 32.2584 23.4871C32.0248 23.2573 31.8908 22.9448 31.8852 22.6171C31.8852 21.6322 31.6912 20.6569 31.3143 19.747C30.9374 18.837 30.385 18.0102 29.6885 17.3138C28.9921 16.6173 28.1653 16.0649 27.2553 15.688C26.3454 15.3111 25.3701 15.1171 24.3852 15.1171C24.0539 15.1169 23.7363 14.9852 23.5021 14.751C23.2678 14.5167 23.1362 14.1991 23.1359 13.8679L23.1336 13.8679Z" fill="#F34D08"/>
+</svg>

package/dist/collection/components/home/Close.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.0168 24.0201L39.2038 12.833C39.7347 12.3031 40.0333 11.5838 40.0339 10.8337C40.0348 10.0833 39.7373 9.36361 39.2073 8.83281C38.6773 8.30187 37.958 8.00313 37.2078 8.00252C36.4577 8.00191 35.738 8.29922 35.2071 8.82927L24.02 20.0163L12.833 8.82927C12.302 8.29833 11.5819 8 10.8312 8C10.0801 8 9.36013 8.29833 8.82913 8.82927C8.2982 9.36013 8 10.0802 8 10.8312C8 11.582 8.2982 12.302 8.82913 12.833L20.0163 24.0201L8.82913 35.2071C8.2982 35.738 8 36.458 8 37.209C8 37.9599 8.2982 38.68 8.82913 39.2109C9.36013 39.7418 10.0801 40.04 10.8312 40.04C11.5819 40.04 12.302 39.7418 12.833 39.2109L24.02 28.0238L35.2071 39.2109C35.738 39.7418 36.4581 40.04 37.209 40.04C37.9598 40.04 38.6799 39.7418 39.2108 39.2109C39.7417 38.68 40.04 37.9599 40.04 37.209C40.04 36.458 39.7417 35.738 39.2108 35.2071L28.0168 24.0201Z" fill="#F34D08"/>
+</svg>

package/dist/collection/components/home/Previous.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1713 7.99976L5.99927 21.1718C5.24939 21.9219 4.82812 22.9391 4.82812 23.9998C4.82812 25.0604 5.24939 26.0777 5.99927 26.8278L19.1713 39.9998C19.7307 40.5595 20.4435 40.9407 21.2196 41.0952C21.9957 41.2497 22.8002 41.1706 23.5313 40.8678L23.8213 40.7318C24.4768 40.3963 25.0271 39.8865 25.4114 39.2583C25.7957 38.6302 25.9991 37.9081 25.9993 37.1718V31.9998H39.9993C41.0601 31.9998 42.0776 31.5783 42.8277 30.8282C43.5778 30.078 43.9993 29.0606 43.9993 27.9998V19.9998L43.9893 19.6998C43.9136 18.6935 43.4603 17.7529 42.7204 17.0668C41.9804 16.3806 41.0084 15.9994 39.9993 15.9998L25.9993 15.9978V10.8278C25.9991 10.0368 25.7644 9.26357 25.3249 8.60593C24.8853 7.94829 24.2607 7.43573 23.5299 7.13305C22.7991 6.83037 21.995 6.75116 21.2191 6.90543C20.4433 7.0597 19.7307 7.44052 19.1713 7.99976Z" fill="white"/>
+</svg>

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

@@ -38,7 +38,7 @@ export class LidoHome {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
                 dispatchGameCompletedEvent();
-                this.currentContainerIndex = 0;
+                // this.currentContainerIndex = 0;
             }
             // Reset the containers array to trigger a re-render
             this.containers = [...this.containers];
@@ -310,14 +310,14 @@ export class LidoHome {
         return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\n        -button", onClick: () => {
                 this.exitFlag = true;
                 AudioPlayer.getI().stop();
-            } }, h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg" })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
+            } }, h("lido-image", { src: "./Close.svg" })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
                 triggerPrevcontainer();
-            } }, h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg" })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
+            } }, h("lido-image", { src: "./Previous.svg" })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 executeActions("this.nextBtn='true'", event.currentTarget);
-            } }, h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg" }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, h("lido-image", { visible: "true", src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" }))));
+            } }, h("lido-image", { src: "./Previous.svg" }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, h("lido-image", { visible: "true", src: "./AudioIcon.svg" }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.

package/dist/collection/css/index.css

@@ -87,9 +87,8 @@ body {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  justify-content: center;
+  justify-content: center !important;
   gap: 145px;
-
 }
 
 /* Drag element inside popup */

package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js

@@ -115,7 +115,7 @@ function getContainerXml(args) {
         .join('');
     return `
   <main> 
-      <lido-container id="lido-container" objective="${args.correct1}, ${args.correct2}, ${args.correct3}" appendToDropOnCompletion="true" show-drop-border="false" tab-index="1" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s linear'; this.sleep='2000';" show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false">
+      <lido-container id="lido-container" objective="${args.correct1}, ${args.correct2}, ${args.correct3}" appendToDropOnCompletion="true" show-drop-border="false" tab-index="1" is-allow-only-correct="true" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 3s linear'; this.sleep='2000';" show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false">
           <lido-cell layout="pos" id="pos1" disable-edit="true" tab-index="2" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.-60px, portrait.250px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
               <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
               </lido-avatar>

package/dist/collection/stories/Templates/jumpSentence/jumpSentence.stories.js

@@ -49,7 +49,7 @@ function getContainerXml(args) {
       onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" 
       is-continue-on-correct="true" bg-color="transparent" 
       bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" 
-      drop-action="infinite-drop">
+      drop-action="infinite-drop" is-allow-only-correct="true">
 
       <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" 
         height="landscape.500px, portrait.600px" width="landscape.350px, portrait.450px" 

package/dist/collection/stories/Templates/phonic-tractor/phonic-tractor.stories.js

@@ -20,24 +20,25 @@ export const PhonicTractor = {
     },
 };
 function getContainerXml(args) {
+    let tabCounter = 1;
     const { text1, options = [], answers = [] } = args;
     const trolleyCells = answers
-        .map((answer, index) => {
+        .map((answer) => {
         return `
 		<!-- drop and trolley -->
 		<lido-cell height="237px" width="200px" visible="true" bg-color="transparent" layout="col" >
-			<lido-text id="t${index + 1}" type="drop" tab-index="${index + 2}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="true" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';">
+			<lido-text id="drop${tabCounter}" type="drop" tab-index="${tabCounter++}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="true" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';this.display='flex'; this.alignItems='center'; this.justifyContent='center';">
 			</lido-text>
-			<lido-image id="img${index + 4}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
+			<lido-image id="img${tabCounter}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
 			</lido-image>
 		</lido-cell>
       `;
     })
         .join('');
     const optionCells = options
-        .map((option, index) => {
+        .map((option) => {
         return `
-		<lido-text id="option${index + 1}" tab-index="${index + 5}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="" show-speak-icon="true" >
+		<lido-text id="option${tabCounter}" tab-index="${tabCounter++}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="" show-speak-icon="true" >
 		</lido-text>
       `;
     })
@@ -63,7 +64,7 @@ function getContainerXml(args) {
 			<!-- tractor -->
 			<lido-cell layout="row" id="b1" visible="true" width="landscape.100%, portrait.850px" height="landscape.245px, portrait.30%" bg-color="transparent" onEntry="this.align-items='center'; this.animation='rightToPlace 3s linear'; this.justifyContent='center';" margin="landscape.215px 0px 0px 0px, portrait.0px 0px 0px 0px">
 				<!-- tractor head -->
-				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.80px 0px 0px 0px, portrait.80px 0px 0px 0px" >
+				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.86px -11px 0px 89px, portrait.80px 0px 0px 0px" >
 				</lido-image>
 				${trolleyCells}
 			</lido-cell>

package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js

@@ -0,0 +1,42 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Templates/PictureMeaningCocos',
+};
+export default meta;
+export const Default = {
+    args: {
+        drag1: "Uma alimentação saudável é essencial.",
+        drag2: "Devemos evitar contato com vírus.",
+        drag3: "O carro da dona violeta é amarelo.",
+        drop1: "Uma alimentação saudável é essencial.",
+        drop2: "Devemos evitar contato com vírus.",
+        drop3: "O carro da dona violeta é amarelo.",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>	
+  <lido-container id="lido-container" is-allow-only-correct="true" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation">
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+				</lido-avatar>
+		</lido-cell>
+		<lido-cell visible="true" layout="row" width="landscape.90%, portrait.100%" height="100%" bg-color="transparent" onEntry="this.justifyContent='space-between';">
+			<lido-cell visible="true" layout="col" width="landscape.45%, portrait.60%" height="90%" bg-color="transparent">
+				<lido-text visible="true" id="drag1" width="landscape.700px, portrait.470px" tab-index="1" audio="" string="${args.drag1}" value="${args.drag1}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
+				<lido-text visible="true" id="drag2" width="landscape.700px, portrait.470px" tab-index="2" audio="" string="${args.drag2}" value="${args.drag2}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
+				<lido-text visible="true" id="drag3" width="landscape.700px, portrait.470px" tab-index="3" audio="" string="${args.drag3}" value="${args.drag3}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" layout="col" width="landscape.30%, portrait.40%" height="90%" bg-color="transparent" onEntry="this.alignItems='end';">
+				<lido-image visible="true" id="drop1" width="landscape.240px, portrait.300px" tab-index="4" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png" bg-color="white"></lido-image>
+				<lido-image visible="true" id="drop2" width="landscape.240px, portrait.300px" tab-index="5" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/healthy_food.png" bg-color="white"></lido-image>
+				<lido-image visible="true" id="drop3" width="landscape.240px, portrait.300px" tab-index="6" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hospital_with_patients.png" bg-color="white"></lido-image>
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
+  </main>`;
+}