@resulticks/trustsignal-wa-hsm 0.4.0 → 0.6.0

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

@@ -1,17 +1,17 @@
-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 = {}) => {
+import { jsx as e, jsxs as r, Fragment as ce } from "react/jsx-runtime";
+import J, { forwardRef as Oe, createElement as ve, useRef as Le, useEffect as le, useState as P, useMemo as Se, useCallback as ke, createContext as Pe } from "react";
+import { useNavigate as Ve, useInRouterContext as Ne } from "react-router-dom";
+const ze = async (a, s = {}) => {
   try {
-    return await je(a.apiKey);
+    return await De(a.apiKey);
   } catch (i) {
     return console.error("API Error:", i), {
       status: "error",
       message: i instanceof Error ? i.message : "Failed to fetch templates"
     };
   }
-}, je = async (a) => {
-  const n = await fetch(
+}, De = async (a) => {
+  const s = await fetch(
     "https://wpapi.trustsignal.io/api/v1/template?page=1&limit=100",
     {
       method: "GET",
@@ -21,25 +21,25 @@ const Ve = async (a, n = {}) => {
       }
     }
   );
-  if (!n.ok)
-    throw new Error(`HTTP error! status: ${n.status}`);
-  const i = await n.json();
+  if (!s.ok)
+    throw new Error(`HTTP error! status: ${s.status}`);
+  const i = await s.json();
   if (!i.success)
     throw new Error(i.message || "Failed to fetch templates");
   return {
     status: "success",
-    data: i.templates.map((d) => ({
-      id: d.id,
-      name: d.name,
-      category: d.category,
-      language: d.lang,
-      type: d.temptype || "TEXT",
-      body: d.temp_var_data || "",
-      status: d.status,
-      creation_time: new Date(d.created_at).getTime(),
-      updation_time: new Date(d.modified_at).getTime(),
-      medialist: d.medialist,
-      shortlink: d.shortlink
+    data: i.templates.map((t) => ({
+      id: t.id,
+      name: t.name,
+      category: t.category,
+      language: t.lang,
+      type: t.temptype || "TEXT",
+      body: t.temp_var_data || "",
+      status: t.status,
+      creation_time: new Date(t.created_at).getTime(),
+      updation_time: new Date(t.modified_at).getTime(),
+      medialist: t.medialist,
+      shortlink: t.shortlink
     })),
     meta: {
       total: i.totalrecords,
@@ -54,7 +54,7 @@ const Ve = 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 Ue = {
+var _e = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -71,31 +71,31 @@ var Ue = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ae = (a) => a.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim(), H = (a, n) => {
-  const i = Le(
+const Fe = (a) => a.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim(), $ = (a, s) => {
+  const i = Oe(
     ({
-      color: l = "currentColor",
-      size: d = 24,
-      strokeWidth: p = 2,
-      absoluteStrokeWidth: m,
-      className: C = "",
-      children: g,
-      ...f
-    }, y) => be(
+      color: n = "currentColor",
+      size: t = 24,
+      strokeWidth: x = 2,
+      absoluteStrokeWidth: l,
+      className: k = "",
+      children: w,
+      ...o
+    }, N) => ve(
       "svg",
       {
-        ref: y,
-        ...Ue,
-        width: d,
-        height: d,
-        stroke: l,
-        strokeWidth: m ? Number(p) * 24 / Number(d) : p,
-        className: ["lucide", `lucide-${Ae(a)}`, C].join(" "),
-        ...f
+        ref: N,
+        ..._e,
+        width: t,
+        height: t,
+        stroke: n,
+        strokeWidth: l ? Number(x) * 24 / Number(t) : x,
+        className: ["lucide", `lucide-${Fe(a)}`, k].join(" "),
+        ...o
       },
       [
-        ...n.map(([j, U]) => be(j, U)),
-        ...Array.isArray(g) ? g : [g]
+        ...s.map(([U, f]) => ve(U, f)),
+        ...Array.isArray(w) ? w : [w]
       ]
     )
   );
@@ -107,7 +107,7 @@ const Ae = (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 ce = H("AlertCircle", [
+const fe = $("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 ce = H("AlertCircle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Re = H("ArrowRight", [
+const qe = $("ArrowRight", [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ]);
@@ -128,7 +128,7 @@ const Re = H("ArrowRight", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Be = H("ExternalLink", [
+const He = $("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 Be = H("ExternalLink", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ie = H("FileText", [
+const $e = $("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 Ie = H("FileText", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ze = H("FileVideo", [
+const Ge = $("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 ze = H("FileVideo", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Oe = H("Link", [
+const We = $("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 Oe = H("Link", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const le = H("MessageCircle", [
+const me = $("MessageCircle", [
   ["path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", key: "vv11sd" }]
 ]);
 /**
@@ -182,7 +182,17 @@ const le = H("MessageCircle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Me = H("Phone", [
+const Ke = $("Pencil", [
+  ["path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z", key: "5qss01" }],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+]);
+/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ue = $("Phone", [
   [
     "path",
     {
@@ -197,7 +207,7 @@ const Me = H("Phone", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const de = H("Plus", [
+const Ae = $("Plus", [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ]);
@@ -207,7 +217,7 @@ const de = H("Plus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pe = H("Reply", [
+const Je = $("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 +227,7 @@ const Pe = H("Reply", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const xe = H("Smile", [
+const he = $("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 +239,20 @@ const xe = H("Smile", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const _e = H("Upload", [
+const Xe = $("Trash2", [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
+  ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
+]);
+/**
+ * @license lucide-react v0.344.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ye = $("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 +263,7 @@ const _e = H("Upload", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Fe = H("Workflow", [
+const Qe = $("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,91 +274,97 @@ const Fe = H("Workflow", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ee = H("X", [
+const re = $("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ]);
-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();
+function te({ isOpen: a, onClose: s, title: i, children: n }) {
+  const t = Le(null);
+  return le(() => {
+    const x = (l) => {
+      t.current && !t.current.contains(l.target) && s();
     };
-    return a && document.addEventListener("mousedown", p), () => {
-      document.removeEventListener("mousedown", p);
+    return a && document.addEventListener("mousedown", x), () => {
+      document.removeEventListener("mousedown", x);
     };
-  }, [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: [
+  }, [a, s]), 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: t, 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: [
       /* @__PURE__ */ e("h2", { className: "rsp-text-lg rsp-font-semibold rsp-text-gray-900 rsp-text-center rsp-w-full rsp-break-words rsp-break-all rsp-whitespace-pre-wrap", children: i }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: n,
+          onClick: s,
           className: "rsp-p-1 hover:rsp-bg-gray-100 rsp-rounded-full",
-          children: /* @__PURE__ */ e(ee, { className: "rsp-w-5 rsp-h-5 rsp-text-gray-500" })
+          children: /* @__PURE__ */ e(re, { 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 })
+    /* @__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: n })
   ] }) }) : null;
 }
-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) : {
+function Va() {
+  const a = Ve(), [s, i] = P([]), [n, t] = P(!0), [x, l] = P(null), [k, w] = P(null), [o, N] = P({ isOpen: !1 }), [U, f] = P(() => {
+    const h = localStorage.getItem("account");
+    return h ? JSON.parse(h) : {
       apiKey: ""
     };
-  }), [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(() => {
+  }), [b, M] = P(""), [g, v] = P("all"), [c, p] = P("all"), [y] = P("all"), [u, V] = P(1), B = 20, [d, E] = P({ isOpen: !1 });
+  le(() => {
     (async () => {
       try {
-        if (m(null), d(!0), i([]), !C.apiKey) {
-          m("Please enter your TrustSignal API key"), d(!1);
+        if (l(null), t(!0), i([]), !U.apiKey) {
+          l("Please enter your TrustSignal API key"), t(!1);
           return;
         }
-        const M = await Ve(C, {
+        const L = await ze(U, {
           limit: 1e3
         });
-        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([]);
+        if (L.status === "error")
+          throw new Error(L.message);
+        i(L.data);
+      } catch (L) {
+        l(L instanceof Error ? L.message : "Failed to fetch templates"), i([]);
       } finally {
-        d(!1);
+        t(!1);
       }
     })();
-  }, [C]);
-  const I = (c) => {
-    const { name: M, value: A } = c.target, O = {
-      ...C,
-      [M]: A
+  }, [U]);
+  const A = (h) => {
+    const { name: L, value: z } = h.target, q = {
+      ...U,
+      [L]: z
     };
-    g(O), localStorage.setItem("account", JSON.stringify(O));
-  }, x = (c, M) => {
-    R({
+    f(q), localStorage.setItem("account", JSON.stringify(q));
+  }, O = (h, L) => {
+    E({
       isOpen: !0,
-      url: c,
-      templateName: M
+      url: h,
+      templateName: L
     });
-  }, 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" }),
-      /* @__PURE__ */ e(
-        "button",
-        {
-          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(de, { className: "rsp-w-6 rsp-h-6" })
-        }
-      )
-    ] }),
+  }, R = () => {
+    E({ isOpen: !1 });
+  }, _ = async (h) => {
+    try {
+      const L = localStorage.getItem("account"), z = L ? JSON.parse(L) : { apiKey: "" };
+      if (!z.apiKey) {
+        l("Please enter your TrustSignal API key");
+        return;
+      }
+      w(h);
+      const { deleteTemplateById: q } = await import("./delete-BgBYMUw2.js"), X = await q(z.apiKey, h);
+      if (!X.success) throw new Error(X.message || "Delete failed");
+      i((T) => T.filter((Y) => Y.id !== h)), N({ isOpen: !1 });
+    } catch (L) {
+      l(L instanceof Error ? L.message : "Failed to delete template");
+    } finally {
+      w(null);
+    }
+  }, m = s.filter((h) => {
+    const L = b.trim(), z = L.toLowerCase(), q = L === "" || h.id.toString().includes(L) || h.name.toLowerCase().includes(z), X = g === "all" || h.status.toLowerCase() === g.toLowerCase(), T = c === "all" || h.category.toLowerCase() === c.toLowerCase(), Y = y === "all" || h.language.toLowerCase().startsWith(y.toLowerCase());
+    return q && X && T && Y;
+  }), C = Math.ceil(m.length / B), S = (u - 1) * B, j = S + B, I = m.slice(S, j);
+  return n ? /* @__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__ */ e("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" }) }),
     /* @__PURE__ */ e("div", { className: " rsp-p-4 rsp-pl-0 rsp-rounded-lg rsp-shadow-sm rsp-mb-6", children: /* @__PURE__ */ r("div", { children: [
       /* @__PURE__ */ e("label", { className: "rsp-block rsp-text-sm rsp-font-medium rsp-text-gray-700 rsp-mb-1", children: "TrustSignal API Key" }),
       /* @__PURE__ */ r("div", { className: "rsp-relative", children: [
@@ -344,8 +373,8 @@ function ga() {
           {
             type: "password",
             name: "apiKey",
-            value: C.apiKey,
-            onChange: I,
+            value: U.apiKey,
+            onChange: A,
             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 +382,17 @@ function ga() {
         /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-bottom-0 rsp-left-0 rsp-w-4 rsp-h-0.5 rsp-bg-red-500" })
       ] })
     ] }) }),
-    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 }) })
+    x && /* @__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(fe, { 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: x }) })
     ] }) }),
     /* @__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: f,
-        onChange: (c) => y(c.target.value),
+        value: b,
+        onChange: (h) => M(h.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 +405,10 @@ function ga() {
           /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center", children: /* @__PURE__ */ r(
             "select",
             {
-              value: k,
-              onChange: (c) => N(c.target.value),
+              value: c,
+              onChange: (h) => p(h.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: (c) => c.stopPropagation(),
+              onClick: (h) => h.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 +424,10 @@ function ga() {
           /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center", children: /* @__PURE__ */ r(
             "select",
             {
-              value: j,
-              onChange: (c) => U(c.target.value),
+              value: g,
+              onChange: (h) => v(h.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: (c) => c.stopPropagation(),
+              onClick: (h) => h.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" }),
@@ -410,75 +439,94 @@ function ga() {
         ] }) }),
         /* @__PURE__ */ e("th", { className: "rsp-px-6 rsp-py-3 rsp-text-left rsp-text-sm rsp-font-medium", children: "Created" }),
         /* @__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("th", { className: "rsp-px-6 rsp-py-3 rsp-text-left rsp-text-sm rsp-font-medium", children: "Media" }),
+        /* @__PURE__ */ e("th", { className: "rsp-px-6 rsp-py-3 rsp-text-left rsp-text-sm rsp-font-medium", children: "Actions" })
       ] }) }),
-      /* @__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 ${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: 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
-                        ${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(
+      /* @__PURE__ */ e("tbody", { children: I.length > 0 ? I.map((h, L) => /* @__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`,
+          children: [
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-900", children: h.id }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-900 rsp-font-medium", children: h.name }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700 rsp-capitalize", children: h.category }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: h.language }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: h.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
+                        ${h.status.toLowerCase() === "approved" ? "rsp-bg-green-100 rsp-text-green-800" : h.status.toLowerCase() === "rejected" ? "rsp-bg-red-100 rsp-text-red-800" : "rsp-bg-yellow-100 rsp-text-yellow-800"}`, children: h.status }) }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: h.creation_time ? new Date(h.creation_time).toLocaleDateString() : "N/A" }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: h.updation_time ? new Date(h.updation_time).toLocaleDateString() : "N/A" }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4 rsp-text-sm rsp-text-gray-700", children: h.medialist && typeof h.medialist == "object" && "header" in h.medialist && h.medialist.header ? /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => O(String(h.medialist.header || ""), h.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: [
+                    /* @__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" })
+                  ] }),
+                  /* @__PURE__ */ e("span", { children: "View Media" })
+                ]
+              }
+            ) : /* @__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" }) }),
+            /* @__PURE__ */ e("td", { className: "rsp-px-6 rsp-py-4", children: /* @__PURE__ */ r("div", { className: "rsp-flex rsp-gap-2", children: [
+              /* @__PURE__ */ e(
                 "button",
                 {
-                  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: [
-                      /* @__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" })
-                    ] }),
-                    /* @__PURE__ */ e("span", { children: "View Media" })
-                  ]
+                  onClick: () => a(`/create?edit=${encodeURIComponent(String(h.id))}`),
+                  className: "rsp-inline-flex rsp-items-center rsp-justify-center rsp-w-8 rsp-h-8 rsp-rounded rsp-bg-blue-600 rsp-text-white hover:rsp-bg-blue-700 rsp-transition-colors",
+                  title: "Update",
+                  children: /* @__PURE__ */ e(Ke, { className: "rsp-w-4 rsp-h-4" })
                 }
-              ) : /* @__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" }) })
-            ]
-          },
-          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" }) }) })
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => N({ isOpen: !0, templateId: String(h.id), templateName: h.name }),
+                  disabled: k === h.id,
+                  className: `rsp-inline-flex rsp-items-center rsp-justify-center rsp-w-8 rsp-h-8 rsp-rounded rsp-text-white rsp-transition-colors ${k === h.id ? "rsp-bg-red-400" : "rsp-bg-red-600 hover:rsp-bg-red-700"}`,
+                  title: k === h.id ? "Deleting..." : "Delete",
+                  children: /* @__PURE__ */ e(Xe, { className: "rsp-w-4 rsp-h-4" })
+                }
+              )
+            ] }) })
+          ]
+        },
+        h.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" }) }) })
     ] }) }) }),
-    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: [
+    I.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: b + 1 }),
+        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: S + 1 }),
         " to ",
-        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: Math.min(E, L.length) }),
+        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: Math.min(j, m.length) }),
         " of ",
-        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: L.length }),
+        /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: m.length }),
         " results"
       ] }),
       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => h((c) => Math.max(c - 1, 1)),
-            disabled: t === 1,
+            onClick: () => V((h) => Math.max(h - 1, 1)),
+            disabled: u === 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"
           }
         ),
         /* @__PURE__ */ r("span", { className: "rsp-px-4 rsp-py-2 rsp-text-sm rsp-font-medium rsp-text-gray-700", children: [
           "Page ",
-          t,
+          u,
           " of ",
-          s
+          C
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => h((c) => Math.min(c + 1, s)),
-            disabled: t === s,
+            onClick: () => V((h) => Math.min(h + 1, C)),
+            disabled: u === C,
             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,34 +534,32 @@ function ga() {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      pe,
+      te,
       {
-        isOpen: V.isOpen,
-        onClose: w,
-        title: `Media - ${V.templateName || "Template"}`,
+        isOpen: d.isOpen,
+        onClose: R,
+        title: `Media - ${d.templateName || "Template"}`,
         children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
-          V.url && /* @__PURE__ */ r("div", { className: "rsp-text-center", children: [
+          d.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: V.url,
+                  src: d.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: (c) => {
-                    var A;
-                    const M = (A = c.currentTarget.parentElement) == null ? void 0 : A.querySelector(".loading-placeholder");
-                    M && (M.style.display = "none");
+                  onLoad: (h) => {
+                    const L = h.currentTarget.parentElement, z = L == null ? void 0 : L.querySelector(".loading-placeholder");
+                    z && (z.style.display = "none");
                   },
-                  onError: (c) => {
-                    var A;
-                    c.currentTarget.style.display = "none";
-                    const M = (A = c.currentTarget.parentElement) == null ? void 0 : A.querySelector(".error-placeholder");
-                    M && (M.style.display = "block");
+                  onError: (h) => {
+                    h.currentTarget.style.display = "none";
+                    const L = h.currentTarget.parentElement, z = L == null ? void 0 : L.querySelector(".error-placeholder");
+                    z && (z.style.display = "block");
                   }
                 }
               ),
-              l && /* @__PURE__ */ e("div", { className: "loading-placeholder rsp-absolute rsp-inset-0 rsp-flex rsp-items-center rsp-justify-center", children: /* @__PURE__ */ e("div", { className: "rsp-text-gray-500 rsp-text-sm", children: "Loading media..." }) }),
+              n && /* @__PURE__ */ e("div", { className: "loading-placeholder rsp-absolute rsp-inset-0 rsp-flex rsp-items-center rsp-justify-center", children: /* @__PURE__ */ e("div", { className: "rsp-text-gray-500 rsp-text-sm", children: "Loading media..." }) }),
               /* @__PURE__ */ r("div", { className: "error-placeholder rsp-absolute rsp-inset-0 rsp-flex rsp-flex-col rsp-items-center rsp-justify-center", style: { display: "none" }, children: [
                 /* @__PURE__ */ e("svg", { className: "rsp-w-[100%] rsp-h-12 rsp-text-gray-400 rsp-m-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__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-gray-500 rsp-text-sm rsp-mb-2", children: "Load media on new tab" })
@@ -521,13 +567,13 @@ function ga() {
             ] }),
             /* @__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: V.url })
+              /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-800 rsp-break-all rsp-font-mono", children: d.url })
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-end rsp-pt-4", children: /* @__PURE__ */ r(
             "a",
             {
-              href: V.url,
+              href: d.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",
@@ -539,70 +585,101 @@ function ga() {
           ) })
         ] })
       }
+    ),
+    /* @__PURE__ */ e(
+      te,
+      {
+        isOpen: o.isOpen,
+        onClose: () => N({ isOpen: !1 }),
+        title: "Delete Template",
+        children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
+          /* @__PURE__ */ r("p", { className: "rsp-text-sm rsp-text-gray-700", children: [
+            "Are you sure you want to delete the template ",
+            /* @__PURE__ */ e("span", { className: "rsp-font-medium", children: o.templateName }),
+            "?"
+          ] }),
+          /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-end rsp-gap-3", children: [
+            /* @__PURE__ */ e("button", { onClick: () => N({ isOpen: !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", children: "Cancel" }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => o.templateId && _(o.templateId),
+                className: "rsp-px-4 rsp-py-2 rsp-text-sm rsp-font-medium rsp-text-white rsp-bg-red-600 rsp-rounded-md hover:rsp-bg-red-700",
+                children: "Delete"
+              }
+            )
+          ] })
+        ] })
+      }
     )
   ] });
 }
-const De = async (a, n) => {
-  var i, l, d, p, m, C, g;
+const Ze = async (a, s) => {
+  var i, n, t, x, l, k, w;
   try {
-    console.log("Creating template with data:", n);
-    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 = {
+    console.log("Creating template with data:", s);
+    const o = s.language, N = s.headerType === "MEDIA" && s.mediaType === "DOCUMENT", U = s.type === "CAROUSEL";
+    let f = "";
+    N ? f = je(s, o) : U ? f = Re(s, o) : f = Ie(s, o), console.log("Raw JSON string being sent:", f);
+    const b = {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
-      body: U,
+      body: f,
       redirect: "follow"
     };
     console.log(
       "Making request to:",
       `https://wpapi.trustsignal.io/api/v1/template?api_key=${a}`
-    ), console.log("Request options:", k);
-    const N = await fetch(
+    ), console.log("Request options:", b);
+    const M = await fetch(
       `https://wpapi.trustsignal.io/api/v1/template?api_key=${a}`,
-      k
+      b
     );
-    console.log("Response status:", N.status), console.log(
+    console.log("Response status:", M.status), console.log(
       "Response headers:",
-      Object.fromEntries(N.headers.entries())
+      Object.fromEntries(M.headers.entries())
     );
-    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");
+    const g = await M.text();
+    console.log("Raw response:", g);
+    const v = JSON.parse(g);
+    if (console.log("Parsed response:", v), !v.success)
+      throw new Error(v.message || "Template creation failed");
     return {
       status: "success",
       message: "Template created successfully",
       data: {
-        template: u.template,
+        template: v.template,
         details: [
           {
-            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
+            template_name: ((i = v.template) == null ? void 0 : i.name) || s.name,
+            template_id: ((n = v.template) == null ? void 0 : n.id) || "unknown",
+            meta_tid: (t = v.template) == null ? void 0 : t.meta_tid,
+            status: (x = v.template) == null ? void 0 : x.status,
+            quality: (l = v.template) == null ? void 0 : l.quality,
+            temp_route: (k = v.template) == null ? void 0 : k.temp_route,
+            temptype: (w = v.template) == null ? void 0 : w.temptype
           }
         ]
       }
     };
-  } catch (f) {
-    return console.error("TrustSignal API Error:", f), {
+  } catch (o) {
+    return console.error("TrustSignal API Error:", o), {
       status: "error",
-      message: f instanceof Error ? f.message : "Failed to create template"
+      message: o instanceof Error ? o.message : "Failed to create template"
     };
   }
-}, qe = (a, n) => {
-  var p, m;
+};
+function ea(a) {
+  const s = a.language, i = a.headerType === "MEDIA" && a.mediaType === "DOCUMENT", n = a.type === "CAROUSEL";
+  return i ? je(a, s) : n ? Re(a, s) : Ie(a, s);
+}
+const je = (a, s) => {
+  var x, l;
   const i = {
     name: a.name,
-    lang: n,
+    lang: s,
     category: a.category,
     components: []
     // Components should be an array
@@ -613,72 +690,72 @@ const De = async (a, n) => {
     type: "HEADER",
     format: "DOCUMENT"
   }));
-  const l = J(a.body), d = {
+  const n = ee(a.body), t = {
     type: "BODY",
     text: a.body
   };
-  if (l.length > 0 && ((p = a.sampleContent) != null && p.bodyVariables)) {
-    const C = oe(a, l);
-    d.example = {
-      body_text: [C]
+  if (n.length > 0 && ((x = a.sampleContent) != null && x.bodyVariables)) {
+    const k = be(a, n);
+    t.example = {
+      body_text: [k]
       // This creates the required nested array
     };
   }
-  if (i.components.push(d), (m = a.footer) != null && m.trim() && i.components.push({
+  if (i.components.push(t), (l = a.footer) != null && l.trim() && i.components.push({
     type: "FOOTER",
     text: a.footer
   }), a.buttons && a.buttons.length > 0) {
-    const C = a.buttons.map((g) => {
-      var y;
-      const f = {
-        type: g.type === "CALL" ? "PHONE_NUMBER" : g.type,
-        text: g.text
+    const k = a.buttons.map((w) => {
+      var N;
+      const o = {
+        type: w.type === "CALL" ? "PHONE_NUMBER" : w.type,
+        text: w.text
       };
-      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}`;
+      if (w.type === "URL" && w.value && (o.url = w.value, w.urlType === "dynamic" && w.value.includes("{{"))) {
+        const U = ee(w.value);
+        if (U.length > 0 && ((N = a.sampleContent) != null && N.buttonVariables)) {
+          const f = U.map(
+            ({ number: b }) => {
+              var M, g;
+              return ((g = (M = a.sampleContent) == null ? void 0 : M.buttonVariables) == null ? void 0 : g[b]) || `sample${b}`;
             }
           );
-          f.example = U;
+          o.example = f;
         }
       }
-      return (g.type === "CALL" || g.type === "PHONE_NUMBER") && g.value && (f.phone_number = g.value.startsWith("+") ? g.value : `+${g.value}`), f;
+      return (w.type === "CALL" || w.type === "PHONE_NUMBER") && w.value && (o.phone_number = ue(w.value)), o;
     });
     i.components.push({
       type: "BUTTONS",
-      buttons: C
+      buttons: k
     });
   }
   return JSON.stringify(i);
-}, He = (a, n) => {
-  var m, C, g;
+}, Re = (a, s) => {
+  var l, k, w;
   const i = {
     name: a.name,
-    lang: n,
+    lang: s,
     category: a.category,
     shortlink: a.enableClickTracking ? "1" : "0",
     components: []
   };
-  (m = a.carousel) != null && m.cards.length && (i.media = {}, a.carousel.cards.forEach((f, y) => {
-    f.mediaUrl && (i.media[`card${y}header`] = f.mediaUrl);
+  (l = a.carousel) != null && l.cards.length && (i.media = {}, a.carousel.cards.forEach((o, N) => {
+    o.mediaUrl && (i.media[`card${N}header`] = o.mediaUrl);
   }));
-  const l = [], d = J(a.body), p = {
+  const n = [], t = ee(a.body), x = {
     type: "BODY",
     text: a.body,
-    ...d.length > 0 && ((C = a.sampleContent) == null ? void 0 : C.bodyVariables) && {
+    ...t.length > 0 && ((k = a.sampleContent) == null ? void 0 : k.bodyVariables) && {
       example: {
-        body_text: [oe(a, d)]
+        body_text: [be(a, t)]
       }
     }
   };
-  if (l.push(p), (g = a.carousel) != null && g.cards.length) {
-    const f = {
+  if (n.push(x), (w = a.carousel) != null && w.cards.length) {
+    const o = {
       type: "CAROUSEL",
-      cards: a.carousel.cards.map((y, j) => {
+      cards: a.carousel.cards.map((N) => {
         var U;
         return {
           components: [
@@ -688,47 +765,47 @@ const De = async (a, n) => {
             },
             {
               type: "BODY",
-              text: y.body,
-              ...J(y.body).length > 0 && {
+              text: N.body,
+              ...ee(N.body).length > 0 && {
                 example: {
-                  body_text: [$e(y)]
+                  body_text: [aa(N)]
                 }
               }
             },
-            ...y.buttons.length > 0 ? [{
+            ...N.buttons.length > 0 ? [{
               type: "BUTTONS",
-              buttons: y.buttons.map((k) => {
-                var o;
-                const N = {
-                  type: k.type === "CALL" ? "PHONE_NUMBER" : k.type,
-                  text: k.text
+              buttons: N.buttons.map((f) => {
+                var M;
+                const b = {
+                  type: f.type === "CALL" ? "PHONE_NUMBER" : f.type,
+                  text: f.text
                 };
-                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;
+                if (f.type === "URL" && f.value && (b.url = f.value, f.urlType === "dynamic" && f.value.includes("{{"))) {
+                  const g = ee(f.value);
+                  if (g.length > 0) {
+                    const v = ((M = N == null ? void 0 : N.sampleContent) == null ? void 0 : M.buttonVariables) || {}, c = g.map(({ number: p }) => v[p] || `sample${p}`);
+                    b.example = c;
                   }
                 }
-                return (k.type === "CALL" || k.type === "PHONE_NUMBER") && k.value && (N.phone_number = k.value), console.log("Carousel card button data:", N), N;
+                return (f.type === "CALL" || f.type === "PHONE_NUMBER") && f.value && (b.phone_number = ue(f.value)), console.log("Carousel card button data:", b), b;
               })
             }] : []
           ]
         };
       })
     };
-    l.push(f);
+    n.push(o);
   }
-  return i.components = l, JSON.stringify(i);
-}, $e = (a) => {
-  var l;
-  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}`);
-}, Ge = (a, n) => {
-  var m, C;
+  return i.components = n, JSON.stringify(i);
+}, aa = (a) => {
+  var n;
+  const s = ee(a.body || ""), i = ((n = a == null ? void 0 : a.sampleContent) == null ? void 0 : n.bodyVariables) || {};
+  return s.map(({ number: t }) => i[t] || `Sample ${t}`);
+}, Ie = (a, s) => {
+  var l, k;
   const i = {
     name: a.name,
-    lang: n,
+    lang: s,
     category: a.category,
     shortlink: a.enableClickTracking ? "1" : "0",
     components: []
@@ -736,94 +813,229 @@ const De = async (a, n) => {
   a.headerType === "MEDIA" && a.mediaUrl && a.mediaType !== "DOCUMENT" && (i.media = {
     header: a.mediaUrl
   });
-  const l = [];
+  const n = [];
   if (a.type !== "CAROUSEL") {
     if (a.headerType === "TEXT" && a.headerText) {
-      const g = J(a.headerText), f = {
+      const w = ee(a.headerText), o = {
         type: "HEADER",
         format: "TEXT",
         text: a.headerText,
-        ...g.length > 0 && ((m = a.sampleContent) == null ? void 0 : m.headerVariables) && {
+        ...w.length > 0 && ((l = a.sampleContent) == null ? void 0 : l.headerVariables) && {
           example: {
-            header_text: We(a, g)
+            header_text: ra(a, w)
           }
         }
       };
-      l.push(f);
+      n.push(o);
     } else if (a.headerType === "MEDIA") {
-      const g = {
+      const w = {
         type: "HEADER",
         format: a.mediaType || "IMAGE"
       };
-      l.push(g);
+      n.push(w);
     }
   }
-  const d = J(a.body), p = {
+  const t = ee(a.body), x = {
     type: "BODY",
     text: a.body,
-    ...d.length > 0 && ((C = a.sampleContent) == null ? void 0 : C.bodyVariables) && {
+    ...t.length > 0 && ((k = a.sampleContent) == null ? void 0 : k.bodyVariables) && {
       example: {
-        body_text: [oe(a, d)]
+        body_text: [be(a, t)]
       }
     }
   };
-  if (l.push(p), a.footer && a.type !== "CAROUSEL" && l.push({
+  if (n.push(x), a.footer && a.type !== "CAROUSEL" && n.push({
     type: "FOOTER",
     text: a.footer
   }), a.buttons.length > 0) {
-    const g = a.buttons.map((f) => {
-      var j;
-      const y = {
-        type: f.type === "CALL" ? "PHONE_NUMBER" : f.type,
-        text: f.text
+    const w = a.buttons.map((o) => {
+      var U;
+      const N = {
+        type: o.type === "CALL" ? "PHONE_NUMBER" : o.type,
+        text: o.text
       };
-      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}`;
+      if (o.type === "URL" && o.value && (N.url = o.value, o.urlType === "dynamic" && o.value.includes("{{"))) {
+        const f = ee(o.value);
+        if (f.length > 0 && ((U = a.sampleContent) != null && U.buttonVariables)) {
+          const b = f.map(
+            ({ number: M }) => {
+              var g, v;
+              return ((v = (g = a.sampleContent) == null ? void 0 : g.buttonVariables) == null ? void 0 : v[M]) || `sample${M}`;
             }
           );
-          y.example = k;
+          N.example = b;
         }
       }
-      return (f.type === "CALL" || f.type === "PHONE_NUMBER") && f.value && (y.phone_number = f.value), y;
+      return (o.type === "CALL" || o.type === "PHONE_NUMBER") && o.value && (N.phone_number = ue(o.value)), N;
     });
-    l.push({
+    n.push({
       type: "BUTTONS",
-      buttons: g
+      buttons: w
     });
   }
-  return i.components = l, JSON.stringify(i);
-}, J = (a) => (a.match(/\{\{(\d+)\}\}/g) || []).map((i) => ({
+  return i.components = n, JSON.stringify(i);
+}, ee = (a) => (a.match(/\{\{(\d+)\}\}/g) || []).map((i) => ({
   variable: i.replace(/[{}]/g, ""),
   number: i.replace(/[{}]/g, "")
-})), We = (a, n) => n.map(
+})), ue = (a) => a.startsWith("+") ? a : `+${a}`, ra = (a, s) => s.map(
   ({ number: i }) => {
-    var l, d;
-    return ((d = (l = a.sampleContent) == null ? void 0 : l.headerVariables) == null ? void 0 : d[i]) || `Sample ${i}`;
+    var n, t;
+    return ((t = (n = a.sampleContent) == null ? void 0 : n.headerVariables) == null ? void 0 : t[i]) || `Sample ${i}`;
   }
-), oe = (a, n) => n.map(
+), be = (a, s) => s.map(
   ({ number: i }) => {
-    var l, d;
-    return ((d = (l = a.sampleContent) == null ? void 0 : l.bodyVariables) == null ? void 0 : d[i]) || `Sample ${i}`;
+    var n, t;
+    return ((t = (n = a.sampleContent) == null ? void 0 : n.bodyVariables) == null ? void 0 : t[i]) || `Sample ${i}`;
   }
-), Ke = async (a, n) => {
+), sa = async (a, s) => {
   try {
-    if (!n.name || !n.body)
+    if (!s.name || !s.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 De(a.apiKey, n);
+    return await Ze(
+      a.apiKey,
+      s
+    );
   } catch (i) {
     return console.error("API Error:", i), {
       status: "error",
       message: i instanceof Error ? i.message : "An unexpected error occurred while creating the template"
     };
   }
-}, Qe = [
+};
+async function na(a, s, i) {
+  const n = ea(i), x = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: n,
+    redirect: "follow"
+  }, l = `https://wpapi.trustsignal.io/v1/user-templates/update/${encodeURIComponent(s)}?api_key=${encodeURIComponent(a)}`, k = await fetch(l, x), w = await k.text();
+  if (!k.ok)
+    return { success: !1, message: `Update failed (${k.status}): ${w}`, raw: n };
+  try {
+    const o = JSON.parse(w);
+    return { success: !!((o == null ? void 0 : o.success) ?? !0), message: o == null ? void 0 : o.message, raw: n };
+  } catch {
+    return { success: !0, raw: n };
+  }
+}
+async function ia(a, s) {
+  var k;
+  const i = `https://wpapi.trustsignal.io/api/v1/template/${encodeURIComponent(s)}?api_key=${encodeURIComponent(a)}`, n = await fetch(i, { method: "GET", redirect: "follow" });
+  if (!n.ok)
+    throw new Error(`Failed to fetch template ${s}: ${n.status}`);
+  const t = await n.text(), x = JSON.parse(t), l = x.template || ((k = x.data) == null ? void 0 : k.template) || x;
+  if (!l)
+    throw new Error("Invalid template details response");
+  return la(l);
+}
+function la(a) {
+  var N, U;
+  const s = {
+    headerVariables: {},
+    bodyVariables: {},
+    buttonVariables: {}
+  };
+  let i = "NONE", n = "", t, x, l = "", k = "";
+  const w = [];
+  if (a.jsonstruct)
+    try {
+      const f = JSON.parse(a.jsonstruct);
+      if (f != null && f.header) {
+        const b = f.header.format;
+        b && b !== "TEXT" ? (i = "MEDIA", t = b, x = f.header.url || ((N = a.medialist) == null ? void 0 : N.header)) : b === "TEXT" && (i = "TEXT", n = f.header.text || "");
+      }
+      if (f != null && f.body && (l = f.body.text || ""), (U = f == null ? void 0 : f.buttons) != null && U.buttons && Array.isArray(f.buttons.buttons))
+        for (const b of f.buttons.buttons) {
+          if (!b || !b.type || !b.text) continue;
+          const M = {
+            id: de(),
+            type: b.type === "PHONE_NUMBER" ? "PHONE_NUMBER" : b.type,
+            text: b.text
+          };
+          b.type === "URL" && (M.value = b.url, typeof b.url == "string" && b.url.includes("{{") && Array.isArray(b.example) ? (Ce(b.url).forEach((v, c) => {
+            s.buttonVariables[v] = b.example[c] ?? "";
+          }), M.urlType = "dynamic") : M.urlType = "static"), (b.type === "CALL" || b.type === "PHONE_NUMBER") && (M.value = b.phone_number || ""), w.push(M);
+        }
+      if (f != null && f.carousel) {
+        const b = Object.keys(f.carousel).filter((p) => /^card\d+$/.test(p));
+        b.sort((p, y) => {
+          const u = parseInt(p.replace("card", ""), 10), V = parseInt(y.replace("card", ""), 10);
+          return u - V;
+        });
+        const M = b.map((p) => {
+          const y = f.carousel[p] || {}, u = y.header || {}, V = y.body || {}, B = y.buttons && Array.isArray(y.buttons.buttons) ? y.buttons.buttons : [], d = u.format, E = d === "IMAGE" || d === "VIDEO" || d === "DOCUMENT" ? d : void 0, O = `card${p.replace("card", "")}header`, R = u.url || (a.medialist ? a.medialist[O] : void 0), _ = V.text || "", m = [];
+          for (const C of B) {
+            if (!C || !C.type || !C.text) continue;
+            const S = { id: de(), type: C.type === "PHONE_NUMBER" ? "PHONE_NUMBER" : C.type, text: C.text };
+            C.type === "URL" && (S.value = C.url, typeof C.url == "string" && C.url.includes("{{") && Array.isArray(C.example) ? (Ce(C.url).forEach((I, h) => {
+            }), S.urlType = "dynamic") : S.urlType = "static"), (C.type === "CALL" || C.type === "PHONE_NUMBER") && (S.value = C.phone_number || ""), m.push(S);
+          }
+          return {
+            id: de(),
+            headerType: E ? "MEDIA" : "NONE",
+            mediaType: E,
+            mediaUrl: R,
+            body: _,
+            buttons: m,
+            sampleContent: {
+              headerVariables: {},
+              bodyVariables: {},
+              buttonVariables: {}
+            }
+          };
+        });
+        let g = "IMAGE";
+        const v = M[0];
+        (v == null ? void 0 : v.mediaType) === "VIDEO" && (g = "VIDEO");
+        const c = {
+          type: g,
+          cards: M
+        };
+        return {
+          name: a.name,
+          category: a.category === "MARKETING" || a.category === "UTILITY" ? a.category : "MARKETING",
+          type: "CAROUSEL",
+          language: a.lang || "en",
+          enableClickTracking: !1,
+          headerType: "NONE",
+          headerText: "",
+          body: l,
+          footer: k,
+          buttons: [],
+          sampleContent: s,
+          carousel: c
+        };
+      }
+    } catch (f) {
+      console.warn("Failed to parse jsonstruct; falling back", f);
+    }
+  return {
+    name: a.name,
+    category: a.category === "MARKETING" || a.category === "UTILITY" ? a.category : "MARKETING",
+    type: "BASIC",
+    language: a.lang || "en",
+    enableClickTracking: !1,
+    headerType: i,
+    headerText: n,
+    mediaType: t,
+    mediaUrl: x,
+    body: l,
+    footer: k,
+    buttons: w,
+    sampleContent: s
+  };
+}
+function Ce(a) {
+  if (!a) return [];
+  const s = a.match(/\{\{(\d+)\}\}/g) || [];
+  return [...new Set(s.map((i) => i.replace(/[{}]/g, "")))];
+}
+function de() {
+  return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "id-" + Math.random().toString(36).slice(2);
+}
+const ta = [
   { value: "af", label: "Afrikaans" },
   { value: "sq", label: "Albanian" },
   { value: "ar", label: "Arabic" },
@@ -840,6 +1052,7 @@ const De = async (a, n) => {
   { value: "nl", label: "Dutch" },
   { value: "en_GB", label: "English (UK)" },
   { value: "en_US", label: "English (US)" },
+  { value: "en", label: "English" },
   { value: "et", label: "Estonian" },
   { value: "fil", label: "Filipino" },
   { value: "fi", label: "Finnish" },
@@ -888,118 +1101,118 @@ const De = async (a, n) => {
   { value: "ur", label: "Urdu" },
   { value: "uz", label: "Uzbek" },
   { value: "vi", label: "Vietnamese" }
-], Ye = [
+], ca = [
   { value: "NONE", label: "None" },
   { value: "TEXT", label: "Text" },
   { value: "MEDIA", label: "Media" }
-], Xe = [
+], ma = [
   { value: "IMAGE", label: "Image" },
   { value: "VIDEO", label: "Video" },
   { value: "DOCUMENT", label: "Document" }
-], 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;
+], da = 5 * 1024 * 1024, xa = 16 * 1024 * 1024, pa = 100 * 1024 * 1024, xe = ["jpg", "jpeg", "png"], pe = ["mp4", "3gpp"], oe = ["pdf", "docx", "xlsx", "pptx", "txt"];
+function oa({ template: a, setTemplate: s, onFileUpload: i }) {
+  var V, B;
+  const [n, t] = J.useState(null), [x, l] = J.useState(!1), [k, w] = J.useState(null), [o, N] = J.useState(null), U = () => {
+    const E = (a.headerText || "").match(/{{\d+}}/g);
+    if (!E) return 0;
+    const A = E.map((O) => {
+      const R = O.match(/{{(\d+)}}/);
+      return R ? parseInt(R[1], 10) : 0;
     });
-    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();
+    return A.length > 0 ? Math.max(...A) : 0;
+  }, f = () => {
+    const A = `{{${U() + 1}}}`;
+    if (k && a.headerText.length + A.length <= 60) {
+      const O = k.selectionStart || a.headerText.length, R = a.headerText.substring(0, O), _ = a.headerText.substring(O), m = R + A + _;
+      s({ ...a, headerText: m }), setTimeout(() => {
+        if (k) {
+          const C = O + A.length;
+          k.setSelectionRange(C, C), k.focus();
         }
       }, 0);
     }
-  }, 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) {
+  }, b = (d) => {
+    s((E) => ({
+      ...E,
+      headerType: d,
+      headerText: d === "TEXT" ? E.headerText : "",
+      mediaType: d === "MEDIA" ? E.mediaType || "IMAGE" : void 0,
+      mediaUrl: d === "MEDIA" ? E.mediaUrl : void 0
+    })), d !== "MEDIA" && (t(null), N(null));
+  }, M = (d) => {
+    var E;
+    return ((E = d.split("?")[0].split(".").pop()) == null ? void 0 : E.toLowerCase()) || "";
+  }, g = (d, E) => {
+    const A = M(d.name);
+    switch (E) {
       case "IMAGE":
-        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.";
+        if (!xe.includes(A)) return "Invalid format. Only JPG, JPEG, PNG are allowed.";
+        if (d.size > da) return "File is too large. Max size is 5 MB.";
         break;
       case "VIDEO":
-        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.";
+        if (!pe.includes(A)) return "Invalid format. Only MP4, 3GPP are allowed.";
+        if (d.size > xa) return "File is too large. Max size is 16 MB.";
         break;
       case "DOCUMENT":
-        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.";
+        if (!oe.includes(A)) return "Invalid format. Allowed types: PDF, DOCX, XLSX, PPTX, TXT.";
+        if (d.size > pa) return "File is too large. Max size is 100 MB.";
         break;
       default:
         return "Invalid media type.";
     }
     return null;
-  }, u = (x, w) => {
-    if (!x) return null;
-    const L = N(x);
-    switch (w) {
+  }, v = (d, E) => {
+    if (!d) return null;
+    const A = M(d);
+    switch (E) {
       case "IMAGE":
-        if (!ie.includes(L)) return "URL does not point to a valid image (JPG, JPEG, PNG).";
+        if (!xe.includes(A)) return "URL does not point to a valid image (JPG, JPEG, PNG).";
         break;
       case "VIDEO":
-        if (!te.includes(L)) return "URL does not point to a valid video (MP4, 3GPP).";
+        if (!pe.includes(A)) return "URL does not point to a valid video (MP4, 3GPP).";
         break;
       case "DOCUMENT":
-        if (!me.includes(L)) return "URL does not point to a valid document.";
+        if (!oe.includes(A)) return "URL does not point to a valid document.";
         break;
     }
     return null;
-  }, t = () => {
-    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);
+  }, c = () => {
+    t(null), s({ ...a, mediaUrl: "" }), N(null);
+  }, p = async (d) => {
+    var O;
+    const E = (O = d.target.files) == null ? void 0 : O[0];
+    if (!E || !a.mediaType) return;
+    N(null);
+    const A = g(E, a.mediaType);
+    if (A) {
+      N(A);
       return;
     }
-    m(!0), d(w);
+    l(!0), t(E);
     try {
-      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);
+      const R = await i(E);
+      s({ ...a, mediaUrl: R });
+    } catch (R) {
+      console.error("File upload failed:", R), c();
+      const _ = R instanceof Error ? R.message : "File upload failed. Please try again.";
+      N(_);
     } finally {
-      m(!1);
+      l(!1);
     }
-  }, v = (x) => {
-    const w = x.target.value;
-    if (d(null), n({ ...a, mediaUrl: w }), a.mediaType) {
-      const L = u(w, a.mediaType);
-      y(L);
+  }, y = (d) => {
+    const E = d.target.value;
+    if (t(null), s({ ...a, mediaUrl: E }), a.mediaType) {
+      const A = v(E, a.mediaType);
+      N(A);
     }
-  }, V = () => {
+  }, u = () => {
     switch (a.mediaType) {
       case "IMAGE":
-        return ie.map((x) => `.${x}`).join(",");
+        return xe.map((d) => `.${d}`).join(",");
       case "VIDEO":
-        return te.map((x) => `.${x}`).join(",");
+        return pe.map((d) => `.${d}`).join(",");
       case "DOCUMENT":
-        return me.map((x) => `.${x}`).join(",");
+        return oe.map((d) => `.${d}`).join(",");
       default:
         return "*/*";
     }
@@ -1012,9 +1225,9 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
           "select",
           {
             value: a.headerType,
-            onChange: (x) => k(x.target.value),
+            onChange: (d) => b(d.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: Ye.map((x) => /* @__PURE__ */ e("option", { value: x.value, children: x.label }, x.value))
+            children: ca.map((d) => /* @__PURE__ */ e("option", { value: d.value, children: d.label }, d.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 +1239,10 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
       /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
         "input",
         {
-          ref: g,
+          ref: w,
           type: "text",
           value: a.headerText,
-          onChange: (x) => n({ ...a, headerText: x.target.value }),
+          onChange: (d) => s({ ...a, headerText: d.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 +1252,7 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: U,
+            onClick: f,
             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 +1264,30 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
         ] })
       ] }),
       (() => {
-        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: [
+        const d = [...new Set((a.headerText.match(/\{\{(\d+)\}\}/g) || []).map((E) => E.replace(/[{}]/g, "")))];
+        return d.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((w) => {
-            var L, s;
+          /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: d.map((E) => {
+            var A, O;
             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: [
-                `{{${w}}}`,
+                `{{${E}}}`,
                 ":"
               ] }),
               /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
-                  value: ((s = (L = a.sampleContent) == null ? void 0 : L.headerVariables) == null ? void 0 : s[w]) || "",
-                  onChange: (b) => {
-                    var T, c, M;
-                    const E = {
+                  value: ((O = (A = a.sampleContent) == null ? void 0 : A.headerVariables) == null ? void 0 : O[E]) || "",
+                  onChange: (R) => {
+                    var m, C, S;
+                    const _ = {
                       ...a.sampleContent,
-                      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) || {}
+                      headerVariables: { ...(m = a.sampleContent) == null ? void 0 : m.headerVariables, [E]: R.target.value },
+                      bodyVariables: ((C = a.sampleContent) == null ? void 0 : C.bodyVariables) || {},
+                      buttonVariables: ((S = a.sampleContent) == null ? void 0 : S.buttonVariables) || {}
                     };
-                    n({ ...a, sampleContent: E });
+                    s({ ...a, sampleContent: _ });
                   },
                   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,16 +1298,16 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
                 {
                   type: "button",
                   onClick: () => {
-                    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({
+                    var C, S, j;
+                    const R = new RegExp(`\\{\\{${E}\\}\\}`, "g"), _ = (a.headerText || "").replace(R, ""), m = Object.fromEntries(Object.entries(((C = a.sampleContent) == null ? void 0 : C.headerVariables) || {}).filter(([I]) => I !== E));
+                    s({
                       ...a,
-                      headerText: E,
+                      headerText: _,
                       sampleContent: {
                         ...a.sampleContent,
-                        headerVariables: T,
-                        bodyVariables: ((M = a.sampleContent) == null ? void 0 : M.bodyVariables) || {},
-                        buttonVariables: ((A = a.sampleContent) == null ? void 0 : A.buttonVariables) || {}
+                        headerVariables: m,
+                        bodyVariables: ((S = a.sampleContent) == null ? void 0 : S.bodyVariables) || {},
+                        buttonVariables: ((j = a.sampleContent) == null ? void 0 : j.buttonVariables) || {}
                       }
                     });
                   },
@@ -1103,7 +1316,7 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
                   children: "×"
                 }
               )
-            ] }, `header-sample-${w}`);
+            ] }, `header-sample-${E}`);
           }) })
         ] });
       })()
@@ -1116,15 +1329,15 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
             "select",
             {
               value: a.mediaType || "IMAGE",
-              onChange: (x) => {
-                n((w) => ({
-                  ...w,
-                  mediaType: x.target.value,
+              onChange: (d) => {
+                s((E) => ({
+                  ...E,
+                  mediaType: d.target.value,
                   mediaUrl: ""
-                })), d(null), y(null);
+                })), t(null), N(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: Xe.map((x) => /* @__PURE__ */ e("option", { value: x.value, children: x.label }, x.value))
+              children: ma.map((d) => /* @__PURE__ */ e("option", { value: d.value, children: d.label }, d.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 +1353,32 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
                 src: a.mediaUrl,
                 alt: "Preview",
                 className: "rsp-w-12 rsp-h-12 rsp-object-cover rsp-rounded",
-                onError: (x) => {
-                  x.currentTarget.style.display = "none", f || y("Could not load image preview from URL.");
+                onError: (d) => {
+                  d.currentTarget.style.display = "none", o || N("Could not load image preview from URL.");
                 },
                 onLoad: () => {
-                  f != null && f.includes("Could not load") && y(null);
+                  o != null && o.includes("Could not load") && N(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(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" }) }),
+            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(Ge, { 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($e, { 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("p", { className: "rsp-text-sm rsp-font-medium rsp-text-gray-900 rsp-truncate", children: n ? n.name : a.mediaUrl }),
+              n && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500", children: `${(n.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(ee, { className: "rsp-w-4 rsp-h-4" }) })
+          /* @__PURE__ */ e("button", { onClick: c, className: "rsp-p-1 rsp-text-gray-400 hover:rsp-text-red-500 rsp-transition-colors flex-shrink-0", children: /* @__PURE__ */ e(re, { className: "rsp-w-4 rsp-h-4" }) })
         ] }) : /* @__PURE__ */ r("div", { children: [
-          /* @__PURE__ */ e("input", { type: "file", accept: V(), onChange: h, className: "rsp-hidden", id: "media-upload", disabled: p }),
+          /* @__PURE__ */ e("input", { type: "file", accept: u(), onChange: p, className: "rsp-hidden", id: "media-upload", disabled: x }),
           /* @__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 ${p ? "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 ${x ? "rsp-opacity-50 rsp-cursor-not-allowed" : ""}`,
               children: [
-                /* @__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__ */ e(Ye, { 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: x ? "Uploading..." : `Upload ${((V = a.mediaType) == null ? void 0 : V.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 +1388,9 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
             }
           )
         ] }),
-        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 })
+        o && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2 rsp-text-xs rsp-text-red-600", children: [
+          /* @__PURE__ */ e(fe, { className: "rsp-w-4 rsp-h-4" }),
+          /* @__PURE__ */ e("span", { children: o })
         ] }),
         /* @__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 +1402,16 @@ function aa({ template: a, setTemplate: n, onFileUpload: i }) {
           {
             type: "url",
             value: a.mediaUrl || "",
-            onChange: v,
+            onChange: y,
             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 ${(I = a.mediaType) == null ? void 0 : I.toLowerCase()} URL`
+            placeholder: `Enter ${(B = a.mediaType) == null ? void 0 : B.toLowerCase()} URL`
           }
         ) })
       ] })
     ] })
   ] });
 }
-const we = [
+const Ee = [
   { name: "grinning-face", hexadecimal: "&#x1f600;" },
   { name: "grinning-face-with-smiling-eyes", hexadecimal: "&#x1f601;" },
   { name: "face-with-tears-of-joy", hexadecimal: "&#x1f602;" },
@@ -2997,56 +3210,56 @@ const we = [
   { name: "south-africa", hexadecimal: "&#x1f1ff;&#x1f1e6;" },
   { name: "zambia", hexadecimal: "&#x1f1ff;&#x1f1f2;" },
   { name: "zimbabwe", hexadecimal: "&#x1f1ff;&#x1f1fc;" }
-], ra = ({
+], fa = ({
   emojis: a,
-  onSelect: n,
+  onSelect: s,
   onClose: i
 }) => {
-  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)
+  const [n, t] = P({ start: 0, end: 80 }), x = 8, l = 40, k = 400, w = ke((f) => {
+    const b = f.currentTarget.scrollTop, M = Math.floor(b / l), g = Math.min(
+      M + Math.ceil(k / l) + 2,
+      Math.ceil(a.length / x)
     );
-    d({
-      start: N * p,
-      end: o * p
+    t({
+      start: M * x,
+      end: g * x
     });
-  }, [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);
+  }, [a.length, l, k, x]), o = ke((f) => {
+    const b = f.match(/&#x([0-9A-Fa-f]+);/g);
+    if (!b) return "";
+    const M = b.map((g) => {
+      const v = g.replace(/&#x|;/g, "");
+      return parseInt(v, 16);
     });
-    return String.fromCodePoint(...N);
-  }, []), y = Math.ceil(a.length / p) * m, j = a.slice(l.start, l.end);
+    return String.fromCodePoint(...M);
+  }, []), N = Math.ceil(a.length / x) * l, U = a.slice(n.start, n.end);
   return /* @__PURE__ */ e(
     "div",
     {
       className: "rsp-h-[400px] rsp-overflow-y-auto rsp-relative",
-      onScroll: g,
-      children: /* @__PURE__ */ e("div", { style: { height: y }, className: "rsp-relative", children: /* @__PURE__ */ e(
+      onScroll: w,
+      children: /* @__PURE__ */ e("div", { style: { height: N }, 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 / p) * m,
+            top: Math.floor(n.start / x) * l,
             transform: "translateY(0px)"
           },
-          children: j.map((U, k) => {
-            const N = l.start + k;
+          children: U.map((f, b) => {
+            const M = n.start + b;
             return /* @__PURE__ */ e(
               "button",
               {
                 onClick: () => {
-                  n(f(U.hexadecimal));
+                  s(o(f.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: U.name,
-                style: { height: m },
-                children: f(U.hexadecimal)
+                title: f.name,
+                style: { height: l },
+                children: o(f.hexadecimal)
               },
-              N
+              M
             );
           })
         }
@@ -3054,113 +3267,113 @@ const we = [
     }
   );
 };
-function fe({ isOpen: a, onClose: n, onSelect: i }) {
-  const [l, d] = B(""), p = Ne(() => l ? we.filter(
-    (m) => m.name.toLowerCase().includes(l.toLowerCase())
-  ) : we, [l]);
-  return K.useEffect(() => {
-    a || d("");
-  }, [a]), /* @__PURE__ */ e(pe, { isOpen: a, onClose: n, title: "Select Emoji", children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
+function ge({ isOpen: a, onClose: s, onSelect: i }) {
+  const [n, t] = P(""), x = Se(() => n ? Ee.filter(
+    (l) => l.name.toLowerCase().includes(n.toLowerCase())
+  ) : Ee, [n]);
+  return J.useEffect(() => {
+    a || t("");
+  }, [a]), /* @__PURE__ */ e(te, { isOpen: a, onClose: s, title: "Select Emoji", children: /* @__PURE__ */ r("div", { className: "rsp-space-y-4", children: [
     /* @__PURE__ */ r("div", { className: "rsp-relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
           placeholder: "Search emojis...",
-          value: l,
-          onChange: (m) => d(m.target.value),
+          value: n,
+          onChange: (l) => t(l.target.value),
           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"
         }
       ),
-      l && /* @__PURE__ */ e(
+      n && /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => d(""),
+          onClick: () => t(""),
           className: "rsp-absolute rsp-right-2 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-text-gray-400 hover:rsp-text-gray-600",
           children: "×"
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "rsp-flex rsp-gap-2 rsp-flex-wrap", children: ["😀", "🎉", "❤️", "👍", "🔥", "💯", "✨", "🎯"].map((m) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "rsp-flex rsp-gap-2 rsp-flex-wrap", children: ["😀", "🎉", "❤️", "👍", "🔥", "💯", "✨", "🎯"].map((l) => /* @__PURE__ */ e(
       "button",
       {
         onClick: () => {
-          i(m);
+          i(l);
         },
         className: "rsp-w-8 rsp-h-8 rsp-flex rsp-items-center rsp-justify-center rsp-text-lg hover:rsp-bg-gray-100 rsp-rounded rsp-transition-colors",
-        children: m
+        children: l
       },
-      m
+      l
     )) }),
     /* @__PURE__ */ r("div", { className: "rsp-text-sm rsp-text-gray-500", children: [
-      p.length,
+      x.length,
       " emojis found"
     ] }),
     /* @__PURE__ */ e(
-      ra,
+      fa,
       {
-        emojis: p,
+        emojis: x,
         onSelect: i,
-        onClose: n
+        onClose: s
       }
     )
   ] }) });
 }
-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;
+function ha({ template: a, setTemplate: s }) {
+  const [i, n] = P(!1), [t, x] = P(null), [l, k] = P(null), [w, o] = P(null), [N, U] = P(!1), f = () => {
+    const c = (a.body || "").match(/{{\d+}}/g);
+    if (!c) return 0;
+    const p = c.map((y) => {
+      const u = y.match(/{{(\d+)}}/);
+      return u ? parseInt(u[1], 10) : 0;
     });
-    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({
+    return p.length > 0 ? Math.max(...p) : 0;
+  }, b = () => {
+    const p = `{{${f() + 1}}}`;
+    if (l && a.body.length + p.length <= 1024) {
+      const y = l.selectionStart || a.body.length, u = a.body.substring(0, y), V = a.body.substring(y), B = u + p + V;
+      s({
         ...a,
-        body: V
+        body: B
       }), setTimeout(() => {
-        if (m) {
-          const R = t + u.length;
-          m.setSelectionRange(R, R), m.focus();
+        if (l) {
+          const d = y + p.length;
+          l.setSelectionRange(d, d), l.focus();
         }
       }, 0);
     }
-  }, U = () => {
-    p("body"), l(!0), setTimeout(() => {
-      m && m.focus();
+  }, M = () => {
+    x("body"), n(!0), setTimeout(() => {
+      l && l.focus();
     }, 0);
-  }, k = (N) => {
-    if (d === "body") {
-      if (!m) return;
-      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({
+  }, g = (v) => {
+    if (t === "body") {
+      if (!l) return;
+      const c = l.selectionStart || a.body.length, p = 1024, y = a.body;
+      if (y.length + v.length <= p) {
+        const u = y.substring(0, c), V = y.substring(c), B = u + v + V;
+        s({
           ...a,
-          body: V
+          body: B
         }), setTimeout(() => {
-          if (m) {
-            const R = o + N.length;
-            m.setSelectionRange(R, R), m.focus();
+          if (l) {
+            const d = c + v.length;
+            l.setSelectionRange(d, d), l.focus();
           }
         }, 0);
       }
-    } else if (d === "footer") {
-      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({
+    } else if (t === "footer") {
+      if (!w) return;
+      const c = w.selectionStart || a.footer.length, p = 60, y = a.footer;
+      if (y.length + v.length <= p) {
+        const u = y.substring(0, c), V = y.substring(c), B = u + v + V;
+        s({
           ...a,
-          footer: V
+          footer: B
         }), setTimeout(() => {
-          if (g) {
-            const R = o + N.length;
-            g.setSelectionRange(R, R), g.focus();
+          if (w) {
+            const d = c + v.length;
+            w.setSelectionRange(d, d), w.focus();
           }
         }, 0);
       }
@@ -3172,22 +3385,24 @@ function sa({ template: a, setTemplate: n }) {
       /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
         "textarea",
         {
-          ref: C,
+          ref: k,
           value: a.body,
-          onChange: (N) => n({ ...a, body: N.target.value }),
+          onChange: (v) => s({ ...a, body: v.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: () => p("body")
+          onFocus: () => x("body"),
+          onBlur: () => U(!0)
         }
       ) }),
+      !a.body && N && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-red-600 rsp-mt-1", children: "Body is required." }),
       /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between rsp-mt-2", children: [
         /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: j,
+              onClick: b,
               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 +3411,10 @@ function sa({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: U,
+              onClick: M,
               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(xe, { className: "rsp-w-4 rsp-h-4" })
+              children: /* @__PURE__ */ e(he, { className: "rsp-w-4 rsp-h-4" })
             }
           )
         ] }),
@@ -3209,15 +3424,15 @@ function sa({ template: a, setTemplate: n }) {
         ] }) })
       ] }),
       (() => {
-        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: [
+        const v = a.body.match(/\{\{(\d+)\}\}/g) || [], c = [...new Set(v.map((p) => p.replace(/[{}]/g, "")))];
+        return c.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: o.map((u) => {
-            var t, h;
+          /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: c.map((p) => {
+            var y, u;
             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: [
                 "{{",
-                u,
+                p,
                 "}}",
                 ":"
               ] }),
@@ -3225,21 +3440,21 @@ function sa({ template: a, setTemplate: n }) {
                 "input",
                 {
                   type: "text",
-                  value: ((h = (t = a.sampleContent) == null ? void 0 : t.bodyVariables) == null ? void 0 : h[u]) || "",
-                  onChange: (v) => {
-                    var R, I, x;
-                    const V = {
+                  value: ((u = (y = a.sampleContent) == null ? void 0 : y.bodyVariables) == null ? void 0 : u[p]) || "",
+                  onChange: (V) => {
+                    var d, E, A;
+                    const B = {
                       ...a.sampleContent,
                       bodyVariables: {
-                        ...(R = a.sampleContent) == null ? void 0 : R.bodyVariables,
-                        [u]: v.target.value
+                        ...(d = a.sampleContent) == null ? void 0 : d.bodyVariables,
+                        [p]: V.target.value
                       },
-                      headerVariables: ((I = a.sampleContent) == null ? void 0 : I.headerVariables) || {},
-                      buttonVariables: ((x = a.sampleContent) == null ? void 0 : x.buttonVariables) || {}
+                      headerVariables: ((E = a.sampleContent) == null ? void 0 : E.headerVariables) || {},
+                      buttonVariables: ((A = a.sampleContent) == null ? void 0 : A.buttonVariables) || {}
                     };
-                    n({
+                    s({
                       ...a,
-                      sampleContent: V
+                      sampleContent: B
                     });
                   },
                   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 +3466,16 @@ function sa({ template: a, setTemplate: n }) {
                 {
                   type: "button",
                   onClick: () => {
-                    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({
+                    var E, A, O;
+                    const V = new RegExp(`\\{\\{${p}\\}\\}`, "g"), B = (a.body || "").replace(V, ""), d = Object.fromEntries(Object.entries(((E = a.sampleContent) == null ? void 0 : E.bodyVariables) || {}).filter(([R]) => R !== p));
+                    s({
                       ...a,
-                      body: V,
+                      body: B,
                       sampleContent: {
                         ...a.sampleContent,
-                        bodyVariables: R,
-                        headerVariables: ((x = a.sampleContent) == null ? void 0 : x.headerVariables) || {},
-                        buttonVariables: ((w = a.sampleContent) == null ? void 0 : w.buttonVariables) || {}
+                        bodyVariables: d,
+                        headerVariables: ((A = a.sampleContent) == null ? void 0 : A.headerVariables) || {},
+                        buttonVariables: ((O = a.sampleContent) == null ? void 0 : O.buttonVariables) || {}
                       }
                     });
                   },
@@ -3269,7 +3484,7 @@ function sa({ template: a, setTemplate: n }) {
                   children: "×"
                 }
               )
-            ] }, `body-sample-${u}`);
+            ] }, `body-sample-${p}`);
           }) })
         ] });
       })()
@@ -3279,14 +3494,14 @@ function sa({ template: a, setTemplate: n }) {
       /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
         "input",
         {
-          ref: f,
+          ref: o,
           type: "text",
           value: a.footer,
-          onChange: (N) => n({ ...a, footer: N.target.value }),
+          onChange: (v) => s({ ...a, footer: v.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: () => p("footer")
+          onFocus: () => x("footer")
         }
       ) }),
       /* @__PURE__ */ r("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-1", children: [
@@ -3295,93 +3510,95 @@ function sa({ template: a, setTemplate: n }) {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      fe,
+      ge,
       {
         isOpen: i,
-        onClose: () => l(!1),
-        onSelect: k
+        onClose: () => n(!1),
+        onSelect: g
       }
     )
   ] });
 }
-function na({ template: a, setTemplate: n }) {
-  var u;
-  const [i, l] = B(null), [d, p] = B(!1), [m, C] = B({
+function ua({ template: a, setTemplate: s }) {
+  var v;
+  const [i, n] = P(null), [t, x] = P(!1), [l, k] = P({
     text: "",
     value: "",
     urlType: "static"
-  }), 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
-  }, y = () => {
-    C({ text: "", value: "", urlType: "static" }), l(null), p(!1);
-  }, j = (t) => {
-    if (!m.text.trim()) return;
-    const h = {
+  }), o = {
+    quickReply: a.buttons.filter((c) => c.type === "QUICK_REPLY").length,
+    url: a.buttons.filter((c) => c.type === "URL").length,
+    call: a.buttons.filter((c) => c.type === "CALL").length,
+    flow: a.buttons.filter((c) => c.type === "FLOW").length
+  }, N = () => {
+    k({ text: "", value: "", urlType: "static" }), n(null), x(!1);
+  }, U = (c) => {
+    if (!l.text.trim()) return;
+    let p = c === "QUICK_REPLY" ? l.text : l.value;
+    c === "CALL" && p && !p.startsWith("+") && (p = "+" + p);
+    const y = {
       id: Math.random().toString(36).substr(2, 9),
-      type: t,
-      text: m.text,
-      value: t === "QUICK_REPLY" ? m.text : m.value,
-      urlType: t === "URL" ? m.urlType : void 0
+      type: c,
+      text: l.text,
+      value: p,
+      urlType: c === "URL" ? l.urlType : void 0
     };
-    n({
+    s({
       ...a,
-      buttons: [...a.buttons, h]
-    }), y();
-  }, U = (t) => {
-    n({
+      buttons: [...a.buttons, y]
+    }), N();
+  }, f = (c) => {
+    s({
       ...a,
-      buttons: a.buttons.filter((h) => h.id !== t)
+      buttons: a.buttons.filter((p) => p.id !== c)
     });
-  }, 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({
+  }, b = (c, p, y) => {
+    const u = a.buttons.find((d) => d.id === c), V = p === "text" ? 25 : p === "value" && (u == null ? void 0 : u.type) === "URL" ? 2e3 : 20;
+    let B = y.slice(0, V);
+    p === "value" && (u == null ? void 0 : u.type) === "CALL" && B && !B.startsWith("+") && (B = "+" + B), s({
       ...a,
       buttons: a.buttons.map(
-        (I) => I.id === t ? { ...I, [h]: v.slice(0, V) } : I
+        (d) => d.id === c ? { ...d, [p]: B } : d
       )
     });
-  }, N = () => {
-    const h = [
-      ...a.buttons.filter((V) => V.type === "URL" && V.urlType === "dynamic").map((V) => V.value || ""),
-      m.value
+  }, M = () => {
+    const p = [
+      ...a.buttons.filter((u) => u.type === "URL" && u.urlType === "dynamic").map((u) => u.value || ""),
+      l.value
       // Include current form input
     ].join(" ").match(/{{\d+}}/g);
-    if (!h) return 0;
-    const v = h.map((V) => {
-      const R = V.match(/{{(\d+)}}/);
-      return R ? parseInt(R[1], 10) : 0;
+    if (!p) return 0;
+    const y = p.map((u) => {
+      const V = u.match(/{{(\d+)}}/);
+      return V ? parseInt(V[1], 10) : 0;
     });
-    return v.length > 0 ? Math.max(...v) : 0;
-  }, o = [
+    return y.length > 0 ? Math.max(...y) : 0;
+  }, g = [
     {
       type: "QUICK_REPLY",
-      icon: le,
+      icon: me,
       label: "Quick Reply",
       description: "Add quick response options",
       limit: 10,
-      current: f.quickReply,
+      current: o.quickReply,
       color: "blue"
     },
     {
       type: "URL",
-      icon: Be,
+      icon: He,
       label: "Web URL",
       description: "Link to websites or pages",
       limit: 2,
-      current: f.url,
+      current: o.url,
       color: "green"
     },
     {
       type: "CALL",
-      icon: Me,
+      icon: Ue,
       label: "Call Button",
       description: "Add phone number to call",
       limit: 1,
-      current: f.call,
+      current: o.call,
       color: "purple"
     }
     // {
@@ -3406,47 +3623,47 @@ function na({ 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: o.map((t) => {
-      const h = t.icon, v = t.current >= t.limit;
+    !i && /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-1 md:rsp-grid-cols-2 rsp-gap-4", children: g.map((c) => {
+      const p = c.icon, y = c.current >= c.limit;
       return /* @__PURE__ */ e(
         "button",
         {
-          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"}`,
+          onClick: () => !y && n(c.type),
+          disabled: y,
+          className: `rsp-p-4 rsp-border-2 rsp-rounded-xl rsp-text-left rsp-transition-all rsp-duration-200 ${y ? "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 ${v ? "rsp-bg-gray-200" : "rsp-bg-white rsp-shadow-sm"}`, children: /* @__PURE__ */ e(h, { className: "rsp-w-5 rsp-h-5" }) }),
+              /* @__PURE__ */ e("div", { className: `rsp-p-2 rsp-rounded-lg ${y ? "rsp-bg-gray-200" : "rsp-bg-white rsp-shadow-sm"}`, children: /* @__PURE__ */ e(p, { 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 })
+                /* @__PURE__ */ e("h4", { className: "rsp-font-semibold rsp-text-sm", children: c.label }),
+                /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-opacity-80 rsp-mt-1", children: c.description })
               ] })
             ] }),
             /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
               /* @__PURE__ */ r("span", { className: "rsp-text-xs rsp-font-medium rsp-px-2 rsp-py-1 rsp-rounded-full rsp-bg-white rsp-bg-opacity-70", children: [
-                t.current,
+                c.current,
                 "/",
-                t.limit
+                c.limit
               ] }),
-              !v && /* @__PURE__ */ e(de, { className: "rsp-w-4 rsp-h-4" })
+              !y && /* @__PURE__ */ e(Ae, { className: "rsp-w-4 rsp-h-4" })
             ] })
           ] })
         },
-        t.type
+        c.type
       );
     }) }),
     i && /* @__PURE__ */ r("div", { className: "rsp-bg-gradient-to-br rsp-from-gray-50 rsp-to-gray-100 rsp-border rsp-border-gray-200 rsp-rounded-xl rsp-p-6 rsp-shadow-sm", children: [
       /* @__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 ",
-          (u = o.find((t) => t.type === i)) == null ? void 0 : u.label
+          (v = g.find((c) => c.type === i)) == null ? void 0 : v.label
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: y,
+            onClick: N,
             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(ee, { className: "rsp-w-5 rsp-h-5" })
+            children: /* @__PURE__ */ e(re, { className: "rsp-w-5 rsp-h-5" })
           }
         )
       ] }),
@@ -3458,15 +3675,15 @@ function na({ template: a, setTemplate: n }) {
               "input",
               {
                 type: "text",
-                value: m.text,
-                onChange: (t) => C({ ...m, text: t.target.value.slice(0, 25) }),
+                value: l.text,
+                onChange: (c) => k({ ...l, text: c.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
               }
             ),
             /* @__PURE__ */ r("span", { className: "rsp-absolute rsp-right-3 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-text-xs rsp-text-gray-400", children: [
-              m.text.length,
+              l.text.length,
               "/25"
             ] })
           ] })
@@ -3480,8 +3697,8 @@ function na({ template: a, setTemplate: n }) {
                   "input",
                   {
                     type: "radio",
-                    checked: m.urlType === "static",
-                    onChange: () => C({ ...m, urlType: "static" }),
+                    checked: l.urlType === "static",
+                    onChange: () => k({ ...l, urlType: "static" }),
                     className: "rsp-mr-2 rsp-text-blue-600"
                   }
                 ),
@@ -3492,15 +3709,15 @@ function na({ template: a, setTemplate: n }) {
                   "input",
                   {
                     type: "radio",
-                    checked: m.urlType === "dynamic",
-                    onChange: () => C({ ...m, urlType: "dynamic" }),
+                    checked: l.urlType === "dynamic",
+                    onChange: () => k({ ...l, urlType: "dynamic" }),
                     className: "rsp-mr-2 rsp-text-blue-600"
                   }
                 ),
                 /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-text-gray-700", children: "Dynamic URL" })
               ] })
             ] }),
-            m.urlType === "dynamic" && /* @__PURE__ */ r("div", { className: "rsp-mt-3 rsp-p-3 rsp-bg-blue-50 rsp-rounded-lg rsp-border rsp-border-blue-200", children: [
+            l.urlType === "dynamic" && /* @__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("h4", { className: "rsp-text-sm rsp-font-medium rsp-text-blue-800 rsp-mb-2", children: "Dynamic URL Guidelines:" }),
               /* @__PURE__ */ r("ul", { className: "rsp-text-xs rsp-text-blue-700 rsp-space-y-1", children: [
                 /* @__PURE__ */ e("li", { children: "• Use placeholders like: https://example.com/order/{{1}}" }),
@@ -3515,73 +3732,73 @@ function na({ template: a, setTemplate: n }) {
               "input",
               {
                 type: i === "CALL" ? "tel" : i === "URL" ? "url" : "text",
-                value: m.value,
-                onChange: (t) => {
-                  const h = i === "URL" ? 2e3 : 20;
-                  C({ ...m, value: t.target.value.slice(0, h) });
+                value: l.value,
+                onChange: (c) => {
+                  const p = i === "URL" ? 2e3 : 20;
+                  k({ ...l, value: c.target.value.slice(0, p) });
                 },
                 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",
+                placeholder: i === "URL" ? l.urlType === "dynamic" ? "https://example.com/order/{{1}}?user={{2}}" : "https://example.com" : i === "CALL" ? "+1234567890" : "Flow ID",
                 maxLength: i === "URL" ? 2e3 : 20
               }
             ),
             /* @__PURE__ */ r("span", { className: "rsp-absolute rsp-right-3 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-text-xs rsp-text-gray-400", children: [
-              m.value.length,
+              l.value.length,
               "/",
               i === "URL" ? 2e3 : 20
             ] })
           ] }),
-          i === "URL" && m.urlType === "dynamic" && /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
+          i === "URL" && l.urlType === "dynamic" && /* @__PURE__ */ r("div", { className: "rsp-mt-3", children: [
             /* @__PURE__ */ e("div", { className: "rsp-flex rsp-items-center rsp-gap-2 rsp-mb-2", children: /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  if ((m.value.match(/\{\{(\d+)\}\}/g) || []).length >= 3) return;
-                  const v = N() + 1, V = m.value + `{{${v}}}`;
-                  C({ ...m, value: V }), p(!0);
+                  if ((l.value.match(/\{\{(\d+)\}\}/g) || []).length >= 3) return;
+                  const y = M() + 1, u = l.value + `{{${y}}}`;
+                  k({ ...l, value: u }), x(!0);
                 },
-                disabled: (m.value.match(/\{\{(\d+)\}\}/g) || []).length >= 3,
+                disabled: (l.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",
                 children: "+ Add Variable"
               }
             ) }),
-            (m.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." }),
-            d && /* @__PURE__ */ r("div", { className: "rsp-mt-4 rsp-p-4 rsp-bg-gray-50 rsp-rounded-lg rsp-border", children: [
+            (l.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." }),
+            t && /* @__PURE__ */ r("div", { className: "rsp-mt-4 rsp-p-4 rsp-bg-gray-50 rsp-rounded-lg rsp-border", children: [
               /* @__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((v) => v.replace(/[{}]/g, "")))].map((v) => {
-                  var V, R;
+                const c = l.value.match(/\{\{(\d+)\}\}/g) || [];
+                return [...new Set(c.map((y) => y.replace(/[{}]/g, "")))].map((y) => {
+                  var u, V;
                   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 {{",
-                      v,
+                      y,
                       "}}"
                     ] }),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "text",
-                        value: ((R = (V = a.sampleContent) == null ? void 0 : V.buttonVariables) == null ? void 0 : R[v]) || "",
-                        onChange: (I) => {
-                          var w, L, s;
-                          const x = {
+                        value: ((V = (u = a.sampleContent) == null ? void 0 : u.buttonVariables) == null ? void 0 : V[y]) || "",
+                        onChange: (B) => {
+                          var E, A, O;
+                          const d = {
                             ...a.sampleContent,
-                            headerVariables: ((w = a.sampleContent) == null ? void 0 : w.headerVariables) || {},
-                            bodyVariables: ((L = a.sampleContent) == null ? void 0 : L.bodyVariables) || {},
+                            headerVariables: ((E = a.sampleContent) == null ? void 0 : E.headerVariables) || {},
+                            bodyVariables: ((A = a.sampleContent) == null ? void 0 : A.bodyVariables) || {},
                             buttonVariables: {
-                              ...(s = a.sampleContent) == null ? void 0 : s.buttonVariables,
-                              [v]: I.target.value
+                              ...(O = a.sampleContent) == null ? void 0 : O.buttonVariables,
+                              [y]: B.target.value
                             }
                           };
-                          n({
+                          s({
                             ...a,
-                            sampleContent: x
+                            sampleContent: d
                           });
                         },
                         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., ${v === "1" ? "order123" : "user456"})`
+                        placeholder: `Sample value (e.g., ${y === "1" ? "order123" : "user456"})`
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -3589,17 +3806,17 @@ function na({ template: a, setTemplate: n }) {
                       {
                         type: "button",
                         onClick: () => {
-                          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({
+                          var A, O, R;
+                          const B = new RegExp(`\\{\\{${y}\\}\\}`, "g"), d = (l.value || "").replace(B, "");
+                          k({ ...l, value: d });
+                          const E = Object.fromEntries(Object.entries(((A = a.sampleContent) == null ? void 0 : A.buttonVariables) || {}).filter(([_]) => _ !== y));
+                          s({
                             ...a,
                             sampleContent: {
                               ...a.sampleContent,
-                              headerVariables: ((s = a.sampleContent) == null ? void 0 : s.headerVariables) || {},
-                              bodyVariables: ((b = a.sampleContent) == null ? void 0 : b.bodyVariables) || {},
-                              buttonVariables: w
+                              headerVariables: ((O = a.sampleContent) == null ? void 0 : O.headerVariables) || {},
+                              bodyVariables: ((R = a.sampleContent) == null ? void 0 : R.bodyVariables) || {},
+                              buttonVariables: E
                             }
                           });
                         },
@@ -3608,16 +3825,16 @@ function na({ template: a, setTemplate: n }) {
                         children: "×"
                       }
                     )
-                  ] }, `sample-${v}`);
+                  ] }, `sample-${y}`);
                 });
               })() }),
               /* @__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(
+                /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-600 rsp-font-mono rsp-break-all", children: l.value.replace(
                   /\{\{(\d+)\}\}/g,
-                  (t, h) => {
-                    var v, V;
-                    return ((V = (v = a.sampleContent) == null ? void 0 : v.buttonVariables) == null ? void 0 : V[h]) || `[${t}]`;
+                  (c, p) => {
+                    var y, u;
+                    return ((u = (y = a.sampleContent) == null ? void 0 : y.buttonVariables) == null ? void 0 : u[p]) || `[${c}]`;
                   }
                 ) })
               ] }),
@@ -3625,7 +3842,7 @@ function na({ template: a, setTemplate: n }) {
                 "button",
                 {
                   type: "button",
-                  onClick: () => p(!1),
+                  onClick: () => x(!1),
                   className: "rsp-px-3 rsp-py-1 rsp-text-xs rsp-text-gray-500 hover:rsp-text-gray-700",
                   children: "Close"
                 }
@@ -3637,8 +3854,8 @@ function na({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => j(i),
-              disabled: !m.text.trim() || i !== "QUICK_REPLY" && !m.value.trim(),
+              onClick: () => U(i),
+              disabled: !l.text.trim() || i !== "QUICK_REPLY" && !l.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 +3863,7 @@ function na({ template: a, setTemplate: n }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: y,
+              onClick: N,
               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"
             }
@@ -3656,19 +3873,19 @@ function na({ 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 h = o.find((V) => V.type === t.type), v = (h == null ? void 0 : h.icon) || le;
+      /* @__PURE__ */ e("div", { className: "rsp-space-y-3", children: a.buttons.map((c) => {
+        const p = g.find((u) => u.type === c.type), y = (p == null ? void 0 : p.icon) || me;
         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(v, { 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(y, { 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("span", { className: "rsp-text-xs rsp-font-medium rsp-text-gray-500 rsp-uppercase rsp-tracking-wider", children: c.type.replace("_", " ") }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => U(t.id),
+                  onClick: () => f(c.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(ee, { className: "rsp-w-4 rsp-h-4" })
+                  children: /* @__PURE__ */ e(re, { className: "rsp-w-4 rsp-h-4" })
                 }
               )
             ] }),
@@ -3680,103 +3897,103 @@ function na({ template: a, setTemplate: n }) {
                     "input",
                     {
                       type: "text",
-                      value: t.text,
-                      onChange: (V) => k(t.id, "text", V.target.value),
+                      value: c.text,
+                      onChange: (u) => b(c.id, "text", u.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"
                     }
                   ),
                   /* @__PURE__ */ r("span", { className: "rsp-absolute rsp-right-2 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-text-xs rsp-text-gray-400", children: [
-                    t.text.length,
+                    c.text.length,
                     "/25"
                   ] })
                 ] })
               ] }),
-              t.type !== "QUICK_REPLY" && /* @__PURE__ */ r("div", { children: [
-                /* @__PURE__ */ e("label", { className: "rsp-block rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-1", children: t.type === "URL" ? "Website URL" : t.type === "CALL" ? "Phone Number" : "Flow ID" }),
+              c.type !== "QUICK_REPLY" && /* @__PURE__ */ r("div", { children: [
+                /* @__PURE__ */ e("label", { className: "rsp-block rsp-text-xs rsp-font-medium rsp-text-gray-600 rsp-mb-1", children: c.type === "URL" ? "Website URL" : c.type === "CALL" ? "Phone Number" : "Flow ID" }),
                 /* @__PURE__ */ r("div", { className: "rsp-relative", children: [
                   /* @__PURE__ */ e(
                     "input",
                     {
-                      type: t.type === "CALL" ? "tel" : t.type === "URL" ? "url" : "text",
-                      value: t.value || "",
-                      onChange: (V) => k(t.id, "value", V.target.value),
-                      maxLength: t.type === "URL" ? 2e3 : 20,
+                      type: c.type === "CALL" ? "tel" : c.type === "URL" ? "url" : "text",
+                      value: c.value || "",
+                      onChange: (u) => b(c.id, "value", u.target.value),
+                      maxLength: c.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"
                     }
                   ),
                   /* @__PURE__ */ r("span", { className: "rsp-absolute rsp-right-2 rsp-top-1/2 rsp-transform -rsp-translate-y-1/2 rsp-text-xs rsp-text-gray-400", children: [
-                    (t.value || "").length,
+                    (c.value || "").length,
                     "/",
-                    t.type === "URL" ? 2e3 : 20
+                    c.type === "URL" ? 2e3 : 20
                   ] })
                 ] })
               ] })
             ] })
           ] })
-        ] }) }, t.id);
+        ] }) }, c.id);
       }) })
     ] }),
     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(le, { 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(me, { 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 la = async (a) => {
+const ba = async (a) => {
   try {
     if (!a)
       throw new Error("No file provided");
-    const n = 100 * 1024 * 1024;
-    if (a.size > n)
-      throw new Error(`File size too large. Maximum allowed size is ${n / (1024 * 1024)}MB`);
+    const s = 100 * 1024 * 1024;
+    if (a.size > s)
+      throw new Error(`File size too large. Maximum allowed size is ${s / (1024 * 1024)}MB`);
     const i = new FormData();
     i.append("file", a), console.log("Uploading file:", a.name, "Size:", a.size, "Type:", a.type);
-    const l = await fetch("https://wiz.resul.io/Communication/UploadDocuments", {
+    const n = await fetch("https://wiz.resul.io/Communication/UploadDocuments", {
       method: "POST",
       body: i
     });
-    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 p;
+    console.log("Upload response status:", n.status), console.log("Upload response headers:", Object.fromEntries(n.headers.entries()));
+    const t = await n.text();
+    console.log("Raw upload response:", t);
+    let x;
     try {
-      p = JSON.parse(d);
-    } catch (m) {
-      throw console.error("Failed to parse upload response:", m), new Error("Invalid response from upload server");
+      x = JSON.parse(t);
+    } catch (l) {
+      throw console.error("Failed to parse upload response:", l), new Error("Invalid response from upload server");
     }
-    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)
+    if (console.log("Parsed upload response:", x), console.log("Upload status:", x.status), console.log("Upload message:", x.message), console.log("Upload data:", x.data), !x.status)
+      throw new Error(x.message || "Upload failed");
+    if (x.data && Array.isArray(x.data) && x.data.length > 0) {
+      const l = x.data[0];
+      if (l.url)
         return console.log("File uploaded successfully:", {
-          url: m.url,
-          filename: m.filename,
-          originalName: m.originalName,
-          size: m.size
-        }), m.url;
+          url: l.url,
+          filename: l.filename,
+          originalName: l.originalName,
+          size: l.size
+        }), l.url;
       throw new Error("No file URL in upload response data");
     } else
       throw new Error("No files in upload response data");
-  } catch (n) {
-    throw console.error("File upload error:", n), n instanceof Error ? n : new Error("Unknown error occurred during file upload");
+  } catch (s) {
+    throw console.error("File upload error:", s), s instanceof Error ? s : new Error("Unknown error occurred during file upload");
   }
-}, ia = (a, n) => {
-  const l = a.name.toLowerCase().split(".").pop();
-  switch (n) {
+}, ga = (a, s) => {
+  const n = a.name.toLowerCase().split(".").pop();
+  switch (s) {
     case "IMAGE":
-      return ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg"].includes(l || "");
+      return ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg"].includes(n || "");
     case "VIDEO":
-      return ["mp4", "mov", "avi", "3gpp"].includes(l || "");
+      return ["mp4", "mov", "avi", "3gpp"].includes(n || "");
     case "DOCUMENT":
-      return ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt"].includes(l || "");
+      return ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt"].includes(n || "");
     default:
       return !1;
   }
-}, ta = (a) => {
+}, ya = (a) => {
   switch (a) {
     case "IMAGE":
       return 5 * 1024 * 1024;
@@ -3788,138 +4005,161 @@ const la = async (a) => {
       return 10 * 1024 * 1024;
   }
 };
-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 = {
+function wa({ template: a, setTemplate: s, onFileUpload: i }) {
+  var E, A, O, R, _;
+  const [n, t] = J.useState({}), [, x] = J.useState({}), [l, k] = J.useState({ open: !1, message: "" }), [w, o] = J.useState(!1), [N, U] = J.useState(null), f = J.useRef({}), b = () => {
+    var C;
+    const m = {
       id: Math.random().toString(36).substr(2, 9),
       headerType: "MEDIA",
-      mediaType: ((b = a.carousel) == null ? void 0 : b.type) === "VIDEO" ? "VIDEO" : "IMAGE",
+      mediaType: ((C = a.carousel) == null ? void 0 : C.type) === "VIDEO" ? "VIDEO" : "IMAGE",
       body: "",
       buttons: []
     };
-    n((E) => {
-      var T, c;
+    s((S) => {
+      var j, I;
       return {
-        ...E,
+        ...S,
         carousel: {
-          type: ((T = a.carousel) == null ? void 0 : T.type) || "IMAGE",
-          cards: [...((c = a.carousel) == null ? void 0 : c.cards) || [], s]
+          type: ((j = a.carousel) == null ? void 0 : j.type) || "IMAGE",
+          cards: [...((I = a.carousel) == null ? void 0 : I.cards) || [], m]
         }
       };
     });
-  }, U = (s) => {
-    n((b) => ({
-      ...b,
+  }, M = (m) => {
+    s((C) => ({
+      ...C,
       carousel: {
-        ...b.carousel,
-        cards: b.carousel.cards.filter((E) => E.id !== s)
+        ...C.carousel,
+        cards: C.carousel.cards.filter((S) => S.id !== m)
       }
     }));
-  }, k = (s, b, E) => {
-    n((T) => ({
-      ...T,
+  }, g = (m, C, S) => {
+    s((j) => ({
+      ...j,
       carousel: {
-        ...T.carousel,
-        cards: T.carousel.cards.map(
-          (c) => c.id === s ? { ...c, [b]: E } : c
+        ...j.carousel,
+        cards: j.carousel.cards.map(
+          (I) => I.id === m ? { ...I, [C]: S } : I
         )
       }
     }));
-  }, 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();
+  }, v = (m) => {
+    s((C) => {
+      const j = ((C.carousel || { type: m, cards: [] }).cards || []).map((I) => ({
+        ...I,
+        mediaType: m,
+        mediaUrl: ""
+      }));
+      return {
+        ...C,
+        carousel: {
+          type: m,
+          cards: j
+        }
+      };
+    });
+  }, c = (m, C) => {
+    var q;
+    const S = (q = a.carousel) == null ? void 0 : q.cards.find((X) => X.id === m);
+    if (!S) return;
+    const h = `{{${y(m) + 1}}}`, z = S[C] + h;
+    g(m, C, z);
+  }, p = (m) => {
+    var z;
+    if (!N) return;
+    const C = f.current[N], S = (z = a.carousel) == null ? void 0 : z.cards.find((q) => q.id === N);
+    if (!S) return;
+    const j = C && typeof C.selectionStart == "number" ? C.selectionStart : S.body.length, I = S.body.substring(0, j), h = S.body.substring(j), L = I + m + h;
+    g(N, "body", L), setTimeout(() => {
+      const q = f.current[N];
+      if (q) {
+        const X = j + m.length;
+        q.setSelectionRange(X, X), q.focus();
       }
-    }, 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;
+    }, 0), o(!1);
+  }, y = (m) => {
+    var h;
+    const C = (h = a.carousel) == null ? void 0 : h.cards.find((L) => L.id === m);
+    if (!C) return 0;
+    const j = (C.body || "").match(/\{\{(\d+)\}\}/g);
+    if (!j) return 0;
+    const I = j.map((L) => {
+      const z = L.match(/{{(\d+)}}/);
+      return z ? parseInt(z[1], 10) : 0;
     });
-    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 = {
+    return I.length > 0 ? Math.max(...I) : 0;
+  }, u = (m, C) => {
+    var I;
+    const S = (I = a.carousel) == null ? void 0 : I.cards.find((h) => h.id === m);
+    if (!S || S.buttons.length >= 2) return;
+    const j = {
       id: Math.random().toString(36).substr(2, 9),
-      type: b,
+      type: C,
       text: "",
       value: "",
       urlType: "static"
     };
-    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(m, "buttons", [...S.buttons, j]);
+  }, V = (m, C, S, j) => {
+    var L;
+    const I = (L = a.carousel) == null ? void 0 : L.cards.find((z) => z.id === m);
+    if (!I) return;
+    const h = I.buttons.map(
+      (z) => z.id === C ? { ...z, [S]: j } : z
     );
-    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;
+    g(m, "buttons", h);
+  }, B = (m, C) => {
+    var I;
+    const S = (I = a.carousel) == null ? void 0 : I.cards.find((h) => h.id === m);
+    if (!S) return;
+    const j = S.buttons.filter((h) => h.id !== C);
+    g(m, "buttons", j);
+  }, d = async (m, C) => {
+    var S;
     try {
-      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.`);
+      t((L) => ({ ...L, [m]: !0 })), x((L) => ({ ...L, [m]: !1 }));
+      const j = ((S = a.carousel) == null ? void 0 : S.type) === "VIDEO" ? "VIDEO" : "IMAGE";
+      if (!ga(C, j))
+        throw new Error(`Invalid file type. Expected ${j.toLowerCase()} file.`);
+      const I = ya(j);
+      if (C.size > I) {
+        const L = I / 1048576;
+        throw new Error(`File size too large. Maximum allowed size is ${L}MB.`);
       }
-      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");
+      const h = await i(C);
+      g(m, "mediaUrl", h);
+    } catch (j) {
+      console.error("File upload failed:", j), k({ open: !0, message: j instanceof Error ? j.message : "File upload failed" });
     } finally {
-      d((T) => ({ ...T, [s]: !1 }));
+      t((j) => ({ ...j, [m]: !1 }));
     }
   };
   return /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
+    l.open && /* @__PURE__ */ r("div", { className: "rsp-fixed rsp-inset-0 rsp-z-50 rsp-flex rsp-items-center rsp-justify-center", children: [
+      /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-0 rsp-bg-black rsp-bg-opacity-40", onClick: () => k({ open: !1, message: "" }) }),
+      /* @__PURE__ */ r("div", { className: "rsp-relative rsp-z-10 rsp-bg-white rsp-rounded-lg rsp-shadow-lg rsp-w-full rsp-max-w-md rsp-p-5", children: [
+        /* @__PURE__ */ e("div", { className: "rsp-mb-3 rsp-text-lg rsp-font-semibold rsp-text-gray-900", children: "Upload Error" }),
+        /* @__PURE__ */ e("div", { className: "rsp-text-sm rsp-text-gray-700 rsp-break-words rsp-whitespace-pre-wrap", children: l.message }),
+        /* @__PURE__ */ e("div", { className: "rsp-flex rsp-justify-end rsp-mt-4", children: /* @__PURE__ */ e("button", { onClick: () => k({ open: !1, message: "" }), className: "rsp-px-4 rsp-py-2 rsp-text-sm rsp-font-medium rsp-text-white rsp-bg-blue-600 rsp-rounded-md hover:rsp-bg-blue-700", children: "OK" }) })
+      ] })
+    ] }),
     /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between", children: [
       /* @__PURE__ */ e("h3", { className: "rsp-text-lg rsp-font-semibold rsp-text-gray-900", children: "Carousel Cards" }),
       /* @__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: ",
-          ((R = a.carousel) == null ? void 0 : R.cards.length) || 0,
+          ((E = a.carousel) == null ? void 0 : E.cards.length) || 0,
           "/10"
         ] }),
         /* @__PURE__ */ r(
           "button",
           {
-            onClick: j,
-            disabled: (((I = a.carousel) == null ? void 0 : I.cards.length) || 0) >= 10,
+            onClick: b,
+            disabled: (((A = a.carousel) == null ? void 0 : A.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(de, { className: "rsp-w-4 rsp-h-4 rsp-inline rsp-mr-2" }),
+              /* @__PURE__ */ e(Ae, { className: "rsp-w-4 rsp-h-4 rsp-inline rsp-mr-2" }),
               "Add Card"
             ]
           }
@@ -3936,17 +4176,8 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
               type: "radio",
               name: "carouselType",
               value: "IMAGE",
-              checked: ((x = a.carousel) == null ? void 0 : x.type) === "IMAGE",
-              onChange: (s) => n((b) => {
-                var E;
-                return {
-                  ...b,
-                  carousel: {
-                    type: s.target.value,
-                    cards: ((E = b.carousel) == null ? void 0 : E.cards) || []
-                  }
-                };
-              }),
+              checked: ((O = a.carousel) == null ? void 0 : O.type) === "IMAGE",
+              onChange: (m) => v(m.target.value),
               className: "rsp-mr-2"
             }
           ),
@@ -3959,17 +4190,8 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
               type: "radio",
               name: "carouselType",
               value: "VIDEO",
-              checked: ((w = a.carousel) == null ? void 0 : w.type) === "VIDEO",
-              onChange: (s) => n((b) => {
-                var E;
-                return {
-                  ...b,
-                  carousel: {
-                    type: s.target.value,
-                    cards: ((E = b.carousel) == null ? void 0 : E.cards) || []
-                  }
-                };
-              }),
+              checked: ((R = a.carousel) == null ? void 0 : R.type) === "VIDEO",
+              onChange: (m) => v(m.target.value),
               className: "rsp-mr-2"
             }
           ),
@@ -3977,98 +4199,98 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
         ] })
       ] })
     ] }),
-    /* @__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;
+    /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: (_ = a.carousel) == null ? void 0 : _.cards.map((m, C) => {
+      var S, j, I, h, L, z, q, 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: b + 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: C + 1 }),
             /* @__PURE__ */ r("h4", { className: "rsp-text-base rsp-font-semibold rsp-text-gray-800", children: [
               "Card ",
-              b + 1
+              C + 1
             ] })
           ] }),
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => U(s.id),
+              onClick: () => M(m.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(ee, { className: "rsp-w-4 rsp-h-4" })
+              children: /* @__PURE__ */ e(re, { 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: ((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",
+              /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: ((S = a.carousel) == null ? void 0 : S.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" }) }),
+              ((j = a.carousel) == null ? void 0 : j.type) === "VIDEO" ? "Video" : "Image",
               " Upload"
             ] }),
             /* @__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(
+              m.mediaUrl ? /* @__PURE__ */ r("div", { className: "rsp-relative rsp-group", children: [
+                ((I = a.carousel) == null ? void 0 : I.type) === "IMAGE" ? /* @__PURE__ */ e(
                   "img",
                   {
-                    src: s.mediaUrl,
-                    alt: `Card ${b + 1}`,
+                    src: m.mediaUrl,
+                    alt: `Card ${C + 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 }))
+                    onLoad: () => x((T) => ({ ...T, [m.id]: !0 })),
+                    onError: () => x((T) => ({ ...T, [m.id]: !1 }))
                   }
                 ) : /* @__PURE__ */ e(
                   "video",
                   {
-                    src: s.mediaUrl,
+                    src: m.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 }))
+                    onLoadedData: () => x((T) => ({ ...T, [m.id]: !0 })),
+                    onError: () => x((T) => ({ ...T, [m.id]: !1 }))
                   }
                 ),
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => k(s.id, "mediaUrl", ""),
+                    onClick: () => g(m.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" })
+                    children: /* @__PURE__ */ e(re, { 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__ */ 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: ((h = a.carousel) == null ? void 0 : h.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("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: ((L = a.carousel) == null ? void 0 : L.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);
+                    accept: ((z = a.carousel) == null ? void 0 : z.type) === "VIDEO" ? "video/*" : "image/*",
+                    onChange: (T) => {
+                      var D;
+                      const Y = (D = T.target.files) == null ? void 0 : D[0];
+                      Y && !n[m.id] && d(m.id, Y);
                     },
                     className: "rsp-hidden",
-                    id: `file-upload-${s.id}`,
-                    disabled: !!l[s.id]
+                    id: `file-upload-${m.id}`,
+                    disabled: !!n[m.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],
+                    htmlFor: `file-upload-${m.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 ${n[m.id] ? "rsp-opacity-50 rsp-cursor-not-allowed" : "hover:rsp-bg-blue-50 rsp-cursor-pointer"}`,
+                    "aria-disabled": !!n[m.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"
+                      ((q = a.carousel) == null ? void 0 : q.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: [
+              n[m.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" })
@@ -4087,11 +4309,11 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
               /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
                 "textarea",
                 {
-                  ref: (S) => {
-                    y.current[s.id] = S;
+                  ref: (T) => {
+                    f.current[m.id] = T;
                   },
-                  value: s.body,
-                  onChange: (S) => k(s.id, "body", S.target.value),
+                  value: m.body,
+                  onChange: (T) => g(m.id, "body", T.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",
@@ -4103,7 +4325,7 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: () => N(s.id, "body"),
+                      onClick: () => c(m.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" }) })
@@ -4113,29 +4335,29 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                     "button",
                     {
                       onClick: () => {
-                        f(s.id), C(!0);
+                        U(m.id), o(!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(xe, { className: "rsp-w-4 rsp-h-4" })
+                      children: /* @__PURE__ */ e(he, { className: "rsp-w-4 rsp-h-4" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ r("span", { className: `rsp-text-xs rsp-font-medium ${s.body.length > 140 ? "rsp-text-orange-500" : "rsp-text-gray-500"}`, children: [
-                  s.body.length,
+                /* @__PURE__ */ r("span", { className: `rsp-text-xs rsp-font-medium ${m.body.length > 140 ? "rsp-text-orange-500" : "rsp-text-gray-500"}`, children: [
+                  m.body.length,
                   "/160"
                 ] })
               ] }),
               (() => {
-                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: [
+                const T = m.body.match(/\{\{(\d+)\}\}/g) || [], Y = [...new Set(T.map((D) => D.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: [
                   /* @__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: ae.map((z) => {
-                    var Z, _;
+                  /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-1 rsp-gap-2", children: Y.map((D) => {
+                    var ie, G;
                     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: [
                         "{{",
-                        z,
+                        D,
                         "}}",
                         ":"
                       ] }),
@@ -4143,24 +4365,24 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                         "input",
                         {
                           type: "text",
-                          value: ((_ = (Z = s.sampleContent) == null ? void 0 : Z.bodyVariables) == null ? void 0 : _[z]) || "",
-                          onChange: (Q) => {
-                            const W = Q.target.value;
-                            n((F) => ({
-                              ...F,
+                          value: ((G = (ie = m.sampleContent) == null ? void 0 : ie.bodyVariables) == null ? void 0 : G[D]) || "",
+                          onChange: (se) => {
+                            const ae = se.target.value;
+                            s((K) => ({
+                              ...K,
                               carousel: {
-                                ...F.carousel,
-                                cards: F.carousel.cards.map((P) => {
-                                  var D, q, Y;
-                                  return P.id !== s.id ? P : {
-                                    ...P,
+                                ...K.carousel,
+                                cards: K.carousel.cards.map((F) => {
+                                  var H, W, Z;
+                                  return F.id !== m.id ? F : {
+                                    ...F,
                                     sampleContent: {
-                                      headerVariables: ((D = P.sampleContent) == null ? void 0 : D.headerVariables) || {},
+                                      headerVariables: ((H = F.sampleContent) == null ? void 0 : H.headerVariables) || {},
                                       bodyVariables: {
-                                        ...((q = P.sampleContent) == null ? void 0 : q.bodyVariables) || {},
-                                        [z]: W
+                                        ...((W = F.sampleContent) == null ? void 0 : W.bodyVariables) || {},
+                                        [D]: ae
                                       },
-                                      buttonVariables: ((Y = P.sampleContent) == null ? void 0 : Y.buttonVariables) || {}
+                                      buttonVariables: ((Z = F.sampleContent) == null ? void 0 : Z.buttonVariables) || {}
                                     }
                                   };
                                 })
@@ -4176,22 +4398,22 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                         {
                           type: "button",
                           onClick: () => {
-                            const Q = new RegExp(`\\{\\{${z}\\}\\}`, "g"), W = (s.body || "").replace(Q, "");
-                            n((F) => ({
-                              ...F,
+                            const se = new RegExp(`\\{\\{${D}\\}\\}`, "g"), ae = (m.body || "").replace(se, "");
+                            s((K) => ({
+                              ...K,
                               carousel: {
-                                ...F.carousel,
-                                cards: F.carousel.cards.map((P) => {
-                                  var D, q, Y;
-                                  if (P.id !== s.id) return P;
-                                  const G = Object.fromEntries(Object.entries(((D = P.sampleContent) == null ? void 0 : D.bodyVariables) || {}).filter(([re]) => re !== z));
+                                ...K.carousel,
+                                cards: K.carousel.cards.map((F) => {
+                                  var H, W, Z;
+                                  if (F.id !== m.id) return F;
+                                  const Q = Object.fromEntries(Object.entries(((H = F.sampleContent) == null ? void 0 : H.bodyVariables) || {}).filter(([ne]) => ne !== D));
                                   return {
-                                    ...P,
-                                    body: W,
+                                    ...F,
+                                    body: ae,
                                     sampleContent: {
-                                      headerVariables: ((q = P.sampleContent) == null ? void 0 : q.headerVariables) || {},
-                                      bodyVariables: G,
-                                      buttonVariables: ((Y = P.sampleContent) == null ? void 0 : Y.buttonVariables) || {}
+                                      headerVariables: ((W = F.sampleContent) == null ? void 0 : W.headerVariables) || {},
+                                      bodyVariables: Q,
+                                      buttonVariables: ((Z = F.sampleContent) == null ? void 0 : Z.buttonVariables) || {}
                                     }
                                   };
                                 })
@@ -4203,18 +4425,18 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                           children: "×"
                         }
                       )
-                    ] }, `card-${s.id}-sample-${z}`);
+                    ] }, `card-${m.id}-sample-${D}`);
                   }) })
                 ] });
               })()
             ] }),
-            s.buttons.length < 2 && /* @__PURE__ */ r("div", { children: [
+            m.buttons.length < 2 && /* @__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: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" }) }),
                 "Add Action Button",
                 /* @__PURE__ */ r("span", { className: "rsp-text-xs rsp-text-gray-500 rsp-font-normal", children: [
                   "(",
-                  s.buttons.length,
+                  m.buttons.length,
                   "/2)"
                 ] })
               ] }),
@@ -4222,7 +4444,7 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: () => t(s.id, "QUICK_REPLY"),
+                    onClick: () => u(m.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" }) }),
@@ -4233,7 +4455,7 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: () => t(s.id, "URL"),
+                    onClick: () => u(m.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" }) }),
@@ -4244,7 +4466,7 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: () => t(s.id, "PHONE_NUMBER"),
+                    onClick: () => u(m.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" }) }),
@@ -4254,24 +4476,24 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                 )
               ] })
             ] }),
-            s.buttons.length > 0 && /* @__PURE__ */ r("div", { className: "rsp-space-y-3", children: [
+            m.buttons.length > 0 && /* @__PURE__ */ r("div", { className: "rsp-space-y-3", children: [
               /* @__PURE__ */ r("label", { className: "rsp-text-sm rsp-font-semibold rsp-text-gray-800 rsp-flex rsp-items-center rsp-gap-2", children: [
                 /* @__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((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: [
+              m.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: [
                 /* @__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: 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("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(
                     "button",
                     {
-                      onClick: () => v(s.id, S.id),
+                      onClick: () => B(m.id, T.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(ee, { className: "rsp-w-4 rsp-h-4" })
+                      children: /* @__PURE__ */ e(re, { className: "rsp-w-4 rsp-h-4" })
                     }
                   )
                 ] }),
@@ -4282,15 +4504,15 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                       "input",
                       {
                         type: "text",
-                        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,
+                        value: T.text,
+                        onChange: (D) => V(m.id, T.id, "text", D.target.value),
+                        placeholder: `Enter Button Text (Max ${T.type === "QUICK_REPLY" ? "25" : "20"} characters)`,
+                        maxLength: T.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"
                       }
                     )
                   ] }),
-                  S.type === "URL" && /* @__PURE__ */ r("div", { className: "rsp-space-y-3", children: [
+                  T.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: [
@@ -4299,8 +4521,8 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                             "input",
                             {
                               type: "radio",
-                              checked: S.urlType !== "dynamic",
-                              onChange: () => h(s.id, S.id, "urlType", "static"),
+                              checked: T.urlType !== "dynamic",
+                              onChange: () => V(m.id, T.id, "urlType", "static"),
                               className: "rsp-mr-2 rsp-text-blue-600"
                             }
                           ),
@@ -4311,8 +4533,8 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                             "input",
                             {
                               type: "radio",
-                              checked: S.urlType === "dynamic",
-                              onChange: () => h(s.id, S.id, "urlType", "dynamic"),
+                              checked: T.urlType === "dynamic",
+                              onChange: () => V(m.id, T.id, "urlType", "dynamic"),
                               className: "rsp-mr-2 rsp-text-blue-600"
                             }
                           ),
@@ -4326,14 +4548,14 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                         "input",
                         {
                           type: "text",
-                          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",
+                          value: T.value || "",
+                          onChange: (D) => V(m.id, T.id, "value", D.target.value),
+                          placeholder: T.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"
                         }
                       )
                     ] }),
-                    S.urlType === "dynamic" && /* @__PURE__ */ r("div", { className: "rsp-space-y-2", children: [
+                    T.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 ",
@@ -4352,71 +4574,54 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                           {
                             type: "button",
                             onClick: () => {
-                              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);
+                              if (((T.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3) return;
+                              const G = ((T.value || "").match(/\{\{(\d+)\}\}/g) || []).map((F) => {
+                                const Q = F.match(/{{(\d+)}}/);
+                                return Q ? parseInt(Q[1], 10) : 0;
+                              }), ae = (G.length > 0 ? Math.max(...G) : 0) + 1, K = (T.value || "") + `{{${ae}}}`;
+                              V(m.id, T.id, "value", K);
                             },
-                            disabled: ((S.value || "").match(/\{\{(\d+)\}\}/g) || []).length >= 3,
+                            disabled: ((T.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"
                           }
                         ),
-                        ((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" })
+                        ((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" })
                       ] }),
-                      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            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 = (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: [
+                        const D = (T.value || "").match(/\{\{(\d+)\}\}/g) || [], ie = [...new Set(D.map((G) => G.replace(/[{}]/g, "")))];
+                        return ie.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: Z.map((_) => {
-                            var Q, W;
+                          /* @__PURE__ */ e("div", { className: "rsp-space-y-2", children: ie.map((G) => {
+                            var se, ae;
                             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 ",
                                 "{{",
-                                _,
+                                G,
                                 "}}"
                               ] }),
                               /* @__PURE__ */ e(
                                 "input",
                                 {
                                   type: "text",
-                                  value: ((W = (Q = s.sampleContent) == null ? void 0 : Q.buttonVariables) == null ? void 0 : W[_]) || "",
-                                  onChange: (F) => {
-                                    const P = F.target.value;
-                                    n((G) => ({
-                                      ...G,
+                                  value: ((ae = (se = m.sampleContent) == null ? void 0 : se.buttonVariables) == null ? void 0 : ae[G]) || "",
+                                  onChange: (K) => {
+                                    const F = K.target.value;
+                                    s((Q) => ({
+                                      ...Q,
                                       carousel: {
-                                        ...G.carousel,
-                                        cards: G.carousel.cards.map((D) => {
-                                          var q, Y, re;
-                                          return D.id !== s.id ? D : {
-                                            ...D,
+                                        ...Q.carousel,
+                                        cards: Q.carousel.cards.map((H) => {
+                                          var W, Z, ne;
+                                          return H.id !== m.id ? H : {
+                                            ...H,
                                             sampleContent: {
-                                              headerVariables: ((q = D.sampleContent) == null ? void 0 : q.headerVariables) || {},
-                                              bodyVariables: ((Y = D.sampleContent) == null ? void 0 : Y.bodyVariables) || {},
+                                              headerVariables: ((W = H.sampleContent) == null ? void 0 : W.headerVariables) || {},
+                                              bodyVariables: ((Z = H.sampleContent) == null ? void 0 : Z.bodyVariables) || {},
                                               buttonVariables: {
-                                                ...((re = D.sampleContent) == null ? void 0 : re.buttonVariables) || {},
-                                                [_]: P
+                                                ...((ne = H.sampleContent) == null ? void 0 : ne.buttonVariables) || {},
+                                                [G]: F
                                               }
                                             }
                                           };
@@ -4425,7 +4630,7 @@ function ma({ 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., ${_ === "1" ? "order123" : "user456"})`
+                                  placeholder: `Sample value (e.g., ${G === "1" ? "order123" : "user456"})`
                                 }
                               ),
                               /* @__PURE__ */ e(
@@ -4433,57 +4638,57 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
                                 {
                                   type: "button",
                                   onClick: () => {
-                                    const F = S.value || "", P = new RegExp(`\\{\\{${_}\\}\\}`, "g"), G = F.replace(P, "");
-                                    h(s.id, S.id, "value", G), n((D) => ({
-                                      ...D,
+                                    const K = T.value || "", F = new RegExp(`\\{\\{${G}\\}\\}`, "g"), Q = K.replace(F, "");
+                                    V(m.id, T.id, "value", Q), s((H) => ({
+                                      ...H,
                                       carousel: {
-                                        ...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 !== _));
+                                        ...H.carousel,
+                                        cards: H.carousel.cards.map((W) => {
+                                          var ne, ye, we;
+                                          if (W.id !== m.id) return W;
+                                          const Z = Object.fromEntries(Object.entries(((ne = W.sampleContent) == null ? void 0 : ne.buttonVariables) || {}).filter(([Be]) => Be !== G));
                                           return {
-                                            ...q,
+                                            ...W,
                                             sampleContent: {
-                                              headerVariables: ((he = q.sampleContent) == null ? void 0 : he.headerVariables) || {},
-                                              bodyVariables: ((ue = q.sampleContent) == null ? void 0 : ue.bodyVariables) || {},
-                                              buttonVariables: Y
+                                              headerVariables: ((ye = W.sampleContent) == null ? void 0 : ye.headerVariables) || {},
+                                              bodyVariables: ((we = W.sampleContent) == null ? void 0 : we.bodyVariables) || {},
+                                              buttonVariables: Z
                                             }
                                           };
                                         })
                                       }
                                     }));
                                   },
-                                  className: "rsp-px-2 rsp-py-1 rsp-text-xs rsp-text-red-600 hover:rsp-bg-red-50 rsp-rounded",
+                                  className: "rsp-px-2 rsp-py-1 rsp-text- rsp-text-red-600 hover:rsp-bg-red-50 rsp-rounded",
                                   title: "Remove this variable",
                                   children: "×"
                                 }
                               )
-                            ] }, `button-${S.id}-sample-${_}`);
+                            ] }, `button-${T.id}-sample-${G}`);
                           }) })
                         ] });
                       })()
                     ] })
                   ] }),
-                  S.type === "PHONE_NUMBER" && /* @__PURE__ */ r("div", { children: [
+                  T.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: S.value || "",
-                        onChange: (z) => h(s.id, S.id, "value", z.target.value),
+                        value: T.value || "",
+                        onChange: (D) => V(m.id, T.id, "value", D.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"
                       }
                     )
                   ] })
                 ] })
-              ] }, S.id))
+              ] }, T.id))
             ] })
           ] })
         ] }) })
-      ] }, s.id);
+      ] }, m.id);
     }) }),
     /* @__PURE__ */ e("div", { className: "rsp-bg-blue-50 rsp-border-l-4 rsp-border-blue-500 rsp-p-4 rsp-rounded-r-md", children: /* @__PURE__ */ r("div", { className: "rsp-flex", children: [
       /* @__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" }) }) }),
@@ -4500,52 +4705,52 @@ function ma({ template: a, setTemplate: n, onFileUpload: i }) {
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      fe,
+      ge,
       {
-        isOpen: m,
-        onClose: () => C(!1),
-        onSelect: o
+        isOpen: w,
+        onClose: () => o(!1),
+        onSelect: p
       }
     )
   ] });
 }
-const ve = async (a) => {
+const Me = async (a) => {
   try {
     console.log(`Starting file upload: ${a.name}`);
-    const n = await la(a);
-    return console.log(`File uploaded successfully: ${n}`), n;
-  } catch (n) {
-    throw console.error("Upload failed in parent:", n), n;
+    const s = await ba(a);
+    return console.log(`File uploaded successfully: ${s}`), s;
+  } catch (s) {
+    throw console.error("Upload failed in parent:", s), s;
   }
-}, ca = (a) => {
+}, va = (a) => {
   const i = (a.body || "").match(/\{\{(\d+)\}\}/g);
   if (!i) return 0;
-  const l = i.map((d) => {
-    const p = d.match(/{{(\d+)}}/);
-    return p ? parseInt(p[1], 10) : 0;
+  const n = i.map((t) => {
+    const x = t.match(/{{(\d+)}}/);
+    return x ? parseInt(x[1], 10) : 0;
   });
-  return l.length > 0 ? Math.max(...l) : 0;
+  return n.length > 0 ? Math.max(...n) : 0;
 };
-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();
+function ka({ template: a, setTemplate: s }) {
+  const [i, n] = J.useState(!1), t = J.useRef(null), x = () => {
+    n(!0), setTimeout(() => {
+      t.current && t.current.focus();
     }, 0);
-  }, 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 N = y + C.length;
-        d.current.setSelectionRange(N, N), d.current.focus();
+  }, l = (k) => {
+    const w = t.current, o = a.body, N = w && typeof w.selectionStart == "number" ? w.selectionStart : o.length, U = o.substring(0, N), f = o.substring(N), b = U + k + f;
+    s({ ...a, body: b }), setTimeout(() => {
+      if (t.current) {
+        const M = N + k.length;
+        t.current.setSelectionRange(M, M), t.current.focus();
       }
-    }, 0), l(!1);
+    }, 0), n(!1);
   };
   return /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
     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(aa, { template: a, setTemplate: n, onFileUpload: ve }),
-        /* @__PURE__ */ e(sa, { template: a, setTemplate: n })
+        /* @__PURE__ */ e(oa, { template: a, setTemplate: s, onFileUpload: Me }),
+        /* @__PURE__ */ e(ha, { template: a, setTemplate: s })
       ] })
     ] }),
     a.type === "CAROUSEL" && /* @__PURE__ */ r("div", { className: "rsp-space-y-6", children: [
@@ -4558,23 +4763,24 @@ function da({ template: a, setTemplate: n }) {
         /* @__PURE__ */ e("div", { className: "rsp-relative", children: /* @__PURE__ */ e(
           "textarea",
           {
-            ref: d,
+            ref: t,
             value: a.body,
-            onChange: (C) => n({ ...a, body: C.target.value }),
+            onChange: (k) => s({ ...a, body: k.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",
             placeholder: "Enter Template Message"
           }
         ) }),
+        !a.body && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-red-600 rsp-mt-1", children: "Body is required." }),
         /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-justify-between rsp-mt-1", children: [
           /* @__PURE__ */ r("div", { className: "rsp-flex rsp-items-center rsp-gap-2", children: [
             /* @__PURE__ */ e(
               "button",
               {
                 onClick: () => {
-                  const f = `{{${ca(a) + 1}}}`;
-                  n({ ...a, body: a.body + f });
+                  const o = `{{${va(a) + 1}}}`;
+                  s({ ...a, body: a.body + o });
                 },
                 className: "rsp-p-1 rsp-text-gray-500 hover:rsp-text-gray-700 hover:rsp-bg-gray-100 rsp-rounded",
                 title: "Add Variable",
@@ -4584,10 +4790,10 @@ function da({ template: a, setTemplate: n }) {
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: p,
+                onClick: x,
                 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(xe, { className: "rsp-w-4 rsp-h-4" })
+                children: /* @__PURE__ */ e(he, { className: "rsp-w-4 rsp-h-4" })
               }
             )
           ] }),
@@ -4597,15 +4803,15 @@ function da({ template: a, setTemplate: n }) {
           ] })
         ] }),
         (() => {
-          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: [
+          const k = a.body.match(/\{\{(\d+)\}\}/g) || [], w = [...new Set(k.map((o) => o.replace(/[{}]/g, "")))];
+          return w.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: g.map((f) => {
-              var y, j;
+            /* @__PURE__ */ e("div", { className: "rsp-grid rsp-grid-cols-3 rsp-gap-2", children: w.map((o) => {
+              var N, U;
               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: [
                   "{{",
-                  f,
+                  o,
                   "}}",
                   ":"
                 ] }),
@@ -4613,19 +4819,19 @@ function da({ template: a, setTemplate: n }) {
                   "input",
                   {
                     type: "text",
-                    value: ((j = (y = a.sampleContent) == null ? void 0 : y.bodyVariables) == null ? void 0 : j[f]) || "",
-                    onChange: (U) => {
-                      var N, o, u;
-                      const k = {
+                    value: ((U = (N = a.sampleContent) == null ? void 0 : N.bodyVariables) == null ? void 0 : U[o]) || "",
+                    onChange: (f) => {
+                      var M, g, v;
+                      const b = {
                         ...a.sampleContent,
-                        headerVariables: ((N = a.sampleContent) == null ? void 0 : N.headerVariables) || {},
+                        headerVariables: ((M = a.sampleContent) == null ? void 0 : M.headerVariables) || {},
                         bodyVariables: {
-                          ...(o = a.sampleContent) == null ? void 0 : o.bodyVariables,
-                          [f]: U.target.value
+                          ...(g = a.sampleContent) == null ? void 0 : g.bodyVariables,
+                          [o]: f.target.value
                         },
-                        buttonVariables: ((u = a.sampleContent) == null ? void 0 : u.buttonVariables) || {}
+                        buttonVariables: ((v = a.sampleContent) == null ? void 0 : v.buttonVariables) || {}
                       };
-                      n({ ...a, sampleContent: k });
+                      s({ ...a, sampleContent: b });
                     },
                     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"
@@ -4636,16 +4842,16 @@ function da({ template: a, setTemplate: n }) {
                   {
                     type: "button",
                     onClick: () => {
-                      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({
+                      var g, v, c;
+                      const f = new RegExp(`\\{\\{${o}\\}\\}`, "g"), b = (a.body || "").replace(f, ""), M = Object.fromEntries(Object.entries(((g = a.sampleContent) == null ? void 0 : g.bodyVariables) || {}).filter(([p]) => p !== o));
+                      s({
                         ...a,
-                        body: k,
+                        body: b,
                         sampleContent: {
                           ...a.sampleContent,
-                          bodyVariables: N,
-                          headerVariables: ((u = a.sampleContent) == null ? void 0 : u.headerVariables) || {},
-                          buttonVariables: ((t = a.sampleContent) == null ? void 0 : t.buttonVariables) || {}
+                          bodyVariables: M,
+                          headerVariables: ((v = a.sampleContent) == null ? void 0 : v.headerVariables) || {},
+                          buttonVariables: ((c = a.sampleContent) == null ? void 0 : c.buttonVariables) || {}
                         }
                       });
                     },
@@ -4654,74 +4860,74 @@ function da({ template: a, setTemplate: n }) {
                     children: "×"
                   }
                 )
-              ] }, `global-body-sample-${f}`);
+              ] }, `global-body-sample-${o}`);
             }) })
           ] });
         })()
       ] }) })
     ] }),
     a.type === "CAROUSEL" && /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: /* @__PURE__ */ e(
-      ma,
+      wa,
       {
         template: a,
-        setTemplate: n,
-        onFileUpload: ve
+        setTemplate: s,
+        onFileUpload: Me
       }
     ) }),
     a.type !== "CAROUSEL" && /* @__PURE__ */ e("div", { className: "rsp-space-y-6", children: /* @__PURE__ */ e(
-      na,
+      ua,
       {
         template: a,
-        setTemplate: n
+        setTemplate: s
       }
     ) }),
     /* @__PURE__ */ e(
-      fe,
+      ge,
       {
         isOpen: i,
-        onClose: () => l(!1),
-        onSelect: m
+        onClose: () => n(!1),
+        onSelect: l
       }
     )
   ] });
 }
-function xa({ type: a }) {
+function Na({ type: a }) {
   switch (a) {
     case "QUICK_REPLY":
-      return /* @__PURE__ */ e(Pe, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Je, { className: "w-4 h-4" });
     case "URL":
-      return /* @__PURE__ */ e(Oe, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(We, { className: "w-4 h-4" });
     case "CALL":
-      return /* @__PURE__ */ e(Me, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Ue, { className: "w-4 h-4" });
     case "FLOW":
-      return /* @__PURE__ */ e(Fe, { className: "w-4 h-4" });
+      return /* @__PURE__ */ e(Qe, { className: "w-4 h-4" });
     default:
       return null;
   }
 }
-function pa({ buttons: a, flowButtonText: n, onShowAllOptions: i }) {
-  const l = [...a];
-  n && l.push({
+function Ca({ buttons: a, flowButtonText: s, onShowAllOptions: i }) {
+  const n = [...a];
+  s && n.push({
     id: "flow-button",
     type: "QUICK_REPLY",
-    text: n
+    text: s
   });
-  const d = l.slice(0, 2);
+  const t = n.slice(0, 2);
   return /* @__PURE__ */ r("div", { className: "rsp-divide-y rsp-divide-gray-200", children: [
-    d.map((p) => /* @__PURE__ */ r(
+    t.map((x) => /* @__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(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" })
+          /* @__PURE__ */ e("div", { className: "rsp-text-[#128C7E]", children: /* @__PURE__ */ e(Na, { type: x.type }) }),
+          /* @__PURE__ */ e("span", { className: "rsp-flex-1 rsp-text-left rsp-break-words rsp-break-all rsp-whitespace-pre-wrap", children: x.text }),
+          x.id === "flow-button" && /* @__PURE__ */ e(qe, { className: "rsp-w-5 rsp-h-5 rsp-text-[#128C7E] rsp-ml-auto" })
         ]
       },
-      p.id
+      x.id
     )),
-    l.length > 2 && /* @__PURE__ */ r(
+    n.length > 2 && /* @__PURE__ */ r(
       "button",
       {
         onClick: i,
@@ -4735,25 +4941,25 @@ function pa({ buttons: a, flowButtonText: n, onShowAllOptions: i }) {
     )
   ] });
 }
-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;
+function Ea({ template: a }) {
+  var U, f, b, M;
+  const [s, i] = P(!1), [n, t] = P(0), x = (U = a.carousel) != null && U.cards ? a.carousel.cards.length : 0;
+  le(() => {
+    a.type === "CAROUSEL" && x > 0 ? n >= x && t(0) : t(0);
+  }, [x, a.type]);
+  const l = (g) => g ? g.replace(/\{\{(\d+)\}\}/g, (v, c) => {
+    var p, y;
+    return ((y = (p = a.sampleContent) == null ? void 0 : p.headerVariables) == null ? void 0 : y[c]) || `[Variable ${c}]`;
+  }) : "", k = (g) => g ? g.replace(/\{\{(\d+)\}\}/g, (v, c) => {
+    var p, y;
+    return ((y = (p = a.sampleContent) == null ? void 0 : p.bodyVariables) == null ? void 0 : y[c]) || `[Variable ${c}]`;
+  }) : "", w = (g) => {
+    var p;
+    const v = (g == null ? void 0 : g.body) ?? "";
+    if (!v) return "";
+    const c = ((p = g == null ? void 0 : g.sampleContent) == null ? void 0 : p.bodyVariables) ?? {};
+    return v.replace(/\{\{(\d+)\}\}/g, (y, u) => c[u] || `[Variable ${u}]`);
+  }, o = a.headerType !== "NONE" || a.body || a.footer || a.buttons.length > 0 || a.type === "CAROUSEL" && ((f = a.carousel) == null ? void 0 : f.cards.length), N = 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" }),
@@ -4800,7 +5006,7 @@ function oa({ 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: f ? /* @__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: o ? /* @__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",
@@ -4808,8 +5014,8 @@ function oa({ template: a }) {
                     src: a.mediaUrl,
                     alt: "Header media",
                     className: "rsp-w-full rsp-max-h-[150px] rsp-object-cover rsp-block",
-                    onError: (o) => {
-                      o.currentTarget.style.display = "none";
+                    onError: (g) => {
+                      g.currentTarget.style.display = "none";
                     }
                   }
                 ),
@@ -4825,38 +5031,38 @@ function oa({ template: a }) {
                   ] })
                 ] }) })
               ] }),
-              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: C(a.body) }) }),
+              N && /* @__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: l(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: k(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" && (((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: [
+              a.type === "CAROUSEL" && (((M = (b = a.carousel) == null ? void 0 : b.cards) == null ? void 0 : M.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 u, t;
-                  const o = a.carousel && a.carousel.cards.length > 0 ? a.carousel.cards[l] || a.carousel.cards[0] : void 0;
+                  var v, c;
+                  const g = a.carousel && a.carousel.cards.length > 0 ? a.carousel.cards[n] || 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: o && o.mediaUrl ? /* @__PURE__ */ r(ne, { children: [
-                      ((u = a.carousel) == null ? void 0 : u.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: g && g.mediaUrl ? /* @__PURE__ */ r(ce, { children: [
+                      ((v = a.carousel) == null ? void 0 : v.type) === "IMAGE" ? /* @__PURE__ */ e(
                         "img",
                         {
-                          src: o.mediaUrl,
+                          src: g.mediaUrl,
                           alt: "Carousel card",
                           className: "rsp-w-full rsp-h-full rsp-object-cover",
-                          onError: (h) => {
-                            h.currentTarget.style.display = "none";
+                          onError: (p) => {
+                            p.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(ne, { children: [
+                      a.carousel && a.carousel.cards.length > 1 && /* @__PURE__ */ r(ce, { children: [
                         /* @__PURE__ */ e(
                           "button",
                           {
-                            onClick: () => d(
-                              (h) => h > 0 ? h - 1 : a.carousel.cards.length - 1
+                            onClick: () => t(
+                              (p) => p > 0 ? p - 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" }) })
@@ -4865,8 +5071,8 @@ function oa({ template: a }) {
                         /* @__PURE__ */ e(
                           "button",
                           {
-                            onClick: () => d(
-                              (h) => h < a.carousel.cards.length - 1 ? h + 1 : 0
+                            onClick: () => t(
+                              (p) => p < a.carousel.cards.length - 1 ? p + 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" }) })
@@ -4874,41 +5080,41 @@ function oa({ template: a }) {
                         )
                       ] }),
                       /* @__PURE__ */ r("div", { className: "rsp-absolute rsp-top-2 rsp-right-2 rsp-bg-black rsp-bg-opacity-60 rsp-text-white rsp-text-[10px] rsp-px-2 rsp-py-0.5 rsp-rounded-full rsp-backdrop-blur-sm", style: { fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }, children: [
-                        l + 1,
+                        n + 1,
                         "/",
                         a.carousel ? a.carousel.cards.length : 0
                       ] })
                     ] }) : /* @__PURE__ */ e("div", { className: "rsp-w-full rsp-h-full rsp-flex rsp-items-center rsp-justify-center", children: /* @__PURE__ */ r("div", { className: "rsp-text-center", children: [
-                      /* @__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("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: ((c = a.carousel) == null ? void 0 : c.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: 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(
+                    /* @__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: g ? w(g) : "Card body text..." }) }),
+                    /* @__PURE__ */ e("div", { className: "rsp-border-t rsp-border-gray-100 rsp-mt-auto", children: g && g.buttons.length > 0 ? /* @__PURE__ */ e(ce, { children: g.buttons.map((p, y) => /* @__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 ${v < o.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 ${y < g.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: [
-                          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 })
+                          p.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" }) }),
+                          (p.type === "CALL" || p.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: p.text })
                         ] })
                       },
-                      h.id
+                      p.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((o, u) => /* @__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((g, v) => /* @__PURE__ */ e(
                   "button",
                   {
-                    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"}`
+                    onClick: () => t(v),
+                    className: `rsp-w-2 rsp-h-2 rsp-rounded-full rsp-transition-all ${v === n ? "rsp-bg-[#128C7E] rsp-w-6" : "rsp-bg-gray-300 hover:rsp-bg-gray-400"}`
                   },
-                  u
+                  v
                 )) })
               ] }) }) }) }),
               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(
-                pa,
+                Ca,
                 {
                   buttons: a.buttons,
                   onShowAllOptions: () => i(!0)
@@ -4925,20 +5131,20 @@ function oa({ template: a }) {
             /* @__PURE__ */ e("div", { className: "rsp-flex-1 rsp-bg-gradient-to-r rsp-from-white rsp-to-[#fafafa] rsp-rounded-[24px] rsp-px-4 rsp-py-2 rsp-flex rsp-items-center rsp-min-h-[36px] rsp-shadow-[0_1px_2px_rgba(0,0,0,0.1)] rsp-border rsp-border-gray-200", children: /* @__PURE__ */ e("span", { className: "rsp-text-[13px] rsp-text-[#667781] rsp-opacity-70 rsp-font-normal", children: "Type a message" }) }),
             /* @__PURE__ */ e("div", { className: "rsp-w-9 rsp-h-9 rsp-bg-gradient-to-br rsp-from-[#25D366] rsp-via-[#20c55e] rsp-to-[#00A884] rsp-rounded-full rsp-flex rsp-items-center rsp-justify-center rsp-shadow-[0_2px_6px_rgba(37,211,102,0.3)] rsp-border rsp-border-[#20c55e] rsp-border-opacity-30", children: /* @__PURE__ */ e("svg", { className: "rsp-w-4 rsp-h-4 rsp-text-white rsp-drop-shadow-sm", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })
           ] }),
-          n && /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-0 rsp-bg-black rsp-bg-opacity-40 rsp-z-30 rsp-flex rsp-items-end rsp-animate-fade-in", children: /* @__PURE__ */ r(
+          s && /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-inset-0 rsp-bg-black rsp-bg-opacity-40 rsp-z-30 rsp-flex rsp-items-end rsp-animate-fade-in", children: /* @__PURE__ */ r(
             "div",
             {
               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((o, u) => /* @__PURE__ */ e(
+                /* @__PURE__ */ e("div", { className: "rsp-max-h-[250px] rsp-overflow-y-auto", children: a.buttons.map((g, v) => /* @__PURE__ */ e(
                   "div",
                   {
-                    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" : ""}`,
+                    className: `rsp-p-4 rsp-text-center rsp-text-[15px] rsp-text-[#128C7E] rsp-font-medium ${v < 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: o.text
+                    children: g.text
                   },
-                  o.id
+                  g.id
                 )) }),
                 /* @__PURE__ */ e(
                   "div",
@@ -4957,11 +5163,11 @@ function oa({ template: a }) {
     ] }) }) })
   ] });
 }
-const ke = {
+const Te = {
   name: "",
   category: "MARKETING",
   type: "BASIC",
-  language: "en_US",
+  language: "en",
   enableClickTracking: !1,
   headerType: "NONE",
   headerText: "",
@@ -4969,76 +5175,73 @@ const ke = {
   footer: "",
   buttons: []
 };
-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({
+function Ua({ onCancel: a }) {
+  var c, p, y;
+  const s = typeof Ne == "function" ? Ne() : !1, i = Ve(), [n, t] = P(Te), [x, l] = P(!0), [k, w] = P(!1), [o, N] = P(!1), [U, f] = P(null), [b, M] = P({
     isOpen: !1
-  }), [k, N] = B({
+  });
+  P({
     isOpen: !1
-  }), o = () => {
-    if (!l.name || !l.body) return !1;
-    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());
-      }
-    ), 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());
-      }
-    ), 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 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 x = l.buttons.find(
-      (L) => L.type === "URL" && L.urlType === "dynamic"
-    );
-    if (!(x != null && x.value)) return [];
-    const w = x.value.match(/\{\{(\d+)\}\}/g) || [];
-    return [...new Set(w.map((L) => L.replace(/[{}]/g, "")))];
-  };
-  se(() => {
-    if (f) {
-      const x = setTimeout(() => {
-        y(null);
+  }), le(() => {
+    if (U) {
+      const u = setTimeout(() => {
+        f(null);
       }, 5e3);
-      return () => clearTimeout(x);
+      return () => clearTimeout(u);
     }
-  }, [f]);
-  const h = async () => {
-    var x, w, L;
+  }, [U]);
+  const g = async () => {
+    var u, V, B;
     try {
-      if (g(!0), y(null), !l.name || !l.body)
+      if (N(!0), f(null), !n.name || !n.body)
         throw new Error("Template name and body are required");
-      const s = localStorage.getItem("account"), b = s ? JSON.parse(s) : { apiKey: "" };
-      if (!b.apiKey)
+      const d = localStorage.getItem("account"), E = d ? JSON.parse(d) : { apiKey: "" };
+      if (!E.apiKey)
         throw new Error("Please set your API key in the dashboard first");
-      const E = await Ke(b, l);
-      if (E.status === "error")
-        throw new Error(E.message);
-      U({
+      const O = new URLSearchParams(window.location.search).get("edit");
+      let R;
+      if (O) {
+        const _ = await na(E.apiKey, O, n);
+        if (!_.success)
+          throw new Error(_.message || "Update failed");
+        R = {
+          status: "success",
+          data: { details: [{ template_name: n.name, template_id: O }] }
+        };
+      } else if (R = await sa(E, n), R.status === "error")
+        throw new Error(R.message);
+      if (R.status === "error")
+        throw new Error(R.message);
+      M({
         isOpen: !0,
-        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: (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");
+        templateName: (u = R.data) == null ? void 0 : u.details[0].template_name,
+        templateId: (V = R.data) == null ? void 0 : V.details[0].template_id,
+        template: (B = R.data) == null ? void 0 : B.template
+      }), t(Te);
+    } catch (d) {
+      f(d instanceof Error ? d.message : "An error occurred while creating the template");
     } finally {
-      g(!1);
+      N(!1);
     }
-  }, v = () => {
-    U({ isOpen: !1 }), a ? a() : i ? i("/") : window.history.length > 1 && window.history.back();
+  };
+  le(() => {
+    const V = new URLSearchParams(window.location.search).get("edit");
+    if (!V) return;
+    (async () => {
+      try {
+        const d = localStorage.getItem("account"), E = d ? JSON.parse(d) : { apiKey: "" };
+        if (!E.apiKey)
+          throw new Error("Please set your API key in the dashboard first");
+        const A = await ia(E.apiKey, V);
+        t((O) => ({ ...O, ...A }));
+      } catch (d) {
+        console.error("Failed to load template for edit", d), f(d instanceof Error ? d.message : "Failed to load template");
+      } finally {
+      }
+    })();
+  }, []);
+  const v = () => {
+    M({ isOpen: !1 }), a ? a() : s ? 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: [
@@ -5049,7 +5252,7 @@ function ya({ onCancel: a }) {
             "button",
             {
               onClick: () => {
-                a ? a() : i ? i("/") : window.history.length > 1 && window.history.back();
+                a ? a() : s ? i("/") : window.history.length > 1 && window.history.back();
               },
               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 rsp-transition-colors",
               children: "Cancel"
@@ -5058,22 +5261,22 @@ function ya({ onCancel: a }) {
           /* @__PURE__ */ r(
             "button",
             {
-              onClick: () => m(!p),
+              onClick: () => l(!x),
               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
-                  ${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"}`,
+                  ${x ? "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" })
                 ] }),
-                p ? "Hide Preview" : "Show Preview"
+                x ? "Hide Preview" : "Show Preview"
               ]
             }
           )
         ] })
       ] }) }),
-      /* @__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-py-8 ${x ? "rsp-grid xl:rsp-grid-cols-[1fr,400px] rsp-gap-8" : ""}`, children: [
+        /* @__PURE__ */ r("div", { className: `rsp-space-y-8 ${x ? "" : "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: [
@@ -5085,14 +5288,16 @@ function ya({ onCancel: a }) {
                   "input",
                   {
                     type: "text",
-                    value: l.name,
-                    onChange: (x) => d({ ...l, name: x.target.value.replace(/\s/g, "_").replace(/[^a-zA-Z0-9_]/g, "").replace(/_+/g, "_") }),
+                    value: n.name,
+                    onChange: (u) => t({ ...n, name: u.target.value.replace(/\s/g, "_").replace(/[^a-zA-Z0-9_]/g, "").replace(/_+/g, "_") }),
+                    onBlur: () => w(!0),
                     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"
                   }
                 ),
                 /* @__PURE__ */ e("div", { className: "rsp-absolute rsp-bottom-0 rsp-left-0 rsp-w-4 rsp-h-0.5 rsp-bg-red-500" })
               ] }),
+              !n.name && k && /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-red-600 rsp-mt-1", children: "Template name is required." }),
               /* @__PURE__ */ e("p", { className: "rsp-text-xs rsp-text-gray-500 rsp-mt-1", children: "Template name cannot Have capital letters and space" })
             ] }),
             /* @__PURE__ */ r("div", { className: "rsp-grid rsp-grid-cols-2 rsp-gap-6", children: [
@@ -5102,8 +5307,8 @@ function ya({ onCancel: a }) {
                   /* @__PURE__ */ r(
                     "select",
                     {
-                      value: l.category,
-                      onChange: (x) => d({ ...l, category: x.target.value }),
+                      value: n.category,
+                      onChange: (u) => t({ ...n, category: u.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" }),
@@ -5122,10 +5327,10 @@ function ya({ onCancel: a }) {
                   /* @__PURE__ */ e(
                     "select",
                     {
-                      value: l.language,
-                      onChange: (x) => d({ ...l, language: x.target.value }),
+                      value: n.language,
+                      onChange: (u) => t({ ...n, language: u.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: Qe.map((x) => /* @__PURE__ */ e("option", { value: x.value, children: x.label }, x.value))
+                      children: ta.map((u) => /* @__PURE__ */ e("option", { value: u.value, children: u.label }, u.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" }) }) }),
@@ -5140,12 +5345,12 @@ function ya({ onCancel: a }) {
                   /* @__PURE__ */ r(
                     "select",
                     {
-                      value: l.type,
-                      onChange: (x) => {
-                        const w = x.target.value;
-                        w === "CAROUSEL" && !l.carousel ? d({
-                          ...l,
-                          type: w,
+                      value: n.type,
+                      onChange: (u) => {
+                        const V = u.target.value;
+                        V === "CAROUSEL" && !n.carousel ? t({
+                          ...n,
+                          type: V,
                           carousel: {
                             type: "IMAGE",
                             cards: [{
@@ -5157,7 +5362,7 @@ function ya({ onCancel: a }) {
                               buttons: []
                             }]
                           }
-                        }) : d({ ...l, type: w });
+                        }) : t({ ...n, type: 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 rsp-appearance-none",
                       children: [
@@ -5176,8 +5381,8 @@ function ya({ onCancel: a }) {
                   /* @__PURE__ */ r(
                     "select",
                     {
-                      value: l.enableClickTracking.toString(),
-                      onChange: (x) => d({ ...l, enableClickTracking: x.target.value === "true" }),
+                      value: n.enableClickTracking.toString(),
+                      onChange: (u) => t({ ...n, enableClickTracking: u.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" }),
@@ -5190,70 +5395,73 @@ function ya({ onCancel: a }) {
               ] })
             ] })
           ] }),
-          /* @__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__ */ e("div", { className: "rsp-bg-white rsp-p-6 rsp-rounded-lg rsp-shadow-sm", children: /* @__PURE__ */ e(ka, { template: n, setTemplate: t }) }),
           /* @__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: [
-            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" }),
+            U && /* @__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(fe, { 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: f })
+                /* @__PURE__ */ e("p", { className: "rsp-mt-1 rsp-text-sm rsp-text-red-700", children: U })
               ] }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => y(null),
+                  onClick: () => f(null),
                   className: "rsp-absolute rsp-top-2 rsp-right-2 rsp-p-1 hover:rsp-bg-red-100 rsp-rounded-full",
-                  children: /* @__PURE__ */ e(ee, { className: "rsp-w-4 rsp-h-4 rsp-text-red-500" })
+                  children: /* @__PURE__ */ e(re, { 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: h,
-                disabled: C || !o(),
+                onClick: g,
+                disabled: 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
-                    ${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"
+                    ${o ? "rsp-bg-blue-600 rsp-cursor-not-allowed" : "rsp-bg-blue-600 hover:rsp-bg-blue-700 active:rsp-bg-blue-800"}`,
+                children: (() => {
+                  const u = new URLSearchParams(window.location.search).get("edit");
+                  return o ? u ? "Resubmitting for Approval..." : "Submitting for Approval..." : u ? "Resubmit for Approval" : "Submit for Approval";
+                })()
               }
             ) })
           ] })
         ] }),
-        p && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "rsp-sticky rsp-top-4", children: /* @__PURE__ */ e(oa, { template: l }) }) })
+        x && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "rsp-sticky rsp-top-4", children: /* @__PURE__ */ e(Ea, { template: n }) }) })
       ] })
     ] }),
     /* @__PURE__ */ e(
-      pe,
+      te,
       {
-        isOpen: j.isOpen,
+        isOpen: b.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!" }) }),
-          j.templateId && /* @__PURE__ */ r("div", { className: "rsp-bg-gray-50 rsp-p-4 rsp-rounded-lg rsp-space-y-2", children: [
+          b.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: j.templateName })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium", children: b.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: j.templateId })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-font-mono", children: b.templateId })
             ] }),
-            ((V = j.template) == null ? void 0 : V.meta_tid) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
+            ((c = b.template) == null ? void 0 : c.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: j.template.meta_tid })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-font-mono", children: b.template.meta_tid })
             ] }),
-            ((R = j.template) == null ? void 0 : R.status) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
+            ((p = b.template) == null ? void 0 : p.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
-              j.template.status === "pending" ? "rsp-text-yellow-600" : (
+              b.template.status === "pending" ? "rsp-text-yellow-600" : (
                 // @ts-ignore
-                j.template.status === "approved" ? "rsp-text-green-600" : "rsp-text-red-600"
-              )}`, children: j.template.status })
+                b.template.status === "approved" ? "rsp-text-green-600" : "rsp-text-red-600"
+              )}`, children: b.template.status })
             ] }),
-            ((I = j.template) == null ? void 0 : I.quality) && /* @__PURE__ */ r("div", { className: "rsp-flex rsp-justify-between", children: [
+            ((y = b.template) == null ? void 0 : y.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: j.template.quality })
+              /* @__PURE__ */ e("span", { className: "rsp-text-sm rsp-font-medium rsp-capitalize", children: b.template.quality })
             ] })
           ] })
         ] })
@@ -5261,18 +5469,43 @@ function ya({ onCancel: a }) {
     )
   ] });
 }
-const fa = Se({});
-function wa({ apiKey: a, children: n }) {
-  const i = Ne(() => ({ apiKey: a }), [a]);
-  if (a)
+const Ma = Pe({});
+function Aa({ apiKey: a, pConfig: s, children: i }) {
+  const n = Se(
+    () => ({ apiKey: a, resulMeta: s }),
+    [a, s]
+  ), t = Le(null);
+  return le(() => {
+    if (typeof window > "u" || a === void 0 && !s)
+      return;
+    let x = {};
     try {
-      localStorage.setItem("account", JSON.stringify({ apiKey: a }));
-    } catch {
+      const w = localStorage.getItem("account");
+      w && (x = JSON.parse(w));
+    } catch (w) {
+      console.error(
+        "TrustSignalProvider: Failed to read account from storage",
+        w
+      );
     }
-  return /* @__PURE__ */ e(fa.Provider, { value: i, children: n });
+    const l = {
+      ...x,
+      ...a !== void 0 ? { apiKey: a } : {},
+      ...s ? { resulMeta: s } : {}
+    }, k = JSON.stringify(l);
+    if (k !== t.current)
+      try {
+        localStorage.setItem("account", k), t.current = k;
+      } catch (w) {
+        console.error(
+          "TrustSignalProvider: Failed to persist account to storage",
+          w
+        );
+      }
+  }, [a, s]), /* @__PURE__ */ e(Ma.Provider, { value: n, children: i });
 }
 export {
-  ya as CreateTemplate,
-  ga as Dashboard,
-  wa as TrustSignalProvider
+  Ua as CreateTemplate,
+  Va as Dashboard,
+  Aa as TrustSignalProvider
 };