lido-player 0.0.2-alpha-37 → 0.0.2-alpha-39

package/dist/cjs/index.cjs.js

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-ca4f5acd.js');
+const utils = require('./utils-ecfb0201.js');
 
 var rive = {exports: {}};
 
@@ -11921,8 +11921,11 @@ const LidoTrace = class {
                 return;
             // Highlight the current letter keeping the previous ones highlighted
             const letter = letters[index];
-            if (letter)
+            if (letter) {
                 letter.classList.add('letter-highlight');
+                // letter.setAttribute('speak', 'true');
+                // await AudioPlayer.getI().play(letter);
+            }
         }
         if (spanType === 'words') {
             const words = content.querySelectorAll('.text-words');
@@ -11930,8 +11933,11 @@ const LidoTrace = class {
                 return;
             // Highlight the current word keeping the previous ones highlighted
             const word = words[index];
-            if (word)
+            if (word) {
                 word.classList.add('word-highlight');
+                // word.setAttribute('speak', 'true');
+                // await AudioPlayer.getI().play(word);
+            }
         }
     }
     updateStyles() {
@@ -11946,7 +11952,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'ece93e56b22fbf999a1c8012a68dd70160c42a2b', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: '3aa18574f264041dec177972fa21e76a4624bf9b', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: 'e3b4b599e93cf22974b348a0f5a3915533b2162f', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'f54b55ae0a58a3df9d1402f7b930bdca79f186cc', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/{utils-ca4f5acd.js → utils-ecfb0201.js}

@@ -833,6 +833,7 @@ async function onElementDropComplete(dragElement, dropElement) {
         // Perform actions if onMatch is defined
         const onCorrect = dropElement.getAttribute('onCorrect');
         if (onCorrect) {
+            await executeActions("this.alignMatch='true'", dropElement, dragElement);
             await executeActions(onCorrect, dropElement, dragElement);
         }
     }
@@ -1075,7 +1076,8 @@ class AudioPlayer {
             try {
                 highlightSpeakingElement(targetElement);
                 await speakText(targetElement.textContent, targetElement);
-                stopHighlightForSpeakingElement(targetElement);
+                const highlightedElements = document.querySelectorAll('.speaking-highlight');
+                highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
                 setDraggingDisabled(false);
             }
             catch (error) {

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

@@ -663,8 +663,11 @@ export class LidoTrace {
                 return;
             // Highlight the current letter keeping the previous ones highlighted
             const letter = letters[index];
-            if (letter)
+            if (letter) {
                 letter.classList.add('letter-highlight');
+                // letter.setAttribute('speak', 'true');
+                // await AudioPlayer.getI().play(letter);
+            }
         }
         if (spanType === 'words') {
             const words = content.querySelectorAll('.text-words');
@@ -672,8 +675,11 @@ export class LidoTrace {
                 return;
             // Highlight the current word keeping the previous ones highlighted
             const word = words[index];
-            if (word)
+            if (word) {
                 word.classList.add('word-highlight');
+                // word.setAttribute('speak', 'true');
+                // await AudioPlayer.getI().play(word);
+            }
         }
     }
     updateStyles() {
@@ -688,7 +694,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'ece93e56b22fbf999a1c8012a68dd70160c42a2b', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, h("div", { key: '3aa18574f264041dec177972fa21e76a4624bf9b', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'e3b4b599e93cf22974b348a0f5a3915533b2162f', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, h("div", { key: 'f54b55ae0a58a3df9d1402f7b930bdca79f186cc', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

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

@@ -92,7 +92,7 @@ function getContainerXml(args) {
     return `
   <main> 
        
-      <lido-container id="lido-container" objective="${objective}" show-drop-border="false" tab-index="1" is-allow-only-correct="true" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s 1s linear'; this.sleep='4000';" 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" drop-action="infinite-drop">
+      <lido-container id="lido-container" objective="${objective}" show-drop-border="false" tab-index="1" is-allow-only-correct="true" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s 1s linear'; this.sleep='1000'; heading.speak='true'; " 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" drop-action="infinite-drop">
           <lido-cell layout="pos" id="pos1" disable-edit="true" tab-index="2" value="pos2" height="305px" width="227px" x="landscape.1270px, 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>
@@ -105,7 +105,7 @@ function getContainerXml(args) {
               </lido-image>
               <lido-image id="hit_img" tab-index="5" height="170px" width="100%" y="landscape.124%, portrait.360px" x="landscape.-42%, portrait.-36%" disable-edit="true" visible="true" src="${args.TextBackgroundImage}">
                 <lido-cell layout="pos" display="flex" value="pos3" tab-index="3" id="pos3" visible="true" height="landscape.265px, portrait.auto " bg-color="transparent" width="landscape.100%, portrait.100%;" onEntry="this.z-index='1'; this.align-items='center'; this.justify-content='center'; this.display='flex';" y="landscape.0%, portrait.14%" x="landscape.9%, portrait.4%">
-                  <lido-text id="heading" tab-index="6" visible="true" string="${args.letterBoardText}" font-family="'Baloo Bhai 2'" font-color="#fafafa" font-size="landscape.9rem, portrait.10rem" bg-color="transparent" onEntry="this.fontWeight='700'; this.justify-content='center'; this.align-item='center';" x="unset" y="unset">
+                  <lido-text id="heading" tab-index="6" visible="true" string="${args.letterBoardText}" font-family="'Baloo Bhai 2'" font-color="#fafafa" font-size="landscape.9rem, portrait.10rem" bg-color="transparent" onEntry="this.fontWeight='700'; this.justify-content='center'; this.align-item='center'; this.speak='true';" x="unset" y="unset">
                   </lido-text>
                 </lido-cell>
               </lido-image>              

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

@@ -64,7 +64,7 @@ function getContainerXml(args) {
                     </lido-cell>
 
                     <lido-cell tab-index="2" layout="col" show-speak-icon="true" audio="" visible="true" width="landscape.725px, portrait.725px"  height="landscape.725px, portrait.725px" bg-color="#0A2C45"  onEntry="this.border-radius='6px'; this.flex-shrink='0';">
-                        <lido-trace id="image2" tab-index="3" value="a" visible="true" svg-source="${traceImage}" onCorrect=""  mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.700px,portrait.700px" height="landscape.700px,portrait.700px" onEntry="" alt-text="{backgroundImage}">
+                        <lido-trace id="image2" tab-index="3" value="a" visible="true" svg-source="${traceImage}" onCorrect="this.speak='true';"  mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.700px,portrait.700px" height="landscape.700px,portrait.700px" alt-text="{backgroundImage}">
                         </lido-trace>
                     </lido-cell>
 

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

@@ -75,7 +75,7 @@ function getContainerXml(args) {
 
                     <!-- trace element -->
                     <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" height="landscape.500px, portrait.500px" width="landscape.550px, portrait.550px" x="landscape.510px, portrait.75px" y="landscape.305px, portrait.475px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="trace1.visibility='visible'; this.flex-shrink='0';">
-                        <lido-trace id="trace1"  audio="" animationTrace="true" highlightTextId="txt1" tab-index="3" value="a" visible="true" svg-source="${traceImage1}; ${traceImage2}; ${traceImage3}" onCorrect="" mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.500px, portrait.675px" height="landscape.500px, portrait.500px" altText="{backgroundImage}">
+                        <lido-trace id="trace1"  audio="" animationTrace="true" highlightTextId="txt1" tab-index="3" value="a" visible="true" svg-source="${traceImage1}; ${traceImage2}; ${traceImage3}" onCorrect="txt1.speak='true';" mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.500px, portrait.675px" height="landscape.500px, portrait.500px" altText="{backgroundImage}">
                         </lido-trace>
                     </lido-cell>
             </lido-container>

package/dist/collection/utils/audioPlayer.js

@@ -66,7 +66,8 @@ export class AudioPlayer {
             try {
                 highlightSpeakingElement(targetElement);
                 await speakText(targetElement.textContent, targetElement);
-                stopHighlightForSpeakingElement(targetElement);
+                const highlightedElements = document.querySelectorAll('.speaking-highlight');
+                highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
                 setDraggingDisabled(false);
             }
             catch (error) {

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -682,6 +682,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
         // Perform actions if onMatch is defined
         const onCorrect = dropElement.getAttribute('onCorrect');
         if (onCorrect) {
+            await executeActions("this.alignMatch='true'", dropElement, dragElement);
             await executeActions(onCorrect, dropElement, dragElement);
         }
     }

package/dist/components/index.js

@@ -1 +1 @@
-export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-7f8e1ee3.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-b827ba8e.js';

package/dist/components/lido-avatar.js

@@ -1,4 +1,4 @@
-import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-7d6376b8.js';
+import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-386181ff.js';
 
 const LidoAvatar = LidoAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-cell.js

@@ -1,4 +1,4 @@
-import { L as LidoCell$1, d as defineCustomElement$1 } from './p-ef9c22cb.js';
+import { L as LidoCell$1, d as defineCustomElement$1 } from './p-4fd16a6d.js';
 
 const LidoCell = LidoCell$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-col.js

@@ -1,4 +1,4 @@
-import { L as LidoCol$1, d as defineCustomElement$1 } from './p-1f25128f.js';
+import { L as LidoCol$1, d as defineCustomElement$1 } from './p-ddceb2c7.js';
 
 const LidoCol = LidoCol$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-container.js

@@ -1,4 +1,4 @@
-import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-0517b256.js';
+import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-316538c8.js';
 
 const LidoContainer = LidoContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-flash-card.js

@@ -1,4 +1,4 @@
-import { L as LidoFlash, d as defineCustomElement$1 } from './p-21244924.js';
+import { L as LidoFlash, d as defineCustomElement$1 } from './p-02d8bdd1.js';
 
 const LidoFlashCard = LidoFlash;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-float.js

@@ -1,4 +1,4 @@
-import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-964bb2d8.js';
+import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-0f339d9b.js';
 
 const LidoFloat = LidoFloat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-home.js

@@ -1,4 +1,4 @@
-import { L as LidoHome$1, d as defineCustomElement$1 } from './p-b8d835ab.js';
+import { L as LidoHome$1, d as defineCustomElement$1 } from './p-bfe4cab0.js';
 
 const LidoHome = LidoHome$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-image.js

@@ -1,4 +1,4 @@
-import { L as LidoImage$1, d as defineCustomElement$1 } from './p-5d6ac6a8.js';
+import { L as LidoImage$1, d as defineCustomElement$1 } from './p-08971697.js';
 
 const LidoImage = LidoImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-keyboard.js

@@ -1,4 +1,4 @@
-import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-7412e687.js';
+import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-7b91a633.js';
 
 const LidoKeyboard = LidoKeyboard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-math-matrix.js

@@ -1,4 +1,4 @@
-import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-6dc838e6.js';
+import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-4ad65185.js';
 
 const LidoMathMatrix = LidoMathMatrix$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-pos.js

@@ -1,4 +1,4 @@
-import { L as LidoPos$1, d as defineCustomElement$1 } from './p-b65d78cf.js';
+import { L as LidoPos$1, d as defineCustomElement$1 } from './p-b59b421e.js';
 
 const LidoPos = LidoPos$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-random.js

@@ -1,4 +1,4 @@
-import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-64aca1ed.js';
+import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-6c8b5f12.js';
 
 const LidoRandom = LidoRandom$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-root.js

@@ -1,22 +1,22 @@
-import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-7f8e1ee3.js';
-import { d as defineCustomElement$j } from './p-7d6376b8.js';
-import { d as defineCustomElement$i } from './p-ef9c22cb.js';
-import { d as defineCustomElement$h } from './p-1f25128f.js';
-import { d as defineCustomElement$g } from './p-0517b256.js';
-import { d as defineCustomElement$f } from './p-21244924.js';
-import { d as defineCustomElement$e } from './p-964bb2d8.js';
-import { d as defineCustomElement$d } from './p-b8d835ab.js';
-import { d as defineCustomElement$c } from './p-5d6ac6a8.js';
-import { d as defineCustomElement$b } from './p-7412e687.js';
-import { d as defineCustomElement$a } from './p-6dc838e6.js';
-import { d as defineCustomElement$9 } from './p-b65d78cf.js';
-import { d as defineCustomElement$8 } from './p-64aca1ed.js';
-import { d as defineCustomElement$7 } from './p-94e44d07.js';
-import { d as defineCustomElement$6 } from './p-f22445e3.js';
-import { d as defineCustomElement$5 } from './p-09d87f1e.js';
-import { d as defineCustomElement$4 } from './p-52b0e7f9.js';
-import { d as defineCustomElement$3 } from './p-9eb2b59e.js';
-import { d as defineCustomElement$2 } from './p-029db8e3.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-b827ba8e.js';
+import { d as defineCustomElement$j } from './p-386181ff.js';
+import { d as defineCustomElement$i } from './p-4fd16a6d.js';
+import { d as defineCustomElement$h } from './p-ddceb2c7.js';
+import { d as defineCustomElement$g } from './p-316538c8.js';
+import { d as defineCustomElement$f } from './p-02d8bdd1.js';
+import { d as defineCustomElement$e } from './p-0f339d9b.js';
+import { d as defineCustomElement$d } from './p-bfe4cab0.js';
+import { d as defineCustomElement$c } from './p-08971697.js';
+import { d as defineCustomElement$b } from './p-7b91a633.js';
+import { d as defineCustomElement$a } from './p-4ad65185.js';
+import { d as defineCustomElement$9 } from './p-b59b421e.js';
+import { d as defineCustomElement$8 } from './p-6c8b5f12.js';
+import { d as defineCustomElement$7 } from './p-ebd56b31.js';
+import { d as defineCustomElement$6 } from './p-242a3040.js';
+import { d as defineCustomElement$5 } from './p-0c38a496.js';
+import { d as defineCustomElement$4 } from './p-1ed4ea23.js';
+import { d as defineCustomElement$3 } from './p-35e88215.js';
+import { d as defineCustomElement$2 } from './p-5f6567b1.js';
 
 const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
     constructor() {

package/dist/components/lido-row.js

@@ -1,4 +1,4 @@
-import { L as LidoRow$1, d as defineCustomElement$1 } from './p-94e44d07.js';
+import { L as LidoRow$1, d as defineCustomElement$1 } from './p-ebd56b31.js';
 
 const LidoRow = LidoRow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-shape.js

@@ -1,4 +1,4 @@
-import { L as LidoShape$1, d as defineCustomElement$1 } from './p-f22445e3.js';
+import { L as LidoShape$1, d as defineCustomElement$1 } from './p-242a3040.js';
 
 const LidoShape = LidoShape$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-slide-fill.js

@@ -1,4 +1,4 @@
-import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-09d87f1e.js';
+import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-0c38a496.js';
 
 const LidoSlideFill = LidoSlideFill$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-text.js

@@ -1,4 +1,4 @@
-import { L as LidoText$1, d as defineCustomElement$1 } from './p-52b0e7f9.js';
+import { L as LidoText$1, d as defineCustomElement$1 } from './p-1ed4ea23.js';
 
 const LidoText = LidoText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-trace.js

@@ -1,4 +1,4 @@
-import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-9eb2b59e.js';
+import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-35e88215.js';
 
 const LidoTrace = LidoTrace$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-wrap.js

@@ -1,4 +1,4 @@
-import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-029db8e3.js';
+import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-5f6567b1.js';
 
 const LidoWrap = LidoWrap$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-21244924.js → p-02d8bdd1.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, m as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, m as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-b827ba8e.js';
 
 const lidoFlashCardCss = ".card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}";
 const LidoFlashCardStyle0 = lidoFlashCardCss;

package/dist/components/{p-5d6ac6a8.js → p-08971697.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, I as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, J as tinyColor, l as attachSpeakIcon, m as parseProp, e as convertUrlToRelative, h, j as Host } from './p-7f8e1ee3.js';
+import { c as commonjsGlobal, I as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, J as tinyColor, l as attachSpeakIcon, m as parseProp, e as convertUrlToRelative, h, j as Host } from './p-b827ba8e.js';
 
 var lib = {exports: {}};
 

package/dist/components/{p-09d87f1e.js → p-0c38a496.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, m as parseProp, Q as fraction, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, m as parseProp, Q as fraction, h, j as Host } from './p-b827ba8e.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;

package/dist/components/{p-964bb2d8.js → p-0f339d9b.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, o as handleFloatElementPosition, q as handleElementClick, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, o as handleFloatElementPosition, q as handleElementClick, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoFloatCss = ".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}#removeShadow{box-shadow:unset !important}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}";
 const LidoFloatStyle0 = lidoFloatCss;

package/dist/components/{p-52b0e7f9.js → p-1ed4ea23.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoTextCss = ".lido-text{transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:24px;color:#333;cursor:pointer;font-family:'Baloo Bhai 2', serif}.text-letters{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-letters.letter-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-letter-bounce 0.4s}.text-words{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-words.word-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-word-bounce 0.4s}@keyframes text-letter-bounce{0%{transform:scale(1)}60%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes text-word-bounce{0%{transform:scale(1)}60%{transform:scale(1.3)}100%{transform:scale(1)}}";
 const LidoTextStyle0 = lidoTextCss;

package/dist/components/{p-f22445e3.js → p-242a3040.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-b827ba8e.js';
 
 const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
 const LidoShapeStyle0 = lidoShapeCss;

package/dist/components/{p-0517b256.js → p-316538c8.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, n as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, n as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-b827ba8e.js';
 
 const lidoContainerCss = ".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}";
 const LidoContainerStyle0 = lidoContainerCss;

package/dist/components/{p-9eb2b59e.js → p-35e88215.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, T as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, U as speakIcon, L as LidoContainer, F as executeActions, K as triggerNextContainer, m as parseProp, h, j as Host, V as fingerUrl } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, T as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, U as speakIcon, L as LidoContainer, F as executeActions, K as triggerNextContainer, m as parseProp, h, j as Host, V as fingerUrl } from './p-b827ba8e.js';
 
 const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;max-height:calc(100vh - 50px);touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
 const LidoTraceStyle0 = lidoTraceCss;
@@ -666,8 +666,11 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
                 return;
             // Highlight the current letter keeping the previous ones highlighted
             const letter = letters[index];
-            if (letter)
+            if (letter) {
                 letter.classList.add('letter-highlight');
+                // letter.setAttribute('speak', 'true');
+                // await AudioPlayer.getI().play(letter);
+            }
         }
         if (spanType === 'words') {
             const words = content.querySelectorAll('.text-words');
@@ -675,8 +678,11 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
                 return;
             // Highlight the current word keeping the previous ones highlighted
             const word = words[index];
-            if (word)
+            if (word) {
                 word.classList.add('word-highlight');
+                // word.setAttribute('speak', 'true');
+                // await AudioPlayer.getI().play(word);
+            }
         }
     }
     updateStyles() {
@@ -691,7 +697,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'ece93e56b22fbf999a1c8012a68dd70160c42a2b', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, h("div", { key: '3aa18574f264041dec177972fa21e76a4624bf9b', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'e3b4b599e93cf22974b348a0f5a3915533b2162f', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, h("div", { key: 'f54b55ae0a58a3df9d1402f7b930bdca79f186cc', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return this; }

package/dist/components/{p-7d6376b8.js → p-386181ff.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, e as convertUrlToRelative, h, j as Host, R as RiveService } from './p-7f8e1ee3.js';
+import { c as commonjsGlobal, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, e as convertUrlToRelative, h, j as Host, R as RiveService } from './p-b827ba8e.js';
 
 var rive = {exports: {}};
 

package/dist/components/{p-6dc838e6.js → p-4ad65185.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoMathMatrixCss = ".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:cover;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--inactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px}";
 const LidoMathMatrixStyle0 = lidoMathMatrixCss;

package/dist/components/{p-ef9c22cb.js → p-4fd16a6d.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoCellCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}";
 const LidoCellStyle0 = lidoCellCss;

package/dist/components/{p-029db8e3.js → p-5f6567b1.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoWrapCss = ".lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}";
 const LidoWrapStyle0 = lidoWrapCss;

package/dist/components/{p-64aca1ed.js → p-6c8b5f12.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, l as attachSpeakIcon, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, l as attachSpeakIcon, h, j as Host } from './p-b827ba8e.js';
 
 const lidoRandomCss = ".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}";
 const LidoRandomStyle0 = lidoRandomCss;

package/dist/components/{p-7412e687.js → p-7b91a633.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, F as executeActions, K as triggerNextContainer, o as handleFloatElementPosition, M as storingEachActivityScore, O as DropAction, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
-import { d as defineCustomElement$1 } from './p-52b0e7f9.js';
+import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, F as executeActions, K as triggerNextContainer, o as handleFloatElementPosition, M as storingEachActivityScore, O as DropAction, m as parseProp, h, j as Host } from './p-b827ba8e.js';
+import { d as defineCustomElement$1 } from './p-1ed4ea23.js';
 
 const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
 const LidoKeyboardStyle0 = lidoKeyboardCss;

package/dist/components/{p-b65d78cf.js → p-b59b421e.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoPosCss = ".lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}";
 const LidoPosStyle0 = lidoPosCss;

package/dist/components/{p-7f8e1ee3.js → p-b827ba8e.js}

@@ -2229,6 +2229,7 @@ async function onElementDropComplete(dragElement, dropElement) {
         // Perform actions if onMatch is defined
         const onCorrect = dropElement.getAttribute('onCorrect');
         if (onCorrect) {
+            await executeActions("this.alignMatch='true'", dropElement, dragElement);
             await executeActions(onCorrect, dropElement, dragElement);
         }
     }
@@ -2471,7 +2472,8 @@ class AudioPlayer {
             try {
                 highlightSpeakingElement(targetElement);
                 await speakText(targetElement.textContent, targetElement);
-                stopHighlightForSpeakingElement(targetElement);
+                const highlightedElements = document.querySelectorAll('.speaking-highlight');
+                highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
                 setDraggingDisabled(false);
             }
             catch (error) {

package/dist/components/{p-b8d835ab.js → p-bfe4cab0.js}

@@ -1,21 +1,21 @@
-import { p as proxyCustomElement, H, r as clearLocalStorage, t as dispatchActivityChangeEvent, A as ActivityScoreKey, u as dispatchGameCompletedEvent, v as dispatchGameExitEvent, w as AudioPlayer, x as generateUUIDFallback, y as exitUrl, z as prevUrl, B as nextUrl, C as speakUrl, N as NextContainerKey, P as PrevContainerKey, L as LidoContainer, h, D as getCancelBtnPopup, n as calculateScale, E as triggerPrevcontainer, F as executeActions, j as Host, e as convertUrlToRelative, G as setCancelBtnPopup } from './p-7f8e1ee3.js';
-import { d as defineCustomElement$h } from './p-7d6376b8.js';
-import { d as defineCustomElement$g } from './p-ef9c22cb.js';
-import { d as defineCustomElement$f } from './p-1f25128f.js';
-import { d as defineCustomElement$e } from './p-0517b256.js';
-import { d as defineCustomElement$d } from './p-21244924.js';
-import { d as defineCustomElement$c } from './p-964bb2d8.js';
-import { d as defineCustomElement$b } from './p-5d6ac6a8.js';
-import { d as defineCustomElement$a } from './p-7412e687.js';
-import { d as defineCustomElement$9 } from './p-6dc838e6.js';
-import { d as defineCustomElement$8 } from './p-b65d78cf.js';
-import { d as defineCustomElement$7 } from './p-64aca1ed.js';
-import { d as defineCustomElement$6 } from './p-94e44d07.js';
-import { d as defineCustomElement$5 } from './p-f22445e3.js';
-import { d as defineCustomElement$4 } from './p-09d87f1e.js';
-import { d as defineCustomElement$3 } from './p-52b0e7f9.js';
-import { d as defineCustomElement$2 } from './p-9eb2b59e.js';
-import { d as defineCustomElement$1 } from './p-029db8e3.js';
+import { p as proxyCustomElement, H, r as clearLocalStorage, t as dispatchActivityChangeEvent, A as ActivityScoreKey, u as dispatchGameCompletedEvent, v as dispatchGameExitEvent, w as AudioPlayer, x as generateUUIDFallback, y as exitUrl, z as prevUrl, B as nextUrl, C as speakUrl, N as NextContainerKey, P as PrevContainerKey, L as LidoContainer, h, D as getCancelBtnPopup, n as calculateScale, E as triggerPrevcontainer, F as executeActions, j as Host, e as convertUrlToRelative, G as setCancelBtnPopup } from './p-b827ba8e.js';
+import { d as defineCustomElement$h } from './p-386181ff.js';
+import { d as defineCustomElement$g } from './p-4fd16a6d.js';
+import { d as defineCustomElement$f } from './p-ddceb2c7.js';
+import { d as defineCustomElement$e } from './p-316538c8.js';
+import { d as defineCustomElement$d } from './p-02d8bdd1.js';
+import { d as defineCustomElement$c } from './p-0f339d9b.js';
+import { d as defineCustomElement$b } from './p-08971697.js';
+import { d as defineCustomElement$a } from './p-7b91a633.js';
+import { d as defineCustomElement$9 } from './p-4ad65185.js';
+import { d as defineCustomElement$8 } from './p-b59b421e.js';
+import { d as defineCustomElement$7 } from './p-6c8b5f12.js';
+import { d as defineCustomElement$6 } from './p-ebd56b31.js';
+import { d as defineCustomElement$5 } from './p-242a3040.js';
+import { d as defineCustomElement$4 } from './p-0c38a496.js';
+import { d as defineCustomElement$3 } from './p-1ed4ea23.js';
+import { d as defineCustomElement$2 } from './p-35e88215.js';
+import { d as defineCustomElement$1 } from './p-5f6567b1.js';
 
 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}*{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: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: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}";
 const LidoHomeStyle0 = indexCss;

package/dist/components/{p-1f25128f.js → p-ddceb2c7.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-7f8e1ee3.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-b827ba8e.js';
 
 const lidoColCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}";
 const LidoColStyle0 = lidoColCss;