@resulticks/trustsignal-wa-hsm 0.3.0 → 0.4.0

package/dist/resulticks-trustsignal-wa-hsm.es.js

@@ -1,16 +1,16 @@
-import { jsx as e, jsxs as r, Fragment as ae } from "react/jsx-runtime";
-import Q, { forwardRef as Ce, createElement as fe, useRef as Me, useEffect as ee, useState as I, useMemo as we, useCallback as he, createContext as Ee } from "react";
-import { useNavigate as ve, useInRouterContext as ue } from "react-router-dom";
-const Le = async (a, n = {}) => {
+import { jsx as e, jsxs as r, Fragment as ne } from "react/jsx-runtime";
+import K, { forwardRef as Le, createElement as be, useRef as Te, useEffect as se, useState as B, useMemo as Ne, useCallback as ge, createContext as Se } from "react";
+import { useNavigate as Ce, useInRouterContext as ye } from "react-router-dom";
+const Ve = async (a, n = {}) => {
   try {
-    return await Te(a.apiKey);
+    return await je(a.apiKey);
   } catch (i) {
     return console.error("API Error:", i), {
       status: "error",
       message: i instanceof Error ? i.message : "Failed to fetch templates"
     };
   }
-}, Te = async (a) => {
+}, je = async (a) => {
   const n = await fetch(
     "https://wpapi.trustsignal.io/api/v1/template?page=1&limit=100",
     {
@@ -54,7 +54,7 @@ const Le = async (a, n = {}) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var Se = {
+var Ue = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -71,31 +71,31 @@ var Se = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ve = (a) => a.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim(), q = (a, n) => {
-  const i = Ce(
+const Ae = (a) => a.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim(), H = (a, n) => {
+  const i = Le(
     ({
       color: l = "currentColor",
       size: d = 24,
-      strokeWidth: f = 2,
+      strokeWidth: p = 2,
       absoluteStrokeWidth: m,
-      className: N = "",
-      children: w,
-      ...h
-    }, g) => fe(
+      className: C = "",
+      children: g,
+      ...f
+    }, y) => be(
       "svg",
       {
-        ref: g,
-        ...Se,
+        ref: y,
+        ...Ue,
         width: d,
         height: d,
         stroke: l,
-        strokeWidth: m ? Number(f) * 24 / Number(d) : f,
-        className: ["lucide", `lucide-${Ve(a)}`, N].join(" "),
-        ...h
+        strokeWidth: m ? Number(p) * 24 / Number(d) : p,
+        className: ["lucide", `lucide-${Ae(a)}`, C].join(" "),
+        ...f
       },
       [
-        ...n.map(([S, V]) => fe(S, V)),
-        ...Array.isArray(w) ? w : [w]
+        ...n.map(([j, U]) => be(j, U)),
+        ...Array.isArray(g) ? g : [g]
       ]
     )
   );
@@ -107,7 +107,7 @@ const Ve = (a) => a.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim(),
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ie = q("AlertCircle", [
+const ce = H("AlertCircle", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
@@ -118,7 +118,7 @@ const ie = q("AlertCircle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const je = q("ArrowRight", [
+const Re = H("ArrowRight", [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ]);
@@ -128,7 +128,7 @@ const je = q("ArrowRight", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ue = q("ExternalLink", [
+const Be = H("ExternalLink", [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
@@ -139,7 +139,7 @@ const Ue = q("ExternalLink", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ae = q("FileText", [
+const Ie = H("FileText", [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
@@ -152,7 +152,7 @@ const Ae = q("FileText", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Re = q("FileVideo", [
+const ze = H("FileVideo", [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "m10 11 5 3-5 3v-6Z", key: "7ntvm4" }]
@@ -163,7 +163,7 @@ const Re = q("FileVideo", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ie = q("Link", [
+const Oe = H("Link", [
   ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
   ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
 ]);
@@ -173,7 +173,7 @@ const Ie = q("Link", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const re = q("MessageCircle", [
+const le = H("MessageCircle", [
   ["path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", key: "vv11sd" }]
 ]);
 /**
@@ -182,7 +182,7 @@ const re = q("MessageCircle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ke = q("Phone", [
+const Me = H("Phone", [
   [
     "path",
     {
@@ -197,7 +197,7 @@ const ke = q("Phone", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const te = q("Plus", [
+const de = H("Plus", [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ]);
@@ -207,7 +207,7 @@ const te = q("Plus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Be = q("Reply", [
+const Pe = H("Reply", [
   ["polyline", { points: "9 17 4 12 9 7", key: "hvgpf2" }],
   ["path", { d: "M20 18v-2a4 4 0 0 0-4-4H4", key: "5vmcpk" }]
 ]);
@@ -217,7 +217,7 @@ const Be = q("Reply", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const me = q("Smile", [
+const xe = H("Smile", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M8 14s1.5 2 4 2 4-2 4-2", key: "1y1vjs" }],
   ["line", { x1: "9", x2: "9.01", y1: "9", y2: "9", key: "yxxnd0" }],
@@ -229,7 +229,7 @@ const me = q("Smile", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ze = q("Upload", [
+const _e = H("Upload", [
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
   ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
@@ -240,7 +240,7 @@ const ze = q("Upload", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pe = q("Workflow", [
+const Fe = H("Workflow", [
   ["rect", { width: "8", height: "8", x: "3", y: "3", rx: "2", key: "by2w9f" }],
   ["path", { d: "M7 11v4a2 2 0 0 0 2 2h4", key: "xkn7yn" }],
   ["rect", { width: "8", height: "8", x: "13", y: "13", rx: "2", key: "1cgmvn" }]
@@ -251,18 +251,18 @@ const Pe = q("Workflow", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const J = q("X", [
+const ee = H("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ]);
-function ce({ isOpen: a, onClose: n, title: i, children: l }) {
-  const d = Me(null);
-  return ee(() => {
-    const f = (m) => {
+function pe({ isOpen: a, onClose: n, title: i, children: l }) {
+  const d = Te(null);
+  return se(() => {
+    const p = (m) => {
       d.current && !d.current.contains(m.target) && n();
     };
-    return a && document.addEventListener("mousedown", f), () => {
-      document.removeEventListener("mousedown", f);
+    return a && document.addEventListener("mousedown", p), () => {
+      document.removeEventListener("mousedown", p);
     };
   }, [a, n]), a ? /* @__PURE__ */ e("div", { className: "rsp-fixed rsp-inset-0 rsp-bg-black rsp-bg-opacity-50 rsp-flex rsp-items-center rsp-justify-center rsp-p-4 rsp-z-50", children: /* @__PURE__ */ r("div", { ref: d, className: "rsp-bg-white rsp-rounded-lg rsp-shadow-xl rsp-w-full rsp-max-w-[600px] rsp-animate-modal-appear", style: { backgroundColor: "#f5f7fc" }, children: [
     /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between rsp-px-6 rsp-py-4 rsp-border-b", children: [
@@ -272,58 +272,58 @@ function ce({ isOpen: a, onClose: n, title: i, children: l }) {
         {
           onClick: n,
           className: "rsp-p-1 hover:rsp-bg-gray-100 rsp-rounded-full",
-          children: /* @__PURE__ */ e(J, { className: "rsp-w-5 rsp-h-5 rsp-text-gray-500" })
+          children: /* @__PURE__ */ e(ee, { className: "rsp-w-5 rsp-h-5 rsp-text-gray-500" })
         }
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "rsp-px-6 rsp-py-4 rsp-overflow-y-auto rsp-max-h-[70vh] rsp-break-words rsp-whitespace-pre-wrap", children: l })
   ] }) }) : null;
 }
-function ha() {
-  const a = ve(), [n, i] = I([]), [l, d] = I(!0), [f, m] = I(null), [N, w] = I(() => {
-    const p = localStorage.getItem("account");
-    return p ? JSON.parse(p) : {
+function ga() {
+  const a = Ce(), [n, i] = B([]), [l, d] = B(!0), [p, m] = B(null), [C, g] = B(() => {
+    const c = localStorage.getItem("account");
+    return c ? JSON.parse(c) : {
       apiKey: ""
     };
-  }), [h, g] = I(""), [S, V] = I("all"), [M, v] = I("all"), [x, b] = I("all"), [t, u] = I(1), k = 20, [E, U] = I({ isOpen: !1 });
-  ee(() => {
+  }), [f, y] = B(""), [j, U] = B("all"), [k, N] = B("all"), [o, u] = B("all"), [t, h] = B(1), v = 20, [V, R] = B({ isOpen: !1 });
+  se(() => {
     (async () => {
       try {
-        if (m(null), d(!0), i([]), !N.apiKey) {
+        if (m(null), d(!0), i([]), !C.apiKey) {
           m("Please enter your TrustSignal API key"), d(!1);
           return;
         }
-        const L = await Le(N, {
+        const M = await Ve(C, {
           limit: 1e3
         });
-        if (L.status === "error")
-          throw new Error(L.message);
-        i(L.data);
-      } catch (L) {
-        m(L instanceof Error ? L.message : "Failed to fetch templates"), i([]);
+        if (M.status === "error")
+          throw new Error(M.message);
+        i(M.data);
+      } catch (M) {
+        m(M instanceof Error ? M.message : "Failed to fetch templates"), i([]);
       } finally {
         d(!1);
       }
     })();
-  }, [N]);
-  const B = (p) => {
-    const { name: L, value: A } = p.target, T = {
-      ...N,
-      [L]: A
+  }, [C]);
+  const I = (c) => {
+    const { name: M, value: A } = c.target, O = {
+      ...C,
+      [M]: A
     };
-    w(T), localStorage.setItem("account", JSON.stringify(T));
-  }, s = (p, L) => {
-    U({
+    g(O), localStorage.setItem("account", JSON.stringify(O));
+  }, x = (c, M) => {
+    R({
       isOpen: !0,
-      url: p,
-      templateName: L
+      url: c,
+      templateName: M
     });
-  }, c = () => {
-    U({ isOpen: !1 });
-  }, o = n.filter((p) => {
-    const L = h.trim(), A = L.toLowerCase(), T = L === "" || p.id.toString().includes(L) || p.name.toLowerCase().includes(A), Y = S === "all" || p.status.toLowerCase() === S.toLowerCase(), z = M === "all" || p.category.toLowerCase() === M.toLowerCase(), G = x === "all" || p.language.toLowerCase().startsWith(x.toLowerCase());
-    return T && Y && z && G;
-  }), y = Math.ceil(o.length / k), C = (t - 1) * k, j = C + k, R = o.slice(C, j);
+  }, w = () => {
+    R({ isOpen: !1 });
+  }, L = n.filter((c) => {
+    const M = f.trim(), A = M.toLowerCase(), O = M === "" || c.id.toString().includes(M) || c.name.toLowerCase().includes(A), $ = j === "all" || c.status.toLowerCase() === j.toLowerCase(), X = k === "all" || c.category.toLowerCase() === k.toLowerCase(), S = o === "all" || c.language.toLowerCase().startsWith(o.toLowerCase());
+    return O && $ && X && S;
+  }), s = Math.ceil(L.length / v), b = (t - 1) * v, E = b + v, T = L.slice(b, E);
   return l ? /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center rsp-justify-center rsp-min-h-screen", children: /* @__PURE__ */ e("div", { className: "rsp-text-lg rsp-text-gray-600", children: "Loading templates..." }) }) : /* @__PURE__ */ r("div", { className: "rsp-container rsp-mx-auto rsp-px-4 rsp-py-8 rsp-bg-[#f5f7fc] rsp-rounded-lg rsp-shadow-sm", children: [
     /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between rsp-items-center rsp-mb-6", children: [
       /* @__PURE__ */ e("h1", { className: "rsp-text-2xl rsp-font-bold", children: "Whatsapp HSM Templates" }),
@@ -332,7 +332,7 @@ function ha() {
         {
           onClick: () => a("/create"),
           className: "rsp-bg-blue-600 rsp-text-white rsp-p-1 rsp-rounded-full hover:rsp-bg-blue-700 rsp-flex rsp-items-center rsp-gap-2",
-          children: /* @__PURE__ */ e(te, { className: "rsp-w-6 rsp-h-6" })
+          children: /* @__PURE__ */ e(de, { className: "rsp-w-6 rsp-h-6" })
         }
       )
     ] }),
@@ -344,8 +344,8 @@ function ha() {
           {
             type: "password",
             name: "apiKey",
-            value: N.apiKey,
-            onChange: B,
+            value: C.apiKey,
+            onChange: I,
             className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent",
             placeholder: "Enter your TrustSignal API key"
           }
@@ -353,17 +353,17 @@ function ha() {
         /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-bottom-0 rsp-left-0 rsp-w-4 rsp-h-0.5 rsp-bg-red-500" })
       ] })
     ] }) }),
-    f && /* @__PURE__ */ e("div", { className: "rsp-bg-red-50 rsp-border-l-4 rsp-border-red-500 rsp-p-4 rsp-mb-6", children: /* @__PURE__ */ r("div", { className: "rsp-flex", children: [
-      /* @__PURE__ */ e("div", { className: "rsp-flex-shrink-0", children: /* @__PURE__ */ e(ie, { className: "rsp-h-5 rsp-w-5 rsp-text-red-400" }) }),
-      /* @__PURE__ */ e("div", { className: "rsp-ml-3", children: /* @__PURE__ */ e("p", { className: "rsp-text-sm rsp-text-red-700", children: f }) })
+    p && /* @__PURE__ */ e("div", { className: "rsp-bg-red-50 rsp-border-l-4 rsp-border-red-500 rsp-p-4 rsp-mb-6", children: /* @__PURE__ */ r("div", { className: "rsp-flex", children: [
+      /* @__PURE__ */ e("div", { className: "rsp-flex-shrink-0", children: /* @__PURE__ */ e(ce, { className: "rsp-h-5 rsp-w-5 rsp-text-red-400" }) }),
+      /* @__PURE__ */ e("div", { className: "rsp-ml-3", children: /* @__PURE__ */ e("p", { className: "rsp-text-sm rsp-text-red-700", children: p }) })
     ] }) }),
     /* @__PURE__ */ e("div", { className: "rsp-mb-6", children: /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         placeholder: "Search by name or ID...",
-        value: h,
-        onChange: (p) => g(p.target.value),
+        value: f,
+        onChange: (c) => y(c.target.value),
         className: "rsp-w-full rsp-px-0 rsp-py-3 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent"
       }
     ) }) }),
@@ -376,10 +376,10 @@ function ha() {
           /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center", children: /* @__PURE__ */ r(
             "select",
             {
-              value: M,
-              onChange: (p) => v(p.target.value),
+              value: k,
+              onChange: (c) => N(c.target.value),
               className: "rsp-cursor-pointer rsp-ml-2 rsp-bg-transparent rsp-text-white rsp-border-0 rsp-text-sm focus:rsp-outline-none ",
-              onClick: (p) => p.stopPropagation(),
+              onClick: (c) => c.stopPropagation(),
               children: [
                 /* @__PURE__ */ e("option", { value: "all", className: "rsp-text-gray-900", children: "All" }),
                 /* @__PURE__ */ e("option", { value: "utility", className: "rsp-text-gray-900", children: "Utility" }),
@@ -395,10 +395,10 @@ function ha() {
           /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center", children: /* @__PURE__ */ r(
             "select",
             {
-              value: S,
-              onChange: (p) => V(p.target.value),
+              value: j,
+              onChange: (c) => U(c.target.value),
               className: "rsp-cursor-pointer rsp-ml-2 rsp-bg-transparent rsp-text-white rsp-border-0 rsp-text-sm focus:rsp-outline-none",
-              onClick: (p) => p.stopPropagation(),
+              onClick: (c) => c.stopPropagation(),
               children: [
                 /* @__PURE__ */ e("option", { value: "all", className: "rsp-text-gray-900", children: "All" }),
                 /* @__PURE__ */ e("option", { value: "pending", className: "rsp-text-gray-900", children: "Pending" }),
@@ -412,26 +412,26 @@ function ha() {
         /* @__PURE__ */ e("th", { className: "rsp-px-6 rsp-py-3 rsp-text-left rsp-text-sm rsp-font-medium", children: "Updated" }),
         /* @__PURE__ */ e("th", { className: "rsp-px-6 rsp-py-3 rsp-text-left rsp-text-sm rsp-font-medium", children: "Media" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: R.length > 0 ? R.map((p, L) => {
+      /* @__PURE__ */ e("tbody", { children: T.length > 0 ? T.map((c, M) => {
         var A;
         return /* @__PURE__ */ r(
           "tr",
           {
-            className: `rsp-border-b rsp-border-gray-200 ${L % 2 === 0 ? "rsp-bg-white" : "rsp-bg-blue-50"} hover:rsp-bg-blue-100 rsp-transition-colors`,
+            className: `rsp-border-b rsp-border-gray-200 ${M % 2 === 0 ? "rsp-bg-white" : "rsp-bg-blue-50"} hover:rsp-bg-blue-100 rsp-transition-colors`,
             children: [
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-900", children: p.id }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-900 rsp-font-medium", children: p.name }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700 rsp-capitalize", children: p.category }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: p.language }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: p.type }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-900", children: c.id }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-900 rsp-font-medium", children: c.name }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700 rsp-capitalize", children: c.category }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: c.language }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: c.type }),
               /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4", children: /* @__PURE__ */ e("span", { className: `rsp-inline-flex rsp-px-3 rsp-py-1 rsp-rounded-full rsp-text-xs rsp-font-medium
-                        ${p.status.toLowerCase() === "approved" ? "rsp-bg-green-100 rsp-text-green-800" : p.status.toLowerCase() === "rejected" ? "rsp-bg-red-100 rsp-text-red-800" : "rsp-bg-yellow-100 rsp-text-yellow-800"}`, children: p.status }) }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: p.creation_time ? new Date(p.creation_time).toLocaleDateString() : "N/A" }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: p.updation_time ? new Date(p.updation_time).toLocaleDateString() : "N/A" }),
-              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: (A = p.medialist) != null && A.header ? /* @__PURE__ */ r(
+                        ${c.status.toLowerCase() === "approved" ? "rsp-bg-green-100 rsp-text-green-800" : c.status.toLowerCase() === "rejected" ? "rsp-bg-red-100 rsp-text-red-800" : "rsp-bg-yellow-100 rsp-text-yellow-800"}`, children: c.status }) }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: c.creation_time ? new Date(c.creation_time).toLocaleDateString() : "N/A" }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: c.updation_time ? new Date(c.updation_time).toLocaleDateString() : "N/A" }),
+              /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: (A = c.medialist) != null && A.header ? /* @__PURE__ */ r(
                 "button",
                 {
-                  onClick: () => s(p.medialist.header, p.name),
+                  onClick: () => x(c.medialist.header, c.name),
                   className: "rsp-inline-flex rsp-items-center rsp-px-3 rsp-py-1 rsp-rounded rsp-text-xs rsp-font-medium rsp-bg-blue-100 rsp-text-blue-800 hover:rsp-bg-blue-200 rsp-transition-colors",
                   children: [
                     /* @__PURE__ */ r("svg", { className: "rsp-w-3 rsp-h-3 rsp-mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
@@ -444,25 +444,25 @@ function ha() {
               ) : /* @__PURE__ */ e("span", { className: "rsp-inline-flex rsp-px-2 rsp-py-1 rsp-rounded-full rsp-text-xs rsp-font-medium rsp-bg-gray-100 rsp-text-gray-800", children: "No Media" }) })
             ]
           },
-          p.id
+          c.id
         );
       }) : /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 9, className: "rsp-px-6 rsp-py-8 rsp-text-center rsp-text-gray-500", children: "No templates found" }) }) })
     ] }) }) }),
-    R.length > 0 && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between rsp-items-center rsp-mt-6 rsp-px-6 rsp-py-4 rsp-bg-white rsp-rounded-lg rsp-shadow-sm rsp-border rsp-border-gray-200", children: [
+    T.length > 0 && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between rsp-items-center rsp-mt-6 rsp-px-6 rsp-py-4 rsp-bg-white rsp-rounded-lg rsp-shadow-sm rsp-border rsp-border-gray-200", children: [
       /* @__PURE__ */ r("div", { className: "rsp-text-sm rsp-text-gray-700", children: [
         "Showing ",
-        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: C + 1 }),
+        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: b + 1 }),
         " to ",
-        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: Math.min(j, o.length) }),
+        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: Math.min(E, L.length) }),
         " of ",
-        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: o.length }),
+        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: L.length }),
         " results"
       ] }),
       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => u((p) => Math.max(p - 1, 1)),
+            onClick: () => h((c) => Math.max(c - 1, 1)),
             disabled: t === 1,
             className: "rsp-px-4 rsp-py-2 rsp-text-sm rsp-font-medium rsp-text-gray-700 rsp-bg-white rsp-border rsp-border-gray-300 rsp-rounded-md hover:rsp-bg-gray-50 disabled:rsp-opacity-50 disabled:rsp-cursor-not-allowed rsp-transition-colors",
             children: "Previous"
@@ -472,13 +472,13 @@ function ha() {
           "Page ",
           t,
           " of ",
-          y
+          s
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => u((p) => Math.min(p + 1, y)),
-            disabled: t === y,
+            onClick: () => h((c) => Math.min(c + 1, s)),
+            disabled: t === s,
             className: "rsp-px-4 rsp-py-2 rsp-text-sm rsp-font-medium rsp-text-gray-700 rsp-bg-white rsp-border rsp-border-gray-300 rsp-rounded-md hover:rsp-bg-gray-50 disabled:rsp-opacity-50 disabled:rsp-cursor-not-allowed rsp-transition-colors",
             children: "Next"
           }
@@ -486,30 +486,30 @@ function ha() {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      ce,
+      pe,
       {
-        isOpen: E.isOpen,
-        onClose: c,
-        title: `Media - ${E.templateName || "Template"}`,
+        isOpen: V.isOpen,
+        onClose: w,
+        title: `Media - ${V.templateName || "Template"}`,
         children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
-          E.url && /* @__PURE__ */ r("div", { className: "rsp-text-center", children: [
+          V.url && /* @__PURE__ */ r("div", { className: "rsp-text-center", children: [
             /* @__PURE__ */ r("div", { className: "rsp-relative rsp-bg-gray-50 rsp-rounded-lg rsp-p-4 rsp-min-h-[200px] rsp-flex rsp-items-center rsp-justify-center", children: [
               /* @__PURE__ */ e(
                 "img",
                 {
-                  src: E.url,
+                  src: V.url,
                   alt: "Template media",
                   className: "rsp-max-w-full rsp-max-h-[400px] rsp-mx-auto rsp-rounded-lg rsp-shadow-md rsp-object-contain",
-                  onLoad: (p) => {
+                  onLoad: (c) => {
                     var A;
-                    const L = (A = p.currentTarget.parentElement) == null ? void 0 : A.querySelector(".loading-placeholder");
-                    L && (L.style.display = "none");
+                    const M = (A = c.currentTarget.parentElement) == null ? void 0 : A.querySelector(".loading-placeholder");
+                    M && (M.style.display = "none");
                   },
-                  onError: (p) => {
+                  onError: (c) => {
                     var A;
-                    p.currentTarget.style.display = "none";
-                    const L = (A = p.currentTarget.parentElement) == null ? void 0 : A.querySelector(".error-placeholder");
-                    L && (L.style.display = "block");
+                    c.currentTarget.style.display = "none";
+                    const M = (A = c.currentTarget.parentElement) == null ? void 0 : A.querySelector(".error-placeholder");
+                    M && (M.style.display = "block");
                   }
                 }
               ),
@@ -521,13 +521,13 @@ function ha() {
             ] }),
             /* @__PURE__ */ r("div", { className: "rsp-mt-4 rsp-p-3 rsp-bg-gray-50 rsp-rounded-lg", children: [
               /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-600 rsp-mb-1", children: "Media URL:" }),
-              /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-800 rsp-break-all rsp-font-mono", children: E.url })
+              /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-800 rsp-break-all rsp-font-mono", children: V.url })
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-end rsp-pt-4", children: /* @__PURE__ */ r(
             "a",
             {
-              href: E.url,
+              href: V.url,
               target: "_blank",
               rel: "noopener noreferrer",
               className: "rsp-inline-flex rsp-items-center rsp-px-4 rsp-py-2 rsp-bg-blue-600 rsp-text-white rsp-text-sm rsp-font-medium rsp-rounded-md hover:rsp-bg-blue-700 rsp-transition-colors",
@@ -542,64 +542,64 @@ function ha() {
     )
   ] });
 }
-const Oe = async (a, n) => {
-  var i, l, d, f, m, N, w;
+const De = async (a, n) => {
+  var i, l, d, p, m, C, g;
   try {
     console.log("Creating template with data:", n);
-    const h = n.language, g = n.headerType === "MEDIA" && n.mediaType === "DOCUMENT", S = n.type === "CAROUSEL";
-    let V = "";
-    g ? V = _e(n, h) : S ? V = Fe(n, h) : V = qe(n, h), console.log("Raw JSON string being sent:", V);
-    const M = {
+    const f = n.language, y = n.headerType === "MEDIA" && n.mediaType === "DOCUMENT", j = n.type === "CAROUSEL";
+    let U = "";
+    y ? U = qe(n, f) : j ? U = He(n, f) : U = Ge(n, f), console.log("Raw JSON string being sent:", U);
+    const k = {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
-      body: V,
+      body: U,
       redirect: "follow"
     };
     console.log(
       "Making request to:",
       `https://wpapi.trustsignal.io/api/v1/template?api_key=${a}`
-    ), console.log("Request options:", M);
-    const v = await fetch(
+    ), console.log("Request options:", k);
+    const N = await fetch(
       `https://wpapi.trustsignal.io/api/v1/template?api_key=${a}`,
-      M
+      k
     );
-    console.log("Response status:", v.status), console.log(
+    console.log("Response status:", N.status), console.log(
       "Response headers:",
-      Object.fromEntries(v.headers.entries())
+      Object.fromEntries(N.headers.entries())
     );
-    const x = await v.text();
-    console.log("Raw response:", x);
-    const b = JSON.parse(x);
-    if (console.log("Parsed response:", b), !b.success)
-      throw new Error(b.message || "Template creation failed");
+    const o = await N.text();
+    console.log("Raw response:", o);
+    const u = JSON.parse(o);
+    if (console.log("Parsed response:", u), !u.success)
+      throw new Error(u.message || "Template creation failed");
     return {
       status: "success",
       message: "Template created successfully",
       data: {
-        template: b.template,
+        template: u.template,
         details: [
           {
-            template_name: ((i = b.template) == null ? void 0 : i.name) || n.name,
-            template_id: ((l = b.template) == null ? void 0 : l.id) || "unknown",
-            meta_tid: (d = b.template) == null ? void 0 : d.meta_tid,
-            status: (f = b.template) == null ? void 0 : f.status,
-            quality: (m = b.template) == null ? void 0 : m.quality,
-            temp_route: (N = b.template) == null ? void 0 : N.temp_route,
-            temptype: (w = b.template) == null ? void 0 : w.temptype
+            template_name: ((i = u.template) == null ? void 0 : i.name) || n.name,
+            template_id: ((l = u.template) == null ? void 0 : l.id) || "unknown",
+            meta_tid: (d = u.template) == null ? void 0 : d.meta_tid,
+            status: (p = u.template) == null ? void 0 : p.status,
+            quality: (m = u.template) == null ? void 0 : m.quality,
+            temp_route: (C = u.template) == null ? void 0 : C.temp_route,
+            temptype: (g = u.template) == null ? void 0 : g.temptype
           }
         ]
       }
     };
-  } catch (h) {
-    return console.error("TrustSignal API Error:", h), {
+  } catch (f) {
+    return console.error("TrustSignal API Error:", f), {
       status: "error",
-      message: h instanceof Error ? h.message : "Failed to create template"
+      message: f instanceof Error ? f.message : "Failed to create template"
     };
   }
-}, _e = (a, n) => {
-  var f, m;
+}, qe = (a, n) => {
+  var p, m;
   const i = {
     name: a.name,
     lang: n,
@@ -613,14 +613,14 @@ const Oe = async (a, n) => {
     type: "HEADER",
     format: "DOCUMENT"
   }));
-  const l = X(a.body), d = {
+  const l = J(a.body), d = {
     type: "BODY",
     text: a.body
   };
-  if (l.length > 0 && ((f = a.sampleContent) != null && f.bodyVariables)) {
-    const N = de(a, l);
+  if (l.length > 0 && ((p = a.sampleContent) != null && p.bodyVariables)) {
+    const C = oe(a, l);
     d.example = {
-      body_text: [N]
+      body_text: [C]
       // This creates the required nested array
     };
   }
@@ -628,34 +628,34 @@ const Oe = async (a, n) => {
     type: "FOOTER",
     text: a.footer
   }), a.buttons && a.buttons.length > 0) {
-    const N = a.buttons.map((w) => {
-      var g;
-      const h = {
-        type: w.type === "CALL" ? "PHONE_NUMBER" : w.type,
-        text: w.text
+    const C = a.buttons.map((g) => {
+      var y;
+      const f = {
+        type: g.type === "CALL" ? "PHONE_NUMBER" : g.type,
+        text: g.text
       };
-      if (w.type === "URL" && w.value && (h.url = w.value, w.urlType === "dynamic" && w.value.includes("{{"))) {
-        const S = X(w.value);
-        if (S.length > 0 && ((g = a.sampleContent) != null && g.buttonVariables)) {
-          const V = S.map(
-            ({ number: M }) => {
-              var v, x;
-              return ((x = (v = a.sampleContent) == null ? void 0 : v.buttonVariables) == null ? void 0 : x[M]) || `sample${M}`;
+      if (g.type === "URL" && g.value && (f.url = g.value, g.urlType === "dynamic" && g.value.includes("{{"))) {
+        const j = J(g.value);
+        if (j.length > 0 && ((y = a.sampleContent) != null && y.buttonVariables)) {
+          const U = j.map(
+            ({ number: k }) => {
+              var N, o;
+              return ((o = (N = a.sampleContent) == null ? void 0 : N.buttonVariables) == null ? void 0 : o[k]) || `sample${k}`;
             }
           );
-          h.example = V;
+          f.example = U;
         }
       }
-      return (w.type === "CALL" || w.type === "PHONE_NUMBER") && w.value && (h.phone_number = w.value.startsWith("+") ? w.value : `+${w.value}`), h;
+      return (g.type === "CALL" || g.type === "PHONE_NUMBER") && g.value && (f.phone_number = g.value.startsWith("+") ? g.value : `+${g.value}`), f;
     });
     i.components.push({
       type: "BUTTONS",
-      buttons: N
+      buttons: C
     });
   }
   return JSON.stringify(i);
-}, Fe = (a, n) => {
-  var m, N, w;
+}, He = (a, n) => {
+  var m, C, g;
   const i = {
     name: a.name,
     lang: n,
@@ -663,69 +663,69 @@ const Oe = async (a, n) => {
     shortlink: a.enableClickTracking ? "1" : "0",
     components: []
   };
-  (m = a.carousel) != null && m.cards.length && (i.media = {}, a.carousel.cards.forEach((h, g) => {
-    h.mediaUrl && (i.media[`card${g}header`] = h.mediaUrl);
+  (m = a.carousel) != null && m.cards.length && (i.media = {}, a.carousel.cards.forEach((f, y) => {
+    f.mediaUrl && (i.media[`card${y}header`] = f.mediaUrl);
   }));
-  const l = [], d = X(a.body), f = {
+  const l = [], d = J(a.body), p = {
     type: "BODY",
     text: a.body,
-    ...d.length > 0 && ((N = a.sampleContent) == null ? void 0 : N.bodyVariables) && {
+    ...d.length > 0 && ((C = a.sampleContent) == null ? void 0 : C.bodyVariables) && {
       example: {
-        body_text: [de(a, d)]
+        body_text: [oe(a, d)]
       }
     }
   };
-  if (l.push(f), (w = a.carousel) != null && w.cards.length) {
-    const h = {
+  if (l.push(p), (g = a.carousel) != null && g.cards.length) {
+    const f = {
       type: "CAROUSEL",
-      cards: a.carousel.cards.map((g, S) => {
-        var V;
+      cards: a.carousel.cards.map((y, j) => {
+        var U;
         return {
           components: [
             {
               type: "HEADER",
-              format: ((V = a.carousel) == null ? void 0 : V.type) || "IMAGE"
+              format: ((U = a.carousel) == null ? void 0 : U.type) || "IMAGE"
             },
             {
               type: "BODY",
-              text: g.body,
-              ...X(g.body).length > 0 && {
+              text: y.body,
+              ...J(y.body).length > 0 && {
                 example: {
-                  body_text: [De(g)]
+                  body_text: [$e(y)]
                 }
               }
             },
-            ...g.buttons.length > 0 ? [{
+            ...y.buttons.length > 0 ? [{
               type: "BUTTONS",
-              buttons: g.buttons.map((M) => {
-                var x;
-                const v = {
-                  type: M.type === "CALL" ? "PHONE_NUMBER" : M.type,
-                  text: M.text
+              buttons: y.buttons.map((k) => {
+                var o;
+                const N = {
+                  type: k.type === "CALL" ? "PHONE_NUMBER" : k.type,
+                  text: k.text
                 };
-                if (M.type === "URL" && M.value && (v.url = M.value, M.urlType === "dynamic" && M.value.includes("{{"))) {
-                  const b = X(M.value);
-                  if (b.length > 0) {
-                    const t = ((x = g == null ? void 0 : g.sampleContent) == null ? void 0 : x.buttonVariables) || {}, u = b.map(({ number: k }) => t[k] || `sample${k}`);
-                    v.example = u;
+                if (k.type === "URL" && k.value && (N.url = k.value, k.urlType === "dynamic" && k.value.includes("{{"))) {
+                  const u = J(k.value);
+                  if (u.length > 0) {
+                    const t = ((o = y == null ? void 0 : y.sampleContent) == null ? void 0 : o.buttonVariables) || {}, h = u.map(({ number: v }) => t[v] || `sample${v}`);
+                    N.example = h;
                   }
                 }
-                return (M.type === "CALL" || M.type === "PHONE_NUMBER") && M.value && (v.phone_number = M.value), console.log("Carousel card button data:", v), v;
+                return (k.type === "CALL" || k.type === "PHONE_NUMBER") && k.value && (N.phone_number = k.value), console.log("Carousel card button data:", N), N;
               })
             }] : []
           ]
         };
       })
     };
-    l.push(h);
+    l.push(f);
   }
   return i.components = l, JSON.stringify(i);
-}, De = (a) => {
+}, $e = (a) => {
   var l;
-  const n = X(a.body || ""), i = ((l = a == null ? void 0 : a.sampleContent) == null ? void 0 : l.bodyVariables) || {};
+  const n = J(a.body || ""), i = ((l = a == null ? void 0 : a.sampleContent) == null ? void 0 : l.bodyVariables) || {};
   return n.map(({ number: d }) => i[d] || `Sample ${d}`);
-}, qe = (a, n) => {
-  var m, N;
+}, Ge = (a, n) => {
+  var m, C;
   const i = {
     name: a.name,
     lang: n,
@@ -739,91 +739,91 @@ const Oe = async (a, n) => {
   const l = [];
   if (a.type !== "CAROUSEL") {
     if (a.headerType === "TEXT" && a.headerText) {
-      const w = X(a.headerText), h = {
+      const g = J(a.headerText), f = {
         type: "HEADER",
         format: "TEXT",
         text: a.headerText,
-        ...w.length > 0 && ((m = a.sampleContent) == null ? void 0 : m.headerVariables) && {
+        ...g.length > 0 && ((m = a.sampleContent) == null ? void 0 : m.headerVariables) && {
           example: {
-            header_text: He(a, w)
+            header_text: We(a, g)
           }
         }
       };
-      l.push(h);
+      l.push(f);
     } else if (a.headerType === "MEDIA") {
-      const w = {
+      const g = {
         type: "HEADER",
         format: a.mediaType || "IMAGE"
       };
-      l.push(w);
+      l.push(g);
     }
   }
-  const d = X(a.body), f = {
+  const d = J(a.body), p = {
     type: "BODY",
     text: a.body,
-    ...d.length > 0 && ((N = a.sampleContent) == null ? void 0 : N.bodyVariables) && {
+    ...d.length > 0 && ((C = a.sampleContent) == null ? void 0 : C.bodyVariables) && {
       example: {
-        body_text: [de(a, d)]
+        body_text: [oe(a, d)]
       }
     }
   };
-  if (l.push(f), a.footer && a.type !== "CAROUSEL" && l.push({
+  if (l.push(p), a.footer && a.type !== "CAROUSEL" && l.push({
     type: "FOOTER",
     text: a.footer
   }), a.buttons.length > 0) {
-    const w = a.buttons.map((h) => {
-      var S;
-      const g = {
-        type: h.type === "CALL" ? "PHONE_NUMBER" : h.type,
-        text: h.text
+    const g = a.buttons.map((f) => {
+      var j;
+      const y = {
+        type: f.type === "CALL" ? "PHONE_NUMBER" : f.type,
+        text: f.text
       };
-      if (h.type === "URL" && h.value && (g.url = h.value, h.urlType === "dynamic" && h.value.includes("{{"))) {
-        const V = X(h.value);
-        if (V.length > 0 && ((S = a.sampleContent) != null && S.buttonVariables)) {
-          const M = V.map(
-            ({ number: v }) => {
-              var x, b;
-              return ((b = (x = a.sampleContent) == null ? void 0 : x.buttonVariables) == null ? void 0 : b[v]) || `sample${v}`;
+      if (f.type === "URL" && f.value && (y.url = f.value, f.urlType === "dynamic" && f.value.includes("{{"))) {
+        const U = J(f.value);
+        if (U.length > 0 && ((j = a.sampleContent) != null && j.buttonVariables)) {
+          const k = U.map(
+            ({ number: N }) => {
+              var o, u;
+              return ((u = (o = a.sampleContent) == null ? void 0 : o.buttonVariables) == null ? void 0 : u[N]) || `sample${N}`;
             }
           );
-          g.example = M;
+          y.example = k;
         }
       }
-      return (h.type === "CALL" || h.type === "PHONE_NUMBER") && h.value && (g.phone_number = h.value), g;
+      return (f.type === "CALL" || f.type === "PHONE_NUMBER") && f.value && (y.phone_number = f.value), y;
     });
     l.push({
       type: "BUTTONS",
-      buttons: w
+      buttons: g
     });
   }
   return i.components = l, JSON.stringify(i);
-}, X = (a) => (a.match(/\{\{(\d+)\}\}/g) || []).map((i) => ({
+}, J = (a) => (a.match(/\{\{(\d+)\}\}/g) || []).map((i) => ({
   variable: i.replace(/[{}]/g, ""),
   number: i.replace(/[{}]/g, "")
-})), He = (a, n) => n.map(
+})), We = (a, n) => n.map(
   ({ number: i }) => {
     var l, d;
     return ((d = (l = a.sampleContent) == null ? void 0 : l.headerVariables) == null ? void 0 : d[i]) || `Sample ${i}`;
   }
-), de = (a, n) => n.map(
+), oe = (a, n) => n.map(
   ({ number: i }) => {
     var l, d;
     return ((d = (l = a.sampleContent) == null ? void 0 : l.bodyVariables) == null ? void 0 : d[i]) || `Sample ${i}`;
   }
-), $e = async (a, n) => {
+), Ke = async (a, n) => {
   try {
     if (!n.name || !n.body)
       throw new Error("Missing required template fields: name and body are required");
     if (!a.apiKey)
       throw new Error("Missing TrustSignal API key");
-    return await Oe(a.apiKey, n);
+    return await De(a.apiKey, n);
   } catch (i) {
     return console.error("API Error:", i), {
       status: "error",
       message: i instanceof Error ? i.message : "An unexpected error occurred while creating the template"
     };
   }
-}, Ge = [
+}, Qe = [
   { value: "af", label: "Afrikaans" },
   { value: "sq", label: "Albanian" },
   { value: "ar", label: "Arabic" },
@@ -888,118 +888,118 @@ const Oe = async (a, n) => {
   { value: "ur", label: "Urdu" },
   { value: "uz", label: "Uzbek" },
   { value: "vi", label: "Vietnamese" }
-], We = [
+], Ye = [
   { value: "NONE", label: "None" },
   { value: "TEXT", label: "Text" },
   { value: "MEDIA", label: "Media" }
-], Ke = [
+], Xe = [
   { value: "IMAGE", label: "Image" },
   { value: "VIDEO", label: "Video" },
   { value: "DOCUMENT", label: "Document" }
-], Qe = 5 * 1024 * 1024, Ye = 16 * 1024 * 1024, Xe = 100 * 1024 * 1024, se = ["jpg", "jpeg", "png"], ne = ["mp4", "3gpp"], le = ["pdf", "docx", "xlsx", "pptx", "txt"];
-function Je({ template: a, setTemplate: n, onFileUpload: i }) {
-  var U, B;
-  const [l, d] = Q.useState(null), [f, m] = Q.useState(!1), [N, w] = Q.useState(null), [h, g] = Q.useState(null), S = () => {
-    const c = (a.headerText || "").match(/{{\d+}}/g);
-    if (!c) return 0;
-    const o = c.map((y) => {
-      const C = y.match(/{{(\d+)}}/);
-      return C ? parseInt(C[1], 10) : 0;
+], Je = 5 * 1024 * 1024, Ze = 16 * 1024 * 1024, ea = 100 * 1024 * 1024, ie = ["jpg", "jpeg", "png"], te = ["mp4", "3gpp"], me = ["pdf", "docx", "xlsx", "pptx", "txt"];
+function aa({ template: a, setTemplate: n, onFileUpload: i }) {
+  var R, I;
+  const [l, d] = K.useState(null), [p, m] = K.useState(!1), [C, g] = K.useState(null), [f, y] = K.useState(null), j = () => {
+    const w = (a.headerText || "").match(/{{\d+}}/g);
+    if (!w) return 0;
+    const L = w.map((s) => {
+      const b = s.match(/{{(\d+)}}/);
+      return b ? parseInt(b[1], 10) : 0;
     });
-    return o.length > 0 ? Math.max(...o) : 0;
-  }, V = () => {
-    const o = `{{${S() + 1}}}`;
-    if (N && a.headerText.length + o.length <= 60) {
-      const y = N.selectionStart || a.headerText.length, C = a.headerText.substring(0, y), j = a.headerText.substring(y), R = C + o + j;
-      n({ ...a, headerText: R }), setTimeout(() => {
-        if (N) {
-          const p = y + o.length;
-          N.setSelectionRange(p, p), N.focus();
+    return L.length > 0 ? Math.max(...L) : 0;
+  }, U = () => {
+    const L = `{{${j() + 1}}}`;
+    if (C && a.headerText.length + L.length <= 60) {
+      const s = C.selectionStart || a.headerText.length, b = a.headerText.substring(0, s), E = a.headerText.substring(s), T = b + L + E;
+      n({ ...a, headerText: T }), setTimeout(() => {
+        if (C) {
+          const c = s + L.length;
+          C.setSelectionRange(c, c), C.focus();
         }
       }, 0);
     }
-  }, M = (s) => {
-    n((c) => ({
-      ...c,
-      headerType: s,
-      headerText: s === "TEXT" ? c.headerText : "",
-      mediaType: s === "MEDIA" ? c.mediaType || "IMAGE" : void 0,
-      mediaUrl: s === "MEDIA" ? c.mediaUrl : void 0
-    })), s !== "MEDIA" && (d(null), g(null));
-  }, v = (s) => {
-    var c;
-    return ((c = s.split("?")[0].split(".").pop()) == null ? void 0 : c.toLowerCase()) || "";
-  }, x = (s, c) => {
-    const o = v(s.name);
-    switch (c) {
+  }, k = (x) => {
+    n((w) => ({
+      ...w,
+      headerType: x,
+      headerText: x === "TEXT" ? w.headerText : "",
+      mediaType: x === "MEDIA" ? w.mediaType || "IMAGE" : void 0,
+      mediaUrl: x === "MEDIA" ? w.mediaUrl : void 0
+    })), x !== "MEDIA" && (d(null), y(null));
+  }, N = (x) => {
+    var w;
+    return ((w = x.split("?")[0].split(".").pop()) == null ? void 0 : w.toLowerCase()) || "";
+  }, o = (x, w) => {
+    const L = N(x.name);
+    switch (w) {
       case "IMAGE":
-        if (!se.includes(o)) return "Invalid format. Only JPG, JPEG, PNG are allowed.";
-        if (s.size > Qe) return "File is too large. Max size is 5 MB.";
+        if (!ie.includes(L)) return "Invalid format. Only JPG, JPEG, PNG are allowed.";
+        if (x.size > Je) return "File is too large. Max size is 5 MB.";
         break;
       case "VIDEO":
-        if (!ne.includes(o)) return "Invalid format. Only MP4, 3GPP are allowed.";
-        if (s.size > Ye) return "File is too large. Max size is 16 MB.";
+        if (!te.includes(L)) return "Invalid format. Only MP4, 3GPP are allowed.";
+        if (x.size > Ze) return "File is too large. Max size is 16 MB.";
         break;
       case "DOCUMENT":
-        if (!le.includes(o)) return "Invalid format. Allowed types: PDF, DOCX, XLSX, PPTX, TXT.";
-        if (s.size > Xe) return "File is too large. Max size is 100 MB.";
+        if (!me.includes(L)) return "Invalid format. Allowed types: PDF, DOCX, XLSX, PPTX, TXT.";
+        if (x.size > ea) return "File is too large. Max size is 100 MB.";
         break;
       default:
         return "Invalid media type.";
     }
     return null;
-  }, b = (s, c) => {
-    if (!s) return null;
-    const o = v(s);
-    switch (c) {
+  }, u = (x, w) => {
+    if (!x) return null;
+    const L = N(x);
+    switch (w) {
       case "IMAGE":
-        if (!se.includes(o)) return "URL does not point to a valid image (JPG, JPEG, PNG).";
+        if (!ie.includes(L)) return "URL does not point to a valid image (JPG, JPEG, PNG).";
         break;
       case "VIDEO":
-        if (!ne.includes(o)) return "URL does not point to a valid video (MP4, 3GPP).";
+        if (!te.includes(L)) return "URL does not point to a valid video (MP4, 3GPP).";
         break;
       case "DOCUMENT":
-        if (!le.includes(o)) return "URL does not point to a valid document.";
+        if (!me.includes(L)) return "URL does not point to a valid document.";
         break;
     }
     return null;
   }, t = () => {
-    d(null), n({ ...a, mediaUrl: "" }), g(null);
-  }, u = async (s) => {
-    var y;
-    const c = (y = s.target.files) == null ? void 0 : y[0];
-    if (!c || !a.mediaType) return;
-    g(null);
-    const o = x(c, a.mediaType);
-    if (o) {
-      g(o);
+    d(null), n({ ...a, mediaUrl: "" }), y(null);
+  }, h = async (x) => {
+    var s;
+    const w = (s = x.target.files) == null ? void 0 : s[0];
+    if (!w || !a.mediaType) return;
+    y(null);
+    const L = o(w, a.mediaType);
+    if (L) {
+      y(L);
       return;
     }
-    m(!0), d(c);
+    m(!0), d(w);
     try {
-      const C = await i(c);
-      n({ ...a, mediaUrl: C });
-    } catch (C) {
-      console.error("File upload failed:", C), t();
-      const j = C instanceof Error ? C.message : "File upload failed. Please try again.";
-      g(j);
+      const b = await i(w);
+      n({ ...a, mediaUrl: b });
+    } catch (b) {
+      console.error("File upload failed:", b), t();
+      const E = b instanceof Error ? b.message : "File upload failed. Please try again.";
+      y(E);
     } finally {
       m(!1);
     }
-  }, k = (s) => {
-    const c = s.target.value;
-    if (d(null), n({ ...a, mediaUrl: c }), a.mediaType) {
-      const o = b(c, a.mediaType);
-      g(o);
+  }, v = (x) => {
+    const w = x.target.value;
+    if (d(null), n({ ...a, mediaUrl: w }), a.mediaType) {
+      const L = u(w, a.mediaType);
+      y(L);
     }
-  }, E = () => {
+  }, V = () => {
     switch (a.mediaType) {
       case "IMAGE":
-        return se.map((s) => `.${s}`).join(",");
+        return ie.map((x) => `.${x}`).join(",");
       case "VIDEO":
-        return ne.map((s) => `.${s}`).join(",");
+        return te.map((x) => `.${x}`).join(",");
       case "DOCUMENT":
-        return le.map((s) => `.${s}`).join(",");
+        return me.map((x) => `.${x}`).join(",");
       default:
         return "*/*";
     }
@@ -1012,9 +1012,9 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
           "select",
           {
             value: a.headerType,
-            onChange: (s) => M(s.target.value),
+            onChange: (x) => k(x.target.value),
             className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent rsp-appearance-none",
-            children: We.map((s) => /* @__PURE__ */ e("option", { value: s.value, children: s.label }, s.value))
+            children: Ye.map((x) => /* @__PURE__ */ e("option", { value: x.value, children: x.label }, x.value))
           }
         ),
         /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-y-0 rsp-right-0 rsp-flex rsp-items-center rsp-px-2 rsp-pointer-events-none", children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }),
@@ -1026,10 +1026,10 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
       /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
         "input",
         {
-          ref: w,
+          ref: g,
           type: "text",
           value: a.headerText,
-          onChange: (s) => n({ ...a, headerText: s.target.value }),
+          onChange: (x) => n({ ...a, headerText: x.target.value }),
           maxLength: 60,
           className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent",
           placeholder: "Add a 60 character title to your message"
@@ -1039,7 +1039,7 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: V,
+            onClick: U,
             className: "rsp-px-2 rsp-py-1 rsp-text-xs hover:rsp-bg-gray-100 rsp-rounded rsp-text-gray-500 rsp-flex rsp-items-center rsp-gap-1",
             title: "Add variable to header",
             children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) })
@@ -1051,30 +1051,30 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
         ] })
       ] }),
       (() => {
-        const s = [...new Set((a.headerText.match(/\{\{(\d+)\}\}/g) || []).map((c) => c.replace(/[{}]/g, "")))];
-        return s.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
+        const x = [...new Set((a.headerText.match(/\{\{(\d+)\}\}/g) || []).map((w) => w.replace(/[{}]/g, "")))];
+        return x.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
           /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-2", children: "Sample Values" }),
-          /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: s.map((c) => {
-            var o, y;
+          /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: x.map((w) => {
+            var L, s;
             return /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
               /* @__PURE__ */ r("label", { className: "rsp-text-xs rsp-text-gray-500 rsp-whitespace-nowrap", children: [
-                `{{${c}}}`,
+                `{{${w}}}`,
                 ":"
               ] }),
               /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
-                  value: ((y = (o = a.sampleContent) == null ? void 0 : o.headerVariables) == null ? void 0 : y[c]) || "",
-                  onChange: (C) => {
-                    var R, p, L;
-                    const j = {
+                  value: ((s = (L = a.sampleContent) == null ? void 0 : L.headerVariables) == null ? void 0 : s[w]) || "",
+                  onChange: (b) => {
+                    var T, c, M;
+                    const E = {
                       ...a.sampleContent,
-                      headerVariables: { ...(R = a.sampleContent) == null ? void 0 : R.headerVariables, [c]: C.target.value },
-                      bodyVariables: ((p = a.sampleContent) == null ? void 0 : p.bodyVariables) || {},
-                      buttonVariables: ((L = a.sampleContent) == null ? void 0 : L.buttonVariables) || {}
+                      headerVariables: { ...(T = a.sampleContent) == null ? void 0 : T.headerVariables, [w]: b.target.value },
+                      bodyVariables: ((c = a.sampleContent) == null ? void 0 : c.bodyVariables) || {},
+                      buttonVariables: ((M = a.sampleContent) == null ? void 0 : M.buttonVariables) || {}
                     };
-                    n({ ...a, sampleContent: j });
+                    n({ ...a, sampleContent: E });
                   },
                   className: "rsp-flex-1 rsp-px-2 rsp-py-1 rsp-border rsp-border-gray-300 rsp-rounded rsp-text-xs focus:rsp-outline-none focus:rsp-border-blue-500",
                   placeholder: "Sample"
@@ -1085,15 +1085,15 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
                 {
                   type: "button",
                   onClick: () => {
-                    var p, L, A;
-                    const C = new RegExp(`\\{\\{${c}\\}\\}`, "g"), j = (a.headerText || "").replace(C, ""), R = Object.fromEntries(Object.entries(((p = a.sampleContent) == null ? void 0 : p.headerVariables) || {}).filter(([T]) => T !== c));
+                    var c, M, A;
+                    const b = new RegExp(`\\{\\{${w}\\}\\}`, "g"), E = (a.headerText || "").replace(b, ""), T = Object.fromEntries(Object.entries(((c = a.sampleContent) == null ? void 0 : c.headerVariables) || {}).filter(([O]) => O !== w));
                     n({
                       ...a,
-                      headerText: j,
+                      headerText: E,
                       sampleContent: {
                         ...a.sampleContent,
-                        headerVariables: R,
-                        bodyVariables: ((L = a.sampleContent) == null ? void 0 : L.bodyVariables) || {},
+                        headerVariables: T,
+                        bodyVariables: ((M = a.sampleContent) == null ? void 0 : M.bodyVariables) || {},
                         buttonVariables: ((A = a.sampleContent) == null ? void 0 : A.buttonVariables) || {}
                       }
                     });
@@ -1103,7 +1103,7 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
                   children: "×"
                 }
               )
-            ] }, `header-sample-${c}`);
+            ] }, `header-sample-${w}`);
           }) })
         ] });
       })()
@@ -1116,15 +1116,15 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
             "select",
             {
               value: a.mediaType || "IMAGE",
-              onChange: (s) => {
-                n((c) => ({
-                  ...c,
-                  mediaType: s.target.value,
+              onChange: (x) => {
+                n((w) => ({
+                  ...w,
+                  mediaType: x.target.value,
                   mediaUrl: ""
-                })), d(null), g(null);
+                })), d(null), y(null);
               },
               className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent rsp-appearance-none",
-              children: Ke.map((s) => /* @__PURE__ */ e("option", { value: s.value, children: s.label }, s.value))
+              children: Xe.map((x) => /* @__PURE__ */ e("option", { value: x.value, children: x.label }, x.value))
             }
           ),
           /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-y-0 rsp-right-0 rsp-flex rsp-items-center rsp-px-2 rsp-pointer-events-none", children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
@@ -1140,32 +1140,32 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
                 src: a.mediaUrl,
                 alt: "Preview",
                 className: "rsp-w-12 rsp-h-12 rsp-object-cover rsp-rounded",
-                onError: (s) => {
-                  s.currentTarget.style.display = "none", h || g("Could not load image preview from URL.");
+                onError: (x) => {
+                  x.currentTarget.style.display = "none", f || y("Could not load image preview from URL.");
                 },
                 onLoad: () => {
-                  h != null && h.includes("Could not load") && g(null);
+                  f != null && f.includes("Could not load") && y(null);
                 }
               }
             ),
-            a.mediaType === "VIDEO" && /* @__PURE__ */ e("div", { className: "rsp-w-12 rsp-h-12 rsp-bg-gray-200 rsp-rounded rsp-flex rsp-items-center rsp-justify-center flex-shrink-0", children: /* @__PURE__ */ e(Re, { className: "rsp-w-6 rsp-h-6 rsp-text-gray-500" }) }),
-            a.mediaType === "DOCUMENT" && /* @__PURE__ */ e("div", { className: "rsp-w-12 rsp-h-12 rsp-bg-gray-200 rsp-rounded rsp-flex rsp-items-center rsp-justify-center flex-shrink-0", children: /* @__PURE__ */ e(Ae, { className: "rsp-w-6 rsp-h-6 rsp-text-gray-500" }) }),
+            a.mediaType === "VIDEO" && /* @__PURE__ */ e("div", { className: "rsp-w-12 rsp-h-12 rsp-bg-gray-200 rsp-rounded rsp-flex rsp-items-center rsp-justify-center flex-shrink-0", children: /* @__PURE__ */ e(ze, { className: "rsp-w-6 rsp-h-6 rsp-text-gray-500" }) }),
+            a.mediaType === "DOCUMENT" && /* @__PURE__ */ e("div", { className: "rsp-w-12 rsp-h-12 rsp-bg-gray-200 rsp-rounded rsp-flex rsp-items-center rsp-justify-center flex-shrink-0", children: /* @__PURE__ */ e(Ie, { className: "rsp-w-6 rsp-h-6 rsp-text-gray-500" }) }),
             /* @__PURE__ */ r("div", { className: "overflow-hidden", children: [
               /* @__PURE__ */ e("p", { className: "rsp-text-sm rsp-font-medium rsp-text-gray-900 rsp-truncate", children: l ? l.name : a.mediaUrl }),
               l && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500", children: `${(l.size / 1024 / 1024).toFixed(2)} MB` })
             ] })
           ] }),
-          /* @__PURE__ */ e("button", { onClick: t, className: "rsp-p-1 rsp-text-gray-400 hover:rsp-text-red-500 rsp-transition-colors flex-shrink-0", children: /* @__PURE__ */ e(J, { className: "rsp-w-4 rsp-h-4" }) })
+          /* @__PURE__ */ e("button", { onClick: t, className: "rsp-p-1 rsp-text-gray-400 hover:rsp-text-red-500 rsp-transition-colors flex-shrink-0", children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4" }) })
         ] }) : /* @__PURE__ */ r("div", { children: [
-          /* @__PURE__ */ e("input", { type: "file", accept: E(), onChange: u, className: "rsp-hidden", id: "media-upload", disabled: f }),
+          /* @__PURE__ */ e("input", { type: "file", accept: V(), onChange: h, className: "rsp-hidden", id: "media-upload", disabled: p }),
           /* @__PURE__ */ r(
             "label",
             {
               htmlFor: "media-upload",
-              className: `rsp-w-full rsp-px-4 rsp-py-3 rsp-border-2 rsp-border-dashed rsp-border-gray-300 rsp-rounded-md rsp-flex rsp-flex-col rsp-items-center rsp-justify-center rsp-cursor-pointer rsp-transition-colors hover:rsp-border-gray-400 hover:rsp-bg-gray-50 ${f ? "rsp-opacity-50 rsp-cursor-not-allowed" : ""}`,
+              className: `rsp-w-full rsp-px-4 rsp-py-3 rsp-border-2 rsp-border-dashed rsp-border-gray-300 rsp-rounded-md rsp-flex rsp-flex-col rsp-items-center rsp-justify-center rsp-cursor-pointer rsp-transition-colors hover:rsp-border-gray-400 hover:rsp-bg-gray-50 ${p ? "rsp-opacity-50 rsp-cursor-not-allowed" : ""}`,
               children: [
-                /* @__PURE__ */ e(ze, { className: "rsp-w-6 rsp-h-6 rsp-text-gray-400 rsp-mb-2" }),
-                /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: f ? "Uploading..." : `Upload ${((U = a.mediaType) == null ? void 0 : U.toLowerCase()) || "file"}` }),
+                /* @__PURE__ */ e(_e, { className: "rsp-w-6 rsp-h-6 rsp-text-gray-400 rsp-mb-2" }),
+                /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: p ? "Uploading..." : `Upload ${((R = a.mediaType) == null ? void 0 : R.toLowerCase()) || "file"}` }),
                 /* @__PURE__ */ r("span", { className: "rsp-text-xs rsp-text-gray-400 rsp-mt-1", children: [
                   a.mediaType === "IMAGE" && "JPG, PNG up to 5MB",
                   a.mediaType === "VIDEO" && "MP4, 3GPP up to 16MB",
@@ -1175,9 +1175,9 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
             }
           )
         ] }),
-        h && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2 rsp-text-xs rsp-text-red-600", children: [
-          /* @__PURE__ */ e(ie, { className: "rsp-w-4 rsp-h-4" }),
-          /* @__PURE__ */ e("span", { children: h })
+        f && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2 rsp-text-xs rsp-text-red-600", children: [
+          /* @__PURE__ */ e(ce, { className: "rsp-w-4 rsp-h-4" }),
+          /* @__PURE__ */ e("span", { children: f })
         ] }),
         /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center", children: [
           /* @__PURE__ */ e("div", { className: "rsp-flex-1 rsp-border-t rsp-border-gray-300" }),
@@ -1189,16 +1189,16 @@ function Je({ template: a, setTemplate: n, onFileUpload: i }) {
           {
             type: "url",
             value: a.mediaUrl || "",
-            onChange: k,
+            onChange: v,
             className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent",
-            placeholder: `Enter ${(B = a.mediaType) == null ? void 0 : B.toLowerCase()} URL`
+            placeholder: `Enter ${(I = a.mediaType) == null ? void 0 : I.toLowerCase()} URL`
           }
         ) })
       ] })
     ] })
   ] });
 }
-const be = [
+const we = [
   { name: "grinning-face", hexadecimal: "&#x1f600;" },
   { name: "grinning-face-with-smiling-eyes", hexadecimal: "&#x1f601;" },
   { name: "face-with-tears-of-joy", hexadecimal: "&#x1f602;" },
@@ -2997,56 +2997,56 @@ const be = [
   { name: "south-africa", hexadecimal: "&#x1f1ff;&#x1f1e6;" },
   { name: "zambia", hexadecimal: "&#x1f1ff;&#x1f1f2;" },
   { name: "zimbabwe", hexadecimal: "&#x1f1ff;&#x1f1fc;" }
-], Ze = ({
+], ra = ({
   emojis: a,
   onSelect: n,
   onClose: i
 }) => {
-  const [l, d] = I({ start: 0, end: 80 }), f = 8, m = 40, N = 400, w = he((V) => {
-    const M = V.currentTarget.scrollTop, v = Math.floor(M / m), x = Math.min(
-      v + Math.ceil(N / m) + 2,
-      Math.ceil(a.length / f)
+  const [l, d] = B({ start: 0, end: 80 }), p = 8, m = 40, C = 400, g = ge((U) => {
+    const k = U.currentTarget.scrollTop, N = Math.floor(k / m), o = Math.min(
+      N + Math.ceil(C / m) + 2,
+      Math.ceil(a.length / p)
     );
     d({
-      start: v * f,
-      end: x * f
+      start: N * p,
+      end: o * p
     });
-  }, [a.length, m, N, f]), h = he((V) => {
-    const M = V.match(/&#x([0-9A-Fa-f]+);/g);
-    if (!M) return "";
-    const v = M.map((x) => {
-      const b = x.replace(/&#x|;/g, "");
-      return parseInt(b, 16);
+  }, [a.length, m, C, p]), f = ge((U) => {
+    const k = U.match(/&#x([0-9A-Fa-f]+);/g);
+    if (!k) return "";
+    const N = k.map((o) => {
+      const u = o.replace(/&#x|;/g, "");
+      return parseInt(u, 16);
     });
-    return String.fromCodePoint(...v);
-  }, []), g = Math.ceil(a.length / f) * m, S = a.slice(l.start, l.end);
+    return String.fromCodePoint(...N);
+  }, []), y = Math.ceil(a.length / p) * m, j = a.slice(l.start, l.end);
   return /* @__PURE__ */ e(
     "div",
     {
       className: "rsp-h-[400px] rsp-overflow-y-auto rsp-relative",
-      onScroll: w,
-      children: /* @__PURE__ */ e("div", { style: { height: g }, className: "rsp-relative", children: /* @__PURE__ */ e(
+      onScroll: g,
+      children: /* @__PURE__ */ e("div", { style: { height: y }, className: "rsp-relative", children: /* @__PURE__ */ e(
         "div",
         {
           className: "rsp-absolute rsp-w-full rsp-grid rsp-grid-cols-8 rsp-gap-1",
           style: {
-            top: Math.floor(l.start / f) * m,
+            top: Math.floor(l.start / p) * m,
             transform: "translateY(0px)"
           },
-          children: S.map((V, M) => {
-            const v = l.start + M;
+          children: j.map((U, k) => {
+            const N = l.start + k;
             return /* @__PURE__ */ e(
               "button",
               {
                 onClick: () => {
-                  n(h(V.hexadecimal));
+                  n(f(U.hexadecimal));
                 },
                 className: "rsp-w-10 rsp-h-10 rsp-flex rsp-items-center rsp-justify-center rsp-text-xl hover:rsp-bg-gray-100 rsp-rounded rsp-transition-colors",
-                title: V.name,
+                title: U.name,
                 style: { height: m },
-                children: h(V.hexadecimal)
+                children: f(U.hexadecimal)
               },
-              v
+              N
             );
           })
         }
@@ -3054,13 +3054,13 @@ const be = [
     }
   );
 };
-function xe({ isOpen: a, onClose: n, onSelect: i }) {
-  const [l, d] = I(""), f = we(() => l ? be.filter(
+function fe({ isOpen: a, onClose: n, onSelect: i }) {
+  const [l, d] = B(""), p = Ne(() => l ? we.filter(
     (m) => m.name.toLowerCase().includes(l.toLowerCase())
-  ) : be, [l]);
-  return Q.useEffect(() => {
+  ) : we, [l]);
+  return K.useEffect(() => {
     a || d("");
-  }, [a]), /* @__PURE__ */ e(ce, { isOpen: a, onClose: n, title: "Select Emoji", children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
+  }, [a]), /* @__PURE__ */ e(pe, { isOpen: a, onClose: n, title: "Select Emoji", children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
     /* @__PURE__ */ r("div", { className: "rsp-relative", children: [
       /* @__PURE__ */ e(
         "input",
@@ -3093,74 +3093,74 @@ function xe({ isOpen: a, onClose: n, onSelect: i }) {
       m
     )) }),
     /* @__PURE__ */ r("div", { className: "rsp-text-sm rsp-text-gray-500", children: [
-      f.length,
+      p.length,
       " emojis found"
     ] }),
     /* @__PURE__ */ e(
-      Ze,
+      ra,
       {
-        emojis: f,
+        emojis: p,
         onSelect: i,
         onClose: n
       }
     )
   ] }) });
 }
-function ea({ template: a, setTemplate: n }) {
-  const [i, l] = I(!1), [d, f] = I(null), [m, N] = I(null), [w, h] = I(null), g = () => {
-    const x = (a.body || "").match(/{{\d+}}/g);
-    if (!x) return 0;
-    const b = x.map((t) => {
-      const u = t.match(/{{(\d+)}}/);
-      return u ? parseInt(u[1], 10) : 0;
+function sa({ template: a, setTemplate: n }) {
+  const [i, l] = B(!1), [d, p] = B(null), [m, C] = B(null), [g, f] = B(null), y = () => {
+    const o = (a.body || "").match(/{{\d+}}/g);
+    if (!o) return 0;
+    const u = o.map((t) => {
+      const h = t.match(/{{(\d+)}}/);
+      return h ? parseInt(h[1], 10) : 0;
     });
-    return b.length > 0 ? Math.max(...b) : 0;
-  }, S = () => {
-    const b = `{{${g() + 1}}}`;
-    if (m && a.body.length + b.length <= 1024) {
-      const t = m.selectionStart || a.body.length, u = a.body.substring(0, t), k = a.body.substring(t), E = u + b + k;
+    return u.length > 0 ? Math.max(...u) : 0;
+  }, j = () => {
+    const u = `{{${y() + 1}}}`;
+    if (m && a.body.length + u.length <= 1024) {
+      const t = m.selectionStart || a.body.length, h = a.body.substring(0, t), v = a.body.substring(t), V = h + u + v;
       n({
         ...a,
-        body: E
+        body: V
       }), setTimeout(() => {
         if (m) {
-          const U = t + b.length;
-          m.setSelectionRange(U, U), m.focus();
+          const R = t + u.length;
+          m.setSelectionRange(R, R), m.focus();
         }
       }, 0);
     }
-  }, V = () => {
-    f("body"), l(!0), setTimeout(() => {
+  }, U = () => {
+    p("body"), l(!0), setTimeout(() => {
       m && m.focus();
     }, 0);
-  }, M = (v) => {
+  }, k = (N) => {
     if (d === "body") {
       if (!m) return;
-      const x = m.selectionStart || a.body.length, b = 1024, t = a.body;
-      if (t.length + v.length <= b) {
-        const u = t.substring(0, x), k = t.substring(x), E = u + v + k;
+      const o = m.selectionStart || a.body.length, u = 1024, t = a.body;
+      if (t.length + N.length <= u) {
+        const h = t.substring(0, o), v = t.substring(o), V = h + N + v;
         n({
           ...a,
-          body: E
+          body: V
         }), setTimeout(() => {
           if (m) {
-            const U = x + v.length;
-            m.setSelectionRange(U, U), m.focus();
+            const R = o + N.length;
+            m.setSelectionRange(R, R), m.focus();
           }
         }, 0);
       }
     } else if (d === "footer") {
-      if (!w) return;
-      const x = w.selectionStart || a.footer.length, b = 60, t = a.footer;
-      if (t.length + v.length <= b) {
-        const u = t.substring(0, x), k = t.substring(x), E = u + v + k;
+      if (!g) return;
+      const o = g.selectionStart || a.footer.length, u = 60, t = a.footer;
+      if (t.length + N.length <= u) {
+        const h = t.substring(0, o), v = t.substring(o), V = h + N + v;
         n({
           ...a,
-          footer: E
+          footer: V
         }), setTimeout(() => {
-          if (w) {
-            const U = x + v.length;
-            w.setSelectionRange(U, U), w.focus();
+          if (g) {
+            const R = o + N.length;
+            g.setSelectionRange(R, R), g.focus();
           }
         }, 0);
       }
@@ -3172,14 +3172,14 @@ function ea({ template: a, setTemplate: n }) {
       /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
         "textarea",
         {
-          ref: N,
+          ref: C,
           value: a.body,
-          onChange: (v) => n({ ...a, body: v.target.value }),
+          onChange: (N) => n({ ...a, body: N.target.value }),
           maxLength: 1024,
           rows: 6,
           className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-white rsp-resize-none rsp-shadow-sm",
           placeholder: "Enter the text for your message",
-          onFocus: () => f("body")
+          onFocus: () => p("body")
         }
       ) }),
       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between rsp-mt-2", children: [
@@ -3187,7 +3187,7 @@ function ea({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: S,
+              onClick: j,
               className: "rsp-p-1 rsp-text-gray-500 hover:rsp-text-gray-700 hover:rsp-bg-gray-100 rsp-rounded",
               title: "Add Variable",
               children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) })
@@ -3196,10 +3196,10 @@ function ea({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: V,
+              onClick: U,
               className: "rsp-p-1 rsp-text-gray-500 hover:rsp-text-gray-700 hover:rsp-bg-gray-100 rsp-rounded",
               title: "Add emoji",
-              children: /* @__PURE__ */ e(me, { className: "rsp-w-4 rsp-h-4" })
+              children: /* @__PURE__ */ e(xe, { className: "rsp-w-4 rsp-h-4" })
             }
           )
         ] }),
@@ -3209,15 +3209,15 @@ function ea({ template: a, setTemplate: n }) {
         ] }) })
       ] }),
       (() => {
-        const v = a.body.match(/\{\{(\d+)\}\}/g) || [], x = [...new Set(v.map((b) => b.replace(/[{}]/g, "")))];
-        return x.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
+        const N = a.body.match(/\{\{(\d+)\}\}/g) || [], o = [...new Set(N.map((u) => u.replace(/[{}]/g, "")))];
+        return o.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
           /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-2", children: "Sample Values" }),
-          /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: x.map((b) => {
-            var t, u;
+          /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: o.map((u) => {
+            var t, h;
             return /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
               /* @__PURE__ */ r("label", { className: "rsp-text-xs rsp-text-gray-500 rsp-whitespace-nowrap", children: [
                 "{{",
-                b,
+                u,
                 "}}",
                 ":"
               ] }),
@@ -3225,21 +3225,21 @@ function ea({ template: a, setTemplate: n }) {
                 "input",
                 {
                   type: "text",
-                  value: ((u = (t = a.sampleContent) == null ? void 0 : t.bodyVariables) == null ? void 0 : u[b]) || "",
-                  onChange: (k) => {
-                    var U, B, s;
-                    const E = {
+                  value: ((h = (t = a.sampleContent) == null ? void 0 : t.bodyVariables) == null ? void 0 : h[u]) || "",
+                  onChange: (v) => {
+                    var R, I, x;
+                    const V = {
                       ...a.sampleContent,
                       bodyVariables: {
-                        ...(U = a.sampleContent) == null ? void 0 : U.bodyVariables,
-                        [b]: k.target.value
+                        ...(R = a.sampleContent) == null ? void 0 : R.bodyVariables,
+                        [u]: v.target.value
                       },
-                      headerVariables: ((B = a.sampleContent) == null ? void 0 : B.headerVariables) || {},
-                      buttonVariables: ((s = a.sampleContent) == null ? void 0 : s.buttonVariables) || {}
+                      headerVariables: ((I = a.sampleContent) == null ? void 0 : I.headerVariables) || {},
+                      buttonVariables: ((x = a.sampleContent) == null ? void 0 : x.buttonVariables) || {}
                     };
                     n({
                       ...a,
-                      sampleContent: E
+                      sampleContent: V
                     });
                   },
                   className: "rsp-flex-1 rsp-px-2 rsp-py-1 rsp-border rsp-border-gray-300 rsp-rounded rsp-text-xs focus:rsp-outline-none focus:rsp-border-blue-500",
@@ -3251,16 +3251,16 @@ function ea({ template: a, setTemplate: n }) {
                 {
                   type: "button",
                   onClick: () => {
-                    var B, s, c;
-                    const k = new RegExp(`\\{\\{${b}\\}\\}`, "g"), E = (a.body || "").replace(k, ""), U = Object.fromEntries(Object.entries(((B = a.sampleContent) == null ? void 0 : B.bodyVariables) || {}).filter(([o]) => o !== b));
+                    var I, x, w;
+                    const v = new RegExp(`\\{\\{${u}\\}\\}`, "g"), V = (a.body || "").replace(v, ""), R = Object.fromEntries(Object.entries(((I = a.sampleContent) == null ? void 0 : I.bodyVariables) || {}).filter(([L]) => L !== u));
                     n({
                       ...a,
-                      body: E,
+                      body: V,
                       sampleContent: {
                         ...a.sampleContent,
-                        bodyVariables: U,
-                        headerVariables: ((s = a.sampleContent) == null ? void 0 : s.headerVariables) || {},
-                        buttonVariables: ((c = a.sampleContent) == null ? void 0 : c.buttonVariables) || {}
+                        bodyVariables: R,
+                        headerVariables: ((x = a.sampleContent) == null ? void 0 : x.headerVariables) || {},
+                        buttonVariables: ((w = a.sampleContent) == null ? void 0 : w.buttonVariables) || {}
                       }
                     });
                   },
@@ -3269,7 +3269,7 @@ function ea({ template: a, setTemplate: n }) {
                   children: "×"
                 }
               )
-            ] }, `body-sample-${b}`);
+            ] }, `body-sample-${u}`);
           }) })
         ] });
       })()
@@ -3279,14 +3279,14 @@ function ea({ template: a, setTemplate: n }) {
       /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
         "input",
         {
-          ref: h,
+          ref: f,
           type: "text",
           value: a.footer,
-          onChange: (v) => n({ ...a, footer: v.target.value }),
+          onChange: (N) => n({ ...a, footer: N.target.value }),
           maxLength: 60,
           className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent",
           placeholder: "Footer Text",
-          onFocus: () => f("footer")
+          onFocus: () => p("footer")
         }
       ) }),
       /* @__PURE__ */ r("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-1", children: [
@@ -3295,31 +3295,31 @@ function ea({ template: a, setTemplate: n }) {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      xe,
+      fe,
       {
         isOpen: i,
         onClose: () => l(!1),
-        onSelect: M
+        onSelect: k
       }
     )
   ] });
 }
-function aa({ template: a, setTemplate: n }) {
-  var b;
-  const [i, l] = I(null), [d, f] = I(!1), [m, N] = I({
+function na({ template: a, setTemplate: n }) {
+  var u;
+  const [i, l] = B(null), [d, p] = B(!1), [m, C] = B({
     text: "",
     value: "",
     urlType: "static"
-  }), h = {
+  }), f = {
     quickReply: a.buttons.filter((t) => t.type === "QUICK_REPLY").length,
     url: a.buttons.filter((t) => t.type === "URL").length,
     call: a.buttons.filter((t) => t.type === "CALL").length,
     flow: a.buttons.filter((t) => t.type === "FLOW").length
-  }, g = () => {
-    N({ text: "", value: "", urlType: "static" }), l(null), f(!1);
-  }, S = (t) => {
+  }, y = () => {
+    C({ text: "", value: "", urlType: "static" }), l(null), p(!1);
+  }, j = (t) => {
     if (!m.text.trim()) return;
-    const u = {
+    const h = {
       id: Math.random().toString(36).substr(2, 9),
       type: t,
       text: m.text,
@@ -3328,60 +3328,60 @@ function aa({ template: a, setTemplate: n }) {
     };
     n({
       ...a,
-      buttons: [...a.buttons, u]
-    }), g();
-  }, V = (t) => {
+      buttons: [...a.buttons, h]
+    }), y();
+  }, U = (t) => {
     n({
       ...a,
-      buttons: a.buttons.filter((u) => u.id !== t)
+      buttons: a.buttons.filter((h) => h.id !== t)
     });
-  }, M = (t, u, k) => {
-    var U;
-    const E = u === "text" ? 25 : u === "value" && ((U = a.buttons.find((B) => B.id === t)) == null ? void 0 : U.type) === "URL" ? 2e3 : 20;
+  }, k = (t, h, v) => {
+    var R;
+    const V = h === "text" ? 25 : h === "value" && ((R = a.buttons.find((I) => I.id === t)) == null ? void 0 : R.type) === "URL" ? 2e3 : 20;
     n({
       ...a,
       buttons: a.buttons.map(
-        (B) => B.id === t ? { ...B, [u]: k.slice(0, E) } : B
+        (I) => I.id === t ? { ...I, [h]: v.slice(0, V) } : I
       )
     });
-  }, v = () => {
-    const u = [
-      ...a.buttons.filter((E) => E.type === "URL" && E.urlType === "dynamic").map((E) => E.value || ""),
+  }, N = () => {
+    const h = [
+      ...a.buttons.filter((V) => V.type === "URL" && V.urlType === "dynamic").map((V) => V.value || ""),
       m.value
       // Include current form input
     ].join(" ").match(/{{\d+}}/g);
-    if (!u) return 0;
-    const k = u.map((E) => {
-      const U = E.match(/{{(\d+)}}/);
-      return U ? parseInt(U[1], 10) : 0;
+    if (!h) return 0;
+    const v = h.map((V) => {
+      const R = V.match(/{{(\d+)}}/);
+      return R ? parseInt(R[1], 10) : 0;
     });
-    return k.length > 0 ? Math.max(...k) : 0;
-  }, x = [
+    return v.length > 0 ? Math.max(...v) : 0;
+  }, o = [
     {
       type: "QUICK_REPLY",
-      icon: re,
+      icon: le,
       label: "Quick Reply",
       description: "Add quick response options",
       limit: 10,
-      current: h.quickReply,
+      current: f.quickReply,
       color: "blue"
     },
     {
       type: "URL",
-      icon: Ue,
+      icon: Be,
       label: "Web URL",
       description: "Link to websites or pages",
       limit: 2,
-      current: h.url,
+      current: f.url,
       color: "green"
     },
     {
       type: "CALL",
-      icon: ke,
+      icon: Me,
       label: "Call Button",
       description: "Add phone number to call",
       limit: 1,
-      current: h.call,
+      current: f.call,
       color: "purple"
     }
     // {
@@ -3406,17 +3406,17 @@ function aa({ template: a, setTemplate: n }) {
       /* @__PURE__ */ e("div", { className: "rsp-flex-shrink-0", children: /* @__PURE__ */ e("svg", { className: "rsp-h-5 rsp-w-5 rsp-text-blue-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }) }),
       /* @__PURE__ */ e("div", { className: "rsp-ml-3", children: /* @__PURE__ */ e("p", { className: "rsp-text-sm rsp-text-blue-700", children: "We recommend adding the marketing opt-out button. This can help reduce blocks from customers and increase your quality rating." }) })
     ] }) }),
-    !i && /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-1 md:rsp-grid-cols-2 rsp-gap-4", children: x.map((t) => {
-      const u = t.icon, k = t.current >= t.limit;
+    !i && /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-1 md:rsp-grid-cols-2 rsp-gap-4", children: o.map((t) => {
+      const h = t.icon, v = t.current >= t.limit;
       return /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => !k && l(t.type),
-          disabled: k,
-          className: `rsp-p-4 rsp-border-2 rsp-rounded-xl rsp-text-left rsp-transition-all rsp-duration-200 ${k ? "rsp-border-gray-200 rsp-bg-gray-50 rsp-text-gray-400 rsp-cursor-not-allowed rsp-opacity-60" : "rsp-cursor-pointer rsp-transform rsp-shadow-sm hover:rsp-shadow-md"}`,
+          onClick: () => !v && l(t.type),
+          disabled: v,
+          className: `rsp-p-4 rsp-border-2 rsp-rounded-xl rsp-text-left rsp-transition-all rsp-duration-200 ${v ? "rsp-border-gray-200 rsp-bg-gray-50 rsp-text-gray-400 rsp-cursor-not-allowed rsp-opacity-60" : "rsp-cursor-pointer rsp-transform rsp-shadow-sm hover:rsp-shadow-md"}`,
           children: /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-start rsp-justify-between", children: [
             /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-3", children: [
-              /* @__PURE__ */ e("div", { className: `rsp-p-2 rsp-rounded-lg ${k ? "rsp-bg-gray-200" : "rsp-bg-white rsp-shadow-sm"}`, children: /* @__PURE__ */ e(u, { className: "rsp-w-5 rsp-h-5" }) }),
+              /* @__PURE__ */ e("div", { className: `rsp-p-2 rsp-rounded-lg ${v ? "rsp-bg-gray-200" : "rsp-bg-white rsp-shadow-sm"}`, children: /* @__PURE__ */ e(h, { className: "rsp-w-5 rsp-h-5" }) }),
               /* @__PURE__ */ r("div", { children: [
                 /* @__PURE__ */ e("h4", { className: "rsp-font-semibold rsp-text-sm", children: t.label }),
                 /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-opacity-80 rsp-mt-1", children: t.description })
@@ -3428,7 +3428,7 @@ function aa({ template: a, setTemplate: n }) {
                 "/",
                 t.limit
               ] }),
-              !k && /* @__PURE__ */ e(te, { className: "rsp-w-4 rsp-h-4" })
+              !v && /* @__PURE__ */ e(de, { className: "rsp-w-4 rsp-h-4" })
             ] })
           ] })
         },
@@ -3439,14 +3439,14 @@ function aa({ template: a, setTemplate: n }) {
       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between rsp-mb-4", children: [
         /* @__PURE__ */ r("h4", { className: "rsp-text-lg rsp-font-semibold rsp-text-gray-900", children: [
           "Add ",
-          (b = x.find((t) => t.type === i)) == null ? void 0 : b.label
+          (u = o.find((t) => t.type === i)) == null ? void 0 : u.label
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: g,
+            onClick: y,
             className: "rsp-p-2 rsp-text-gray-400 hover:rsp-text-gray-600 hover:rsp-bg-white rsp-rounded-lg rsp-transition-colors",
-            children: /* @__PURE__ */ e(J, { className: "rsp-w-5 rsp-h-5" })
+            children: /* @__PURE__ */ e(ee, { className: "rsp-w-5 rsp-h-5" })
           }
         )
       ] }),
@@ -3459,7 +3459,7 @@ function aa({ template: a, setTemplate: n }) {
               {
                 type: "text",
                 value: m.text,
-                onChange: (t) => N({ ...m, text: t.target.value.slice(0, 25) }),
+                onChange: (t) => C({ ...m, text: t.target.value.slice(0, 25) }),
                 className: "rsp-w-full rsp-px-4 rsp-py-3 rsp-border rsp-border-gray-300 rsp-rounded-lg rsp-bg-white rsp-text-sm focus:rsp-outline-none focus:rsp-ring-2 focus:rsp-ring-blue-500 focus:rsp-border-transparent rsp-shadow-sm",
                 placeholder: "Enter button text (max 25 characters)",
                 maxLength: 25
@@ -3481,7 +3481,7 @@ function aa({ template: a, setTemplate: n }) {
                   {
                     type: "radio",
                     checked: m.urlType === "static",
-                    onChange: () => N({ ...m, urlType: "static" }),
+                    onChange: () => C({ ...m, urlType: "static" }),
                     className: "rsp-mr-2 rsp-text-blue-600"
                   }
                 ),
@@ -3493,7 +3493,7 @@ function aa({ template: a, setTemplate: n }) {
                   {
                     type: "radio",
                     checked: m.urlType === "dynamic",
-                    onChange: () => N({ ...m, urlType: "dynamic" }),
+                    onChange: () => C({ ...m, urlType: "dynamic" }),
                     className: "rsp-mr-2 rsp-text-blue-600"
                   }
                 ),
@@ -3517,8 +3517,8 @@ function aa({ template: a, setTemplate: n }) {
                 type: i === "CALL" ? "tel" : i === "URL" ? "url" : "text",
                 value: m.value,
                 onChange: (t) => {
-                  const u = i === "URL" ? 2e3 : 20;
-                  N({ ...m, value: t.target.value.slice(0, u) });
+                  const h = i === "URL" ? 2e3 : 20;
+                  C({ ...m, value: t.target.value.slice(0, h) });
                 },
                 className: "rsp-w-full rsp-px-4 rsp-py-3 rsp-border rsp-border-gray-300 rsp-rounded-lg rsp-bg-white rsp-text-sm focus:rsp-outline-none focus:rsp-ring-2 focus:rsp-ring-blue-500 focus:rsp-border-transparent rsp-shadow-sm",
                 placeholder: i === "URL" ? m.urlType === "dynamic" ? "https://example.com/order/{{1}}?user={{2}}" : "https://example.com" : i === "CALL" ? "+1234567890" : "Flow ID",
@@ -3538,8 +3538,8 @@ function aa({ template: a, setTemplate: n }) {
                 type: "button",
                 onClick: () => {
                   if ((m.value.match(/\{\{(\d+)\}\}/g) || []).length >= 3) return;
-                  const k = v() + 1, E = m.value + `{{${k}}}`;
-                  N({ ...m, value: E }), f(!0);
+                  const v = N() + 1, V = m.value + `{{${v}}}`;
+                  C({ ...m, value: V }), p(!0);
                 },
                 disabled: (m.value.match(/\{\{(\d+)\}\}/g) || []).length >= 3,
                 className: "rsp-px-2 rsp-py-2 rsp-text-xs rsp-bg-gray-300 hover:rsp-bg-gray-200 rsp-rounded rsp-text-gray-700 disabled:rsp-bg-gray-200 disabled:rsp-text-gray-500",
@@ -3551,37 +3551,37 @@ function aa({ template: a, setTemplate: n }) {
               /* @__PURE__ */ e("h4", { className: "rsp-text-sm rsp-font-medium rsp-text-gray-700 rsp-mb-3", children: "Sample Values for URL Variables" }),
               /* @__PURE__ */ e("div", { className: "rsp-space-y-3", children: (() => {
                 const t = m.value.match(/\{\{(\d+)\}\}/g) || [];
-                return [...new Set(t.map((k) => k.replace(/[{}]/g, "")))].map((k) => {
-                  var E, U;
+                return [...new Set(t.map((v) => v.replace(/[{}]/g, "")))].map((v) => {
+                  var V, R;
                   return /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
                     /* @__PURE__ */ r("label", { className: "rsp-text-sm rsp-text-gray-600 rsp-whitespace-nowrap", children: [
                       "Variable {{",
-                      k,
+                      v,
                       "}}"
                     ] }),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "text",
-                        value: ((U = (E = a.sampleContent) == null ? void 0 : E.buttonVariables) == null ? void 0 : U[k]) || "",
-                        onChange: (B) => {
-                          var c, o, y;
-                          const s = {
+                        value: ((R = (V = a.sampleContent) == null ? void 0 : V.buttonVariables) == null ? void 0 : R[v]) || "",
+                        onChange: (I) => {
+                          var w, L, s;
+                          const x = {
                             ...a.sampleContent,
-                            headerVariables: ((c = a.sampleContent) == null ? void 0 : c.headerVariables) || {},
-                            bodyVariables: ((o = a.sampleContent) == null ? void 0 : o.bodyVariables) || {},
+                            headerVariables: ((w = a.sampleContent) == null ? void 0 : w.headerVariables) || {},
+                            bodyVariables: ((L = a.sampleContent) == null ? void 0 : L.bodyVariables) || {},
                             buttonVariables: {
-                              ...(y = a.sampleContent) == null ? void 0 : y.buttonVariables,
-                              [k]: B.target.value
+                              ...(s = a.sampleContent) == null ? void 0 : s.buttonVariables,
+                              [v]: I.target.value
                             }
                           };
                           n({
                             ...a,
-                            sampleContent: s
+                            sampleContent: x
                           });
                         },
                         className: "rsp-flex-1 rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-ring-1 focus:rsp-ring-blue-500 focus:rsp-border-blue-500",
-                        placeholder: `Sample value (e.g., ${k === "1" ? "order123" : "user456"})`
+                        placeholder: `Sample value (e.g., ${v === "1" ? "order123" : "user456"})`
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -3589,17 +3589,17 @@ function aa({ template: a, setTemplate: n }) {
                       {
                         type: "button",
                         onClick: () => {
-                          var o, y, C;
-                          const B = new RegExp(`\\{\\{${k}\\}\\}`, "g"), s = (m.value || "").replace(B, "");
-                          N({ ...m, value: s });
-                          const c = Object.fromEntries(Object.entries(((o = a.sampleContent) == null ? void 0 : o.buttonVariables) || {}).filter(([j]) => j !== k));
+                          var L, s, b;
+                          const I = new RegExp(`\\{\\{${v}\\}\\}`, "g"), x = (m.value || "").replace(I, "");
+                          C({ ...m, value: x });
+                          const w = Object.fromEntries(Object.entries(((L = a.sampleContent) == null ? void 0 : L.buttonVariables) || {}).filter(([E]) => E !== v));
                           n({
                             ...a,
                             sampleContent: {
                               ...a.sampleContent,
-                              headerVariables: ((y = a.sampleContent) == null ? void 0 : y.headerVariables) || {},
-                              bodyVariables: ((C = a.sampleContent) == null ? void 0 : C.bodyVariables) || {},
-                              buttonVariables: c
+                              headerVariables: ((s = a.sampleContent) == null ? void 0 : s.headerVariables) || {},
+                              bodyVariables: ((b = a.sampleContent) == null ? void 0 : b.bodyVariables) || {},
+                              buttonVariables: w
                             }
                           });
                         },
@@ -3608,16 +3608,16 @@ function aa({ template: a, setTemplate: n }) {
                         children: "×"
                       }
                     )
-                  ] }, `sample-${k}`);
+                  ] }, `sample-${v}`);
                 });
               })() }),
               /* @__PURE__ */ r("div", { className: "rsp-mt-4 rsp-p-3 rsp-bg-white rsp-rounded-lg rsp-border", children: [
                 /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-font-medium rsp-text-gray-700 rsp-mb-1", children: "Preview URL:" }),
                 /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-600 rsp-font-mono rsp-break-all", children: m.value.replace(
                   /\{\{(\d+)\}\}/g,
-                  (t, u) => {
-                    var k, E;
-                    return ((E = (k = a.sampleContent) == null ? void 0 : k.buttonVariables) == null ? void 0 : E[u]) || `[${t}]`;
+                  (t, h) => {
+                    var v, V;
+                    return ((V = (v = a.sampleContent) == null ? void 0 : v.buttonVariables) == null ? void 0 : V[h]) || `[${t}]`;
                   }
                 ) })
               ] }),
@@ -3625,7 +3625,7 @@ function aa({ template: a, setTemplate: n }) {
                 "button",
                 {
                   type: "button",
-                  onClick: () => f(!1),
+                  onClick: () => p(!1),
                   className: "rsp-px-3 rsp-py-1 rsp-text-xs rsp-text-gray-500 hover:rsp-text-gray-700",
                   children: "Close"
                 }
@@ -3637,7 +3637,7 @@ function aa({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => S(i),
+              onClick: () => j(i),
               disabled: !m.text.trim() || i !== "QUICK_REPLY" && !m.value.trim(),
               className: "rsp-flex-1 rsp-bg-blue-600 rsp-text-white rsp-py-3 rsp-px-4 rsp-rounded-lg rsp-font-medium rsp-text-sm rsp-transition-colors hover:rsp-bg-blue-700 disabled:rsp-opacity-50 disabled:rsp-cursor-not-allowed rsp-shadow-sm",
               children: "Add Button"
@@ -3646,7 +3646,7 @@ function aa({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: g,
+              onClick: y,
               className: "rsp-px-4 rsp-py-3 rsp-text-gray-600 rsp-bg-white rsp-border rsp-border-gray-300 rsp-rounded-lg rsp-font-medium rsp-text-sm rsp-transition-colors hover:rsp-bg-gray-50 rsp-shadow-sm",
               children: "Cancel"
             }
@@ -3657,18 +3657,18 @@ function aa({ template: a, setTemplate: n }) {
     a.buttons.length > 0 && /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
       /* @__PURE__ */ e("h4", { className: "rsp-text-md rsp-font-semibold rsp-text-gray-900", children: "Added Buttons" }),
       /* @__PURE__ */ e("div", { className: "rsp-space-y-3", children: a.buttons.map((t) => {
-        const u = x.find((E) => E.type === t.type), k = (u == null ? void 0 : u.icon) || re;
+        const h = o.find((V) => V.type === t.type), v = (h == null ? void 0 : h.icon) || le;
         return /* @__PURE__ */ e("div", { className: "rsp-bg-white rsp-border rsp-border-gray-200 rsp-rounded-lg rsp-p-4 rsp-shadow-sm", children: /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-start rsp-gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "rsp-p-2 rsp-bg-gray-50 rsp-rounded-lg", children: /* @__PURE__ */ e(k, { className: "rsp-w-4 rsp-h-4 rsp-text-gray-600" }) }),
+          /* @__PURE__ */ e("div", { className: "rsp-p-2 rsp-bg-gray-50 rsp-rounded-lg", children: /* @__PURE__ */ e(v, { className: "rsp-w-4 rsp-h-4 rsp-text-gray-600" }) }),
           /* @__PURE__ */ r("div", { className: "rsp-flex-1 rsp-space-y-3", children: [
             /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between", children: [
               /* @__PURE__ */ e("span", { className: "rsp-text-xs rsp-font-medium rsp-text-gray-500 rsp-uppercase rsp-tracking-wider", children: t.type.replace("_", " ") }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => V(t.id),
+                  onClick: () => U(t.id),
                   className: "rsp-p-1 rsp-text-red-400 hover:rsp-text-red-600 hover:rsp-bg-red-50 rsp-rounded rsp-transition-colors",
-                  children: /* @__PURE__ */ e(J, { className: "rsp-w-4 rsp-h-4" })
+                  children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4" })
                 }
               )
             ] }),
@@ -3681,7 +3681,7 @@ function aa({ template: a, setTemplate: n }) {
                     {
                       type: "text",
                       value: t.text,
-                      onChange: (E) => M(t.id, "text", E.target.value),
+                      onChange: (V) => k(t.id, "text", V.target.value),
                       maxLength: 25,
                       className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-ring-1 focus:rsp-ring-blue-500 focus:rsp-border-blue-500"
                     }
@@ -3700,7 +3700,7 @@ function aa({ template: a, setTemplate: n }) {
                     {
                       type: t.type === "CALL" ? "tel" : t.type === "URL" ? "url" : "text",
                       value: t.value || "",
-                      onChange: (E) => M(t.id, "value", E.target.value),
+                      onChange: (V) => k(t.id, "value", V.target.value),
                       maxLength: t.type === "URL" ? 2e3 : 20,
                       className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-ring-1 focus:rsp-ring-blue-500 focus:rsp-border-blue-500"
                     }
@@ -3718,14 +3718,14 @@ function aa({ template: a, setTemplate: n }) {
       }) })
     ] }),
     a.buttons.length === 0 && !i && /* @__PURE__ */ r("div", { className: "rsp-text-center rsp-py-12 rsp-bg-gray-50 rsp-rounded-xl rsp-border-2 rsp-border-dashed rsp-border-gray-300", children: [
-      /* @__PURE__ */ e("div", { className: "rsp-w-16 rsp-h-16 rsp-bg-white rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-mx-auto rsp-mb-4 rsp-shadow-sm", children: /* @__PURE__ */ e(re, { className: "rsp-w-8 rsp-h-8 rsp-text-gray-400" }) }),
+      /* @__PURE__ */ e("div", { className: "rsp-w-16 rsp-h-16 rsp-bg-white rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-mx-auto rsp-mb-4 rsp-shadow-sm", children: /* @__PURE__ */ e(le, { className: "rsp-w-8 rsp-h-8 rsp-text-gray-400" }) }),
       /* @__PURE__ */ e("h3", { className: "rsp-text-lg rsp-font-medium rsp-text-gray-900 rsp-mb-2", children: "No buttons added yet" }),
       /* @__PURE__ */ e("p", { className: "rsp-text-gray-500 rsp-text-sm rsp-mb-4", children: "Add interactive buttons to make your message more engaging" }),
       /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-400", children: "Choose from Quick Reply, Web URL, Call, or Flow buttons above" })
     ] })
   ] });
 }
-const ra = async (a) => {
+const la = async (a) => {
   try {
     if (!a)
       throw new Error("No file provided");
@@ -3741,16 +3741,16 @@ const ra = async (a) => {
     console.log("Upload response status:", l.status), console.log("Upload response headers:", Object.fromEntries(l.headers.entries()));
     const d = await l.text();
     console.log("Raw upload response:", d);
-    let f;
+    let p;
     try {
-      f = JSON.parse(d);
+      p = JSON.parse(d);
     } catch (m) {
       throw console.error("Failed to parse upload response:", m), new Error("Invalid response from upload server");
     }
-    if (console.log("Parsed upload response:", f), console.log("Upload status:", f.status), console.log("Upload message:", f.message), console.log("Upload data:", f.data), !f.status)
-      throw new Error(f.message || "Upload failed");
-    if (f.data && Array.isArray(f.data) && f.data.length > 0) {
-      const m = f.data[0];
+    if (console.log("Parsed upload response:", p), console.log("Upload status:", p.status), console.log("Upload message:", p.message), console.log("Upload data:", p.data), !p.status)
+      throw new Error(p.message || "Upload failed");
+    if (p.data && Array.isArray(p.data) && p.data.length > 0) {
+      const m = p.data[0];
       if (m.url)
         return console.log("File uploaded successfully:", {
           url: m.url,
@@ -3764,7 +3764,7 @@ const ra = async (a) => {
   } catch (n) {
     throw console.error("File upload error:", n), n instanceof Error ? n : new Error("Unknown error occurred during file upload");
   }
-}, sa = (a, n) => {
+}, ia = (a, n) => {
   const l = a.name.toLowerCase().split(".").pop();
   switch (n) {
     case "IMAGE":
@@ -3776,7 +3776,7 @@ const ra = async (a) => {
     default:
       return !1;
   }
-}, na = (a) => {
+}, ta = (a) => {
   switch (a) {
     case "IMAGE":
       return 5 * 1024 * 1024;
@@ -3788,116 +3788,119 @@ const ra = async (a) => {
       return 10 * 1024 * 1024;
   }
 };
-function la({ template: a, setTemplate: n, onFileUpload: i }) {
-  var u, k, E, U, B;
-  const [l, d] = Q.useState(!1), [f, m] = Q.useState(null), N = Q.useRef({}), w = () => {
-    var c;
+function ma({ template: a, setTemplate: n, onFileUpload: i }) {
+  var R, I, x, w, L;
+  const [l, d] = K.useState({}), [, p] = K.useState({}), [m, C] = K.useState(!1), [g, f] = K.useState(null), y = K.useRef({}), j = () => {
+    var b;
     const s = {
       id: Math.random().toString(36).substr(2, 9),
       headerType: "MEDIA",
-      mediaType: ((c = a.carousel) == null ? void 0 : c.type) === "VIDEO" ? "VIDEO" : "IMAGE",
+      mediaType: ((b = a.carousel) == null ? void 0 : b.type) === "VIDEO" ? "VIDEO" : "IMAGE",
       body: "",
       buttons: []
     };
-    n((o) => {
-      var y, C;
+    n((E) => {
+      var T, c;
       return {
-        ...o,
+        ...E,
         carousel: {
-          type: ((y = a.carousel) == null ? void 0 : y.type) || "IMAGE",
-          cards: [...((C = a.carousel) == null ? void 0 : C.cards) || [], s]
+          type: ((T = a.carousel) == null ? void 0 : T.type) || "IMAGE",
+          cards: [...((c = a.carousel) == null ? void 0 : c.cards) || [], s]
         }
       };
     });
-  }, h = (s) => {
-    n((c) => ({
-      ...c,
+  }, U = (s) => {
+    n((b) => ({
+      ...b,
       carousel: {
-        ...c.carousel,
-        cards: c.carousel.cards.filter((o) => o.id !== s)
+        ...b.carousel,
+        cards: b.carousel.cards.filter((E) => E.id !== s)
       }
     }));
-  }, g = (s, c, o) => {
-    n((y) => ({
-      ...y,
+  }, k = (s, b, E) => {
+    n((T) => ({
+      ...T,
       carousel: {
-        ...y.carousel,
-        cards: y.carousel.cards.map(
-          (C) => C.id === s ? { ...C, [c]: o } : C
+        ...T.carousel,
+        cards: T.carousel.cards.map(
+          (c) => c.id === s ? { ...c, [b]: E } : c
         )
       }
     }));
-  }, S = (s, c) => {
-    var L;
-    const o = (L = a.carousel) == null ? void 0 : L.cards.find((A) => A.id === s);
-    if (!o) return;
-    const j = `{{${M(s) + 1}}}`, p = o[c] + j;
-    g(s, c, p);
-  }, V = (s) => {
-    var p;
-    if (!f) return;
-    const c = N.current[f], o = (p = a.carousel) == null ? void 0 : p.cards.find((L) => L.id === f);
-    if (!o) return;
-    const y = c && typeof c.selectionStart == "number" ? c.selectionStart : o.body.length, C = o.body.substring(0, y), j = o.body.substring(y), R = C + s + j;
-    g(f, "body", R), setTimeout(() => {
-      const L = N.current[f];
-      if (L) {
-        const A = y + s.length;
-        L.setSelectionRange(A, A), L.focus();
+  }, N = (s, b) => {
+    var $;
+    const E = ($ = a.carousel) == null ? void 0 : $.cards.find((X) => X.id === s);
+    if (!E) return;
+    const M = `{{${u(s) + 1}}}`, O = E[b] + M;
+    k(s, b, O);
+  }, o = (s) => {
+    var O;
+    if (!g) return;
+    const b = y.current[g], E = (O = a.carousel) == null ? void 0 : O.cards.find(($) => $.id === g);
+    if (!E) return;
+    const T = b && typeof b.selectionStart == "number" ? b.selectionStart : E.body.length, c = E.body.substring(0, T), M = E.body.substring(T), A = c + s + M;
+    k(g, "body", A), setTimeout(() => {
+      const $ = y.current[g];
+      if ($) {
+        const X = T + s.length;
+        $.setSelectionRange(X, X), $.focus();
       }
-    }, 0), d(!1);
-  }, M = (s) => {
-    var j;
-    const c = (j = a.carousel) == null ? void 0 : j.cards.find((R) => R.id === s);
-    if (!c) return 0;
-    const y = (c.body || "").match(/\{\{(\d+)\}\}/g);
-    if (!y) return 0;
-    const C = y.map((R) => {
-      const p = R.match(/{{(\d+)}}/);
-      return p ? parseInt(p[1], 10) : 0;
+    }, 0), C(!1);
+  }, u = (s) => {
+    var M;
+    const b = (M = a.carousel) == null ? void 0 : M.cards.find((A) => A.id === s);
+    if (!b) return 0;
+    const T = (b.body || "").match(/\{\{(\d+)\}\}/g);
+    if (!T) return 0;
+    const c = T.map((A) => {
+      const O = A.match(/{{(\d+)}}/);
+      return O ? parseInt(O[1], 10) : 0;
     });
-    return C.length > 0 ? Math.max(...C) : 0;
-  }, v = (s, c) => {
-    var C;
-    const o = (C = a.carousel) == null ? void 0 : C.cards.find((j) => j.id === s);
-    if (!o || o.buttons.length >= 2) return;
-    const y = {
+    return c.length > 0 ? Math.max(...c) : 0;
+  }, t = (s, b) => {
+    var c;
+    const E = (c = a.carousel) == null ? void 0 : c.cards.find((M) => M.id === s);
+    if (!E || E.buttons.length >= 2) return;
+    const T = {
       id: Math.random().toString(36).substr(2, 9),
-      type: c,
+      type: b,
       text: "",
       value: "",
       urlType: "static"
     };
-    g(s, "buttons", [...o.buttons, y]);
-  }, x = (s, c, o, y) => {
-    var R;
-    const C = (R = a.carousel) == null ? void 0 : R.cards.find((p) => p.id === s);
-    if (!C) return;
-    const j = C.buttons.map(
-      (p) => p.id === c ? { ...p, [o]: y } : p
+    k(s, "buttons", [...E.buttons, T]);
+  }, h = (s, b, E, T) => {
+    var A;
+    const c = (A = a.carousel) == null ? void 0 : A.cards.find((O) => O.id === s);
+    if (!c) return;
+    const M = c.buttons.map(
+      (O) => O.id === b ? { ...O, [E]: T } : O
     );
-    g(s, "buttons", j);
-  }, b = (s, c) => {
-    var C;
-    const o = (C = a.carousel) == null ? void 0 : C.cards.find((j) => j.id === s);
-    if (!o) return;
-    const y = o.buttons.filter((j) => j.id !== c);
-    g(s, "buttons", y);
-  }, t = async (s, c) => {
-    var o;
+    k(s, "buttons", M);
+  }, v = (s, b) => {
+    var c;
+    const E = (c = a.carousel) == null ? void 0 : c.cards.find((M) => M.id === s);
+    if (!E) return;
+    const T = E.buttons.filter((M) => M.id !== b);
+    k(s, "buttons", T);
+  }, V = async (s, b) => {
+    var E;
     try {
-      const y = ((o = a.carousel) == null ? void 0 : o.type) === "VIDEO" ? "VIDEO" : "IMAGE";
-      if (!sa(c, y))
-        throw new Error(`Invalid file type. Expected ${y.toLowerCase()} file.`);
-      const C = na(y);
-      if (c.size > C) {
-        const R = C / 1048576;
-        throw new Error(`File size too large. Maximum allowed size is ${R}MB.`);
+      d((A) => ({ ...A, [s]: !0 })), p((A) => ({ ...A, [s]: !1 }));
+      const T = ((E = a.carousel) == null ? void 0 : E.type) === "VIDEO" ? "VIDEO" : "IMAGE";
+      if (!ia(b, T))
+        throw new Error(`Invalid file type. Expected ${T.toLowerCase()} file.`);
+      const c = ta(T);
+      if (b.size > c) {
+        const A = c / 1048576;
+        throw new Error(`File size too large. Maximum allowed size is ${A}MB.`);
       }
-      const j = await i(c);
-      g(s, "mediaUrl", j);
-    } catch (y) {
-      console.error("File upload failed:", y), alert(y instanceof Error ? y.message : "File upload failed");
+      const M = await i(b);
+      k(s, "mediaUrl", M);
+    } catch (T) {
+      console.error("File upload failed:", T), alert(T instanceof Error ? T.message : "File upload failed");
+    } finally {
+      d((T) => ({ ...T, [s]: !1 }));
     }
   };
   return /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
@@ -3906,17 +3909,17 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-4", children: [
         /* @__PURE__ */ r("span", { className: "rsp-text-sm rsp-text-gray-500", children: [
           "Total Cards: ",
-          ((u = a.carousel) == null ? void 0 : u.cards.length) || 0,
+          ((R = a.carousel) == null ? void 0 : R.cards.length) || 0,
           "/10"
         ] }),
         /* @__PURE__ */ r(
           "button",
           {
-            onClick: w,
-            disabled: (((k = a.carousel) == null ? void 0 : k.cards.length) || 0) >= 10,
+            onClick: j,
+            disabled: (((I = a.carousel) == null ? void 0 : I.cards.length) || 0) >= 10,
             className: "rsp-px-4 rsp-py-2 rsp-bg-blue-600 rsp-text-white rsp-rounded-md hover:rsp-bg-blue-700 disabled:rsp-bg-gray-400 disabled:rsp-cursor-not-allowed rsp-text-sm rsp-font-medium",
             children: [
-              /* @__PURE__ */ e(te, { className: "rsp-w-4 rsp-h-4 rsp-inline rsp-mr-2" }),
+              /* @__PURE__ */ e(de, { className: "rsp-w-4 rsp-h-4 rsp-inline rsp-mr-2" }),
               "Add Card"
             ]
           }
@@ -3933,14 +3936,14 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
               type: "radio",
               name: "carouselType",
               value: "IMAGE",
-              checked: ((E = a.carousel) == null ? void 0 : E.type) === "IMAGE",
-              onChange: (s) => n((c) => {
-                var o;
+              checked: ((x = a.carousel) == null ? void 0 : x.type) === "IMAGE",
+              onChange: (s) => n((b) => {
+                var E;
                 return {
-                  ...c,
+                  ...b,
                   carousel: {
                     type: s.target.value,
-                    cards: ((o = c.carousel) == null ? void 0 : o.cards) || []
+                    cards: ((E = b.carousel) == null ? void 0 : E.cards) || []
                   }
                 };
               }),
@@ -3956,14 +3959,14 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
               type: "radio",
               name: "carouselType",
               value: "VIDEO",
-              checked: ((U = a.carousel) == null ? void 0 : U.type) === "VIDEO",
-              onChange: (s) => n((c) => {
-                var o;
+              checked: ((w = a.carousel) == null ? void 0 : w.type) === "VIDEO",
+              onChange: (s) => n((b) => {
+                var E;
                 return {
-                  ...c,
+                  ...b,
                   carousel: {
                     type: s.target.value,
-                    cards: ((o = c.carousel) == null ? void 0 : o.cards) || []
+                    cards: ((E = b.carousel) == null ? void 0 : E.cards) || []
                   }
                 };
               }),
@@ -3974,90 +3977,105 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: (B = a.carousel) == null ? void 0 : B.cards.map((s, c) => {
-      var o, y, C, j, R, p, L, A;
+    /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: (L = a.carousel) == null ? void 0 : L.cards.map((s, b) => {
+      var E, T, c, M, A, O, $, X;
       return /* @__PURE__ */ r("div", { className: "rsp-bg-white rsp-rounded-xl rsp-border-2 rsp-border-gray-200 rsp-overflow-hidden rsp-shadow-lg rsp-transition-all hover:rsp-shadow-xl hover:rsp-border-blue-300", children: [
         /* @__PURE__ */ r("div", { className: "rsp-bg-gradient-to-r rsp-from-blue-50 rsp-to-blue-100 rsp-px-5 rsp-py-3 rsp-flex rsp-items-center rsp-justify-between rsp-border-b rsp-border-gray-200", children: [
           /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "rsp-w-8 rsp-h-8 rsp-bg-blue-500 rsp-text-white rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-font-bold rsp-text-sm rsp-shadow-md", children: c + 1 }),
+            /* @__PURE__ */ e("div", { className: "rsp-w-8 rsp-h-8 rsp-bg-blue-500 rsp-text-white rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-font-bold rsp-text-sm rsp-shadow-md", children: b + 1 }),
             /* @__PURE__ */ r("h4", { className: "rsp-text-base rsp-font-semibold rsp-text-gray-800", children: [
               "Card ",
-              c + 1
+              b + 1
             ] })
           ] }),
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => h(s.id),
+              onClick: () => U(s.id),
               className: "rsp-p-1.5 rsp-text-gray-500 hover:rsp-text-white hover:rsp-bg-red-500 rsp-rounded-full rsp-transition-colors",
               title: "Remove Card",
-              children: /* @__PURE__ */ e(J, { className: "rsp-w-4 rsp-h-4" })
+              children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4" })
             }
           )
         ] }),
         /* @__PURE__ */ e("div", { className: "rsp-p-6", children: /* @__PURE__ */ r("div", { className: "rsp-grid rsp-grid-cols-1 lg:rsp-grid-cols-2 rsp-gap-6", children: [
           /* @__PURE__ */ r("div", { children: [
             /* @__PURE__ */ r("label", { className: "rsp-text-sm rsp-font-semibold rsp-text-gray-800 rsp-mb-3 rsp-flex rsp-items-center rsp-gap-2", children: [
-              /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: ((o = a.carousel) == null ? void 0 : o.type) === "VIDEO" ? /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) : /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
-              ((y = a.carousel) == null ? void 0 : y.type) === "VIDEO" ? "Video" : "Image",
+              /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: ((E = a.carousel) == null ? void 0 : E.type) === "VIDEO" ? /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) : /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+              ((T = a.carousel) == null ? void 0 : T.type) === "VIDEO" ? "Video" : "Image",
               " Upload"
             ] }),
-            /* @__PURE__ */ e("div", { className: "rsp-border-2 rsp-border-dashed rsp-border-blue-200 rsp-rounded-xl rsp-p-6 rsp-text-center rsp-bg-gradient-to-br rsp-from-blue-50 rsp-to-white rsp-transition-all hover:rsp-border-blue-400 hover:rsp-from-blue-100", children: s.mediaUrl ? /* @__PURE__ */ r("div", { className: "rsp-relative rsp-group", children: [
-              ((C = a.carousel) == null ? void 0 : C.type) === "IMAGE" ? /* @__PURE__ */ e(
-                "img",
-                {
-                  src: s.mediaUrl,
-                  alt: `Card ${c + 1}`,
-                  className: "rsp-w-full rsp-h-48 rsp-object-cover rsp-rounded-lg rsp-shadow-md"
-                }
-              ) : /* @__PURE__ */ e(
-                "video",
-                {
-                  src: s.mediaUrl,
-                  className: "rsp-w-full rsp-h-48 rsp-object-cover rsp-rounded-lg rsp-shadow-md",
-                  controls: !0
-                }
-              ),
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  onClick: () => g(s.id, "mediaUrl", ""),
-                  className: "rsp-absolute rsp-top-2 rsp-right-2 rsp-p-2 rsp-bg-red-500 rsp-text-white rsp-rounded-full hover:rsp-bg-red-600 rsp-shadow-lg rsp-opacity-0 group-hover:rsp-opacity-100 rsp-transition-opacity",
-                  title: "Remove media",
-                  children: /* @__PURE__ */ e(J, { className: "rsp-w-4 rsp-h-4" })
-                }
-              ),
-              /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-bottom-2 rsp-left-2 rsp-bg-black rsp-bg-opacity-60 rsp-text-white rsp-text-xs rsp-px-2 rsp-py-1 rsp-rounded rsp-backdrop-blur-sm", children: ((j = a.carousel) == null ? void 0 : j.type) === "VIDEO" ? "📹 Video" : "🖼️ Image" })
-            ] }) : /* @__PURE__ */ r("div", { children: [
-              /* @__PURE__ */ e("div", { className: "rsp-w-20 rsp-h-20 rsp-mx-auto rsp-mb-4 rsp-bg-gradient-to-br rsp-from-blue-100 rsp-to-blue-200 rsp-rounded-xl rsp-flex rsp-items-center rsp-justify-center rsp-shadow-md", children: /* @__PURE__ */ e("svg", { className: "rsp-w-10 rsp-h-10 rsp-text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: ((R = a.carousel) == null ? void 0 : R.type) === "VIDEO" ? /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) : /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) }),
-              /* @__PURE__ */ e(
-                "input",
-                {
-                  type: "file",
-                  accept: ((p = a.carousel) == null ? void 0 : p.type) === "VIDEO" ? "video/*" : "image/*",
-                  onChange: (T) => {
-                    var z;
-                    const Y = (z = T.target.files) == null ? void 0 : z[0];
-                    Y && t(s.id, Y);
-                  },
-                  className: "rsp-hidden",
-                  id: `file-upload-${s.id}`
-                }
-              ),
-              /* @__PURE__ */ r(
-                "label",
-                {
-                  htmlFor: `file-upload-${s.id}`,
-                  className: "rsp-inline-flex rsp-items-center rsp-gap-2 rsp-px-5 rsp-py-2.5 rsp-border rsp-border-blue-300 rsp-rounded-lg rsp-shadow-sm rsp-text-sm rsp-font-semibold rsp-text-blue-600 rsp-bg-white hover:rsp-bg-blue-50 rsp-cursor-pointer rsp-transition-colors",
-                  children: [
-                    /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
-                    "Upload ",
-                    ((L = a.carousel) == null ? void 0 : L.type) === "VIDEO" ? "Video" : "Image"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-3 rsp-px-2", children: ((A = a.carousel) == null ? void 0 : A.type) === "VIDEO" ? "📹 MP4, MOV, AVI (Max 16MB)" : "🖼️ PNG, JPG, GIF, TIFF, SVG, BMP (Max 5MB)" })
-            ] }) })
+            /* @__PURE__ */ r("div", { className: "rsp-border-2 rsp-border-dashed rsp-border-blue-200 rsp-rounded-xl rsp-p-6 rsp-text-center rsp-bg-gradient-to-br rsp-from-blue-50 rsp-to-white rsp-transition-all hover:rsp-border-blue-400 hover:rsp-from-blue-100 rsp-relative", children: [
+              s.mediaUrl ? /* @__PURE__ */ r("div", { className: "rsp-relative rsp-group", children: [
+                ((c = a.carousel) == null ? void 0 : c.type) === "IMAGE" ? /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: s.mediaUrl,
+                    alt: `Card ${b + 1}`,
+                    className: "rsp-w-full rsp-h-48 rsp-object-cover rsp-rounded-lg rsp-shadow-md",
+                    onLoad: () => p((S) => ({ ...S, [s.id]: !0 })),
+                    onError: () => p((S) => ({ ...S, [s.id]: !1 }))
+                  }
+                ) : /* @__PURE__ */ e(
+                  "video",
+                  {
+                    src: s.mediaUrl,
+                    className: "rsp-w-full rsp-h-48 rsp-object-cover rsp-rounded-lg rsp-shadow-md",
+                    controls: !0,
+                    onLoadedData: () => p((S) => ({ ...S, [s.id]: !0 })),
+                    onError: () => p((S) => ({ ...S, [s.id]: !1 }))
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => k(s.id, "mediaUrl", ""),
+                    className: "rsp-absolute rsp-top-2 rsp-right-2 rsp-p-2 rsp-bg-red-500 rsp-text-white rsp-rounded-full hover:rsp-bg-red-600 rsp-shadow-lg rsp-opacity-0 group-hover:rsp-opacity-100 rsp-transition-opacity",
+                    title: "Remove media",
+                    children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4" })
+                  }
+                ),
+                /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-bottom-2 rsp-left-2 rsp-bg-black rsp-bg-opacity-60 rsp-text-white rsp-text-xs rsp-px-2 rsp-py-1 rsp-rounded rsp-backdrop-blur-sm", children: ((M = a.carousel) == null ? void 0 : M.type) === "VIDEO" ? "📹 Video" : "🖼️ Image" })
+              ] }) : /* @__PURE__ */ r("div", { children: [
+                /* @__PURE__ */ e("div", { className: "rsp-w-20 rsp-h-20 rsp-mx-auto rsp-mb-4 rsp-bg-gradient-to-br rsp-from-blue-100 rsp-to-blue-200 rsp-rounded-xl rsp-flex rsp-items-center rsp-justify-center rsp-shadow-md", children: /* @__PURE__ */ e("svg", { className: "rsp-w-10 rsp-h-10 rsp-text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: ((A = a.carousel) == null ? void 0 : A.type) === "VIDEO" ? /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) : /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) }),
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    type: "file",
+                    accept: ((O = a.carousel) == null ? void 0 : O.type) === "VIDEO" ? "video/*" : "image/*",
+                    onChange: (S) => {
+                      var z;
+                      const ae = (z = S.target.files) == null ? void 0 : z[0];
+                      ae && !l[s.id] && V(s.id, ae);
+                    },
+                    className: "rsp-hidden",
+                    id: `file-upload-${s.id}`,
+                    disabled: !!l[s.id]
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "label",
+                  {
+                    htmlFor: `file-upload-${s.id}`,
+                    className: `rsp-inline-flex rsp-items-center rsp-gap-2 rsp-px-5 rsp-py-2.5 rsp-border rsp-border-blue-300 rsp-rounded-lg rsp-shadow-sm rsp-text-sm rsp-font-semibold rsp-text-blue-600 rsp-bg-white rsp-transition-colors ${l[s.id] ? "rsp-opacity-50 rsp-cursor-not-allowed" : "hover:rsp-bg-blue-50 rsp-cursor-pointer"}`,
+                    "aria-disabled": !!l[s.id],
+                    children: [
+                      /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
+                      "Upload ",
+                      (($ = a.carousel) == null ? void 0 : $.type) === "VIDEO" ? "Video" : "Image"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-3 rsp-px-2", children: ((X = a.carousel) == null ? void 0 : X.type) === "VIDEO" ? "📹 MP4, MOV, AVI (Max 16MB)" : "🖼️ PNG, JPG, GIF, TIFF, SVG, BMP (Max 5MB)" })
+              ] }),
+              l[s.id] && /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-0 rsp-bg-black rsp-bg-opacity-30 rsp-flex rsp-items-center rsp-justify-center", children: /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2 rsp-bg-white rsp-px-3 rsp-py-2 rsp-rounded-md rsp-shadow", children: [
+                /* @__PURE__ */ r("svg", { className: "rsp-w-4 rsp-h-4 rsp-animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
+                  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25", strokeWidth: "4" }),
+                  /* @__PURE__ */ e("path", { d: "M22 12a10 10 0 00-10-10", strokeWidth: "4" })
+                ] }),
+                /* @__PURE__ */ e("span", { className: "rsp-text-xs rsp-text-gray-700", children: "Uploading..." })
+              ] }) })
+            ] })
           ] }),
           /* @__PURE__ */ r("div", { className: "rsp-space-y-5", children: [
             /* @__PURE__ */ r("div", { children: [
@@ -4069,11 +4087,11 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
               /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
                 "textarea",
                 {
-                  ref: (T) => {
-                    N.current[s.id] = T;
+                  ref: (S) => {
+                    y.current[s.id] = S;
                   },
                   value: s.body,
-                  onChange: (T) => g(s.id, "body", T.target.value),
+                  onChange: (S) => k(s.id, "body", S.target.value),
                   maxLength: 160,
                   rows: 4,
                   className: "rsp-w-full rsp-px-4 rsp-py-3 rsp-border-2 rsp-border-gray-200 rsp-rounded-lg rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-400 rsp-bg-white rsp-resize-none rsp-shadow-sm rsp-transition-colors",
@@ -4085,7 +4103,7 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: () => S(s.id, "body"),
+                      onClick: () => N(s.id, "body"),
                       className: "rsp-p-1.5 rsp-text-gray-500 hover:rsp-text-blue-600 hover:rsp-bg-blue-50 rsp-rounded rsp-transition-colors",
                       title: "Add Variable",
                       children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) })
@@ -4095,11 +4113,11 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                     "button",
                     {
                       onClick: () => {
-                        m(s.id), d(!0);
+                        f(s.id), C(!0);
                       },
                       className: "rsp-p-1.5 rsp-text-gray-500 hover:rsp-text-blue-600 hover:rsp-bg-blue-50 rsp-rounded rsp-transition-colors",
                       title: "Add Emoji",
-                      children: /* @__PURE__ */ e(me, { className: "rsp-w-4 rsp-h-4" })
+                      children: /* @__PURE__ */ e(xe, { className: "rsp-w-4 rsp-h-4" })
                     }
                   )
                 ] }),
@@ -4109,11 +4127,11 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                 ] })
               ] }),
               (() => {
-                const T = s.body.match(/\{\{(\d+)\}\}/g) || [], Y = [...new Set(T.map((z) => z.replace(/[{}]/g, "")))];
-                return Y.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3 rsp-p-3 rsp-bg-blue-50 rsp-rounded-lg rsp-border rsp-border-blue-200", children: [
+                const S = s.body.match(/\{\{(\d+)\}\}/g) || [], ae = [...new Set(S.map((z) => z.replace(/[{}]/g, "")))];
+                return ae.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3 rsp-p-3 rsp-bg-blue-50 rsp-rounded-lg rsp-border rsp-border-blue-200", children: [
                   /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-font-semibold rsp-text-blue-800 rsp-mb-2", children: "Sample Values for This Card" }),
-                  /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-1 rsp-gap-2", children: Y.map((z) => {
-                    var G, O;
+                  /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-1 rsp-gap-2", children: ae.map((z) => {
+                    var Z, _;
                     return /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
                       /* @__PURE__ */ r("label", { className: "rsp-text-xs rsp-text-gray-700 rsp-font-medium rsp-whitespace-nowrap", children: [
                         "{{",
@@ -4125,24 +4143,24 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                         "input",
                         {
                           type: "text",
-                          value: ((O = (G = s.sampleContent) == null ? void 0 : G.bodyVariables) == null ? void 0 : O[z]) || "",
-                          onChange: (W) => {
-                            const $ = W.target.value;
-                            n((_) => ({
-                              ..._,
+                          value: ((_ = (Z = s.sampleContent) == null ? void 0 : Z.bodyVariables) == null ? void 0 : _[z]) || "",
+                          onChange: (Q) => {
+                            const W = Q.target.value;
+                            n((F) => ({
+                              ...F,
                               carousel: {
-                                ..._.carousel,
-                                cards: _.carousel.cards.map((P) => {
-                                  var F, D, K;
+                                ...F.carousel,
+                                cards: F.carousel.cards.map((P) => {
+                                  var D, q, Y;
                                   return P.id !== s.id ? P : {
                                     ...P,
                                     sampleContent: {
-                                      headerVariables: ((F = P.sampleContent) == null ? void 0 : F.headerVariables) || {},
+                                      headerVariables: ((D = P.sampleContent) == null ? void 0 : D.headerVariables) || {},
                                       bodyVariables: {
-                                        ...((D = P.sampleContent) == null ? void 0 : D.bodyVariables) || {},
-                                        [z]: $
+                                        ...((q = P.sampleContent) == null ? void 0 : q.bodyVariables) || {},
+                                        [z]: W
                                       },
-                                      buttonVariables: ((K = P.sampleContent) == null ? void 0 : K.buttonVariables) || {}
+                                      buttonVariables: ((Y = P.sampleContent) == null ? void 0 : Y.buttonVariables) || {}
                                     }
                                   };
                                 })
@@ -4158,22 +4176,22 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                         {
                           type: "button",
                           onClick: () => {
-                            const W = new RegExp(`\\{\\{${z}\\}\\}`, "g"), $ = (s.body || "").replace(W, "");
-                            n((_) => ({
-                              ..._,
+                            const Q = new RegExp(`\\{\\{${z}\\}\\}`, "g"), W = (s.body || "").replace(Q, "");
+                            n((F) => ({
+                              ...F,
                               carousel: {
-                                ..._.carousel,
-                                cards: _.carousel.cards.map((P) => {
-                                  var F, D, K;
+                                ...F.carousel,
+                                cards: F.carousel.cards.map((P) => {
+                                  var D, q, Y;
                                   if (P.id !== s.id) return P;
-                                  const H = Object.fromEntries(Object.entries(((F = P.sampleContent) == null ? void 0 : F.bodyVariables) || {}).filter(([Z]) => Z !== z));
+                                  const G = Object.fromEntries(Object.entries(((D = P.sampleContent) == null ? void 0 : D.bodyVariables) || {}).filter(([re]) => re !== z));
                                   return {
                                     ...P,
-                                    body: $,
+                                    body: W,
                                     sampleContent: {
-                                      headerVariables: ((D = P.sampleContent) == null ? void 0 : D.headerVariables) || {},
-                                      bodyVariables: H,
-                                      buttonVariables: ((K = P.sampleContent) == null ? void 0 : K.buttonVariables) || {}
+                                      headerVariables: ((q = P.sampleContent) == null ? void 0 : q.headerVariables) || {},
+                                      bodyVariables: G,
+                                      buttonVariables: ((Y = P.sampleContent) == null ? void 0 : Y.buttonVariables) || {}
                                     }
                                   };
                                 })
@@ -4204,7 +4222,7 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: () => v(s.id, "QUICK_REPLY"),
+                    onClick: () => t(s.id, "QUICK_REPLY"),
                     className: "rsp-flex rsp-flex-col rsp-items-center rsp-gap-2 rsp-px-3 rsp-py-4 rsp-border-2 rsp-border-gray-200 rsp-rounded-lg rsp-text-sm rsp-font-medium rsp-text-gray-700 hover:rsp-border-blue-400 hover:rsp-bg-blue-50 rsp-transition-all rsp-shadow-sm",
                     children: [
                       /* @__PURE__ */ e("svg", { className: "rsp-w-6 rsp-h-6 rsp-text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
@@ -4215,7 +4233,7 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: () => v(s.id, "URL"),
+                    onClick: () => t(s.id, "URL"),
                     className: "rsp-flex rsp-flex-col rsp-items-center rsp-gap-2 rsp-px-3 rsp-py-4 rsp-border-2 rsp-border-gray-200 rsp-rounded-lg rsp-text-sm rsp-font-medium rsp-text-gray-700 hover:rsp-border-blue-400 hover:rsp-bg-blue-50 rsp-transition-all rsp-shadow-sm",
                     children: [
                       /* @__PURE__ */ e("svg", { className: "rsp-w-6 rsp-h-6 rsp-text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }),
@@ -4226,7 +4244,7 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: () => v(s.id, "PHONE_NUMBER"),
+                    onClick: () => t(s.id, "PHONE_NUMBER"),
                     className: "rsp-flex rsp-flex-col rsp-items-center rsp-gap-2 rsp-px-3 rsp-py-4 rsp-border-2 rsp-border-gray-200 rsp-rounded-lg rsp-text-sm rsp-font-medium rsp-text-gray-700 hover:rsp-border-blue-400 hover:rsp-bg-blue-50 rsp-transition-all rsp-shadow-sm",
                     children: [
                       /* @__PURE__ */ e("svg", { className: "rsp-w-6 rsp-h-6 rsp-text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }),
@@ -4241,19 +4259,19 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
                 "Configured Buttons"
               ] }),
-              s.buttons.map((T, Y) => /* @__PURE__ */ r("div", { className: "rsp-p-4 rsp-border-2 rsp-border-blue-200 rsp-rounded-lg rsp-bg-gradient-to-br rsp-from-blue-50 rsp-to-white rsp-shadow-sm", children: [
+              s.buttons.map((S, ae) => /* @__PURE__ */ r("div", { className: "rsp-p-4 rsp-border-2 rsp-border-blue-200 rsp-rounded-lg rsp-bg-gradient-to-br rsp-from-blue-50 rsp-to-white rsp-shadow-sm", children: [
                 /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between rsp-mb-3", children: [
                   /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
-                    /* @__PURE__ */ e("div", { className: "rsp-w-6 rsp-h-6 rsp-bg-blue-500 rsp-text-white rsp-rounded rsp-flex rsp-items-center rsp-justify-center rsp-text-xs rsp-font-bold", children: Y + 1 }),
-                    /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-semibold rsp-text-gray-800", children: T.type === "QUICK_REPLY" ? "Quick Reply" : T.type === "URL" ? "Website" : "Phone" })
+                    /* @__PURE__ */ e("div", { className: "rsp-w-6 rsp-h-6 rsp-bg-blue-500 rsp-text-white rsp-rounded rsp-flex rsp-items-center rsp-justify-center rsp-text-xs rsp-font-bold", children: ae + 1 }),
+                    /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-semibold rsp-text-gray-800", children: S.type === "QUICK_REPLY" ? "Quick Reply" : S.type === "URL" ? "Website" : "Phone" })
                   ] }),
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: () => b(s.id, T.id),
+                      onClick: () => v(s.id, S.id),
                       className: "rsp-p-1 rsp-text-gray-400 hover:rsp-text-red-500 hover:rsp-bg-red-50 rsp-rounded rsp-transition-colors",
                       title: "Remove button",
-                      children: /* @__PURE__ */ e(J, { className: "rsp-w-4 rsp-h-4" })
+                      children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4" })
                     }
                   )
                 ] }),
@@ -4264,15 +4282,15 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                       "input",
                       {
                         type: "text",
-                        value: T.text,
-                        onChange: (z) => x(s.id, T.id, "text", z.target.value),
-                        placeholder: `Enter Button Text (Max ${T.type === "QUICK_REPLY" ? "25" : "20"} characters)`,
-                        maxLength: T.type === "QUICK_REPLY" ? 25 : 20,
+                        value: S.text,
+                        onChange: (z) => h(s.id, S.id, "text", z.target.value),
+                        placeholder: `Enter Button Text (Max ${S.type === "QUICK_REPLY" ? "25" : "20"} characters)`,
+                        maxLength: S.type === "QUICK_REPLY" ? 25 : 20,
                         className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-white"
                       }
                     )
                   ] }),
-                  T.type === "URL" && /* @__PURE__ */ r("div", { className: "rsp-space-y-3", children: [
+                  S.type === "URL" && /* @__PURE__ */ r("div", { className: "rsp-space-y-3", children: [
                     /* @__PURE__ */ r("div", { children: [
                       /* @__PURE__ */ e("label", { className: "rsp-block rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-2", children: "URL Type" }),
                       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-gap-4", children: [
@@ -4281,8 +4299,8 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                             "input",
                             {
                               type: "radio",
-                              checked: T.urlType !== "dynamic",
-                              onChange: () => x(s.id, T.id, "urlType", "static"),
+                              checked: S.urlType !== "dynamic",
+                              onChange: () => h(s.id, S.id, "urlType", "static"),
                               className: "rsp-mr-2 rsp-text-blue-600"
                             }
                           ),
@@ -4293,8 +4311,8 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                             "input",
                             {
                               type: "radio",
-                              checked: T.urlType === "dynamic",
-                              onChange: () => x(s.id, T.id, "urlType", "dynamic"),
+                              checked: S.urlType === "dynamic",
+                              onChange: () => h(s.id, S.id, "urlType", "dynamic"),
                               className: "rsp-mr-2 rsp-text-blue-600"
                             }
                           ),
@@ -4308,14 +4326,14 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                         "input",
                         {
                           type: "text",
-                          value: T.value || "",
-                          onChange: (z) => x(s.id, T.id, "value", z.target.value),
-                          placeholder: T.urlType === "dynamic" ? "https://example.com/order/{{1}}" : "https://example.com",
+                          value: S.value || "",
+                          onChange: (z) => h(s.id, S.id, "value", z.target.value),
+                          placeholder: S.urlType === "dynamic" ? "https://example.com/order/{{1}}" : "https://example.com",
                           className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-white"
                         }
                       )
                     ] }),
-                    T.urlType === "dynamic" && /* @__PURE__ */ r("div", { className: "rsp-space-y-2", children: [
+                    S.urlType === "dynamic" && /* @__PURE__ */ r("div", { className: "rsp-space-y-2", children: [
                       /* @__PURE__ */ e("div", { className: "rsp-p-2 rsp-bg-blue-50 rsp-rounded rsp-border rsp-border-blue-200", children: /* @__PURE__ */ r("p", { className: "rsp-text-xs rsp-text-blue-700", children: [
                         /* @__PURE__ */ e("strong", { children: "Tip:" }),
                         " Use ",
@@ -4334,71 +4352,71 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                           {
                             type: "button",
                             onClick: () => {
-                              if (((T.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3) return;
-                              const O = ((T.value || "").match(/\{\{(\d+)\}\}/g) || []).map((P) => {
-                                const H = P.match(/{{(\d+)}}/);
-                                return H ? parseInt(H[1], 10) : 0;
-                              }), $ = (O.length > 0 ? Math.max(...O) : 0) + 1, _ = (T.value || "") + `{{${$}}}`;
-                              x(s.id, T.id, "value", _);
+                              if (((S.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3) return;
+                              const _ = ((S.value || "").match(/\{\{(\d+)\}\}/g) || []).map((P) => {
+                                const G = P.match(/{{(\d+)}}/);
+                                return G ? parseInt(G[1], 10) : 0;
+                              }), W = (_.length > 0 ? Math.max(..._) : 0) + 1, F = (S.value || "") + `{{${W}}}`;
+                              h(s.id, S.id, "value", F);
                             },
-                            disabled: ((T.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3,
+                            disabled: ((S.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3,
                             className: "rsp-px-3 rsp-py-1.5 rsp-text-xs rsp-bg-blue-500 hover:rsp-bg-blue-600 rsp-text-white rsp-rounded disabled:rsp-bg-gray-300 disabled:rsp-cursor-not-allowed rsp-transition-colors",
                             children: "+ Add Variable"
                           }
                         ),
-                        ((T.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3 && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-1", children: "Maximum 3 variables allowed" })
+                        ((S.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3 && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-1", children: "Maximum 3 variables allowed" })
                       ] }),
                       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
                         "button",
                         {
                           type: "button",
                           onClick: () => {
-                            const z = T.value || "", G = /\{\{\d+\}\}/g;
-                            let O = -1, W = "", $;
-                            for (; ($ = G.exec(z)) !== null; )
-                              O = $.index, W = $[0];
-                            if (O === -1) return;
-                            const _ = O, P = _ + W.length, H = z.slice(0, _) + z.slice(P);
-                            x(s.id, T.id, "value", H);
+                            const z = S.value || "", Z = /\{\{\d+\}\}/g;
+                            let _ = -1, Q = "", W;
+                            for (; (W = Z.exec(z)) !== null; )
+                              _ = W.index, Q = W[0];
+                            if (_ === -1) return;
+                            const F = _, P = F + Q.length, G = z.slice(0, F) + z.slice(P);
+                            h(s.id, S.id, "value", G);
                           },
                           className: "rsp-mt-2 rsp-px-3 rsp-py-1.5 rsp-text-xs rsp-bg-red-500 hover:rsp-bg-red-600 rsp-text-white rsp-rounded rsp-transition-colors",
                           children: "Remove Last"
                         }
                       ) }),
                       (() => {
-                        const z = (T.value || "").match(/\{\{(\d+)\}\}/g) || [], G = [...new Set(z.map((O) => O.replace(/[{}]/g, "")))];
-                        return G.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-p-3 rsp-bg-gray-50 rsp-rounded-lg rsp-border rsp-border-gray-200", children: [
+                        const z = (S.value || "").match(/\{\{(\d+)\}\}/g) || [], Z = [...new Set(z.map((_) => _.replace(/[{}]/g, "")))];
+                        return Z.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-p-3 rsp-bg-gray-50 rsp-rounded-lg rsp-border rsp-border-gray-200", children: [
                           /* @__PURE__ */ e("h4", { className: "rsp-text-xs rsp-font-semibold rsp-text-gray-700 rsp-mb-2", children: "Sample Values for URL Variables" }),
-                          /* @__PURE__ */ e("div", { className: "rsp-space-y-2", children: G.map((O) => {
-                            var W, $;
+                          /* @__PURE__ */ e("div", { className: "rsp-space-y-2", children: Z.map((_) => {
+                            var Q, W;
                             return /* @__PURE__ */ r("div", { className: "rsp-space-y-1", children: [
                               /* @__PURE__ */ r("label", { className: "rsp-block rsp-text-xs rsp-text-gray-600 rsp-mb-1", children: [
                                 "Variable ",
                                 "{{",
-                                O,
+                                _,
                                 "}}"
                               ] }),
                               /* @__PURE__ */ e(
                                 "input",
                                 {
                                   type: "text",
-                                  value: (($ = (W = s.sampleContent) == null ? void 0 : W.buttonVariables) == null ? void 0 : $[O]) || "",
-                                  onChange: (_) => {
-                                    const P = _.target.value;
-                                    n((H) => ({
-                                      ...H,
+                                  value: ((W = (Q = s.sampleContent) == null ? void 0 : Q.buttonVariables) == null ? void 0 : W[_]) || "",
+                                  onChange: (F) => {
+                                    const P = F.target.value;
+                                    n((G) => ({
+                                      ...G,
                                       carousel: {
-                                        ...H.carousel,
-                                        cards: H.carousel.cards.map((F) => {
-                                          var D, K, Z;
-                                          return F.id !== s.id ? F : {
-                                            ...F,
+                                        ...G.carousel,
+                                        cards: G.carousel.cards.map((D) => {
+                                          var q, Y, re;
+                                          return D.id !== s.id ? D : {
+                                            ...D,
                                             sampleContent: {
-                                              headerVariables: ((D = F.sampleContent) == null ? void 0 : D.headerVariables) || {},
-                                              bodyVariables: ((K = F.sampleContent) == null ? void 0 : K.bodyVariables) || {},
+                                              headerVariables: ((q = D.sampleContent) == null ? void 0 : q.headerVariables) || {},
+                                              bodyVariables: ((Y = D.sampleContent) == null ? void 0 : Y.bodyVariables) || {},
                                               buttonVariables: {
-                                                ...((Z = F.sampleContent) == null ? void 0 : Z.buttonVariables) || {},
-                                                [O]: P
+                                                ...((re = D.sampleContent) == null ? void 0 : re.buttonVariables) || {},
+                                                [_]: P
                                               }
                                             }
                                           };
@@ -4407,7 +4425,7 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                                     }));
                                   },
                                   className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-ring-1 focus:rsp-ring-blue-500 focus:rsp-border-blue-500 rsp-bg-white",
-                                  placeholder: `Sample value (e.g., ${O === "1" ? "order123" : "user456"})`
+                                  placeholder: `Sample value (e.g., ${_ === "1" ? "order123" : "user456"})`
                                 }
                               ),
                               /* @__PURE__ */ e(
@@ -4415,21 +4433,21 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                                 {
                                   type: "button",
                                   onClick: () => {
-                                    const _ = T.value || "", P = new RegExp(`\\{\\{${O}\\}\\}`, "g"), H = _.replace(P, "");
-                                    x(s.id, T.id, "value", H), n((F) => ({
-                                      ...F,
+                                    const F = S.value || "", P = new RegExp(`\\{\\{${_}\\}\\}`, "g"), G = F.replace(P, "");
+                                    h(s.id, S.id, "value", G), n((D) => ({
+                                      ...D,
                                       carousel: {
-                                        ...F.carousel,
-                                        cards: F.carousel.cards.map((D) => {
-                                          var Z, pe, oe;
-                                          if (D.id !== s.id) return D;
-                                          const K = Object.fromEntries(Object.entries(((Z = D.sampleContent) == null ? void 0 : Z.buttonVariables) || {}).filter(([Ne]) => Ne !== O));
+                                        ...D.carousel,
+                                        cards: D.carousel.cards.map((q) => {
+                                          var re, he, ue;
+                                          if (q.id !== s.id) return q;
+                                          const Y = Object.fromEntries(Object.entries(((re = q.sampleContent) == null ? void 0 : re.buttonVariables) || {}).filter(([Ee]) => Ee !== _));
                                           return {
-                                            ...D,
+                                            ...q,
                                             sampleContent: {
-                                              headerVariables: ((pe = D.sampleContent) == null ? void 0 : pe.headerVariables) || {},
-                                              bodyVariables: ((oe = D.sampleContent) == null ? void 0 : oe.bodyVariables) || {},
-                                              buttonVariables: K
+                                              headerVariables: ((he = q.sampleContent) == null ? void 0 : he.headerVariables) || {},
+                                              bodyVariables: ((ue = q.sampleContent) == null ? void 0 : ue.bodyVariables) || {},
+                                              buttonVariables: Y
                                             }
                                           };
                                         })
@@ -4441,27 +4459,27 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
                                   children: "×"
                                 }
                               )
-                            ] }, `button-${T.id}-sample-${O}`);
+                            ] }, `button-${S.id}-sample-${_}`);
                           }) })
                         ] });
                       })()
                     ] })
                   ] }),
-                  T.type === "PHONE_NUMBER" && /* @__PURE__ */ r("div", { children: [
+                  S.type === "PHONE_NUMBER" && /* @__PURE__ */ r("div", { children: [
                     /* @__PURE__ */ e("label", { className: "rsp-block rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-1", children: "Phone Number" }),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "text",
-                        value: T.value || "",
-                        onChange: (z) => x(s.id, T.id, "value", z.target.value),
+                        value: S.value || "",
+                        onChange: (z) => h(s.id, S.id, "value", z.target.value),
                         placeholder: "+1234567890",
                         className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-white"
                       }
                     )
                   ] })
                 ] })
-              ] }, T.id))
+              ] }, S.id))
             ] })
           ] })
         ] }) })
@@ -4482,43 +4500,43 @@ function la({ template: a, setTemplate: n, onFileUpload: i }) {
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      xe,
+      fe,
       {
-        isOpen: l,
-        onClose: () => d(!1),
-        onSelect: V
+        isOpen: m,
+        onClose: () => C(!1),
+        onSelect: o
       }
     )
   ] });
 }
-const ge = async (a) => {
+const ve = async (a) => {
   try {
     console.log(`Starting file upload: ${a.name}`);
-    const n = await ra(a);
+    const n = await la(a);
     return console.log(`File uploaded successfully: ${n}`), n;
   } catch (n) {
     throw console.error("Upload failed in parent:", n), n;
   }
-}, ia = (a) => {
+}, ca = (a) => {
   const i = (a.body || "").match(/\{\{(\d+)\}\}/g);
   if (!i) return 0;
   const l = i.map((d) => {
-    const f = d.match(/{{(\d+)}}/);
-    return f ? parseInt(f[1], 10) : 0;
+    const p = d.match(/{{(\d+)}}/);
+    return p ? parseInt(p[1], 10) : 0;
   });
   return l.length > 0 ? Math.max(...l) : 0;
 };
-function ta({ template: a, setTemplate: n }) {
-  const [i, l] = Q.useState(!1), d = Q.useRef(null), f = () => {
+function da({ template: a, setTemplate: n }) {
+  const [i, l] = K.useState(!1), d = K.useRef(null), p = () => {
     l(!0), setTimeout(() => {
       d.current && d.current.focus();
     }, 0);
-  }, m = (N) => {
-    const w = d.current, h = a.body, g = w && typeof w.selectionStart == "number" ? w.selectionStart : h.length, S = h.substring(0, g), V = h.substring(g), M = S + N + V;
-    n({ ...a, body: M }), setTimeout(() => {
+  }, m = (C) => {
+    const g = d.current, f = a.body, y = g && typeof g.selectionStart == "number" ? g.selectionStart : f.length, j = f.substring(0, y), U = f.substring(y), k = j + C + U;
+    n({ ...a, body: k }), setTimeout(() => {
       if (d.current) {
-        const v = g + N.length;
-        d.current.setSelectionRange(v, v), d.current.focus();
+        const N = y + C.length;
+        d.current.setSelectionRange(N, N), d.current.focus();
       }
     }, 0), l(!1);
   };
@@ -4526,8 +4544,8 @@ function ta({ template: a, setTemplate: n }) {
     a.type !== "CAROUSEL" && /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
       /* @__PURE__ */ e("h2", { className: "rsp-text-lg rsp-font-semibold rsp-text-gray-900", children: "Message Content" }),
       /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
-        /* @__PURE__ */ e(Je, { template: a, setTemplate: n, onFileUpload: ge }),
-        /* @__PURE__ */ e(ea, { template: a, setTemplate: n })
+        /* @__PURE__ */ e(aa, { template: a, setTemplate: n, onFileUpload: ve }),
+        /* @__PURE__ */ e(sa, { template: a, setTemplate: n })
       ] })
     ] }),
     a.type === "CAROUSEL" && /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
@@ -4542,7 +4560,7 @@ function ta({ template: a, setTemplate: n }) {
           {
             ref: d,
             value: a.body,
-            onChange: (N) => n({ ...a, body: N.target.value }),
+            onChange: (C) => n({ ...a, body: C.target.value }),
             maxLength: 1024,
             rows: 4,
             className: "rsp-w-full rsp-px-3 rsp-py-2 rsp-border rsp-border-gray-300 rsp-rounded-md rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-white rsp-resize-none",
@@ -4555,8 +4573,8 @@ function ta({ template: a, setTemplate: n }) {
               "button",
               {
                 onClick: () => {
-                  const h = `{{${ia(a) + 1}}}`;
-                  n({ ...a, body: a.body + h });
+                  const f = `{{${ca(a) + 1}}}`;
+                  n({ ...a, body: a.body + f });
                 },
                 className: "rsp-p-1 rsp-text-gray-500 hover:rsp-text-gray-700 hover:rsp-bg-gray-100 rsp-rounded",
                 title: "Add Variable",
@@ -4566,10 +4584,10 @@ function ta({ template: a, setTemplate: n }) {
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: f,
+                onClick: p,
                 className: "rsp-p-1 rsp-text-gray-500 hover:rsp-text-gray-700 hover:rsp-bg-gray-100 rsp-rounded",
                 title: "Add emoji",
-                children: /* @__PURE__ */ e(me, { className: "rsp-w-4 rsp-h-4" })
+                children: /* @__PURE__ */ e(xe, { className: "rsp-w-4 rsp-h-4" })
               }
             )
           ] }),
@@ -4579,15 +4597,15 @@ function ta({ template: a, setTemplate: n }) {
           ] })
         ] }),
         (() => {
-          const N = a.body.match(/\{\{(\d+)\}\}/g) || [], w = [...new Set(N.map((h) => h.replace(/[{}]/g, "")))];
-          return w.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
+          const C = a.body.match(/\{\{(\d+)\}\}/g) || [], g = [...new Set(C.map((f) => f.replace(/[{}]/g, "")))];
+          return g.length === 0 ? null : /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
             /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-2", children: "Sample Values" }),
-            /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: w.map((h) => {
-              var g, S;
+            /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: g.map((f) => {
+              var y, j;
               return /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
                 /* @__PURE__ */ r("label", { className: "rsp-text-xs rsp-text-gray-500 rsp-whitespace-nowrap", children: [
                   "{{",
-                  h,
+                  f,
                   "}}",
                   ":"
                 ] }),
@@ -4595,19 +4613,19 @@ function ta({ template: a, setTemplate: n }) {
                   "input",
                   {
                     type: "text",
-                    value: ((S = (g = a.sampleContent) == null ? void 0 : g.bodyVariables) == null ? void 0 : S[h]) || "",
-                    onChange: (V) => {
-                      var v, x, b;
-                      const M = {
+                    value: ((j = (y = a.sampleContent) == null ? void 0 : y.bodyVariables) == null ? void 0 : j[f]) || "",
+                    onChange: (U) => {
+                      var N, o, u;
+                      const k = {
                         ...a.sampleContent,
-                        headerVariables: ((v = a.sampleContent) == null ? void 0 : v.headerVariables) || {},
+                        headerVariables: ((N = a.sampleContent) == null ? void 0 : N.headerVariables) || {},
                         bodyVariables: {
-                          ...(x = a.sampleContent) == null ? void 0 : x.bodyVariables,
-                          [h]: V.target.value
+                          ...(o = a.sampleContent) == null ? void 0 : o.bodyVariables,
+                          [f]: U.target.value
                         },
-                        buttonVariables: ((b = a.sampleContent) == null ? void 0 : b.buttonVariables) || {}
+                        buttonVariables: ((u = a.sampleContent) == null ? void 0 : u.buttonVariables) || {}
                       };
-                      n({ ...a, sampleContent: M });
+                      n({ ...a, sampleContent: k });
                     },
                     className: "rsp-flex-1 rsp-px-2 rsp-py-1 rsp-border rsp-border-gray-300 rsp-rounded rsp-text-xs focus:rsp-outline-none focus:rsp-border-blue-500",
                     placeholder: "Sample"
@@ -4618,15 +4636,15 @@ function ta({ template: a, setTemplate: n }) {
                   {
                     type: "button",
                     onClick: () => {
-                      var x, b, t;
-                      const V = new RegExp(`\\{\\{${h}\\}\\}`, "g"), M = (a.body || "").replace(V, ""), v = Object.fromEntries(Object.entries(((x = a.sampleContent) == null ? void 0 : x.bodyVariables) || {}).filter(([u]) => u !== h));
+                      var o, u, t;
+                      const U = new RegExp(`\\{\\{${f}\\}\\}`, "g"), k = (a.body || "").replace(U, ""), N = Object.fromEntries(Object.entries(((o = a.sampleContent) == null ? void 0 : o.bodyVariables) || {}).filter(([h]) => h !== f));
                       n({
                         ...a,
-                        body: M,
+                        body: k,
                         sampleContent: {
                           ...a.sampleContent,
-                          bodyVariables: v,
-                          headerVariables: ((b = a.sampleContent) == null ? void 0 : b.headerVariables) || {},
+                          bodyVariables: N,
+                          headerVariables: ((u = a.sampleContent) == null ? void 0 : u.headerVariables) || {},
                           buttonVariables: ((t = a.sampleContent) == null ? void 0 : t.buttonVariables) || {}
                         }
                       });
@@ -4636,29 +4654,29 @@ function ta({ template: a, setTemplate: n }) {
                     children: "×"
                   }
                 )
-              ] }, `global-body-sample-${h}`);
+              ] }, `global-body-sample-${f}`);
             }) })
           ] });
         })()
       ] }) })
     ] }),
     a.type === "CAROUSEL" && /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: /* @__PURE__ */ e(
-      la,
+      ma,
       {
         template: a,
         setTemplate: n,
-        onFileUpload: ge
+        onFileUpload: ve
       }
     ) }),
     a.type !== "CAROUSEL" && /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: /* @__PURE__ */ e(
-      aa,
+      na,
       {
         template: a,
         setTemplate: n
       }
     ) }),
     /* @__PURE__ */ e(
-      xe,
+      fe,
       {
         isOpen: i,
         onClose: () => l(!1),
@@ -4667,21 +4685,21 @@ function ta({ template: a, setTemplate: n }) {
     )
   ] });
 }
-function ma({ type: a }) {
+function xa({ type: a }) {
   switch (a) {
     case "QUICK_REPLY":
-      return /* @__PURE__ */ e(Be, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Pe, { className: "w-4 h-4" });
     case "URL":
-      return /* @__PURE__ */ e(Ie, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Oe, { className: "w-4 h-4" });
     case "CALL":
-      return /* @__PURE__ */ e(ke, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Me, { className: "w-4 h-4" });
     case "FLOW":
-      return /* @__PURE__ */ e(Pe, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Fe, { className: "w-4 h-4" });
     default:
       return null;
   }
 }
-function ca({ buttons: a, flowButtonText: n, onShowAllOptions: i }) {
+function pa({ buttons: a, flowButtonText: n, onShowAllOptions: i }) {
   const l = [...a];
   n && l.push({
     id: "flow-button",
@@ -4690,18 +4708,18 @@ function ca({ buttons: a, flowButtonText: n, onShowAllOptions: i }) {
   });
   const d = l.slice(0, 2);
   return /* @__PURE__ */ r("div", { className: "rsp-divide-y rsp-divide-gray-200", children: [
-    d.map((f) => /* @__PURE__ */ r(
+    d.map((p) => /* @__PURE__ */ r(
       "button",
       {
         className: "rsp-w-full rsp-py-4 rsp-text-[#128C7E] rsp-text-[15px] rsp-font-medium rsp-bg-white hover:rsp-bg-gray-50 rsp-flex rsp-items-center rsp-gap-3 rsp-px-4 rsp-transition-colors",
         style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' },
         children: [
-          /* @__PURE__ */ e("div", { className: "rsp-text-[#128C7E]", children: /* @__PURE__ */ e(ma, { type: f.type }) }),
-          /* @__PURE__ */ e("span", { className: "rsp-flex-1 rsp-text-left rsp-break-words rsp-break-all rsp-whitespace-pre-wrap", children: f.text }),
-          f.id === "flow-button" && /* @__PURE__ */ e(je, { className: "rsp-w-5 rsp-h-5 rsp-text-[#128C7E] rsp-ml-auto" })
+          /* @__PURE__ */ e("div", { className: "rsp-text-[#128C7E]", children: /* @__PURE__ */ e(xa, { type: p.type }) }),
+          /* @__PURE__ */ e("span", { className: "rsp-flex-1 rsp-text-left rsp-break-words rsp-break-all rsp-whitespace-pre-wrap", children: p.text }),
+          p.id === "flow-button" && /* @__PURE__ */ e(Re, { className: "rsp-w-5 rsp-h-5 rsp-text-[#128C7E] rsp-ml-auto" })
         ]
       },
-      f.id
+      p.id
     )),
     l.length > 2 && /* @__PURE__ */ r(
       "button",
@@ -4717,25 +4735,25 @@ function ca({ buttons: a, flowButtonText: n, onShowAllOptions: i }) {
     )
   ] });
 }
-function da({ template: a }) {
-  var S, V, M, v;
-  const [n, i] = I(!1), [l, d] = I(0), f = (S = a.carousel) != null && S.cards ? a.carousel.cards.length : 0;
-  ee(() => {
-    a.type === "CAROUSEL" && f > 0 ? l >= f && d(0) : d(0);
-  }, [f, a.type]);
-  const m = (x) => x ? x.replace(/\{\{(\d+)\}\}/g, (b, t) => {
-    var u, k;
-    return ((k = (u = a.sampleContent) == null ? void 0 : u.headerVariables) == null ? void 0 : k[t]) || `[Variable ${t}]`;
-  }) : "", N = (x) => x ? x.replace(/\{\{(\d+)\}\}/g, (b, t) => {
-    var u, k;
-    return ((k = (u = a.sampleContent) == null ? void 0 : u.bodyVariables) == null ? void 0 : k[t]) || `[Variable ${t}]`;
-  }) : "", w = (x) => {
-    var u;
-    const b = (x == null ? void 0 : x.body) ?? "";
-    if (!b) return "";
-    const t = ((u = x == null ? void 0 : x.sampleContent) == null ? void 0 : u.bodyVariables) ?? {};
-    return b.replace(/\{\{(\d+)\}\}/g, (k, E) => t[E] || `[Variable ${E}]`);
-  }, h = a.headerType !== "NONE" || a.body || a.footer || a.buttons.length > 0 || a.type === "CAROUSEL" && ((V = a.carousel) == null ? void 0 : V.cards.length), g = a.headerText || a.body || a.footer;
+function oa({ template: a }) {
+  var j, U, k, N;
+  const [n, i] = B(!1), [l, d] = B(0), p = (j = a.carousel) != null && j.cards ? a.carousel.cards.length : 0;
+  se(() => {
+    a.type === "CAROUSEL" && p > 0 ? l >= p && d(0) : d(0);
+  }, [p, a.type]);
+  const m = (o) => o ? o.replace(/\{\{(\d+)\}\}/g, (u, t) => {
+    var h, v;
+    return ((v = (h = a.sampleContent) == null ? void 0 : h.headerVariables) == null ? void 0 : v[t]) || `[Variable ${t}]`;
+  }) : "", C = (o) => o ? o.replace(/\{\{(\d+)\}\}/g, (u, t) => {
+    var h, v;
+    return ((v = (h = a.sampleContent) == null ? void 0 : h.bodyVariables) == null ? void 0 : v[t]) || `[Variable ${t}]`;
+  }) : "", g = (o) => {
+    var h;
+    const u = (o == null ? void 0 : o.body) ?? "";
+    if (!u) return "";
+    const t = ((h = o == null ? void 0 : o.sampleContent) == null ? void 0 : h.bodyVariables) ?? {};
+    return u.replace(/\{\{(\d+)\}\}/g, (v, V) => t[V] || `[Variable ${V}]`);
+  }, f = a.headerType !== "NONE" || a.body || a.footer || a.buttons.length > 0 || a.type === "CAROUSEL" && ((U = a.carousel) == null ? void 0 : U.cards.length), y = a.headerText || a.body || a.footer;
   return /* @__PURE__ */ r("div", { className: "rsp-bg-white rsp-rounded-lg rsp-shadow-sm rsp-border rsp-border-gray-200", children: [
     /* @__PURE__ */ r("div", { className: "rsp-p-4 rsp-border-b rsp-border-gray-200", children: [
       /* @__PURE__ */ e("h3", { className: "rsp-text-lg rsp-font-semibold rsp-text-gray-900", children: "Preview" }),
@@ -4782,7 +4800,7 @@ function da({ template: a }) {
           ] }),
           /* @__PURE__ */ r("div", { className: "rsp-absolute rsp-top-[105px] rsp-left-0 rsp-right-0 rsp-bottom-[60px] rsp-bg-gradient-to-b rsp-from-[#E8E2DB] rsp-via-[#E5DDD5] rsp-to-[#DDD5CC] rsp-overflow-y-auto", children: [
             /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-0 rsp-opacity-[0.03]", style: { backgroundImage: `url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.08'%3E%3Cpath d='M40 40c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8 8-3.6 8-8zm0-32c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8 8-3.6 8-8zm32 32c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8 8-3.6 8-8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` } }),
-            /* @__PURE__ */ e("div", { className: "rsp-relative rsp-px-4 rsp-py-4", children: h ? /* @__PURE__ */ r("div", { className: "rsp-flex rsp-flex-col rsp-items-start", children: [
+            /* @__PURE__ */ e("div", { className: "rsp-relative rsp-px-4 rsp-py-4", children: f ? /* @__PURE__ */ r("div", { className: "rsp-flex rsp-flex-col rsp-items-start", children: [
               a.headerType === "MEDIA" && a.mediaUrl && /* @__PURE__ */ r("div", { className: "rsp-max-w-[220px] rsp-w-auto rsp-rounded-xl rsp-overflow-hidden rsp-shadow-md rsp-mb-1.5 rsp-animate-slide-up rsp-border rsp-border-gray-200", children: [
                 a.mediaType === "IMAGE" && /* @__PURE__ */ e(
                   "img",
@@ -4790,8 +4808,8 @@ function da({ template: a }) {
                     src: a.mediaUrl,
                     alt: "Header media",
                     className: "rsp-w-full rsp-max-h-[150px] rsp-object-cover rsp-block",
-                    onError: (x) => {
-                      x.currentTarget.style.display = "none";
+                    onError: (o) => {
+                      o.currentTarget.style.display = "none";
                     }
                   }
                 ),
@@ -4807,38 +4825,38 @@ function da({ template: a }) {
                   ] })
                 ] }) })
               ] }),
-              g && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-start rsp-mb-1.5", children: /* @__PURE__ */ r("div", { className: "rsp-bg-gradient-to-b rsp-from-white rsp-to-[#fafafa] rsp-rounded-[12px] rsp-max-w-[220px] rsp-shadow-[0_2px_8px_rgba(0,0,0,0.08)] rsp-relative rsp-border rsp-border-gray-100 rsp-animate-slide-up", children: [
+              y && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-start rsp-mb-1.5", children: /* @__PURE__ */ r("div", { className: "rsp-bg-gradient-to-b rsp-from-white rsp-to-[#fafafa] rsp-rounded-[12px] rsp-max-w-[220px] rsp-shadow-[0_2px_8px_rgba(0,0,0,0.08)] rsp-relative rsp-border rsp-border-gray-100 rsp-animate-slide-up", children: [
                 a.headerType === "TEXT" && a.headerText && /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-pt-3 rsp-pb-2", children: /* @__PURE__ */ e("div", { className: "rsp-text-[15px] rsp-font-semibold rsp-text-[#111b21] rsp-leading-[1.3] rsp-tracking-normal rsp-break-words", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: m(a.headerText) }) }),
-                a.body && /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-py-2", children: /* @__PURE__ */ e("div", { className: "rsp-text-[14px] rsp-text-[#111b21] rsp-leading-[1.4] rsp-whitespace-pre-wrap rsp-tracking-normal rsp-break-words", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: N(a.body) }) }),
+                a.body && /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-py-2", children: /* @__PURE__ */ e("div", { className: "rsp-text-[14px] rsp-text-[#111b21] rsp-leading-[1.4] rsp-whitespace-pre-wrap rsp-tracking-normal rsp-break-words", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: C(a.body) }) }),
                 a.footer && /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-pb-2", children: /* @__PURE__ */ e("div", { className: "rsp-text-[12px] rsp-text-[#667781] rsp-pt-2 rsp-border-t rsp-border-gray-100 rsp-break-words rsp-break-all rsp-whitespace-pre-wrap", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: a.footer }) }),
                 /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-pb-2 rsp-text-right", children: /* @__PURE__ */ r("div", { className: "rsp-text-[11px] rsp-text-[#667781] rsp-flex rsp-items-center rsp-justify-end rsp-gap-1 rsp-opacity-80", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: [
                   "9:41 AM",
                   /* @__PURE__ */ e("svg", { className: "rsp-w-3 rsp-h-3 rsp-text-[#53bdeb]", viewBox: "0 0 16 15", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.879a.32.32 0 0 1-.484.033l-.358-.325a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l1.32 1.266c.143.14.361.125.484-.033l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l3.61 3.463c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.064-.512z" }) })
                 ] }) })
               ] }) }),
-              a.type === "CAROUSEL" && (((v = (M = a.carousel) == null ? void 0 : M.cards) == null ? void 0 : v.length) || 0) > 0 && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-start rsp-mb-1.5", children: /* @__PURE__ */ e("div", { className: "rsp-w-[220px] rsp-animate-slide-up", children: /* @__PURE__ */ e("div", { className: "rsp-bg-gradient-to-b rsp-from-white rsp-to-[#fafafa] rsp-rounded-[12px] rsp-overflow-hidden rsp-shadow-[0_2px_8px_rgba(0,0,0,0.08)] rsp-border rsp-border-gray-100 rsp-relative rsp-min-h-[280px] rsp-flex rsp-flex-col", children: /* @__PURE__ */ r("div", { className: "rsp-relative rsp-flex-1 rsp-flex rsp-flex-col", children: [
+              a.type === "CAROUSEL" && (((N = (k = a.carousel) == null ? void 0 : k.cards) == null ? void 0 : N.length) || 0) > 0 && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-start rsp-mb-1.5", children: /* @__PURE__ */ e("div", { className: "rsp-w-[220px] rsp-animate-slide-up", children: /* @__PURE__ */ e("div", { className: "rsp-bg-gradient-to-b rsp-from-white rsp-to-[#fafafa] rsp-rounded-[12px] rsp-overflow-hidden rsp-shadow-[0_2px_8px_rgba(0,0,0,0.08)] rsp-border rsp-border-gray-100 rsp-relative rsp-min-h-[280px] rsp-flex rsp-flex-col", children: /* @__PURE__ */ r("div", { className: "rsp-relative rsp-flex-1 rsp-flex rsp-flex-col", children: [
                 (() => {
-                  var b, t;
-                  const x = a.carousel && a.carousel.cards.length > 0 ? a.carousel.cards[l] || a.carousel.cards[0] : void 0;
+                  var u, t;
+                  const o = a.carousel && a.carousel.cards.length > 0 ? a.carousel.cards[l] || a.carousel.cards[0] : void 0;
                   return /* @__PURE__ */ r("div", { className: "rsp-flex rsp-flex-col rsp-h-full", children: [
-                    /* @__PURE__ */ e("div", { className: "rsp-relative rsp-w-full rsp-h-[140px] rsp-bg-gray-100 rsp-group rsp-flex-shrink-0", children: x && x.mediaUrl ? /* @__PURE__ */ r(ae, { children: [
-                      ((b = a.carousel) == null ? void 0 : b.type) === "IMAGE" ? /* @__PURE__ */ e(
+                    /* @__PURE__ */ e("div", { className: "rsp-relative rsp-w-full rsp-h-[140px] rsp-bg-gray-100 rsp-group rsp-flex-shrink-0", children: o && o.mediaUrl ? /* @__PURE__ */ r(ne, { children: [
+                      ((u = a.carousel) == null ? void 0 : u.type) === "IMAGE" ? /* @__PURE__ */ e(
                         "img",
                         {
-                          src: x.mediaUrl,
+                          src: o.mediaUrl,
                           alt: "Carousel card",
                           className: "rsp-w-full rsp-h-full rsp-object-cover",
-                          onError: (u) => {
-                            u.currentTarget.style.display = "none";
+                          onError: (h) => {
+                            h.currentTarget.style.display = "none";
                           }
                         }
                       ) : /* @__PURE__ */ e("div", { className: "rsp-relative rsp-w-full rsp-h-full rsp-bg-gradient-to-br rsp-from-gray-800 rsp-to-gray-900 rsp-flex rsp-items-center rsp-justify-center", children: /* @__PURE__ */ e("div", { className: "rsp-w-10 rsp-h-10 rsp-bg-black rsp-bg-opacity-70 rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-shadow-lg", children: /* @__PURE__ */ e("div", { className: "rsp-w-0 rsp-h-0 rsp-border-l-[6px] rsp-border-l-white rsp-border-t-[5px] rsp-border-t-transparent rsp-border-b-[5px] rsp-border-b-transparent rsp-ml-1" }) }) }),
-                      a.carousel && a.carousel.cards.length > 1 && /* @__PURE__ */ r(ae, { children: [
+                      a.carousel && a.carousel.cards.length > 1 && /* @__PURE__ */ r(ne, { children: [
                         /* @__PURE__ */ e(
                           "button",
                           {
                             onClick: () => d(
-                              (u) => u > 0 ? u - 1 : a.carousel.cards.length - 1
+                              (h) => h > 0 ? h - 1 : a.carousel.cards.length - 1
                             ),
                             className: "rsp-absolute rsp-left-1 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-z-20 rsp-w-6 rsp-h-6 rsp-bg-black rsp-bg-opacity-50 rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-text-white hover:rsp-bg-opacity-80 rsp-transition-all rsp-opacity-0 group-hover:rsp-opacity-100",
                             children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
@@ -4848,7 +4866,7 @@ function da({ template: a }) {
                           "button",
                           {
                             onClick: () => d(
-                              (u) => u < a.carousel.cards.length - 1 ? u + 1 : 0
+                              (h) => h < a.carousel.cards.length - 1 ? h + 1 : 0
                             ),
                             className: "rsp-absolute rsp-right-1 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-z-20 rsp-w-6 rsp-h-6 rsp-bg-black rsp-bg-opacity-50 rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-text-white hover:rsp-bg-opacity-80 rsp-transition-all rsp-opacity-0 group-hover:rsp-opacity-100",
                             children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
@@ -4864,33 +4882,33 @@ function da({ template: a }) {
                       /* @__PURE__ */ e("svg", { className: "rsp-w-12 rsp-h-12 rsp-mx-auto rsp-text-gray-400 rsp-mb-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: ((t = a.carousel) == null ? void 0 : t.type) === "VIDEO" ? /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) : /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
                       /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: "No media" })
                     ] }) }) }),
-                    /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-py-3 rsp-flex-1 rsp-flex rsp-items-start", children: /* @__PURE__ */ e("p", { className: "rsp-text-[13px] rsp-text-[#111b21] rsp-leading-[1.4] rsp-line-clamp-3", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: x ? w(x) : "Card body text..." }) }),
-                    /* @__PURE__ */ e("div", { className: "rsp-border-t rsp-border-gray-100 rsp-mt-auto", children: x && x.buttons.length > 0 ? /* @__PURE__ */ e(ae, { children: x.buttons.map((u, k) => /* @__PURE__ */ e(
+                    /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-py-3 rsp-flex-1 rsp-flex rsp-items-start", children: /* @__PURE__ */ e("p", { className: "rsp-text-[13px] rsp-text-[#111b21] rsp-leading-[1.4] rsp-line-clamp-3", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: o ? g(o) : "Card body text..." }) }),
+                    /* @__PURE__ */ e("div", { className: "rsp-border-t rsp-border-gray-100 rsp-mt-auto", children: o && o.buttons.length > 0 ? /* @__PURE__ */ e(ne, { children: o.buttons.map((h, v) => /* @__PURE__ */ e(
                       "div",
                       {
-                        className: `rsp-px-4 rsp-py-3 rsp-text-center rsp-text-[14px] rsp-text-[#128C7E] rsp-font-medium rsp-break-words rsp-whitespace-pre-wrap ${k < x.buttons.length - 1 ? "rsp-border-b rsp-border-gray-100" : ""}`,
+                        className: `rsp-px-4 rsp-py-3 rsp-text-center rsp-text-[14px] rsp-text-[#128C7E] rsp-font-medium rsp-break-words rsp-whitespace-pre-wrap ${v < o.buttons.length - 1 ? "rsp-border-b rsp-border-gray-100" : ""}`,
                         style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' },
                         children: /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-center rsp-gap-2", children: [
-                          u.type === "URL" && /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }),
-                          (u.type === "CALL" || u.type === "PHONE_NUMBER") && /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }),
-                          /* @__PURE__ */ e("span", { className: "rsp-inline-block rsp-max-w-[180px] rsp-break-words rsp-break-all rsp-whitespace-pre-wrap rsp-text-center", children: u.text })
+                          h.type === "URL" && /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }),
+                          (h.type === "CALL" || h.type === "PHONE_NUMBER") && /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }),
+                          /* @__PURE__ */ e("span", { className: "rsp-inline-block rsp-max-w-[180px] rsp-break-words rsp-break-all rsp-whitespace-pre-wrap rsp-text-center", children: h.text })
                         ] })
                       },
-                      u.id
+                      h.id
                     )) }) : /* @__PURE__ */ e("div", { className: "rsp-px-4 rsp-py-3 rsp-text-center rsp-text-xs rsp-text-gray-400", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: "No buttons" }) })
                   ] });
                 })(),
-                a.carousel && a.carousel.cards.length > 1 && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center rsp-justify-center rsp-gap-1.5 rsp-py-3 rsp-bg-white rsp-border-t rsp-border-gray-100", children: a.carousel && a.carousel.cards.map((x, b) => /* @__PURE__ */ e(
+                a.carousel && a.carousel.cards.length > 1 && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center rsp-justify-center rsp-gap-1.5 rsp-py-3 rsp-bg-white rsp-border-t rsp-border-gray-100", children: a.carousel && a.carousel.cards.map((o, u) => /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => d(b),
-                    className: `rsp-w-2 rsp-h-2 rsp-rounded-full rsp-transition-all ${b === l ? "rsp-bg-[#128C7E] rsp-w-6" : "rsp-bg-gray-300 hover:rsp-bg-gray-400"}`
+                    onClick: () => d(u),
+                    className: `rsp-w-2 rsp-h-2 rsp-rounded-full rsp-transition-all ${u === l ? "rsp-bg-[#128C7E] rsp-w-6" : "rsp-bg-gray-300 hover:rsp-bg-gray-400"}`
                   },
-                  b
+                  u
                 )) })
               ] }) }) }) }),
               a.buttons.length > 0 && /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-start", children: /* @__PURE__ */ e("div", { className: "rsp-bg-gradient-to-b rsp-from-white rsp-to-[#fafafa] rsp-rounded-[12px] rsp-overflow-hidden rsp-shadow-[0_2px_8px_rgba(0,0,0,0.08)] rsp-max-w-[220px] rsp-w-full rsp-border rsp-border-gray-100 rsp-animate-slide-up", children: /* @__PURE__ */ e(
-                ca,
+                pa,
                 {
                   buttons: a.buttons,
                   onShowAllOptions: () => i(!0)
@@ -4913,14 +4931,14 @@ function da({ template: a }) {
               className: "rsp-w-full rsp-bg-[#F0F2F5] rsp-rounded-t-2xl rsp-shadow-lg rsp-animate-slide-up",
               children: [
                 /* @__PURE__ */ e("div", { className: "rsp-p-4 rsp-border-b rsp-border-gray-300", children: /* @__PURE__ */ e("h4", { className: "rsp-font-bold rsp-text-center rsp-text-gray-800 rsp-text-md", children: a.body || "Options" }) }),
-                /* @__PURE__ */ e("div", { className: "rsp-max-h-[250px] rsp-overflow-y-auto", children: a.buttons.map((x, b) => /* @__PURE__ */ e(
+                /* @__PURE__ */ e("div", { className: "rsp-max-h-[250px] rsp-overflow-y-auto", children: a.buttons.map((o, u) => /* @__PURE__ */ e(
                   "div",
                   {
-                    className: `rsp-p-4 rsp-text-center rsp-text-[15px] rsp-text-[#128C7E] rsp-font-medium ${b < a.buttons.length - 1 ? "rsp-border-b rsp-border-gray-300" : ""}`,
+                    className: `rsp-p-4 rsp-text-center rsp-text-[15px] rsp-text-[#128C7E] rsp-font-medium ${u < a.buttons.length - 1 ? "rsp-border-b rsp-border-gray-300" : ""}`,
                     style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' },
-                    children: x.text
+                    children: o.text
                   },
-                  x.id
+                  o.id
                 )) }),
                 /* @__PURE__ */ e(
                   "div",
@@ -4939,7 +4957,7 @@ function da({ template: a }) {
     ] }) }) })
   ] });
 }
-const ye = {
+const ke = {
   name: "",
   category: "MARKETING",
   type: "BASIC",
@@ -4951,76 +4969,76 @@ const ye = {
   footer: "",
   buttons: []
 };
-function ua({ onCancel: a }) {
-  var E, U, B;
-  const i = (typeof ue == "function" ? ue() : !1) ? ve() : void 0, [l, d] = I(ye), [f, m] = I(!0), [N, w] = I(!1), [h, g] = I(null), [S, V] = I({
+function ya({ onCancel: a }) {
+  var V, R, I;
+  const i = (typeof ye == "function" ? ye() : !1) ? Ce() : void 0, [l, d] = B(ke), [p, m] = B(!0), [C, g] = B(!1), [f, y] = B(null), [j, U] = B({
     isOpen: !1
-  }), [M, v] = I({
+  }), [k, N] = B({
     isOpen: !1
-  }), x = () => {
+  }), o = () => {
     if (!l.name || !l.body) return !1;
-    const s = b(l.body), c = b(l.headerText), o = t(), y = c.every(
-      (R) => {
-        var p, L, A;
-        return !!((A = (L = (p = l.sampleContent) == null ? void 0 : p.headerVariables) == null ? void 0 : L[R]) != null && A.trim());
+    const x = u(l.body), w = u(l.headerText), L = t(), s = w.every(
+      (T) => {
+        var c, M, A;
+        return !!((A = (M = (c = l.sampleContent) == null ? void 0 : c.headerVariables) == null ? void 0 : M[T]) != null && A.trim());
       }
-    ), C = s.every(
-      (R) => {
-        var p, L, A;
-        return !!((A = (L = (p = l.sampleContent) == null ? void 0 : p.bodyVariables) == null ? void 0 : L[R]) != null && A.trim());
+    ), b = x.every(
+      (T) => {
+        var c, M, A;
+        return !!((A = (M = (c = l.sampleContent) == null ? void 0 : c.bodyVariables) == null ? void 0 : M[T]) != null && A.trim());
       }
-    ), j = o.every(
-      (R) => {
-        var p, L, A;
-        return !!((A = (L = (p = l.sampleContent) == null ? void 0 : p.buttonVariables) == null ? void 0 : L[R]) != null && A.trim());
+    ), E = L.every(
+      (T) => {
+        var c, M, A;
+        return !!((A = (M = (c = l.sampleContent) == null ? void 0 : c.buttonVariables) == null ? void 0 : M[T]) != null && A.trim());
       }
     );
-    return y && C && j;
-  }, b = (s) => {
-    if (!s) return [];
-    const c = s.match(/\{\{(\d+)\}\}/g) || [];
-    return [...new Set(c.map((o) => o.replace(/[{}]/g, "")))];
+    return s && b && E;
+  }, u = (x) => {
+    if (!x) return [];
+    const w = x.match(/\{\{(\d+)\}\}/g) || [];
+    return [...new Set(w.map((L) => L.replace(/[{}]/g, "")))];
   }, t = () => {
-    const s = l.buttons.find(
-      (o) => o.type === "URL" && o.urlType === "dynamic"
+    const x = l.buttons.find(
+      (L) => L.type === "URL" && L.urlType === "dynamic"
     );
-    if (!(s != null && s.value)) return [];
-    const c = s.value.match(/\{\{(\d+)\}\}/g) || [];
-    return [...new Set(c.map((o) => o.replace(/[{}]/g, "")))];
+    if (!(x != null && x.value)) return [];
+    const w = x.value.match(/\{\{(\d+)\}\}/g) || [];
+    return [...new Set(w.map((L) => L.replace(/[{}]/g, "")))];
   };
-  ee(() => {
-    if (h) {
-      const s = setTimeout(() => {
-        g(null);
+  se(() => {
+    if (f) {
+      const x = setTimeout(() => {
+        y(null);
       }, 5e3);
-      return () => clearTimeout(s);
+      return () => clearTimeout(x);
     }
-  }, [h]);
-  const u = async () => {
-    var s, c, o;
+  }, [f]);
+  const h = async () => {
+    var x, w, L;
     try {
-      if (w(!0), g(null), !l.name || !l.body)
+      if (g(!0), y(null), !l.name || !l.body)
         throw new Error("Template name and body are required");
-      const y = localStorage.getItem("account"), C = y ? JSON.parse(y) : { apiKey: "" };
-      if (!C.apiKey)
+      const s = localStorage.getItem("account"), b = s ? JSON.parse(s) : { apiKey: "" };
+      if (!b.apiKey)
         throw new Error("Please set your API key in the dashboard first");
-      const j = await $e(C, l);
-      if (j.status === "error")
-        throw new Error(j.message);
-      V({
+      const E = await Ke(b, l);
+      if (E.status === "error")
+        throw new Error(E.message);
+      U({
         isOpen: !0,
-        templateName: (s = j.data) == null ? void 0 : s.details[0].template_name,
-        templateId: (c = j.data) == null ? void 0 : c.details[0].template_id,
+        templateName: (x = E.data) == null ? void 0 : x.details[0].template_name,
+        templateId: (w = E.data) == null ? void 0 : w.details[0].template_id,
         // @ts-ignore
-        template: (o = j.data) == null ? void 0 : o.template
-      }), d(ye);
-    } catch (y) {
-      g(y instanceof Error ? y.message : "An error occurred while creating the template");
+        template: (L = E.data) == null ? void 0 : L.template
+      }), d(ke);
+    } catch (s) {
+      y(s instanceof Error ? s.message : "An error occurred while creating the template");
     } finally {
-      w(!1);
+      g(!1);
     }
-  }, k = () => {
-    V({ isOpen: !1 }), a ? a() : i ? i("/") : window.history.length > 1 && window.history.back();
+  }, v = () => {
+    U({ isOpen: !1 }), a ? a() : i ? i("/") : window.history.length > 1 && window.history.back();
   };
   return /* @__PURE__ */ r("div", { className: "rsp-min-h-screen rsp-bg-[#f5f7fc] rsp-rounded-lg rsp-shadow-sm", children: [
     /* @__PURE__ */ r("div", { className: "rsp-max-w-[1200px] rsp-mx-auto rsp-px-6 rsp-h-full", children: [
@@ -5040,22 +5058,22 @@ function ua({ onCancel: a }) {
           /* @__PURE__ */ r(
             "button",
             {
-              onClick: () => m(!f),
+              onClick: () => m(!p),
               className: `rsp-flex rsp-items-center rsp-gap-2 rsp-px-4 rsp-py-2 rsp-rounded-md rsp-text-sm rsp-font-medium rsp-transition-colors
-                  ${f ? "rsp-bg-blue-100 rsp-text-blue-700 rsp-border rsp-border-blue-200" : "rsp-bg-gray-100 rsp-text-gray-700 rsp-border rsp-border-gray-200"}`,
+                  ${p ? "rsp-bg-blue-100 rsp-text-blue-700 rsp-border rsp-border-blue-200" : "rsp-bg-gray-100 rsp-text-gray-700 rsp-border rsp-border-gray-200"}`,
               children: [
                 /* @__PURE__ */ r("svg", { className: "rsp-w-4 rsp-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
                   /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
                   /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
                 ] }),
-                f ? "Hide Preview" : "Show Preview"
+                p ? "Hide Preview" : "Show Preview"
               ]
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ r("div", { className: `rsp-py-8 ${f ? "rsp-grid xl:rsp-grid-cols-[1fr,400px] rsp-gap-8" : ""}`, children: [
-        /* @__PURE__ */ r("div", { className: `rsp-space-y-8 ${f ? "" : "rsp-max-w-4xl rsp-mx-auto"}`, children: [
+      /* @__PURE__ */ r("div", { className: `rsp-py-8 ${p ? "rsp-grid xl:rsp-grid-cols-[1fr,400px] rsp-gap-8" : ""}`, children: [
+        /* @__PURE__ */ r("div", { className: `rsp-space-y-8 ${p ? "" : "rsp-max-w-4xl rsp-mx-auto"}`, children: [
           /* @__PURE__ */ r("div", { className: "rsp-bg-white rsp-p-6 rsp-rounded-lg rsp-shadow-sm rsp-space-y-6", children: [
             /* @__PURE__ */ r("div", { children: [
               /* @__PURE__ */ r("label", { className: "rsp-block rsp-text-sm rsp-font-medium rsp-text-gray-700 rsp-mb-2", children: [
@@ -5068,7 +5086,7 @@ function ua({ onCancel: a }) {
                   {
                     type: "text",
                     value: l.name,
-                    onChange: (s) => d({ ...l, name: s.target.value.replace(/\s/g, "_").replace(/[^a-zA-Z0-9_]/g, "").replace(/_+/g, "_") }),
+                    onChange: (x) => d({ ...l, name: x.target.value.replace(/\s/g, "_").replace(/[^a-zA-Z0-9_]/g, "").replace(/_+/g, "_") }),
                     className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent",
                     placeholder: "Template name cannot Have capital letters and space"
                   }
@@ -5085,7 +5103,7 @@ function ua({ onCancel: a }) {
                     "select",
                     {
                       value: l.category,
-                      onChange: (s) => d({ ...l, category: s.target.value }),
+                      onChange: (x) => d({ ...l, category: x.target.value }),
                       className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent rsp-appearance-none",
                       children: [
                         /* @__PURE__ */ e("option", { value: "MARKETING", children: "Marketing" }),
@@ -5105,9 +5123,9 @@ function ua({ onCancel: a }) {
                     "select",
                     {
                       value: l.language,
-                      onChange: (s) => d({ ...l, language: s.target.value }),
+                      onChange: (x) => d({ ...l, language: x.target.value }),
                       className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent rsp-appearance-none",
-                      children: Ge.map((s) => /* @__PURE__ */ e("option", { value: s.value, children: s.label }, s.value))
+                      children: Qe.map((x) => /* @__PURE__ */ e("option", { value: x.value, children: x.label }, x.value))
                     }
                   ),
                   /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-y-0 rsp-right-0 rsp-flex rsp-items-center rsp-px-2 rsp-pointer-events-none", children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }),
@@ -5123,11 +5141,11 @@ function ua({ onCancel: a }) {
                     "select",
                     {
                       value: l.type,
-                      onChange: (s) => {
-                        const c = s.target.value;
-                        c === "CAROUSEL" && !l.carousel ? d({
+                      onChange: (x) => {
+                        const w = x.target.value;
+                        w === "CAROUSEL" && !l.carousel ? d({
                           ...l,
-                          type: c,
+                          type: w,
                           carousel: {
                             type: "IMAGE",
                             cards: [{
@@ -5139,7 +5157,7 @@ function ua({ onCancel: a }) {
                               buttons: []
                             }]
                           }
-                        }) : d({ ...l, type: c });
+                        }) : d({ ...l, type: w });
                       },
                       className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent rsp-appearance-none",
                       children: [
@@ -5159,7 +5177,7 @@ function ua({ onCancel: a }) {
                     "select",
                     {
                       value: l.enableClickTracking.toString(),
-                      onChange: (s) => d({ ...l, enableClickTracking: s.target.value === "true" }),
+                      onChange: (x) => d({ ...l, enableClickTracking: x.target.value === "true" }),
                       className: "rsp-w-full rsp-px-0 rsp-py-2 rsp-border-0 rsp-border-b rsp-border-gray-300 rsp-text-sm focus:rsp-outline-none focus:rsp-border-blue-500 rsp-bg-transparent rsp-appearance-none",
                       children: [
                         /* @__PURE__ */ e("option", { value: "false", children: "False" }),
@@ -5172,70 +5190,70 @@ function ua({ onCancel: a }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ e("div", { className: "rsp-bg-white rsp-p-6 rsp-rounded-lg rsp-shadow-sm", children: /* @__PURE__ */ e(ta, { template: l, setTemplate: d }) }),
+          /* @__PURE__ */ e("div", { className: "rsp-bg-white rsp-p-6 rsp-rounded-lg rsp-shadow-sm", children: /* @__PURE__ */ e(da, { template: l, setTemplate: d }) }),
           /* @__PURE__ */ r("div", { className: "rsp-bg-white rsp-p-6 rsp-rounded-lg rsp-shadow-sm rsp-pt-6 rsp-border-t rsp-border-gray-200", children: [
-            h && /* @__PURE__ */ r("div", { className: "rsp-mb-4 rsp-flex rsp-items-start rsp-gap-3 rsp-p-4 rsp-rounded-lg rsp-bg-red-50 rsp-border-l-4 rsp-border-l-red-500 rsp-relative rsp-animate-fade-in", children: [
-              /* @__PURE__ */ e(ie, { className: "rsp-w-5 rsp-h-5 rsp-text-red-500 rsp-flex-shrink-0 rsp-mt-0.5" }),
+            f && /* @__PURE__ */ r("div", { className: "rsp-mb-4 rsp-flex rsp-items-start rsp-gap-3 rsp-p-4 rsp-rounded-lg rsp-bg-red-50 rsp-border-l-4 rsp-border-l-red-500 rsp-relative rsp-animate-fade-in", children: [
+              /* @__PURE__ */ e(ce, { className: "rsp-w-5 rsp-h-5 rsp-text-red-500 rsp-flex-shrink-0 rsp-mt-0.5" }),
               /* @__PURE__ */ r("div", { children: [
                 /* @__PURE__ */ e("h3", { className: "rsp-text-sm rsp-font-medium rsp-text-red-800", children: "Error" }),
-                /* @__PURE__ */ e("p", { className: "rsp-mt-1 rsp-text-sm rsp-text-red-700", children: h })
+                /* @__PURE__ */ e("p", { className: "rsp-mt-1 rsp-text-sm rsp-text-red-700", children: f })
               ] }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => g(null),
+                  onClick: () => y(null),
                   className: "rsp-absolute rsp-top-2 rsp-right-2 rsp-p-1 hover:rsp-bg-red-100 rsp-rounded-full",
-                  children: /* @__PURE__ */ e(J, { className: "rsp-w-4 rsp-h-4 rsp-text-red-500" })
+                  children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4 rsp-text-red-500" })
                 }
               )
             ] }),
             /* @__PURE__ */ e("div", { className: "rsp-flex rsp-gap-4", children: /* @__PURE__ */ e(
               "button",
               {
-                onClick: u,
-                disabled: N || !x(),
+                onClick: h,
+                disabled: C || !o(),
                 className: `rsp-flex-1 rsp-py-3 rsp-px-6 rsp-rounded-md rsp-transition-colors rsp-text-white rsp-font-medium rsp-text-sm
-                    ${N || !x() ? "rsp-bg-blue-600 rsp-cursor-not-allowed" : "rsp-bg-blue-600 hover:rsp-bg-blue-700 active:rsp-bg-blue-800"}`,
-                children: N ? "Submitting for Approval..." : "Submit for Approval"
+                    ${C || !o() ? "rsp-bg-blue-600 rsp-cursor-not-allowed" : "rsp-bg-blue-600 hover:rsp-bg-blue-700 active:rsp-bg-blue-800"}`,
+                children: C ? "Submitting for Approval..." : "Submit for Approval"
               }
             ) })
           ] })
         ] }),
-        f && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "rsp-sticky rsp-top-4", children: /* @__PURE__ */ e(da, { template: l }) }) })
+        p && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "rsp-sticky rsp-top-4", children: /* @__PURE__ */ e(oa, { template: l }) }) })
       ] })
     ] }),
     /* @__PURE__ */ e(
-      ce,
+      pe,
       {
-        isOpen: S.isOpen,
-        onClose: k,
+        isOpen: j.isOpen,
+        onClose: v,
         title: "Success",
         children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
           /* @__PURE__ */ e("div", { className: "rsp-text-center", children: /* @__PURE__ */ e("p", { className: "rsp-text-green-600 rsp-font-medium rsp-mb-4", children: "Template created successfully!" }) }),
-          S.templateId && /* @__PURE__ */ r("div", { className: "rsp-bg-gray-50 rsp-p-4 rsp-rounded-lg rsp-space-y-2", children: [
+          j.templateId && /* @__PURE__ */ r("div", { className: "rsp-bg-gray-50 rsp-p-4 rsp-rounded-lg rsp-space-y-2", children: [
             /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
               /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: "Template Name:" }),
-              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium", children: S.templateName })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium", children: j.templateName })
             ] }),
             /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
               /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: "Template ID:" }),
-              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-font-mono", children: S.templateId })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-font-mono", children: j.templateId })
             ] }),
-            ((E = S.template) == null ? void 0 : E.meta_tid) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
+            ((V = j.template) == null ? void 0 : V.meta_tid) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
               /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: "Meta TID:" }),
-              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-font-mono", children: S.template.meta_tid })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-font-mono", children: j.template.meta_tid })
             ] }),
-            ((U = S.template) == null ? void 0 : U.status) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
+            ((R = j.template) == null ? void 0 : R.status) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
               /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: "Status:" }),
               /* @__PURE__ */ e("span", { className: `rsp-text-sm rsp-font-medium rsp-capitalize ${// @ts-ignore
-              S.template.status === "pending" ? "rsp-text-yellow-600" : (
+              j.template.status === "pending" ? "rsp-text-yellow-600" : (
                 // @ts-ignore
-                S.template.status === "approved" ? "rsp-text-green-600" : "rsp-text-red-600"
-              )}`, children: S.template.status })
+                j.template.status === "approved" ? "rsp-text-green-600" : "rsp-text-red-600"
+              )}`, children: j.template.status })
             ] }),
-            ((B = S.template) == null ? void 0 : B.quality) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
+            ((I = j.template) == null ? void 0 : I.quality) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
               /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-600", children: "Quality:" }),
-              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-capitalize", children: S.template.quality })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-capitalize", children: j.template.quality })
             ] })
           ] })
         ] })
@@ -5243,18 +5261,18 @@ function ua({ onCancel: a }) {
     )
   ] });
 }
-const xa = Ee({});
-function ba({ apiKey: a, children: n }) {
-  const i = we(() => ({ apiKey: a }), [a]);
+const fa = Se({});
+function wa({ apiKey: a, children: n }) {
+  const i = Ne(() => ({ apiKey: a }), [a]);
   if (a)
     try {
       localStorage.setItem("account", JSON.stringify({ apiKey: a }));
     } catch {
     }
-  return /* @__PURE__ */ e(xa.Provider, { value: i, children: n });
+  return /* @__PURE__ */ e(fa.Provider, { value: i, children: n });
 }
 export {
-  ua as CreateTemplate,
-  ha as Dashboard,
-  ba as TrustSignalProvider
+  ya as CreateTemplate,
+  ga as Dashboard,
+  wa as TrustSignalProvider
 };