tybotflow-widget 0.2.6 → 0.2.8

package/dist/index.es.js

@@ -1582,7 +1582,7 @@ Error generating stack: ` + s.message + `
     );
   }
   function pe(r, i, s, c, g, b, T, k) {
-    r.name = "", T != null && typeof T != "function" && typeof T != "symbol" && typeof T != "boolean" ? r.type = T : r.removeAttribute("type"), i != null ? T === "number" ? (i === 0 && r.value === "" || r.value != i) && (r.value = "" + sn(i)) : r.value !== "" + sn(i) && (r.value = "" + sn(i)) : T !== "submit" && T !== "reset" || r.removeAttribute("value"), i != null ? Ce(r, T, sn(i)) : s != null ? Ce(r, T, sn(s)) : c != null && r.removeAttribute("value"), g == null && b != null && (r.defaultChecked = !!b), g != null && (r.checked = g && typeof g != "function" && typeof g != "symbol"), k != null && typeof k != "function" && typeof k != "symbol" && typeof k != "boolean" ? r.name = "" + sn(k) : r.removeAttribute("name");
+    r.name = "", T != null && typeof T != "function" && typeof T != "symbol" && typeof T != "boolean" ? r.type = T : r.removeAttribute("type"), i != null ? T === "number" ? (i === 0 && r.value === "" || r.value != i) && (r.value = "" + sn(i)) : r.value !== "" + sn(i) && (r.value = "" + sn(i)) : T !== "submit" && T !== "reset" || r.removeAttribute("value"), i != null ? Ne(r, T, sn(i)) : s != null ? Ne(r, T, sn(s)) : c != null && r.removeAttribute("value"), g == null && b != null && (r.defaultChecked = !!b), g != null && (r.checked = g && typeof g != "function" && typeof g != "symbol"), k != null && typeof k != "function" && typeof k != "symbol" && typeof k != "boolean" ? r.name = "" + sn(k) : r.removeAttribute("name");
   }
   function Ae(r, i, s, c, g, b, T, k) {
     if (b != null && typeof b != "function" && typeof b != "symbol" && typeof b != "boolean" && (r.type = b), i != null || s != null) {
@@ -1592,7 +1592,7 @@ Error generating stack: ` + s.message + `
     }
     c = c ?? g, c = typeof c != "function" && typeof c != "symbol" && !!c, r.checked = k ? r.checked : !!c, r.defaultChecked = !!c, T != null && typeof T != "function" && typeof T != "symbol" && typeof T != "boolean" && (r.name = T);
   }
-  function Ce(r, i, s) {
+  function Ne(r, i, s) {
     i === "number" && ni(r.ownerDocument) === r || r.defaultValue === "" + s || (r.defaultValue = "" + s);
   }
   function We(r, i, s, c) {
@@ -4204,72 +4204,72 @@ Error generating stack: ` + s.message + `
       return null;
     }
     function Oe(_, G, W, le) {
-      for (var ve = null, je = null, we = G, Ne = G = 0, qt = null; we !== null && Ne < W.length; Ne++) {
-        we.index > Ne ? (qt = we, we = null) : qt = we.sibling;
+      for (var ve = null, je = null, we = G, Ce = G = 0, qt = null; we !== null && Ce < W.length; Ce++) {
+        we.index > Ce ? (qt = we, we = null) : qt = we.sibling;
         var Je = Z(
           _,
           we,
-          W[Ne],
+          W[Ce],
           le
         );
         if (Je === null) {
           we === null && (we = qt);
           break;
         }
-        r && we && Je.alternate === null && i(_, we), G = b(Je, G, Ne), je === null ? ve = Je : je.sibling = Je, je = Je, we = qt;
+        r && we && Je.alternate === null && i(_, we), G = b(Je, G, Ce), je === null ? ve = Je : je.sibling = Je, je = Je, we = qt;
       }
-      if (Ne === W.length)
-        return s(_, we), $e && xa(_, Ne), ve;
+      if (Ce === W.length)
+        return s(_, we), $e && xa(_, Ce), ve;
       if (we === null) {
-        for (; Ne < W.length; Ne++)
-          we = ce(_, W[Ne], le), we !== null && (G = b(
+        for (; Ce < W.length; Ce++)
+          we = ce(_, W[Ce], le), we !== null && (G = b(
             we,
             G,
-            Ne
+            Ce
           ), je === null ? ve = we : je.sibling = we, je = we);
-        return $e && xa(_, Ne), ve;
+        return $e && xa(_, Ce), ve;
       }
-      for (we = c(we); Ne < W.length; Ne++)
+      for (we = c(we); Ce < W.length; Ce++)
         qt = J(
           we,
           _,
-          Ne,
-          W[Ne],
+          Ce,
+          W[Ce],
           le
         ), qt !== null && (r && qt.alternate !== null && we.delete(
-          qt.key === null ? Ne : qt.key
+          qt.key === null ? Ce : qt.key
         ), G = b(
           qt,
           G,
-          Ne
+          Ce
         ), je === null ? ve = qt : je.sibling = qt, je = qt);
       return r && we.forEach(function(oa) {
         return i(_, oa);
-      }), $e && xa(_, Ne), ve;
+      }), $e && xa(_, Ce), ve;
     }
     function xe(_, G, W, le) {
       if (W == null) throw Error(a(151));
-      for (var ve = null, je = null, we = G, Ne = G = 0, qt = null, Je = W.next(); we !== null && !Je.done; Ne++, Je = W.next()) {
-        we.index > Ne ? (qt = we, we = null) : qt = we.sibling;
+      for (var ve = null, je = null, we = G, Ce = G = 0, qt = null, Je = W.next(); we !== null && !Je.done; Ce++, Je = W.next()) {
+        we.index > Ce ? (qt = we, we = null) : qt = we.sibling;
         var oa = Z(_, we, Je.value, le);
         if (oa === null) {
           we === null && (we = qt);
           break;
         }
-        r && we && oa.alternate === null && i(_, we), G = b(oa, G, Ne), je === null ? ve = oa : je.sibling = oa, je = oa, we = qt;
+        r && we && oa.alternate === null && i(_, we), G = b(oa, G, Ce), je === null ? ve = oa : je.sibling = oa, je = oa, we = qt;
       }
       if (Je.done)
-        return s(_, we), $e && xa(_, Ne), ve;
+        return s(_, we), $e && xa(_, Ce), ve;
       if (we === null) {
-        for (; !Je.done; Ne++, Je = W.next())
-          Je = ce(_, Je.value, le), Je !== null && (G = b(Je, G, Ne), je === null ? ve = Je : je.sibling = Je, je = Je);
-        return $e && xa(_, Ne), ve;
+        for (; !Je.done; Ce++, Je = W.next())
+          Je = ce(_, Je.value, le), Je !== null && (G = b(Je, G, Ce), je === null ? ve = Je : je.sibling = Je, je = Je);
+        return $e && xa(_, Ce), ve;
       }
-      for (we = c(we); !Je.done; Ne++, Je = W.next())
-        Je = J(we, _, Ne, Je.value, le), Je !== null && (r && Je.alternate !== null && we.delete(Je.key === null ? Ne : Je.key), G = b(Je, G, Ne), je === null ? ve = Je : je.sibling = Je, je = Je);
+      for (we = c(we); !Je.done; Ce++, Je = W.next())
+        Je = J(we, _, Ce, Je.value, le), Je !== null && (r && Je.alternate !== null && we.delete(Je.key === null ? Ce : Je.key), G = b(Je, G, Ce), je === null ? ve = Je : je.sibling = Je, je = Je);
       return r && we.forEach(function(QL) {
         return i(_, QL);
-      }), $e && xa(_, Ne), ve;
+      }), $e && xa(_, Ce), ve;
     }
     function st(_, G, W, le) {
       if (typeof W == "object" && W !== null && W.type === v && W.key === null && (W = W.props.children), typeof W == "object" && W !== null) {
@@ -8220,7 +8220,7 @@ Error generating stack: ` + s.message + `
             );
             break e;
           }
-          je && je(r, Z, X), r === "focusout" && X && Z.type === "number" && X.memoizedProps.value != null && Ce(Z, "number", Z.value);
+          je && je(r, Z, X), r === "focusout" && X && Z.type === "number" && X.memoizedProps.value != null && Ne(Z, "number", Z.value);
         }
         switch (je = X ? er(X) : window, r) {
           case "focusin":
@@ -8248,26 +8248,26 @@ Error generating stack: ` + s.message + `
           e: {
             switch (r) {
               case "compositionstart":
-                var Ne = "onCompositionStart";
+                var Ce = "onCompositionStart";
                 break e;
               case "compositionend":
-                Ne = "onCompositionEnd";
+                Ce = "onCompositionEnd";
                 break e;
               case "compositionupdate":
-                Ne = "onCompositionUpdate";
+                Ce = "onCompositionUpdate";
                 break e;
             }
-            Ne = void 0;
+            Ce = void 0;
           }
         else
-          ii ? ZE(r, s) && (Ne = "onCompositionEnd") : r === "keydown" && s.keyCode === 229 && (Ne = "onCompositionStart");
-        Ne && (XE && s.locale !== "ko" && (ii || Ne !== "onCompositionStart" ? Ne === "onCompositionEnd" && ii && (we = GE()) : (zr = ie, ec = "value" in zr ? zr.value : zr.textContent, ii = !0)), je = Rl(X, Ne), 0 < je.length && (Ne = new YE(
-          Ne,
+          ii ? ZE(r, s) && (Ce = "onCompositionEnd") : r === "keydown" && s.keyCode === 229 && (Ce = "onCompositionStart");
+        Ce && (XE && s.locale !== "ko" && (ii || Ce !== "onCompositionStart" ? Ce === "onCompositionEnd" && ii && (we = GE()) : (zr = ie, ec = "value" in zr ? zr.value : zr.textContent, ii = !0)), je = Rl(X, Ce), 0 < je.length && (Ce = new YE(
+          Ce,
           r,
           null,
           s,
           ie
-        ), ce.push({ event: Ne, listeners: je }), we ? Ne.data = we : (we = JE(s), we !== null && (Ne.data = we)))), (we = wD ? AD(r, s) : TD(r, s)) && (Ne = Rl(X, "onBeforeInput"), 0 < Ne.length && (je = new YE(
+        ), ce.push({ event: Ce, listeners: je }), we ? Ce.data = we : (we = JE(s), we !== null && (Ce.data = we)))), (we = wD ? AD(r, s) : TD(r, s)) && (Ce = Rl(X, "onBeforeInput"), 0 < Ce.length && (je = new YE(
           "onBeforeInput",
           "beforeinput",
           null,
@@ -8275,7 +8275,7 @@ Error generating stack: ` + s.message + `
           ie
         ), ce.push({
           event: je,
-          listeners: Ne
+          listeners: Ce
         }), je.data = we)), hL(
           ce,
           r,
@@ -48015,9 +48015,9 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
   const h = u?.mainColor || "#59168b", m = u?.secondaryColor || "#6366f1", y = u?.thirdColor || "#0f172b", E = u?.headerFirstColor || "#6e11b0", v = u?.headerSecondColor || "#372aac", w = u?.inputBackgroundColor || "#1f2937", A = u?.inputTextColor || "#fff", R = u?.roundness || 24, C = u?.chatRoundness || 16, N = (u?.minPanelWidth || 434) > window.innerWidth ? window.innerWidth : u?.minPanelWidth || 434, F = (u?.maxPanelWidth || window.innerWidth) > window.innerWidth ? window.innerWidth : u?.maxPanelWidth || window.innerWidth, O = u?.chatMaxWidth || 88, x = u?.toggleBtnBorderTopLeftRadius || 12, M = u?.toggleBtnBorderTopRightRadius || 0, U = u?.toggleBtnBorderBottomLeftRadius || 12, z = u?.toggleBtnBorderBottomRightRadius || 0, B = u?.menuBackgroundColor || "#1f2937", H = u?.menuTextColor || "#e5e7eb", V = u?.menuHoverBackgroundColor || "#374151", Q = u?.agentChatResponseColor || "#e5e7eb", te = u?.agentChatResponseBgColor || "#1f2937", re = u?.agentIconBgColor || "#59168b", q = u?.agentIconColor || "#fff", K = u?.userChatMessagesColor || "#fff", Y = u?.userChatMessagesBgColor || "#7a1ebe", oe = u?.userIconBgColor || "#7a1ebe", S = u?.userIconColor || "#fff", j = u?.ButtonColor || "#fff", $ = u?.ButtonsBgColor || "#59168b", I = u?.fontSize || 13, se = u?.toggleBtnPosition || "bottom-right", de = (() => {
     const D = u?.firstMessageKeyword;
     if (Array.isArray(D)) {
-      const ue = window.location.origin, pe = D.find((Ce) => Ce.url && Ce.url.includes(ue));
+      const ue = window.location.origin, pe = D.find((Ne) => Ne.url && Ne.url.includes(ue));
       if (pe) return pe.message;
-      const Ae = D.find((Ce) => !Ce.url || Ce.url === "");
+      const Ae = D.find((Ne) => !Ne.url || Ne.url === "");
       return Ae ? Ae.message : D[0]?.message || "hi";
     }
     return D || "hi";
@@ -48028,8 +48028,8 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
     const D = (pe) => {
       if (!Ke.current) return;
       const Ae = lt.current - pe.clientX;
-      let Ce = ht.current + Ae;
-      Ce = Math.max(N, Math.min(F, Ce)), Te(Ce);
+      let Ne = ht.current + Ae;
+      Ne = Math.max(N, Math.min(F, Ne)), Te(Ne);
     }, ue = () => {
       Ke.current && (Ke.current = !1, document.body.style.cursor = "");
     };
@@ -48078,11 +48078,11 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
     if (!D || !(() => {
       if (!D.urls || D.urls.length === 0)
         return !0;
-      const Ae = window.location.origin, Ce = window.location.href;
+      const Ae = window.location.origin, Ne = window.location.href;
       return D.urls.some((We) => {
         if (!We || We.trim() === "") return !0;
         try {
-          return Ae.includes(We) || Ce.includes(We) || We.includes(Ae);
+          return Ae.includes(We) || Ne.includes(We) || We.includes(Ae);
         } catch {
           return console.warn("Invalid URL in widgetLoadBehavior:", We), !1;
         }
@@ -48096,8 +48096,8 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
       }, D.value * 1e3);
     else if (D.behavior === "after scroll") {
       const Ae = () => {
-        const Ce = window.pageYOffset || document.documentElement.scrollTop, We = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        Ce / We * 100 >= D.value && (Me(!0), window.removeEventListener("scroll", Ae));
+        const Ne = window.pageYOffset || document.documentElement.scrollTop, We = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        Ne / We * 100 >= D.value && (Me(!0), window.removeEventListener("scroll", Ae));
       };
       return window.addEventListener("scroll", Ae), () => {
         window.removeEventListener("scroll", Ae);
@@ -48167,7 +48167,7 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
         alert(`File ${Ae.name} is too large. Maximum size is 10MB.`);
         return;
       }
-      const Ce = {
+      const Ne = {
         id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
         file: Ae,
         type: Mr(Ae),
@@ -48175,7 +48175,7 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
         name: Ae.name,
         size: Ae.size
       };
-      pe.push(Ce);
+      pe.push(Ne);
     }), Ie((Ae) => [...Ae, ...pe]), ue && ue.current && (ue.current.value = "");
   }, []), ks = ge.useCallback(
     (D) => {
@@ -48208,24 +48208,24 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
         attachments: [...Be],
         timestamp: /* @__PURE__ */ new Date()
       };
-      if (nt((Ce) => [...Ce, Ae]), Fe(""), Ie([]), ut(!0), e?.bot)
+      if (nt((Ne) => [...Ne, Ae]), Fe(""), Ie([]), ut(!0), e?.bot)
         try {
           try {
-            const Ce = await va(D, e?.bot.botId, Be, ue || void 0);
+            const Ne = await va(D, e?.bot.botId, Be, ue || void 0);
             nt((We) => [
               ...We,
               {
                 id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
                 sender: "agent",
-                content: Ce,
+                content: Ne,
                 timestamp: /* @__PURE__ */ new Date(),
                 seen: an.current,
-                nMessage: typeof Ce == "string" ? 1 : Ce.length
+                nMessage: typeof Ne == "string" ? 1 : Ne.length
               }
             ]);
           } catch {
-            nt((Ce) => [
-              ...Ce,
+            nt((Ne) => [
+              ...Ne,
               {
                 id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
                 sender: "agent",
@@ -48236,12 +48236,12 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
               }
             ]);
           }
-        } catch (Ce) {
-          console.error("Error parsing selectedBotInfo:", Ce);
+        } catch (Ne) {
+          console.error("Error parsing selectedBotInfo:", Ne);
         }
       else
-        nt((Ce) => [
-          ...Ce,
+        nt((Ne) => [
+          ...Ne,
           {
             id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
             sender: "agent",
@@ -48387,7 +48387,7 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
       p: ({ children: D }) => {
         let ue;
         return typeof D == "string" && Br(D) || typeof D == "object" && !Array.isArray(D) && D?.props?.children && Kt(D?.props?.children) || typeof D == "object" && Array.isArray(D) && D.some((pe) => Br(pe)) ? ue = "rtl" : ue = "ltr", /* @__PURE__ */ L.jsx("div", { className: "leading-relaxed", dir: typeof D == "string" || !Array.isArray(D) ? ue : "", children: Array.isArray(D) ? D.map(
-          (pe, Ae) => typeof pe == "string" && !new RegExp("^(?:\\p{Emoji_Presentation}|\\p{Emoji}\\uFE0F|\\s)+$", "u").test(pe) ? /* @__PURE__ */ L.jsx("span", { dir: Br(pe) ? "rtl" : "ltr", children: /* @__PURE__ */ L.jsx(
+          (pe, Ae) => typeof pe == "string" && !new RegExp("^(?:\\p{Emoji_Presentation}|\\p{Emoji}\\uFE0F|\\s)+$", "u").test(pe) ? /* @__PURE__ */ L.jsx("p", { dir: Br(pe) ? "rtl" : "ltr", children: /* @__PURE__ */ L.jsx(
             jt,
             {
               sequence: [
@@ -48464,8 +48464,8 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
         }
       ) : D }),
       code({ node: D, className: ue, children: pe, ...Ae }) {
-        const Ce = /language-(\w+)/.exec(ue || "");
-        return Ce ? /* @__PURE__ */ L.jsx(GI, { ...Ae, PreTag: "div", children: String(pe).replace(/\n$/, ""), language: Ce[1], style: fW, customStyle: { scrollbarWidth: "thin" } }) : /* @__PURE__ */ L.jsx("code", { className: "px-1 rounded font-mono inline", style: { backgroundColor: w, color: Q }, ...Ae, children: typeof pe == "string" ? /* @__PURE__ */ L.jsx(
+        const Ne = /language-(\w+)/.exec(ue || "");
+        return Ne ? /* @__PURE__ */ L.jsx(GI, { ...Ae, PreTag: "div", children: String(pe).replace(/\n$/, ""), language: Ne[1], style: fW, customStyle: { scrollbarWidth: "thin" } }) : /* @__PURE__ */ L.jsx("code", { className: "px-1 rounded font-mono inline", style: { backgroundColor: w, color: Q }, ...Ae, children: typeof pe == "string" ? /* @__PURE__ */ L.jsx(
           jt,
           {
             sequence: [
@@ -48639,26 +48639,26 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
               pe.image && /* @__PURE__ */ L.jsx("img", { src: pe.image, alt: pe.title, className: "h-32 w-full object-cover rounded-md mb-2" }),
               /* @__PURE__ */ L.jsx("h3", { className: "text-sm font-bold", title: pe.title, children: pe.title }),
               /* @__PURE__ */ L.jsx("p", { className: "text-xs text-gray-300 mb-2 line-clamp-2", title: pe.subtitle, children: pe.subtitle }),
-              pe.actions?.map((Ce, We) => {
-                const ln = typeof Ce.payload == "string" ? Ce.payload : JSON.stringify(Ce.payload), Gn = typeof Ce.payload == "string" ? Ce.payload : D.title;
+              pe.actions?.map((Ne, We) => {
+                const ln = typeof Ne.payload == "string" ? Ne.payload : JSON.stringify(Ne.payload), Gn = Ne.title;
                 return /* @__PURE__ */ L.jsx(
                   "button",
                   {
                     className: "mb-1 mr-1 px-4 py-1 hover:scale-105 transition-all duration-100",
                     onClick: () => {
-                      Ce.action === "Open URL" ? window.open(Ce.url, "_blank") : Ce.title === "scan" ? fetch(pe.image).then((nr) => nr.blob()).then((nr) => {
+                      Ne.action === "Open URL" ? window.open(Ne.url, "_blank") : Ne.title === "scan" ? fetch(pe.image).then((nr) => nr.blob()).then((nr) => {
                         const Ls = URL.createObjectURL(nr), Pr = document.createElement("a");
                         Pr.href = Ls, Pr.download = "qrcode.png", document.body.appendChild(Pr), Pr.click(), document.body.removeChild(Pr), URL.revokeObjectURL(Ls);
                       }).catch(() => {
                         alert("Failed to download image.");
-                      }) : (Ce.action, tr(Gn, ln));
+                      }) : (Ne.action, tr(Gn, ln));
                     },
                     style: {
                       background: $,
                       borderRadius: `${C}px`,
                       color: j
                     },
-                    children: Ce.title
+                    children: Ne.title
                   },
                   We
                 );
@@ -48672,11 +48672,11 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
           D.image && /* @__PURE__ */ L.jsx("img", { src: D.image, alt: D.title, className: "h-32 w-full object-cover rounded-md mb-2" }),
           /* @__PURE__ */ L.jsx("h3", { className: "font-bold", children: D.title }),
           D.actions?.map((pe, Ae) => {
-            let Ce;
+            let Ne;
             try {
-              Ce = typeof pe.payload == "string" ? JSON.parse(pe.payload) : pe.payload;
+              Ne = typeof pe.payload == "string" ? JSON.parse(pe.payload) : pe.payload;
             } catch {
-              Ce = { productName: D.title };
+              Ne = { productName: D.title };
             }
             return /* @__PURE__ */ L.jsx(
               "button",
@@ -48688,7 +48688,7 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
                     Gn.href = ln, Gn.download = "qrcode.png", document.body.appendChild(Gn), Gn.click(), document.body.removeChild(Gn), URL.revokeObjectURL(ln);
                   }).catch(() => {
                     alert("Failed to download image.");
-                  }) : tr(Ce.productName || D.title);
+                  }) : tr(Ne.productName || D.title);
                 },
                 style: {
                   background: $,
@@ -48755,6 +48755,10 @@ const Y1 = "https://api.tybotflow.com/api/v1", W1 = "https://api.tybotflow.com/a
   }, ti = `linear-gradient(to bottom right, ${y}, ${h}, ${y})`, Ji = `linear-gradient(to right, ${h}, ${m})`, ni = `linear-gradient(to right, ${E}, ${v})`;
   return f || !u ? null : /* @__PURE__ */ L.jsxs(L.Fragment, { children: [
     /* @__PURE__ */ L.jsx("style", { children: `
+                    #message-input::placeholder {
+                        color: ${A}
+                    }
+
                     @keyframes slideInFromRight {
                         from {
                             transform: translateX(100%);